/* src/components/Tooltip.module.css */
@layer base {
  .Tooltip_content {
    max-width: 20rem;
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--popup);
    color: var(--popup-foreground);
    border-radius: var(--radius);
    font-size: 0.875rem;
    line-height: 1.4;
    box-shadow: var(--shadow-md);
    font-family: var(--font-family-base);
    border: 1px solid var(--border);
    z-index: var(--z-overlay);
    overflow-wrap: break-word;
    word-break: keep-all;
    animation-duration: var(--animation-duration-normal);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }
  .Tooltip_content[data-state=delayed-open][data-side=top] {
    animation-name: Tooltip_slideDownAndFade;
  }
  .Tooltip_content[data-state=delayed-open][data-side=bottom] {
    animation-name: Tooltip_slideUpAndFade;
  }
  .Tooltip_content[data-state=delayed-open][data-side=left] {
    animation-name: Tooltip_slideRightAndFade;
  }
  .Tooltip_content[data-state=delayed-open][data-side=right] {
    animation-name: Tooltip_slideLeftAndFade;
  }
  @keyframes Tooltip_slideUpAndFade {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes Tooltip_slideDownAndFade {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes Tooltip_slideLeftAndFade {
    from {
      opacity: 0;
      transform: translateX(4px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes Tooltip_slideRightAndFade {
    from {
      opacity: 0;
      transform: translateX(-4px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* src/components/SonnerToaster.module.css */
@layer base {
  .SonnerToaster_toaster {
    --viewport-padding: var(--spacing-4);
    --toast-width: 360px;
    --toast-border-radius: var(--radius);
    --toast-font-family: var(--font-family-base);
    --toast-animation-duration: var(--animation-duration-normal);
  }
  .SonnerToaster_toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background-color: var(--card);
    color: var(--card-foreground);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    width: var(--toast-width);
    position: relative;
    animation: SonnerToaster_slideIn var(--toast-animation-duration) cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .SonnerToaster_toast:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
  }
  .SonnerToaster_toast:hover {
    transform: translateY(-2px);
  }
  .SonnerToaster_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
  }
  .SonnerToaster_title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--card-foreground);
    line-height: 1.4;
  }
  .SonnerToaster_description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.4;
  }
  .SonnerToaster_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
  }
  .SonnerToaster_actionButton {
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--animation-duration-fast) ease;
    margin-left: var(--spacing-2);
    white-space: nowrap;
  }
  .SonnerToaster_actionButton:hover {
    background-color: color-mix(in srgb, var(--primary) 90%, black);
  }
  .SonnerToaster_actionButton:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }
  .SonnerToaster_actionButton:active {
    background-color: color-mix(in srgb, var(--primary) 80%, black);
  }
  .SonnerToaster_cancelButton {
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--muted);
    color: var(--muted-foreground);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--animation-duration-fast) ease;
    white-space: nowrap;
  }
  .SonnerToaster_cancelButton:hover {
    background-color: color-mix(in srgb, var(--muted) 80%, white);
  }
  .SonnerToaster_cancelButton:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }
  .SonnerToaster_cancelButton:active {
    background-color: color-mix(in srgb, var(--muted) 75%, white);
  }
  .SonnerToaster_closeButton {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--muted-foreground);
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease;
  }
  .SonnerToaster_closeButton:hover {
    opacity: 1;
    background-color: var(--muted);
  }
  .SonnerToaster_closeButton:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    opacity: 1;
  }
  .dark .SonnerToaster_toast {
    border-color: var(--border);
  }
  .dark .SonnerToaster_actionButton:hover {
    background-color: color-mix(in srgb, var(--primary) 90%, white);
  }
  .dark .SonnerToaster_actionButton:active {
    background-color: color-mix(in srgb, var(--primary) 80%, white);
  }
  .dark .SonnerToaster_cancelButton:hover {
    background-color: color-mix(in srgb, var(--muted) 80%, black);
  }
  .dark .SonnerToaster_cancelButton:active {
    background-color: color-mix(in srgb, var(--muted) 70%, black);
  }
  @keyframes SonnerToaster_slideIn {
    from {
      transform: translateX(calc(100% + var(--viewport-padding)));
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}

/* src/pages/_index.module.css */
.index_artboardDrawMode {
  cursor: crosshair;
}
.index_artboardDraft {
  position: absolute;
  z-index: 34;
  border: 2px dashed #a96bff;
  background: rgba(132, 69, 230, .12);
  pointer-events: none;
}
.index_artboardHint {
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 1px solid #596779;
  border-radius: 7px;
  background: rgba(25, 31, 40, .94);
  color: #dce3ec;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
.index_inactiveArtboard {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  outline: 1px solid #788493;
  background-color: #f5f6f8;
  background-image:
    linear-gradient(
      45deg,
      #d7dbe1 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #d7dbe1 25%,
      transparent 25%),
    linear-gradient(
      45deg,
      transparent 75%,
      #d7dbe1 75%),
    linear-gradient(
      -45deg,
      transparent 75%,
      #d7dbe1 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  transform-origin: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
  cursor: pointer;
}
.index_inactiveArtboard > span {
  position: absolute;
  left: 0;
  top: -20px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #28313c;
  color: #dce3ec;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.index_artboardLabel {
  position: absolute;
  left: 0;
  top: -26px;
  z-index: 50;
  max-width: 220px;
  height: 22px;
  padding: 2px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #8f99a7;
  font-size: 9px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: grab;
  touch-action: none;
}
.index_artboardLabel:active {
  cursor: grabbing;
}
.index_artboardLabel:hover {
  background: rgba(35, 43, 53, .82);
  color: #e9eef5;
}
.index_artboardLabelActive {
  color: #eef3f8;
  background: rgba(31, 39, 49, .88);
}
.index_artboardLabelInput {
  width: 180px;
  border: 1px solid #26a7ff;
  background: #202731;
  color: #fff;
  outline: none;
  cursor: text;
}
.index_workModeOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(8, 12, 18, .46);
  backdrop-filter: blur(2px);
  cursor: wait;
}
.index_workModeCard {
  width: min(430px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid #6f55a8;
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      #29323e,
      #202832);
  box-shadow: 0 22px 65px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04);
  color: #eef3f8;
}
.index_workSpinner {
  width: 46px;
  height: 46px;
  border: 4px solid #4c5868;
  border-top-color: #a55cff;
  border-right-color: #5fd3ff;
  border-radius: 50%;
  animation: index_workSpin .8s linear infinite;
}
.index_workModeCopy {
  min-width: 0;
}
.index_workModeCopy span {
  display: block;
  margin-bottom: 5px;
  color: #a97aff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
}
.index_workModeCopy strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
}
.index_workModeCopy p {
  margin: 7px 0 5px;
  color: #d3dae3;
  font-size: 11px;
  line-height: 1.35;
}
.index_workModeCopy small {
  display: block;
  color: #8e9aa9;
  font-size: 9px;
  line-height: 1.35;
}
.index_workPulse {
  display: flex;
  align-items: center;
  gap: 4px;
}
.index_workPulse i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a55cff;
  animation: index_workPulse 1.05s ease-in-out infinite;
}
.index_workPulse i:nth-child(2) {
  animation-delay: .14s;
}
.index_workPulse i:nth-child(3) {
  animation-delay: .28s;
}
@keyframes index_workSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes index_workPulse {
  0%, 80%, 100% {
    opacity: .3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-4px);
  }
}
.index_aiPanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.index_aiIntro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid #7046a8;
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      #332b43,
      #292f39);
}
.index_aiIntro strong {
  color: #c29aff;
  font-size: 13px;
}
.index_aiIntro span {
  color: #aeb7c3;
  font-size: 9px;
  line-height: 1.4;
}
.index_aiPromptLabel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #aeb7c3;
  font-size: 10px;
  font-weight: 800;
}
.index_aiPromptLabel textarea {
  min-height: 112px;
  resize: vertical;
}
.index_aiChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.index_aiChoiceGrid button {
  padding: 7px 6px;
  border: 1px solid #556171;
  border-radius: var(--radius-sm);
  background: #3a4350;
  color: #e1e7ee;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.index_aiChoiceGrid button:last-child:nth-child(odd) {
  grid-column: 1/-1;
}
.index_aiChoiceGrid .index_miniActive {
  border-color: var(--state-active-border);
  background: var(--state-active);
  color: #effff5;
  box-shadow: inset 2px 0 0 #53d98a;
}
.index_aiFinePrint {
  margin: 0;
  color: #7f8b99;
  font-size: 8px;
  line-height: 1.4;
}
.index_aiChoiceGrid button:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.index_aiSelectedLayer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid #46515f;
  border-radius: 7px;
  background: #2a323d;
}
.index_aiSelectedLayer b {
  color: #b88cff;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.index_aiSelectedLayer span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #dce3ec;
  font-size: 9px;
}
.index_aiCanvasBusy {
  position: absolute;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  background: rgba(23, 29, 37, .28);
  backdrop-filter: blur(1.5px);
  pointer-events: auto;
  cursor: wait;
}
.index_aiCanvasBusyCard {
  min-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 20px 24px;
  border: 1px solid #6f55a8;
  border-radius: 14px;
  background: rgba(35, 43, 53, .96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  color: #eef3f8;
  text-align: center;
}
.index_aiCanvasBusyCard strong {
  font-size: 14px;
}
.index_aiCanvasBusyCard span {
  color: #aeb8c6;
  font-size: 9px;
}
.index_aiProgressRow {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.index_aiProgressTrack {
  height: 7px;
  overflow: hidden;
  border: 1px solid #556170;
  border-radius: 999px;
  background: #1d242c;
}
.index_aiProgressTrack i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #a55cff,
      #4ecbff);
  transition: width .45s ease;
}
.index_aiProgressRow b {
  color: #dfe7ef;
  font: 800 9px var(--font-family-monospace);
  text-align: right;
}
.index_aiCanvasSpinner {
  position: relative;
  width: 46px;
  height: 46px;
  margin-bottom: 3px;
  border: 4px solid #4b5665;
  border-top-color: #a55cff;
  border-right-color: #4ecbff;
  border-radius: 50%;
  animation: index_aiCanvasSpin .8s linear infinite;
}
.index_aiCanvasSpinner i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  opacity: .78;
}
.index_aiCanvasSpinner i:nth-child(1) {
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
}
.index_aiCanvasSpinner i:nth-child(2) {
  right: -1px;
  bottom: 9px;
}
.index_aiCanvasSpinner i:nth-child(3) {
  left: 3px;
  bottom: 5px;
}
@keyframes index_aiCanvasSpin {
  to {
    transform: rotate(360deg);
  }
}
.index_app {
  height: 100vh;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-base);
  --state-active:#176b3a;
  --state-active-border:#2d9b59;
  --state-selected:#28c76f;
  --state-selected-border:#62ee9c;
  --state-selected-text:#07180e;
}
.index_header {
  position: relative;
  z-index: 120;
  height: 24px;
  background:
    linear-gradient(
      180deg,
      #171c24,
      #202733);
  border-bottom: 1px solid #3b4654;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.index_brand {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.index_brandLogo {
  display: block;
  width: 60px;
  max-width: 100%;
  height: 18px;
  object-fit: contain;
  object-position: left center;
}
.index_tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(68px, 1fr));
  gap: 3px;
}
.index_tabs button {
  min-height: 32px;
  border: 1px solid #313a47;
  border-radius: 5px;
  padding: 3px 4px;
  background:
    linear-gradient(
      180deg,
      #2a323e,
      #202731);
  color: #c9d0d9;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.index_tabs button strong,
.index_tabs button span,
.index_tabs button small {
  display: block;
}
.index_tabs button strong {
  font-size: 10px;
  line-height: 1;
}
.index_tabs button span {
  margin-top: 1px;
  font-size: 8px;
  color: #f3f5f8;
}
.index_tabs button small {
  display: none !important;
}
.index_tabs button:hover {
  border-color: #586476;
  background: #303947;
}
.index_tabs .index_active {
  border-color: var(--state-active-border);
  background: var(--state-active);
  box-shadow: 0 0 16px rgba(40, 199, 111, .2);
}
.index_tabs .index_active small,
.index_tabs .index_active span,
.index_tabs .index_active strong {
  color: #effff5;
}
.index_headerActions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.index_headerActions button {
  height: 30px;
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}
.index_workspace {
  position: relative;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 44px;
  display: grid;
  grid-template-columns: minmax(620px, 1fr) 240px;
  transition: grid-template-columns .18s ease;
}
.index_leftClosed {
  grid-template-columns: minmax(620px, 1fr) 240px;
}
.index_rightClosed {
  grid-template-columns: minmax(620px, 1fr) 48px;
}
.index_leftClosed.index_rightClosed {
  grid-template-columns: minmax(620px, 1fr) 48px;
}
.index_sidebar {
  position: relative;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}
.index_leftShell {
  position: absolute;
  z-index: 80;
  left: 0;
  top: 44px;
  bottom: 0;
  width: 258px;
  display: block;
  overflow: visible;
  height: auto;
  min-height: 0;
  pointer-events: none;
  background: transparent;
  border-right: 0;
}
.index_leftShell.index_collapsed {
  border-right: 0;
}
.index_leftShell.index_collapsed .index_panelContent {
  display: none;
}
.index_panelContent {
  min-height: 100%;
  padding-bottom: 96px;
  overflow-y: auto;
}
.index_leftShell > .index_panelContent {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-bottom: 28px;
  pointer-events: auto;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  box-shadow: 10px 0 24px rgba(0, 0, 0, .16);
}
.index_workspace > .index_toolRail {
  pointer-events: auto;
}
.index_collapsed {
  overflow: hidden;
}
.index_right.index_collapsed .index_panelContent {
  display: none;
}
.index_collapseButton {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 33px;
  height: 34px;
  float: right;
  border: 0;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #3c4552;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.index_collapsed .index_collapseButton {
  position: absolute;
  top: 10px;
  left: 7px;
  right: auto;
  float: none;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.index_collapseRight {
  float: left;
  border-left: 0;
  border-right: 1px solid var(--border);
}
.index_collapsed .index_collapseRight {
  left: 7px;
  border: 1px solid var(--border);
}
.index_right {
  border-right: 0;
  border-left: 1px solid var(--border);
}
.index_toolRail {
  position: fixed;
  z-index: 700;
  left: 0;
  right: 0;
  top: 0;
  height: 44px;
  box-sizing: border-box;
  padding: 4px 7px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  background: #1e252e;
  border-bottom: 1px solid #394352;
  pointer-events: auto;
}
.index_toolRail button {
  min-height: 32px;
  height: 32px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #9ca8b6;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.index_toolRail button span {
  display: inline;
  margin: 0;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .1px;
}
.index_railLabelsHidden button span {
  display: none;
}
.index_railLabelsHidden button {
  min-width: 32px;
  padding-left: 8px;
  padding-right: 8px;
}
.index_railLabelsHidden .index_railBrand span {
  display: block;
}
.index_toolRail button:hover {
  background: #2c3540;
  color: #fff;
}
.index_toolRail .index_railActive {
  border-color: var(--state-selected-border);
  background: var(--state-selected);
  color: var(--state-selected-text);
  box-shadow: inset 0 -3px 0 #b7ffd1, 0 0 12px rgba(40, 199, 111, .22);
}
.index_drawerHeader {
  position: sticky;
  top: 0;
  z-index: 25;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #252d38;
  border-bottom: 1px solid #3a4552;
}
.index_drawerHeader > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.index_drawerHeader b {
  font-size: 13px;
}
.index_drawerHeader span {
  font-size: 9px;
  color: #8f99a7;
}
.index_drawerHeader button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #aab4c1;
  font-size: 20px;
  cursor: pointer;
}
.index_drawerHeader button:hover {
  background: #35404d;
  color: #fff;
}
.index_uploadHero {
  width: 100%;
  padding: 11px;
  border: 1px solid #7f42db;
  border-radius: 7px;
  background:
    linear-gradient(
      180deg,
      #7f39e9,
      #6428bd);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.index_uploadHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 8px;
  font-size: 10px;
}
.index_uploadHeading span {
  color: #8e9aaa;
}
.index_uploadGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.index_uploadGrid button {
  min-width: 0;
  padding: 5px;
  border: 1px solid #3b4552;
  border-radius: 7px;
  background: #2c3540;
  color: #dce2e9;
  cursor: pointer;
  text-align: left;
}
.index_uploadGrid button:hover {
  border-color: #7f42db;
}
.index_uploadGrid img {
  display: block;
  width: 100%;
  height: 76px;
  object-fit: contain;
  border-radius: 5px;
  background-color: #eef1f5;
  background-image:
    linear-gradient(
      45deg,
      #ddd 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #ddd 25%,
      transparent 25%),
    linear-gradient(
      45deg,
      transparent 75%,
      #ddd 75%),
    linear-gradient(
      -45deg,
      transparent 75%,
      #ddd 75%);
  background-size: 12px 12px;
  background-position:
    0 0,
    0 6px,
    6px -6px,
    -6px 0;
}
.index_uploadGrid button span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
}
.index_uploadEmpty {
  grid-column: 1/-1;
  padding: 18px 10px;
  border: 1px dashed #485463;
  border-radius: 7px;
  color: #8793a2;
  text-align: center;
  font-size: 9px;
}
.index_mockupPreview {
  padding: 10px;
  border: 1px solid #3a4552;
  border-radius: 9px;
  background: #2a323d;
  text-align: center;
}
.index_mockupPreview > b {
  display: block;
  margin-top: 8px;
  font-size: 9px;
}
.index_mockupShirt {
  position: relative;
  width: 150px;
  height: 170px;
  margin: auto;
  clip-path: polygon(26% 9%, 39% 0, 61% 0, 74% 9%, 100% 23%, 88% 43%, 76% 36%, 76% 100%, 24% 100%, 24% 36%, 12% 43%, 0 23%);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .3);
}
.index_mockupShirt img {
  position: absolute;
  left: 50%;
  top: 37%;
  width: 52%;
  max-height: 46%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.index_swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.index_swatches button {
  width: 28px;
  height: 28px;
  border: 2px solid #566171;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.index_swatches .index_swatchActive {
  outline: 2px solid var(--state-selected-border);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(40, 199, 111, .18);
}
.index_mockupTypes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 15px;
}
.index_mockupTypes button {
  padding: 8px 4px;
  border: 1px solid #3e4957;
  border-radius: 6px;
  background: #343d49;
  color: #aeb8c4;
  font-size: 9px;
  cursor: pointer;
}
.index_mockupTypes .index_mockupTypeActive {
  border-color: var(--state-active-border);
  background: var(--state-active);
  color: #effff5;
}
.index_sidebar section {
  padding: 18px;
  border-bottom: 1px solid var(--border);
}
.index_sidebar h2 {
  margin: 0 0 13px;
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
}
.index_actionCard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 9px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
  text-align: left;
  cursor: pointer;
}
.index_actionCard span {
  color: var(--muted-foreground);
  font-size: 11px;
}
.index_selected {
  border-color: var(--primary);
  background: #454e5d;
}
.index_sectionHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.index_sectionHeading em {
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.index_sizeGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.index_sizeGrid label {
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 700;
}
.index_sizeGrid input {
  margin-top: 6px;
}
.index_pixelRow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
  color: var(--muted-foreground);
  font-size: 10px;
}
.index_pixelRow code {
  color: var(--foreground);
  font-family: var(--font-family-monospace);
}
.index_full {
  width: 100%;
}
.index_exportFormatButton {
  margin-top: 10px;
  min-height: 38px;
  padding: 8px 10px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2 !important;
  text-align: center;
}
.index_quick {
  width: 100%;
  margin: 4px 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #343c48;
  color: #d5dbe4;
  text-align: left;
  cursor: pointer;
}
.index_quick:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.index_quickActive {
  border-color: var(--state-selected-border);
  box-shadow: inset 3px 0 0 #b7ffd1;
  background: var(--state-selected);
  color: var(--state-selected-text);
  font-weight: 800;
}
.index_projectMessage {
  margin: 0 0 9px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #303844;
  color: var(--accent);
  font-size: 10px;
  line-height: 1.35;
}
.index_eraserMode {
  cursor: none;
}
.index_eraserPreview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  object-fit: fill;
  z-index: 2;
}
.index_eraserCursor {
  position: absolute;
  display: none;
  transform: translate(-50%, -50%);
  border: 1px solid #121820;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .98), 0 0 2px rgba(0, 0, 0, .7);
  pointer-events: none;
  z-index: 4;
  box-sizing: border-box;
}
.index_eraserPanel {
  position: sticky;
  top: var(--dtf-drawer-header-height,108px);
  z-index: 24;
  background: #283543 !important;
  border-bottom: 2px solid #35d4b7 !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .24);
  max-height: calc(100% - var(--dtf-drawer-header-height,108px) - 6px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.index_eraserPanel .index_toolGroupHead {
  font-size: 12px;
  color: #f3ffff;
}
.index_eraserPanel label {
  display: block;
  font-size: 10px;
  color: #c9d5df;
  font-weight: 700;
}
.index_eraserPanel input[type=range] {
  width: 100%;
  margin: 14px 0 8px;
  accent-color: #3ee0bf;
  cursor: pointer;
}
.index_eraserSizeRow {
  display: flex;
  align-items: center;
  gap: 7px;
}
.index_eraserSizeRow input {
  width: 77px;
  flex: 0 0 77px;
}
.index_eraserSizeRow span {
  font-size: 9px;
  line-height: 1.4;
  color: #aec1cb;
}
.index_eraserPanel p {
  font-size: 10px;
  line-height: 1.45;
  color: #c5d3d9;
}
.index_eraserPanel button {
  margin-bottom: 0;
}
.index_toolGroup {
  margin: 9px 0;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #303844;
}
.index_toolGroupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 10px;
}
.index_toolGroupHead code {
  color: var(--accent);
  font-family: var(--font-family-monospace);
}
.index_colorControls {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 7px;
}
.index_colorControls input[type=color] {
  padding: 3px;
  height: 34px;
}
.index_halftoneStyles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}
.index_halftoneStyles button {
  padding: 7px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #3a4350;
  color: var(--muted-foreground);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.index_halftoneStyles .index_miniActive {
  border-color: var(--state-active-border);
  background: var(--state-active);
  color: #effff5;
  box-shadow: inset 2px 0 0 #53d98a;
}
.index_compactGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.index_compactGrid label {
  color: var(--muted-foreground);
  font-size: 9px;
  font-weight: 700;
}
.index_compactGrid input {
  margin-top: 4px;
}
.index_exportGate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #303844;
}
.index_exportGate b {
  font-size: 10px;
  letter-spacing: .7px;
  color: var(--accent);
}
.index_exportGate span {
  font-size: 9px;
  line-height: 1.35;
  color: var(--muted-foreground);
}
.index_readyCard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #333c48;
}
.index_readyCard strong {
  font-family: var(--font-family-display);
  font-size: 15px;
  letter-spacing: .6px;
}
.index_readyCard span {
  color: var(--muted-foreground);
  font-size: 10px;
}
.index_ready {
  border-color: var(--success);
  box-shadow: inset 3px 0 0 var(--success);
}
.index_ready strong {
  color: var(--success);
}
.index_notReady {
  border-color: var(--warning);
  box-shadow: inset 3px 0 0 var(--warning);
}
.index_notReady strong {
  color: var(--warning);
}
.index_issue {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 10px;
  line-height: 1.35;
}
.index_center {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: var(--surface);
}
.index_variationsClosed {
  grid-template-rows: minmax(0, 1fr);
}
.index_toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px;
  background: #343b47;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.index_projectName {
  width: 220px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--foreground);
  font-weight: 700;
  text-align: center;
  padding: 6px 9px;
  outline: none;
}
.index_projectName:hover,
.index_projectName:focus {
  border-color: var(--border);
  background: #2f3641;
}
.index_tools {
  display: flex;
  gap: 5px;
}
.index_tools button,
.index_zoom button {
  width: 31px;
  height: 31px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #47515f;
  color: white;
}
.index_tools .index_toolActive {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 35%, #47515f);
}
.index_tools button:disabled {
  opacity: .32;
  cursor: not-allowed;
}
.index_zoom {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
.index_zoom span {
  min-width: 42px;
  text-align: center;
}
.index_stage {
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding: 72px;
  background-color: #454d59;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .025) 1px,
      transparent 1px);
  background-size: 24px 24px;
}
.index_artworkViewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.index_canvasResizeViewport {
  overflow: visible;
}
.index_selectionOverflow {
  overflow: visible;
}
.index_artworkViewport .index_artworkBox {
  pointer-events: auto;
}
.index_artboard {
  position: absolute;
  left: 50%;
  top: 45%;
  overflow: visible;
  border: 0;
  outline: 1px solid #8f99a8;
  box-shadow: var(--shadow-lg);
  transform-origin: center;
  background-color: #f5f6f8;
  background-image:
    linear-gradient(
      45deg,
      #d7dbe1 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #d7dbe1 25%,
      transparent 25%),
    linear-gradient(
      45deg,
      transparent 75%,
      #d7dbe1 75%),
    linear-gradient(
      -45deg,
      transparent 75%,
      #d7dbe1 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
}
.index_empty {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 360px;
  max-width: 80%;
  transform: translate(-50%, -50%);
  padding: 28px;
  border: 1px solid #aeb5bf;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .94);
  color: #252a31;
  text-align: center;
}
.index_plus {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: auto;
  border: 2px dashed #6f7885;
  border-radius: 13px;
  font-size: 28px;
}
.index_empty h1 {
  margin: 15px 0 7px;
  font-family: var(--font-family-display);
  font-size: 22px;
}
.index_empty p {
  margin: 0 0 18px;
  color: #626b77;
  font-size: 12px;
}
.index_empty > div:last-child {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.index_variationStrip {
  position: relative;
  display: none;
  gap: 10px;
  align-items: stretch;
  padding: 10px 42px 10px 14px;
  background: #252c36;
  border-top: 1px solid #394352;
  border-bottom: 1px solid #171b21;
  overflow: hidden;
}
.index_variationClose {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: 1px solid #465160;
  border-radius: 5px;
  background: #303844;
  color: #cbd3dd;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.index_variationClose:hover {
  background: #3b4552;
  color: #fff;
}
.index_variationReopen {
  display: none;
  border: 0;
  border-top: 1px solid #394352;
  border-bottom: 1px solid #171b21;
  background: #252c36;
  color: #aeb8c6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
}
.index_variationReopen:hover {
  color: #fff;
  background: #2e3743;
}
.index_variationCard {
  width: 108px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 5px;
  padding: 6px;
  border: 1px solid #3c4653;
  border-radius: 7px;
  background: #2d3540;
  color: #cfd6df;
  text-align: center;
}
.index_variationCard b,
.index_addVariation b {
  font-size: 9px;
}
.index_variationActive {
  border-color: var(--state-selected-border);
  box-shadow: 0 0 0 2px rgba(40, 199, 111, .2);
}
.index_variationThumb {
  min-height: 62px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background-color: #f4f4f4;
  background-image:
    linear-gradient(
      45deg,
      #ddd 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #ddd 25%,
      transparent 25%),
    linear-gradient(
      45deg,
      transparent 75%,
      #ddd 75%),
    linear-gradient(
      -45deg,
      transparent 75%,
      #ddd 75%);
  background-size: 12px 12px;
  background-position:
    0 0,
    0 6px,
    6px -6px,
    -6px 0;
  color: #4f5864;
  font-weight: 800;
}
.index_variationThumb img {
  max-width: 100%;
  max-height: 62px;
  object-fit: contain;
}
.index_addVariation {
  width: 108px;
  border: 1px dashed #536071;
  border-radius: 7px;
  background: #2b333e;
  color: #cfd6df;
  cursor: pointer;
}
.index_addVariation span {
  display: block;
  font-size: 28px;
  margin-bottom: 6px;
}
.index_center footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  background: #343b47;
  border-top: 1px solid var(--border);
  color: #e0e5eb;
  font-family: var(--font-family-monospace);
  font-size: 9px;
}
.index_layerSubheading {
  margin: 10px 0 6px;
  padding: 0 2px;
  color: #8996a6;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.index_layer {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
}
.index_activeLayer {
  border-color: var(--state-selected-border);
  box-shadow: inset 3px 0 0 var(--state-selected-border);
  background: color-mix(in srgb, var(--state-selected) 22%, #343c48);
}
.index_eye {
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 15px;
}
.index_layerActions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.index_layerActions button {
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.index_layerActions button:hover {
  background: #566170;
  color: #fff;
}
.index_layerActions button:disabled {
  opacity: .25;
  cursor: not-allowed;
}
.index_thumb {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background-color: #f5f6f8;
  background-image:
    linear-gradient(
      45deg,
      #d7dbe1 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #d7dbe1 25%,
      transparent 25%);
  background-size: 10px 10px;
}
.index_layer > div:nth-child(2),
.index_waiting div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.index_layer span,
.index_waiting span {
  color: var(--muted-foreground);
  font-size: 10px;
}
.index_waiting {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #3b4451;
}
.index_waiting > strong {
  color: var(--primary);
  font-size: 22px;
}
.index_waiting b {
  font-size: 11px;
}
.index_check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 10px;
}
.index_check b {
  color: var(--foreground);
  font-family: var(--font-family-monospace);
}
.index_check .index_warningText {
  color: var(--warning);
}
.index_check .index_goodText {
  color: var(--success);
}
.index_fileInput {
  display: none;
}
.index_dragging {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
}
.index_dropOverlay {
  position: absolute;
  z-index: 20;
  padding: 18px 28px;
  border: 2px dashed var(--primary);
  border-radius: var(--radius-lg);
  background: rgba(52, 59, 71, .94);
  color: #fff;
  font-family: var(--font-family-display);
  font-weight: 800;
  letter-spacing: 1px;
  pointer-events: none;
}
.index_gridOff {
  background: #f4f5f7;
  background-image: none;
}
.index_guideV,
.index_guideH {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background: rgba(67, 209, 255, .8);
}
.index_guideV {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}
.index_guideH {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}
.index_centerSnapV,
.index_centerSnapH {
  position: absolute;
  z-index: 24;
  pointer-events: none;
  background: #26a7ff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .72);
}
.index_centerSnapV {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}
.index_centerSnapH {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}
.index_centerSnapBadge {
  position: absolute;
  z-index: 25;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 4px;
  background: #26a7ff;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .6px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
.index_viewToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 10px;
  cursor: pointer;
}
.index_viewToggle b {
  color: #aab4c2;
  font-family: var(--font-family-monospace);
}
.index_transformGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.index_transformGrid label {
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 700;
}
.index_transformGrid input {
  margin-top: 5px;
}
.index_transformActions {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}
.index_transformActions button {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #414a57;
  color: #fff;
  cursor: pointer;
}
.index_artboardSelected {
  outline: 2px solid #26a7ff;
  outline-offset: 1px;
}
.index_artboardHandle {
  position: absolute;
  z-index: 40;
  display: block;
  background: #fff;
  border: 2px solid #26a7ff;
  border-radius: 3px;
  touch-action: none;
}
.index_artboardHandleNW,
.index_artboardHandleNE,
.index_artboardHandleSE,
.index_artboardHandleSW {
  width: 11px;
  height: 11px;
}
.index_artboardHandleN,
.index_artboardHandleS {
  width: 30px;
  height: 8px;
}
.index_artboardHandleE,
.index_artboardHandleW {
  width: 8px;
  height: 30px;
}
.index_artboardHandleNW {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}
.index_artboardHandleN {
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  cursor: ns-resize;
}
.index_artboardHandleNE {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}
.index_artboardHandleE {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.index_artboardHandleSE {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}
.index_artboardHandleS {
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  cursor: ns-resize;
}
.index_artboardHandleSW {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}
.index_artboardHandleW {
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.index_artworkBox {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform-origin: center;
  display: grid;
  place-items: center;
  cursor: move;
  touch-action: none;
}
.index_artworkSelected {
  outline: 1px solid var(--accent);
}
.index_artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.index_handle {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid #1e2730;
  background: var(--accent);
  border-radius: 2px;
  touch-action: none;
}
.index_rotateStem {
  position: absolute;
  left: 50%;
  top: -31px;
  width: 1px;
  height: 26px;
  transform: translateX(-50%);
  background: var(--accent);
  pointer-events: none;
}
.index_rotateHandle {
  position: absolute;
  z-index: 26;
  left: 50%;
  top: -45px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  padding: 0;
  border: 1px solid #1e2730;
  border-radius: 50%;
  background: #f7f9fb;
  color: #26313d;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
}
.index_rotateHandle:active {
  cursor: grabbing;
}
.index_rotateHandle:hover {
  border-color: var(--accent);
  color: #101820;
}
.index_handleNW {
  left: -5px;
  top: -5px;
  cursor: nwse-resize;
}
.index_handleN {
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  cursor: ns-resize;
}
.index_handleNE {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}
.index_handleE {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.index_handleSE {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}
.index_handleS {
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  cursor: ns-resize;
}
.index_handleSW {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}
.index_handleW {
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.index_layerImage {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 5px;
  background: #eef1f5;
}
.index_loaded {
  border-color: var(--success);
}
.index_loaded > strong {
  color: var(--success);
}
.index_panMode {
  cursor: grab;
}
.index_panMode:active {
  cursor: grabbing;
}
.index_panMode * {
  cursor: grab !important;
}
.index_panMode:active,
.index_panMode:active * {
  cursor: grabbing !important;
}
.index_snapping {
  outline-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.index_mockupToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.index_mockupToolbar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.index_mockupToolbar b {
  font-size: 11px;
}
.index_mockupToolbar span {
  font-size: 9px;
  color: var(--muted-foreground);
}
.index_mockupViews {
  display: flex;
  gap: 4px;
}
.index_mockupViews button {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #303844;
  color: #aeb8c6;
  font-size: 9px;
  cursor: pointer;
}
.index_mockupViews .index_mockupViewActive {
  border-color: var(--primary);
  background: #4b3c64;
  color: #fff;
}
.index_mockupPreviewPro {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 12px;
  border: 1px solid #394452;
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      #e7e9ec,
      #cfd3d8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.index_mockupProduct {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  isolation: isolate;
}
.index_mockupColorLayer,
.index_mockupShade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.index_mockupColorLayer {
  z-index: 1;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.index_mockupShade {
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: .48;
  pointer-events: none;
}
.index_mockupArtwork {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 34%;
  width: 35%;
  max-height: 43%;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
  pointer-events: none;
}
.index_mockupArtworkFront {
  top: 31%;
  width: 31%;
  max-height: 38%;
}
.index_mockupNote {
  margin: 10px 0 0;
  color: var(--muted-foreground);
  font-size: 9px;
  line-height: 1.45;
}
.index_mockupTypes button:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.index_textPanel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.index_textComposer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #3a4553;
  border-radius: 10px;
  background: #2c3440;
}
.index_textComposer label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #aeb7c3;
  font-size: 10px;
  font-weight: 700;
}
.index_textControlGrid {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 8px;
}
.index_primaryToolButton {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #8d47ff;
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      #8b44f4,
      #6d2dd4);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.index_fontSearch,
.index_assetSearch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #3b4654;
  border-radius: 8px;
  background: #232a33;
}
.index_fontSearch span,
.index_assetSearch span {
  color: #95a2b3;
}
.index_fontSearch input,
.index_assetSearch input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef2f7;
  font-size: 11px;
}
.index_fontFilters,
.index_assetTabs {
  display: flex;
  gap: 6px;
  overflow: hidden;
}
.index_fontFilters button,
.index_assetTabs button {
  padding: 7px 10px;
  border: 1px solid #3d4754;
  border-radius: 999px;
  background: #2e3641;
  color: #aeb7c3;
  font-size: 9px;
  cursor: pointer;
}
.index_fontFilters .index_fontFilterActive,
.index_assetTabs .index_assetTabActive {
  border-color: var(--state-active-border);
  background: var(--state-active);
  color: #effff5;
}
.index_fontList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.index_fontList button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #f3f5f7;
  cursor: pointer;
  text-align: left;
}
.index_fontList button:hover {
  background: #323b47;
  border-color: #414d5b;
}
.index_fontList button span {
  font-size: 21px;
  line-height: 1.05;
}
.index_fontList button small {
  color: #8490a0;
  font-size: 8px;
}
.index_fontList .index_fontActive {
  background: var(--state-selected);
  border-color: var(--state-selected-border);
  color: var(--state-selected-text);
}
.index_fontList .index_fontActive small {
  color: #123d25;
}
.index_uploadFontButton {
  padding: 10px;
  border: 1px solid #3c4653;
  border-radius: 8px;
  background: #2c3440;
  color: #9da8b7;
  font-weight: 700;
}
.index_uploadFontButton span {
  float: right;
  font-size: 8px;
  font-weight: 500;
}
.index_illustrationPanel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.index_assetSectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.index_assetSectionTitle b {
  font-size: 10px;
}
.index_assetSectionTitle span {
  color: #8390a0;
  font-size: 8px;
}
.index_shapeColorRow {
  display: grid;
  grid-template-columns: auto 44px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #3a4451;
  border-radius: 8px;
  background: #2b333e;
  color: #9ea9b7;
  font-size: 9px;
}
.index_shapeColorRow input {
  height: 30px;
  padding: 2px;
}
.index_shapeColorRow code {
  justify-self: end;
  color: #d8dee7;
  font-size: 9px;
}
.index_shapeGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.index_shapeGrid button {
  height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #3b4653;
  border-radius: 9px;
  background: #2b333e;
  color: #dce2ea;
  cursor: pointer;
}
.index_shapeGrid button:hover {
  border-color: #6e7d91;
  background: #333d49;
}
.index_shapeGrid b {
  font-size: 8px;
}
.index_shapeRect {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #e9edf3;
}
.index_shapeCircle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e9edf3;
}
.index_shapeStar {
  font-size: 38px;
  line-height: .8;
}
.index_shapeDiamond {
  width: 28px;
  height: 28px;
  transform: rotate(45deg);
  background: #e9edf3;
}
.index_shapeArrow {
  font-size: 36px;
}
.index_assetPlaceholder {
  opacity: .65;
}
.index_assetCards {
  display: grid;
  gap: 7px;
}
.index_assetCards div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border: 1px solid #394452;
  border-radius: 8px;
  background: #2c3440;
}
.index_assetCards strong {
  font-size: 9px;
}
.index_assetCards span {
  color: #8995a5;
  font-size: 8px;
}
.index_commandDock {
  position: fixed;
  z-index: 500;
  left: calc(50% - 120px);
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translate3d(-50%, 0, 0);
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px;
  border: 1px solid rgba(75, 86, 100, .9);
  border-radius: 11px;
  background: rgba(27, 33, 42, .97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  isolation: isolate;
  will-change: transform;
}
.index_workspace.index_rightClosed .index_commandDock {
  left: calc(50% - 24px);
}
.index_commandGroup {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
}
.index_commandGroup + .index_commandGroup {
  border-left: 1px solid #46515e;
  padding-left: 8px;
}
.index_commandGroup button {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #d9e0e9;
  font-size: 15px;
  cursor: pointer;
}
.index_commandGroup button:hover {
  background: #3a4552;
  border-color: #4c5968;
}
.index_commandGroup button:disabled {
  opacity: .28;
  cursor: not-allowed;
}
.index_commandGroup .index_commandActive {
  border-color: var(--state-selected-border);
  background: var(--state-selected);
  color: var(--state-selected-text);
  box-shadow: 0 0 0 1px rgba(98, 238, 156, .22), 0 0 12px rgba(40, 199, 111, .2);
}
.index_commandGroup span {
  min-width: 42px;
  color: #aeb7c3;
  font-size: 9px;
  text-align: center;
}
.index_magicControls {
  gap: 5px;
}
.index_magicTolerance {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #aeb7c3;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.index_magicTolerance input {
  width: 48px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 5px !important;
  font-size: 9px !important;
}
.index_magicControls button {
  width: auto !important;
  min-width: 44px;
  padding: 0 7px;
  font-size: 9px !important;
  white-space: nowrap;
}
.index_dockProjectName {
  width: 150px;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid #46515e;
  border-radius: 7px;
  background: #202731;
  color: #eef2f7;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  outline: none;
}
.index_dockProjectName:focus {
  border-color: #8d47ff;
}
.index_penButton {
  font-size: 19px !important;
}
.index_stage {
  position: relative;
}
.index_mockupToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.index_mockupToolbar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.index_mockupToolbar b {
  font-size: 10px;
}
.index_mockupToolbar span {
  color: #8591a0;
  font-size: 8px;
}
.index_mockupViews {
  display: flex;
  gap: 4px;
}
.index_mockupViews button {
  padding: 6px 8px;
  border: 1px solid #3d4754;
  border-radius: 6px;
  background: #2b333e;
  color: #aab4c1;
  font-size: 8px;
  cursor: pointer;
}
.index_mockupViews .index_mockupViewActive {
  border-color: var(--state-active-border);
  background: var(--state-active);
  color: #effff5;
}
.index_mockupPreviewPro {
  padding: 10px;
  border: 1px solid #3b4654;
  border-radius: 10px;
  background:
    radial-gradient(
      circle at 50% 24%,
      #f7f8fa 0,
      #e7eaee 54%,
      #d9dee4 100%);
}
.index_mockupProduct {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 240/280;
  overflow: hidden;
  border-radius: 7px;
}
.index_mockupGarment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.index_mockupPhoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.index_mockupArtworkPhoto {
  outline-color: rgba(38, 167, 255, .9);
}
.index_mockupArtworkPhoto .index_mockupArtwork {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)) saturate(.98);
}
.index_mockupLibraryHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 7px;
}
.index_mockupLibraryHead b {
  font-size: 10px;
}
.index_mockupLibraryHead span {
  color: #8793a2;
  font-size: 8px;
}
.index_mockupLibrary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.index_mockupLibrary button {
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-rows: 78px auto auto;
  align-content: start;
  padding: 5px;
  border: 1px solid #3b4654;
  border-radius: 8px;
  background: #2a323d;
  color: #dce2e9;
  text-align: left;
  cursor: pointer;
}
.index_mockupLibrary button:hover {
  border-color: #647287;
  background: #323c49;
}
.index_mockupLibrary img,
.index_mockupStudioThumb {
  width: 100%;
  height: 78px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: 5px;
  background: #e7eaee;
  color: #222;
  font-size: 26px;
  font-weight: 900;
}
.index_mockupLibrary strong,
.index_mockupLibrary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index_mockupLibrary strong {
  margin-top: 5px;
  font-size: 8.5px;
}
.index_mockupLibrary small {
  margin-top: 2px;
  color: #8d99a8;
  font-size: 7px;
}
.index_mockupLibrary .index_mockupTemplateActive {
  border-color: var(--state-selected-border);
  box-shadow: 0 0 0 1px rgba(98, 238, 156, .2);
  background: color-mix(in srgb, var(--state-selected) 16%, #2a323d);
}
.index_mockupCustomColor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 9px;
  border: 1px solid #3b4654;
  border-radius: 8px;
  background: #2a323d;
}
.index_mockupCustomColor label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aeb8c6;
  font-size: 8px;
  font-weight: 800;
}
.index_mockupCustomColor input[type=color] {
  width: 42px;
  height: 30px;
  min-height: 30px;
  padding: 2px;
  border: 1px solid #536172;
  border-radius: 6px;
  background: #202731;
  cursor: pointer;
}
.index_mockupCustomColor code {
  color: #e8edf3;
  font: 800 9px var(--font-family-monospace);
}
.index_leftShell .index_mockupPreviewPro {
  display: none;
}
.index_mockupCenterMode {
  position: relative;
}
.index_mockupWorkspace {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: #202731;
  color: #edf2f7;
}
.index_mockupWorkspaceTop {
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid #3a4552;
  background: #252d38;
}
.index_mockupWorkspaceTop > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.index_mockupWorkspaceTop b {
  font-size: 12px;
}
.index_mockupWorkspaceTop span {
  color: #8f9baa;
  font-size: 8px;
}
.index_mockupWorkspaceTop button {
  height: 29px;
  padding: 0 10px;
  border: 1px solid #465260;
  border-radius: 6px;
  background: #303946;
  color: #dfe6ee;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}
.index_mockupWorkspaceTop button:hover {
  border-color: #657487;
  background: #3a4553;
}
.index_mockupWorkspaceCanvas {
  min-height: 0;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(
      circle at 50% 38%,
      #343e4c 0,
      #252d37 48%,
      #1e252e 100%);
}
.index_mockupWorkspaceProduct {
  position: relative;
  width: min(66vw, 580px);
  height: min(calc(100vh - 105px), 720px);
  max-width: calc(100% - 24px);
  overflow: hidden;
  border: 1px solid #536173;
  border-radius: 12px;
  background: #eef1f4;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .34);
  isolation: isolate;
}
.index_mockupWorkspacePhoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #eef1f4;
  pointer-events: none;
  user-select: none;
}
.index_mockupWorkspaceGarment {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 88%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .24));
  pointer-events: none;
}
.index_mockupWorkspaceArtwork {
  z-index: 6;
}
.index_mockupNoArtwork {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 6px;
  background: rgba(24, 31, 40, .82);
  color: #fff;
  font-size: 9px;
  white-space: nowrap;
}
.index_mockupCenterMode .index_commandDock {
  display: flex;
}
.index_mockupStageNode {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 14;
  overflow: visible;
  box-sizing: border-box;
  border: 2px solid #6f7c8d;
  border-radius: 3px;
  background: #eef1f4;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
  transform-origin: center;
  touch-action: none;
  pointer-events: auto;
}
.index_mockupStageNode {
  cursor: move;
}
.index_mockupStageNodeSelected {
  z-index: 40;
  border-color: #a96bff;
  box-shadow: 0 0 0 2px rgba(169, 107, 255, .2), 0 10px 28px rgba(0, 0, 0, .24);
}
.index_mockupComposition {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  pointer-events: none;
}
.index_mockupComposition img {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.index_mockupFabricPass {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: .18;
  pointer-events: none;
  filter: saturate(.92) contrast(1.03);
}
.index_mockupFabricPass img {
  filter: none !important;
}
.index_mockupObjectResizeHandle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 28;
  width: 14px;
  height: 14px;
  border: 2px solid #252d38;
  border-radius: 3px;
  background: #a96bff;
  cursor: nwse-resize;
  touch-action: none;
}
.index_mockupStageLabel {
  position: absolute;
  left: 0;
  top: -19px;
  z-index: 20;
  color: #b684ff;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
}
.index_mockupStagePhoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #eef1f4;
  pointer-events: none;
  user-select: none;
}
.index_mockupStageGarment {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76%;
  height: 88%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .22));
  pointer-events: none;
}
.index_mockupStageArtwork {
  z-index: 17;
}
.index_mockupStageLink {
  position: absolute;
  z-index: 8;
  height: 2px;
  background: #a96bff;
  pointer-events: none;
  transform: translateY(-1px);
  box-shadow: 0 0 6px rgba(169, 107, 255, .32);
}
.index_mockupStageLink i {
  position: absolute;
  left: -6px;
  top: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid #a96bff;
  border-radius: 50%;
  background: #252d38;
}
.index_mockupStageLink b {
  position: absolute;
  right: -5px;
  top: -13px;
  color: #a96bff;
  font-size: 24px;
  line-height: 24px;
}
.index_mockupBrowserSearch {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 8px;
  padding: 8px 9px;
  border: 1px solid #3d4856;
  border-radius: 8px;
  background: #252d38;
}
.index_mockupBrowserSearch span {
  color: #8e9aaa;
  font-size: 13px;
}
.index_mockupBrowserSearch input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef2f7;
  font-size: 9px;
}
.index_mockupCategoryRow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 3px;
}
.index_mockupCategoryRow button {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid #3d4856;
  border-radius: 999px;
  background: #2b333e;
  color: #aeb8c6;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}
.index_mockupCategoryRow .index_mockupCategoryActive {
  border-color: var(--state-selected-border);
  background: var(--state-selected);
  color: var(--state-selected-text);
}
.index_mockupEmpty,
.index_mockupColorHint {
  margin-top: 9px;
  padding: 9px;
  border: 1px dashed #46515f;
  border-radius: 7px;
  color: #8f9baa;
  font-size: 8px;
  line-height: 1.4;
}
.index_mockupWorkspaceCanvas {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  grid-template-columns: minmax(300px, 1fr) 84px minmax(340px, 1fr);
  gap: 18px;
  align-items: center;
  justify-items: stretch;
}
.index_mockupSourceColumn,
.index_mockupProductColumn {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
}
.index_mockupWorkspaceLabel {
  color: #a97aff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2px;
}
.index_mockupSourceArtboard {
  position: relative;
  width: 100%;
  min-height: 280px;
  max-height: 62vh;
  overflow: hidden;
  border: 1px solid #a97aff;
  background-color: #f7f8fa;
  background-image:
    linear-gradient(
      45deg,
      #d7dbe1 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #d7dbe1 25%,
      transparent 25%),
    linear-gradient(
      45deg,
      transparent 75%,
      #d7dbe1 75%),
    linear-gradient(
      -45deg,
      transparent 75%,
      #d7dbe1 75%);
  background-size: 18px 18px;
  background-position:
    0 0,
    0 9px,
    9px -9px,
    -9px 0;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}
.index_mockupLinkWrap {
  position: relative;
  height: 40px;
}
.index_mockupLinkLine {
  position: absolute;
  left: 6px;
  right: 10px;
  top: 19px;
  height: 2px;
  background: #a96bff;
  box-shadow: 0 0 8px rgba(169, 107, 255, .4);
}
.index_mockupLinkDot {
  position: absolute;
  left: 0;
  top: 14px;
  width: 12px;
  height: 12px;
  border: 2px solid #a96bff;
  border-radius: 50%;
  background: #252d38;
}
.index_mockupLinkArrow {
  position: absolute;
  right: 0;
  top: 3px;
  color: #a96bff;
  font-size: 28px;
  font-weight: 900;
  line-height: 32px;
}
.index_mockupWorkspaceProduct {
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  max-width: 560px;
  max-height: 62vh;
  margin: 0 auto;
}
.index_mockupRightMode .index_rightTabs,
.index_mockupRightMode .index_panelContent > section {
  display: none !important;
}
.index_mockupRightInspector {
  display: block;
  padding-bottom: 34px;
}
.index_mockupInspectorThumb {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-bottom: 1px solid var(--border);
}
.index_mockupInspectorThumb img,
.index_mockupInspectorThumb > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: 6px;
  background: #eef1f4;
  color: #1f2730;
  font-size: 22px;
  font-weight: 900;
}
.index_mockupInspectorThumb b,
.index_mockupInspectorThumb small {
  display: block;
}
.index_mockupInspectorThumb b {
  font-size: 9px;
}
.index_mockupInspectorThumb small {
  margin-top: 3px;
  color: #8995a5;
  font-size: 7px;
}
.index_mockupColorCurrent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.index_mockupColorCurrent i {
  width: 28px;
  height: 28px;
  border: 1px solid #5b6878;
  border-radius: 5px;
}
.index_mockupColorCurrent code {
  color: #e7ecf2;
  font: 800 9px var(--font-family-monospace);
}
.index_mockupRightSwatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}
.index_mockupRightSwatches button {
  aspect-ratio: 1;
  border: 2px solid #586575;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.index_mockupRightSwatches .index_mockupRightSwatchActive {
  outline: 2px solid #a96bff;
  outline-offset: 2px;
}
.index_mockupInspectorPicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  color: #9da8b6;
  font-size: 8px;
  font-weight: 800;
}
.index_mockupInspectorPicker input[type=color] {
  width: 58px;
  height: 30px;
  min-height: 30px;
  padding: 2px;
  border: 1px solid #536172;
  border-radius: 6px;
  background: #202731;
  cursor: pointer;
}
@media (max-width: 1100px) {
  .index_mockupWorkspaceCanvas {
    grid-template-columns: minmax(180px, 34%) 50px minmax(250px, 50%);
    gap: 9px;
  }
  .index_mockupLinkWrap {
    transform: scale(.85);
  }
}
.index_mockupShade,
.index_mockupColorLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.index_mockupShade {
  mix-blend-mode: multiply;
  opacity: .56;
}
.index_mockupColorLayer {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.index_mockupArtwork {
  position: absolute;
  left: 50%;
  top: 57%;
  width: 31%;
  max-height: 35%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
}
.index_mockupArtworkFront {
  top: 53%;
  width: 27%;
}
.index_mockupNote {
  margin: 10px 0 0;
  color: #84909f;
  font-size: 8px;
  line-height: 1.45;
}
.index_mockupTypes button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.index_rightTabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 9px;
  background: #252d37;
  border-bottom: 1px solid #3a4552;
}
.index_rightTabs button {
  padding: 8px 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #9ca8b7;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.index_rightTabs button:hover {
  background: #323b47;
  color: #fff;
}
.index_rightTabs .index_rightTabActive {
  border-color: var(--state-active-border);
  background: var(--state-active);
  color: #effff5;
}
.index_right .index_panelContent {
  padding-bottom: 40px;
}
.index_objectActionBar {
  position: absolute;
  left: 50%;
  top: 12px;
  z-index: 50;
  display: flex;
  gap: 4px;
  padding: 5px 6px;
  border: 1px solid #aeb8c4;
  border-radius: 8px;
  background: #f7f9fb;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  white-space: nowrap;
  transform: translateX(-50%);
}
.index_objectActionBar button {
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #39424d;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.index_objectActionBar button:hover {
  background: #e8edf3;
}
.index_objectActionBar .index_dangerAction {
  color: #b64048;
}
.index_objectPanel .index_sectionHeading em {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index_propertyBlock {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.index_propertyBlock > b {
  display: block;
  margin-bottom: 9px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.index_dimensionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.index_dimensionGrid label {
  position: relative;
  color: var(--muted-foreground);
  font-size: 9px;
  font-weight: 700;
}
.index_dimensionGrid input {
  margin-top: 5px;
  padding-right: 24px;
}
.index_dimensionGrid label span {
  position: absolute;
  right: 8px;
  bottom: 9px;
  color: var(--muted-foreground);
  font-size: 8px;
}
.index_adjustPanel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.index_adjustHint {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 9px;
  line-height: 1.45;
}
.index_adjustRow {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #303844;
}
.index_adjustRow span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #cfd6df;
  font-size: 9px;
  font-weight: 700;
}
.index_adjustRow .index_adjustNumber {
  width: 62px;
  height: 27px;
  margin-left: auto;
  padding: 3px 6px;
  text-align: right;
  font: 700 10px var(--font-family-monospace);
}
.index_adjustRow b {
  min-width: 16px;
  color: var(--accent);
  font-family: var(--font-family-monospace);
}
.index_adjustRow input[type=range] {
  width: 100%;
  accent-color: var(--primary);
}
.index_adjustActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.index_adjustActions button {
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #3a4350;
  color: #d9e0e8;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.index_adjustActions .index_applyAdjust {
  border-color: #8d47ff;
  background:
    linear-gradient(
      180deg,
      #8b44f4,
      #6d2dd4);
  color: #fff;
}
.index_cropFrame {
  position: absolute;
  z-index: 28;
  border: 2px solid #26a7ff;
  box-shadow: 0 0 0 9999px rgba(15, 22, 30, .42);
  pointer-events: none;
}
.index_cropFrame:before {
  content: "CROP";
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(20, 27, 35, .78);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .6px;
}
.index_cropActions {
  position: absolute;
  left: 50%;
  top: -48px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid #9aa8b7;
  border-radius: 9px;
  background: #f7f9fb;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .22);
  pointer-events: auto;
}
.index_cropActions button {
  min-width: 54px;
  padding: 7px 11px;
  border: 0;
  border-radius: 6px;
  background: #e6ebf1;
  color: #34404d;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.index_cropActions .index_cropDone {
  background: #59677a;
  color: #fff;
}
.index_cropSizeBadge {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 5px;
  background: rgba(19, 27, 36, .78);
  color: #fff;
  font: 700 9px var(--font-family-monospace);
  white-space: nowrap;
  pointer-events: none;
}
.index_cropHandle {
  position: absolute;
  z-index: 30;
  display: block;
  background: #fff;
  border: 2px solid #26a7ff;
  border-radius: 3px;
  pointer-events: auto;
  touch-action: none;
}
.index_cropHandleNW,
.index_cropHandleNE,
.index_cropHandleSE,
.index_cropHandleSW {
  width: 11px;
  height: 11px;
}
.index_cropHandleN,
.index_cropHandleS {
  width: 26px;
  height: 8px;
}
.index_cropHandleE,
.index_cropHandleW {
  width: 8px;
  height: 26px;
}
.index_cropHandleNW {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}
.index_cropHandleN {
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  cursor: ns-resize;
}
.index_cropHandleNE {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}
.index_cropHandleE {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.index_cropHandleSE {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}
.index_cropHandleS {
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  cursor: ns-resize;
}
.index_cropHandleSW {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}
.index_cropHandleW {
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.index_alignGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.index_alignGrid button,
.index_objectUtilityGrid button {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #3a4350;
  color: #e1e6ed;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.index_alignGrid button:hover,
.index_objectUtilityGrid button:hover {
  border-color: #667487;
  background: #46515f;
}
.index_objectUtilityGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.index_objectUtilityGrid button {
  font-size: 9px;
}
.index_layerNameRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--muted-foreground);
  font-size: 9px;
  font-weight: 700;
}
.index_opacityRow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #303844;
}
.index_opacityRow span {
  display: flex;
  justify-content: space-between;
  color: #cfd6df;
  font-size: 9px;
  font-weight: 700;
}
.index_opacityRow b {
  color: var(--accent);
  font-family: var(--font-family-monospace);
}
.index_opacityRow input {
  width: 100%;
  accent-color: var(--primary);
}
.index_alignGrid button:disabled,
.index_objectUtilityGrid button:disabled,
.index_transformActions button:disabled {
  opacity: .32;
  cursor: not-allowed;
}
.index_mockupArtworkBox {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  cursor: move;
  touch-action: none;
}
.index_mockupArtworkSelected {
  outline: 1px solid #26a7ff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
}
.index_mockupArtworkBox .index_mockupArtwork {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-height: none;
  display: block;
  transform: none;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
}
.index_mockupHandle {
  position: absolute;
  z-index: 5;
  width: 10px;
  height: 10px;
  border: 1px solid #1e2730;
  border-radius: 2px;
  background: #26a7ff;
  touch-action: none;
}
.index_mockupHandleNW {
  left: -5px;
  top: -5px;
  cursor: nwse-resize;
}
.index_mockupHandleNE {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}
.index_mockupHandleSE {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}
.index_mockupHandleSW {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}
.index_viewToggleActive {
  border-color: var(--state-active-border) !important;
  background: color-mix(in srgb, var(--state-active) 72%, #252d38) !important;
}
.index_viewToggleActive b {
  color: var(--state-selected-border);
}
.index_railBrand {
  width: 46px;
  height: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 2px 0 0;
  line-height: .82;
  color: #f4f7fb;
  text-align: center;
  flex: 0 0 auto;
}
.index_railBrand strong {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3px;
}
.index_railBrand span {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .7px;
  color: #aeb8c6;
}
.index_toolRail .index_railMenuButton {
  min-height: 32px;
  height: 32px;
  margin: 0 4px 0 0;
  padding: 0 9px;
  border: 1px solid #3a4552;
  border-radius: 6px;
  background: #2b333e;
  color: #e5eaf0;
  font-size: 15px;
  line-height: 1;
}
.index_toolRail .index_railMenuButton:hover {
  background: #394451;
}
.index_toolRail .index_railMenuActive {
  border-color: #59697d;
  background: #3a4552;
  color: #fff;
}
.index_leftMainMenu {
  position: absolute;
  z-index: 720;
  left: 54px;
  top: 44px;
  width: 306px;
  max-height: calc(100vh - 54px);
  overflow-y: auto;
  padding: 0;
  border: 1px solid #46515f;
  border-radius: 0 0 10px 10px;
  background: rgba(29, 35, 44, .99);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .46);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
}
.index_menuList {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.index_menuList button {
  min-height: 28px;
  display: grid;
  grid-template-columns: 17px 1fr;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #cbd3dd;
  text-align: left;
  cursor: pointer;
}
.index_menuList button strong {
  font-size: 10px;
  text-align: center;
}
.index_menuList button span {
  font-size: 8.5px;
  font-weight: 700;
}
.index_menuList button:hover {
  background: #343e4a;
  color: #fff;
}
.index_menuList .index_menuActive {
  background: #176b3a;
  color: #effff5;
}
.index_menuFileActions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #3c4754;
}
.index_menuFileActions button {
  width: 100%;
  height: 25px;
  min-height: 25px;
  padding: 2px 5px;
  justify-content: flex-start;
  font-size: 7.5px;
  border-radius: 5px;
}
.index_compactHeaderBar {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 3px;
}
.index_topMenuToggle {
  width: 22px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #3b4654;
  border-radius: 4px;
  background: #252d38;
  color: #dce3eb;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.index_topMenuToggle span {
  font-size: 8px;
  letter-spacing: .2px;
}
.index_topMenuToggle:hover {
  background: #313b48;
  color: #fff;
}
.index_topMenuPanel {
  position: absolute;
  z-index: 200;
  left: 3px;
  right: auto;
  top: 24px;
  width: 236px;
  max-height: calc(100vh - 34px);
  overflow-y: auto;
  display: block;
  padding: 6px;
  border: 1px solid #46515f;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(28, 34, 43, .98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px);
}
.index_topMenuPanel .index_tabs {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.index_topMenuPanel .index_headerActions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #3b4654;
}
.index_topMenuPanel .index_tabs button {
  min-height: 30px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  text-align: left;
}
.index_topMenuPanel .index_headerActions button {
  width: 100%;
  height: 28px;
  min-height: 28px;
  justify-content: flex-start;
}
.index_appDark {
  color-scheme: dark;
}
.index_appLight {
  color-scheme: light;
}
.index_toolRail .index_themeToggle {
  margin: 0 0 0 auto;
  border-color: #394352;
  background: #252d37;
}
.index_appLight .index_toolRail {
  background: #f7f8fa;
  border-right-color: #cbd3dd;
}
.index_appLight .index_toolRail button {
  color: #596574;
}
.index_appLight .index_toolRail button:hover {
  background: #e5eaf0;
  color: #202832;
}
.index_appLight .index_toolRail .index_themeToggle {
  border-color: #cbd3dd;
  background: #edf1f5;
  color: #3f4b59;
}
.index_appLight .index_railBrand {
  color: #202832;
}
.index_appLight .index_railBrand span {
  color: #6d7886;
}
.index_appLight .index_toolRail .index_railMenuButton {
  border-color: #cbd3dd;
  background: #edf1f5;
  color: #303b48;
}
.index_appLight .index_toolRail .index_railMenuButton:hover {
  background: #e0e6ed;
}
.index_appLight .index_leftMainMenu {
  border-color: #c7d0da;
  background: rgba(250, 251, 252, .985);
  box-shadow: 0 12px 28px rgba(31, 38, 48, .18);
}
.index_appLight .index_menuList button {
  color: #475362;
}
.index_appLight .index_menuList button:hover {
  background: #e7ebf0;
  color: #202832;
}
.index_appLight .index_menuList .index_menuActive {
  background: #176b3a;
  color: #fff;
}
.index_appLight .index_menuFileActions {
  border-top-color: #d2d8e0;
}
.index_appLight .index_collapseButton {
  border-color: #cbd3dd;
  background: #e4e9ef;
  color: #35404c;
}
.index_appLight .index_collapsed .index_collapseButton {
  border-color: #cbd3dd;
}
.index_appLight .index_drawerHeader {
  background: #eef2f6;
  border-bottom-color: #cbd3dd;
}
.index_appLight .index_drawerHeader b {
  color: #26303b;
}
.index_appLight .index_drawerHeader span {
  color: #6f7a88;
}
.index_appLight .index_drawerHeader button {
  color: #586574;
}
.index_appLight .index_drawerHeader button:hover {
  background: #dde4eb;
  color: #1f2731;
}
.index_appLight .index_rightTabs {
  background: #eef2f6;
  border-bottom-color: #cbd3dd;
}
.index_appLight .index_rightTabs button {
  color: #66717f;
}
.index_appLight .index_rightTabs button:hover {
  background: #dfe5ec;
  color: #222b35;
}
.index_appLight .index_rightTabs .index_rightTabActive {
  background: #176b3a;
  color: #fff;
}
.index_appLight .index_stage {
  background-color: #d9dee5;
  background-image:
    linear-gradient(rgba(36, 46, 58, .055) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(36, 46, 58, .055) 1px,
      transparent 1px);
}
.index_appLight .index_commandDock {
  border-color: #c9d1da;
  background: rgba(250, 251, 252, .96);
  box-shadow: 0 10px 28px rgba(31, 38, 48, .18);
}
.index_appLight .index_commandGroup + .index_commandGroup {
  border-left-color: #d0d7df;
}
.index_appLight .index_commandGroup button {
  color: #37424f;
}
.index_appLight .index_commandGroup button:hover {
  background: #e4e9ef;
  border-color: #c4cdd7;
}
.index_appLight .index_commandGroup span {
  color: #687482;
}
.index_appLight .index_dockProjectName {
  border-color: #c9d1da;
  background: #fff;
  color: #26303b;
}
.index_appLight .index_quick,
.index_appLight .index_toolGroup,
.index_appLight .index_exportGate,
.index_appLight .index_readyCard,
.index_appLight .index_waiting,
.index_appLight .index_adjustRow,
.index_appLight .index_opacityRow,
.index_appLight .index_textComposer,
.index_appLight .index_assetCards div,
.index_appLight .index_shapeColorRow,
.index_appLight .index_uploadGrid button {
  background: #fff;
  border-color: #ccd4de;
  color: #28323d;
}
.index_appLight .index_fontSearch,
.index_appLight .index_assetSearch {
  border-color: #ccd4de;
  background: #fff;
}
.index_appLight .index_fontSearch input,
.index_appLight .index_assetSearch input {
  color: #25303b;
}
.index_appLight .index_fontList button {
  color: #26303b;
}
.index_appLight .index_fontList button:hover {
  background: #e8edf2;
  border-color: #cbd3dd;
}
.index_appLight .index_uploadFontButton {
  border-color: #ccd4de;
  background: #fff;
  color: #5e6977;
}
.index_appLight .index_mockupTypes button {
  border-color: #ccd4de;
  background: #eef2f6;
  color: #5c6876;
}
.index_appLight .index_shapeGrid button {
  border-color: #ccd4de;
  background: #fff;
  color: #2c3641;
}
.index_appLight .index_shapeGrid button:hover {
  border-color: #aeb9c5;
  background: #eef2f6;
}
.index_appLight .index_transformActions button,
.index_appLight .index_alignGrid button,
.index_appLight .index_objectUtilityGrid button,
.index_appLight .index_adjustActions button {
  border-color: #cbd3dd;
  background: #e8edf2;
  color: #2d3742;
}
.index_appLight .index_viewToggle {
  border-bottom-color: #d4dbe3;
  color: #64707e;
}
.index_appLight .index_layer {
  background: #fff;
  border-color: #ccd4de;
}
.index_appLight .index_activeLayer {
  background: #dff5e8;
}
.index_appLight .index_center {
  background: var(--surface);
}
@media (max-width: 1100px) {
  .index_header {
    grid-template-columns: 156px minmax(0, 1fr) auto;
  }
  .index_tabs {
    grid-template-columns: repeat(6, minmax(56px, 1fr));
  }
  .index_workspace {
    position: relative;
    display: block;
  }
  .index_center {
    position: absolute;
    inset: 0;
  }
  .index_leftShell,
  .index_right {
    position: absolute;
    z-index: 80;
    top: 0;
    bottom: 0;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .42);
  }
  .index_leftShell {
    left: 0;
    width: min(340px, 72vw);
  }
  .index_leftShell.index_collapsed {
    width: 48px;
  }
  .index_right {
    right: 0;
    width: min(300px, 68vw);
  }
  .index_right.index_collapsed {
    width: 48px;
  }
  .index_sidebar {
    background: #242c36;
  }
  .index_panelContent {
    padding-bottom: 110px;
  }
  .index_toolRail button {
    min-height: 34px;
    height: 34px;
  }
  .index_collapseButton {
    min-width: 42px;
    min-height: 42px;
  }
  .index_commandDock {
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    overflow-x: auto;
  }
  .index_commandGroup button {
    min-width: 38px;
    width: 38px;
    height: 38px;
  }
  .index_objectActionBar button {
    min-height: 38px;
  }
  .index_handle,
  .index_cropHandle,
  .index_artboardHandle,
  .index_mockupHandle {
    min-width: 14px;
    min-height: 14px;
  }
  .index_rotateHandle {
    width: 30px;
    height: 30px;
    top: -51px;
  }
  .index_stage {
    padding: 48px;
  }
  .index_rightTabs button {
    min-height: 38px;
  }
  .index_quick,
  .index_primaryToolButton,
  .index_viewToggle {
    min-height: 42px;
  }
}
@media (max-width: 820px) {
  .index_headerActions {
    display: flex;
  }
  .index_tabs {
    grid-template-columns: repeat(3, 1fr);
  }
  .index_stage {
    padding: 30px;
  }
  .index_leftShell {
    width: min(320px, 82vw);
  }
  .index_right {
    width: min(300px, 78vw);
  }
}
.index_projectHome {
  height: 100vh;
  min-height: 0;
  box-sizing: border-box;
  background: #252d37;
  color: #edf2f7;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.index_projectHomeTopbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  border-bottom: 1px solid #3b4653;
  background: #20262e;
  position: sticky;
  top: 0;
  z-index: 20;
}
.index_projectHomeBrand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.index_projectHomeBrand strong {
  font-family: var(--font-family-display);
  font-size: 18px;
  letter-spacing: .8px;
}
.index_projectHomeBrand span {
  color: #7f8c9a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
}
.index_projectHomeTopActions button,
.index_projectDashboardActions button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #46515f;
  border-radius: 7px;
  background: #2a323c;
  color: #dfe6ee;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.index_projectHomeTopActions button:hover,
.index_projectDashboardActions button:hover {
  background: #35404c;
  color: #fff;
}
.index_projectDashboard {
  width: min(1380px, calc(100vw - 70px));
  margin: 0 auto;
  padding: 44px 0 64px;
}
.index_projectDashboardHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.index_projectDashboardHeading > div:first-child > span {
  display: block;
  margin-bottom: 6px;
  color: #7e8b99;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.index_projectDashboardHeading h1 {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 30px;
  line-height: 1;
}
.index_projectDashboardHeading p {
  margin: 8px 0 0;
  color: #9aa6b3;
  font-size: 10px;
}
.index_projectDashboardActions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.index_projectDashboardActions input {
  width: 220px;
  height: 34px;
  background: #1e252d;
  border-color: #46515f;
}
.index_projectGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.index_projectTile {
  min-width: 0;
  padding: 0;
  border: 1px solid #414c59;
  border-radius: 11px;
  background: #202831;
  color: #e9eef4;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease;
}
.index_projectTile:hover {
  transform: translateY(-2px);
  border-color: #69798b;
  background: #252f3a;
}
.index_projectTile:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}
.index_projectTileNew {
  min-height: 202px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-style: dashed;
  background: #232b34;
}
.index_projectTileNew > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #596777;
  border-radius: 50%;
  font-size: 24px;
  color: #c7d2dd;
}
.index_projectTileNew strong {
  font-size: 11px;
}
.index_projectTileNew small {
  color: #7f8c9a;
  font-size: 8px;
}
.index_projectThumb {
  height: 148px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #f3f5f7;
  background-image:
    linear-gradient(
      45deg,
      #e1e5e9 25%,
      transparent 25%),
    linear-gradient(
      -45deg,
      #e1e5e9 25%,
      transparent 25%),
    linear-gradient(
      45deg,
      transparent 75%,
      #e1e5e9 75%),
    linear-gradient(
      -45deg,
      transparent 75%,
      #e1e5e9 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
}
.index_projectThumb img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .12));
}
.index_projectThumbEmpty {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid #cbd2d9;
  border-radius: 12px;
  background: #fff;
  color: #7c8793;
  font-size: 15px;
  font-weight: 900;
}
.index_projectArtboardBadge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(22, 28, 35, .88);
  color: #f5f8fb;
  font-size: 8px;
  font-weight: 800;
}
.index_projectTileCopy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px 12px;
}
.index_projectTileCopy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.index_projectTileCopy span {
  color: #82909e;
  font-size: 7.5px;
}
.index_projectHomeMessage {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #68484b;
  border-radius: 7px;
  background: #35272a;
  color: #ffb1b1;
  font-size: 10px;
}
.index_projectHomeEmpty {
  margin-top: 18px;
  padding: 20px;
  border: 1px dashed #45515e;
  border-radius: 10px;
  color: #84919e;
  text-align: center;
  font-size: 10px;
}
.index_newProjectOverlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(10, 13, 17, .68);
  backdrop-filter: blur(6px);
}
.index_newProjectDialog {
  position: relative;
  width: min(980px, 96vw);
  max-height: min(720px, 92vh);
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
  overflow: hidden;
  border: 1px solid #586575;
  border-radius: 14px;
  background: #f8fafc;
  color: #1f2832;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .5);
}
.index_newProjectClose {
  position: absolute;
  z-index: 5;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid #c4ccd5;
  border-radius: 50%;
  background: #fff;
  color: #36414d;
  font-size: 20px;
  cursor: pointer;
}
.index_newProjectClose:hover {
  background: #eef2f5;
}
.index_newProjectChooser {
  min-width: 0;
  padding: 28px 28px 30px;
  overflow: auto;
  border-right: 1px solid #d8dee5;
}
.index_newProjectHeading > span,
.index_newProjectSettingsEyebrow {
  display: block;
  margin-bottom: 6px;
  color: #687686;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.2px;
}
.index_newProjectHeading h2,
.index_newProjectSettings h2 {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 25px;
}
.index_newProjectHeading p {
  max-width: 560px;
  margin: 8px 0 20px;
  color: #697583;
  font-size: 10px;
  line-height: 1.5;
}
.index_newProjectPresetGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.index_newProjectPresetGrid > button {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 15px;
  border: 1px solid #d2d8df;
  border-radius: 9px;
  background: #eef2f6;
  color: #27323d;
  text-align: left;
  cursor: pointer;
}
.index_newProjectPresetGrid > button:hover {
  border-color: #8f9caa;
  background: #e8edf2;
}
.index_newProjectPresetGrid > button strong {
  font-size: 11px;
}
.index_newProjectPresetGrid > button span {
  color: #536170;
  font-size: 9px;
  font-weight: 800;
}
.index_newProjectPresetGrid > button small {
  color: #7d8996;
  font-size: 7.5px;
}
.index_newProjectPresetGrid .index_newProjectPresetActive {
  border: 2px solid #148a4a;
  background: #e7f5ed;
}
.index_newProjectPresetGrid .index_newProjectCustom {
  border-style: dashed;
}
.index_newProjectSettings {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 28px 24px 24px;
  background: #fff;
}
.index_newProjectSettings > label,
.index_newProjectSizeRow label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #5b6876;
  font-size: 8px;
  font-weight: 800;
}
.index_newProjectSettings input {
  height: 36px;
  border-color: #ccd4dc;
  background: #f8fafc;
  color: #1f2933;
}
.index_newProjectSizeRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.index_newProjectUnitRow,
.index_newProjectOrientation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #596675;
  font-size: 8px;
  font-weight: 800;
}
.index_newProjectUnitRow > div,
.index_newProjectOrientation > div {
  display: flex;
  gap: 5px;
}
.index_newProjectUnitRow button,
.index_newProjectOrientation button {
  height: 31px;
  padding: 0 10px;
  border: 1px solid #ccd4dd;
  border-radius: 6px;
  background: #f1f4f7;
  color: #556270;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}
.index_newProjectUnitRow .index_newProjectUnitActive,
.index_newProjectOrientation .index_newProjectUnitActive {
  border-color: #148a4a;
  background: #dff3e8;
  color: #126b3c;
}
.index_newProjectInfoGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.index_newProjectInfoGrid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border: 1px solid #d5dce3;
  border-radius: 7px;
  background: #f6f8fa;
}
.index_newProjectInfoGrid span {
  color: #7b8794;
  font-size: 7px;
  font-weight: 800;
}
.index_newProjectInfoGrid strong {
  font-size: 10px;
}
.index_newProjectInfoGrid small {
  color: #87929e;
  font-size: 7px;
}
.index_newProjectPixels {
  margin-top: auto;
  padding: 10px 11px;
  border: 1px solid #d2d9e0;
  border-radius: 7px;
  background: #f7f9fb;
  color: #26313b;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 800;
}
.index_newProjectPixels span {
  color: #7a8692;
  font-family: inherit;
  font-weight: 600;
}
.index_newProjectCreate {
  width: 100%;
  min-height: 42px !important;
  background: #11171d !important;
  color: #fff !important;
  border-color: #11171d !important;
}
.index_appLight .index_projectHome {
  background: #edf1f5;
  color: #25303a;
}
.index_appLight .index_projectHomeTopbar {
  border-bottom-color: #d2d8df;
  background: #fafbfc;
}
.index_appLight .index_projectHomeTopActions button,
.index_appLight .index_projectDashboardActions button {
  border-color: #cbd3dc;
  background: #fff;
  color: #3f4b58;
}
.index_appLight .index_projectTile {
  border-color: #d0d7df;
  background: #fff;
  color: #27313c;
}
.index_appLight .index_projectTile:hover {
  border-color: #aeb9c5;
  background: #f7f9fb;
}
.index_appLight .index_projectTileNew {
  background: #f7f9fb;
}
.index_appLight .index_projectDashboardHeading p,
.index_appLight .index_projectTileCopy span {
  color: #768392;
}
.index_appLight .index_projectDashboardActions input {
  background: #fff;
  border-color: #cbd3dc;
  color: #25303a;
}
@media (max-width: 760px) {
  .index_projectDashboard {
    width: min(94vw, 680px);
    padding-top: 28px;
  }
  .index_projectDashboardHeading {
    align-items: flex-start;
    flex-direction: column;
  }
  .index_projectDashboardActions {
    width: 100%;
  }
  .index_projectDashboardActions input {
    flex: 1;
    width: auto;
  }
  .index_projectGrid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
  .index_newProjectDialog {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .index_newProjectChooser {
    border-right: 0;
    border-bottom: 1px solid #d8dee5;
  }
  .index_newProjectSettings {
    min-height: 450px;
  }
  .index_newProjectPresetGrid {
    grid-template-columns: 1fr 1fr;
  }
}
.index_editorCloseProjectButton {
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin-left: 7px;
  border: 1px solid #46515f;
  border-radius: 50%;
  background: #252d37;
  color: #eef3f7;
  font-size: 23px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background .15s,
    border-color .15s,
    transform .15s;
}
.index_editorCloseProjectButton:hover {
  background: #333d49;
  border-color: #657282;
  transform: scale(1.03);
}
.index_editorCloseProjectButton:disabled {
  opacity: .45;
  cursor: wait;
  transform: none;
}
.index_appLight .index_editorCloseProjectButton {
  border-color: #cbd3dd;
  background: #fff;
  color: #3f4b59;
}
.index_appLight .index_editorCloseProjectButton:hover {
  background: #f2f5f8;
  border-color: #aeb9c5;
}
.index_projectHomeBrandButton {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.index_projectHomeNav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 16px;
}
.index_projectHomeNav button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #8f9ba8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15px;
  cursor: pointer;
}
.index_projectHomeNav button:hover {
  background: #2d3641;
  color: #fff;
}
.index_projectHomeNav .index_projectHomeNavActive {
  border-color: #46515f;
  background: #2a323c;
  color: #fff;
}
.index_homeDashboard {
  width: min(1460px, calc(100vw - 72px));
  margin: 0 auto;
  padding: 30px 0 72px;
}
.index_homeHero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, .8fr);
  gap: 24px;
  min-height: 300px;
  padding: 38px;
  border: 1px solid #3f4b57;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      #172029 0%,
      #202b35 58%,
      #18372b 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
}
.index_homeHero:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .025) 1px,
      transparent 1px);
  background-size: 26px 26px;
  mask-image:
    linear-gradient(
      to right,
      #000 20%,
      transparent 82%);
}
.index_homeHero:after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  right: -150px;
  top: -170px;
  background:
    radial-gradient(
      circle,
      rgba(72, 214, 132, .18),
      rgba(72, 214, 132, 0) 70%);
  pointer-events: none;
}
.index_homeHeroCopy {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 720px;
}
.index_homeEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(133, 218, 169, .24);
  border-radius: 999px;
  background: rgba(33, 91, 58, .22);
  color: #8ee0b0;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.5px;
}
.index_homeHero h1 {
  margin: 0;
  color: #f7fbff;
  font-family: var(--font-family-display);
  font-size: 46px;
  line-height: .98;
  letter-spacing: -1.1px;
}
.index_homeHero p {
  max-width: 650px;
  margin: 18px 0 0;
  color: #aebbc7;
  font-size: 12px;
  line-height: 1.65;
}
.index_homeHeroActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}
.index_homeHeroActions button {
  height: 44px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.index_homePrimaryButton {
  border: 1px solid #169154;
  background: #169154;
  color: #fff;
  box-shadow: 0 9px 24px rgba(18, 129, 74, .26);
}
.index_homePrimaryButton:hover {
  background: #1da05f;
}
.index_homeSecondaryButton {
  border: 1px solid #536171;
  background: #2a3541;
  color: #eef4fa;
}
.index_homeSecondaryButton:hover {
  background: #34414e;
}
.index_homeHeroFacts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-self: stretch;
}
.index_homeHeroFacts > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 13px;
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(10px);
}
.index_homeHeroFacts span {
  color: #81909e;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1px;
}
.index_homeHeroFacts strong {
  margin-top: 7px;
  color: #f4f8fb;
  font-family: var(--font-family-display);
  font-size: 18px;
}
.index_homeHeroFacts small {
  margin-top: 3px;
  color: #8493a1;
  font-size: 7.5px;
}
.index_homeSectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 34px 0 14px;
}
.index_homeSectionHead > div > span {
  display: block;
  margin-bottom: 5px;
  color: #7e8b99;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.35px;
}
.index_homeSectionHead h2 {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 23px;
  line-height: 1;
}
.index_homeSectionHead > button {
  height: 32px;
  padding: 0 11px;
  border: 1px solid #46515f;
  border-radius: 7px;
  background: #28323c;
  color: #dbe4ec;
  font-size: 8px;
  font-weight: 900;
  cursor: pointer;
}
.index_homeSectionHead > button:hover {
  background: #34404d;
}
.index_homeQuickGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.index_homeQuickCard {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 98px;
  padding: 15px;
  border: 1px solid #3d4955;
  border-radius: 13px;
  background: #222b34;
  color: #ecf2f7;
  text-align: left;
  cursor: pointer;
  transition:
    transform .13s ease,
    border-color .13s ease,
    background .13s ease,
    box-shadow .13s ease;
}
.index_homeQuickCard:hover {
  transform: translateY(-2px);
  border-color: #687989;
  background: #293440;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.index_homeQuickCard > b {
  color: #7f8e9c;
  font-size: 17px;
}
.index_homeQuickIcon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #4d5b68;
  border-radius: 12px;
  background: #1a222a;
  color: #8ee0b0;
  font-size: 19px;
  font-weight: 800;
}
.index_homeQuickCard div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.index_homeQuickCard strong {
  font-size: 10.5px;
}
.index_homeQuickCard small {
  color: #85939f;
  font-size: 8px;
  line-height: 1.4;
}
.index_homePresetRow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.index_homePresetRow button {
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 3px;
  padding: 13px;
  border: 1px solid #3f4b57;
  border-radius: 11px;
  background: #222b34;
  color: #eaf0f5;
  text-align: left;
  cursor: pointer;
}
.index_homePresetRow button:hover {
  border-color: #169154;
  background: #27343b;
}
.index_homePresetRow strong {
  font-size: 9.5px;
}
.index_homePresetRow span {
  color: #8ee0b0;
  font-family: var(--font-family-mono);
  font-size: 8px;
  font-weight: 800;
}
.index_homePresetRow small {
  color: #7f8c98;
  font-size: 7px;
}
.index_homeRecentGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.index_homeRecentGrid .index_projectThumb {
  height: 178px;
}
.index_homeRecentGrid .index_projectTileNew {
  min-height: 235px;
}
.index_homeLoadingCard {
  min-height: 235px;
  display: grid;
  place-items: center;
  border: 1px dashed #45515e;
  border-radius: 12px;
  color: #8694a0;
  font-size: 9px;
}
.index_appLight .index_projectHomeNav button {
  color: #697684;
}
.index_appLight .index_projectHomeNav button:hover {
  background: #edf1f5;
  color: #25303a;
}
.index_appLight .index_projectHomeNav .index_projectHomeNavActive {
  border-color: #cad2db;
  background: #eef2f6;
  color: #202a34;
}
.index_appLight .index_homeHero {
  border-color: #d3dae2;
  background:
    linear-gradient(
      135deg,
      #172029 0%,
      #26343e 56%,
      #17452f 100%);
  box-shadow: 0 20px 55px rgba(31, 42, 53, .12);
}
.index_appLight .index_homeQuickCard {
  border-color: #d1d8df;
  background: #fff;
  color: #26313b;
  box-shadow: 0 5px 16px rgba(27, 42, 57, .045);
}
.index_appLight .index_homeQuickCard:hover {
  border-color: #aab6c1;
  background: #f9fbfc;
  box-shadow: 0 12px 28px rgba(27, 42, 57, .09);
}
.index_appLight .index_homeQuickIcon {
  border-color: #d5dce3;
  background: #f0f4f7;
  color: #148a4a;
}
.index_appLight .index_homeQuickCard > b {
  color: #8a96a2;
}
.index_appLight .index_homeQuickCard small {
  color: #758290;
}
.index_appLight .index_homePresetRow button {
  border-color: #d2d9e0;
  background: #fff;
  color: #27313c;
}
.index_appLight .index_homePresetRow button:hover {
  border-color: #148a4a;
  background: #f3faf6;
}
.index_appLight .index_homePresetRow span {
  color: #148a4a;
}
.index_appLight .index_homePresetRow small {
  color: #7b8793;
}
.index_appLight .index_homeSectionHead > button {
  border-color: #cbd3dc;
  background: #fff;
  color: #3f4b58;
}
.index_appLight .index_homeSectionHead > button:hover {
  background: #f4f7f9;
}
.index_appLight .index_homeLoadingCard {
  border-color: #cbd3dc;
  color: #74818e;
  background: #f8fafb;
}
@media (max-width: 1050px) {
  .index_homeHero {
    grid-template-columns: 1fr;
  }
  .index_homeHeroFacts {
    grid-template-columns: repeat(4, 1fr);
  }
  .index_homeQuickGrid {
    grid-template-columns: 1fr 1fr;
  }
  .index_homePresetRow {
    grid-template-columns: repeat(3, 1fr);
  }
  .index_homeRecentGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .index_projectHomeNav {
    display: none;
  }
}
@media (max-width: 700px) {
  .index_homeDashboard {
    width: min(94vw, 680px);
    padding-top: 18px;
  }
  .index_homeHero {
    padding: 26px 22px;
  }
  .index_homeHero h1 {
    font-size: 34px;
  }
  .index_homeHeroFacts {
    grid-template-columns: 1fr 1fr;
  }
  .index_homeQuickGrid,
  .index_homeRecentGrid {
    grid-template-columns: 1fr;
  }
  .index_homePresetRow {
    grid-template-columns: 1fr 1fr;
  }
  .index_projectHomeTopbar {
    padding: 0 18px;
  }
  .index_homeSectionHead {
    align-items: flex-start;
  }
  .index_homeHeroActions {
    flex-wrap: wrap;
  }
}
.index_mockupSurfaceRoot {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}
.index_mockupSurfaceClip {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.index_mockupSurfaceMasked {
  mask-mode: alpha;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.index_mockupSurfaceArtwork {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transform-style: preserve-3d;
}
.index_mockupSurfaceFlow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
.index_mockupPrintStack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.index_mockupPrintBase {
  position: absolute;
  inset: 0;
  opacity: .94;
  pointer-events: none;
}
.index_mockupPrintFabric {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  filter: saturate(.94) contrast(1.04);
}
.index_mockupSurfaceSlice {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}
.index_mockupSurfaceSlice .index_mockupComposition {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.index_mockupSurfacePlane {
  position: absolute;
  inset: 0;
  pointer-events: none;
  backface-visibility: hidden;
}
.index_mockupSurfaceFoldPlane {
  z-index: 2;
  will-change: transform;
}
.index_mockupSurfaceShadow,
.index_mockupSurfaceHighlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.index_mockupSurfaceShadow {
  z-index: 8;
  mix-blend-mode: multiply;
}
.index_mockupSurfaceHighlight {
  z-index: 9;
  mix-blend-mode: screen;
}
.index_mockupArtworkSelection {
  z-index: 24;
  background: transparent;
}
.index_mockupStageArtwork {
  z-index: 25;
}
.index_contextMenuBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: transparent;
}
.index_contextMenu {
  position: fixed;
  z-index: 1201;
  min-width: 220px;
  max-width: 280px;
  padding: 7px;
  border: 1px solid #cfd6df;
  border-radius: 10px;
  background: #fff;
  color: #2f3944;
  box-shadow: 0 18px 46px rgba(20, 30, 40, .24);
  font-size: 10px;
  overflow: hidden;
}
.index_contextMenuTitle {
  padding: 7px 9px 8px;
  color: #7b8794;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .65px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index_contextMenu button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #303b46;
  font: 700 10px var(--font-family-sans);
  text-align: left;
  cursor: pointer;
}
.index_contextMenu button:hover {
  background: #eef3f7;
}
.index_contextMenu button:disabled {
  opacity: .36;
  cursor: not-allowed;
  background: transparent;
}
.index_contextMenu button span {
  color: #8a96a2;
  font-size: 8px;
  font-weight: 700;
}
.index_contextMenuRule {
  height: 1px;
  margin: 5px 2px;
  background: #e1e6eb;
}
.index_contextMenu .index_contextMenuDanger {
  color: #b52e3c;
}
.index_contextMenu .index_contextMenuDanger:hover {
  background: #fff0f2;
}
.index_appDark .index_contextMenu {
  border-color: #4b5663;
  background: #252d37;
  color: #e8edf2;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
}
.index_appDark .index_contextMenuTitle {
  color: #8f9ba8;
}
.index_appDark .index_contextMenu button {
  color: #e0e6ec;
}
.index_appDark .index_contextMenu button:hover {
  background: #323c47;
}
.index_appDark .index_contextMenuRule {
  background: #3b4651;
}
.index_appDark .index_contextMenu .index_contextMenuDanger {
  color: #ff8895;
}
.index_appDark .index_contextMenu .index_contextMenuDanger:hover {
  background: #402c31;
}
.index_mockupMeshCanvas {
  position: absolute;
  inset: 0;
  z-index: 18;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}
.index_artworkBox.index_eraserMode,
.index_artworkBox.index_eraserMode * {
  cursor: var(--precision-eraser-cursor,none) !important;
}
.index_artworkBox.index_eraserMode .index_eraserCursor {
  will-change: transform;
  contain: layout style paint;
}
.index_artworkBox.index_eraserMode .index_eraserCursor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 1px #fff;
  pointer-events: none;
}
.index_upscaleSecretLabel {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-secondary,#bac0cd);
  font-size: 12px;
  margin: 10px 0;
}
.index_upscaleReview {
  margin-top: 12px;
  border: 1px solid #515975;
  border-radius: 8px;
  padding: 11px;
  background: rgba(31, 37, 51, .9);
}
.index_upscaleReview > b {
  font-size: 12px;
  color: #fff;
}
.index_upscaleCompare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.index_upscaleCompare > div {
  min-width: 0;
  background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 50%/15px 15px;
  min-height: 128px;
  border-radius: 5px;
  border: 1px solid #566070;
  overflow: hidden;
  position: relative;
}
.index_upscaleCompare small {
  display: block;
  color: #fff;
  background: rgba(24, 29, 39, .93);
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.3;
}
.index_upscaleCompare img {
  display: block;
  width: 100%;
  max-height: 230px;
  object-fit: contain;
}
.index_upscaleReviewActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.index_upscaleReviewActions button {
  flex: 1 1 auto;
}
.index_restoreSliders {
  display: grid;
  gap: 7px;
  margin: 9px 0;
}
.index_restoreSliders label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: #c6d0de;
  font-size: 12px;
}
.index_restoreSliders label b {
  font-weight: 700;
  color: #e7ecff;
}
.index_restoreSliders input {
  flex: 0 0 100%;
  width: 100%;
  accent-color: #8751ed;
}
.index_restoreImageFrame {
  position: relative;
  height: 160px;
  overflow: hidden;
}
.index_upscaleCompare .index_restoreImageFrame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 230px;
  object-fit: contain;
}
.index_upscaleCompareZoom .index_restoreImageFrame img {
  position: absolute;
  max-width: none;
  max-height: none;
  height: auto;
  object-fit: initial;
}
.index_upscaleReview .index_halftoneStyles {
  margin-top: 10px;
}
.index_vectorWarning {
  padding: 8px 9px;
  margin: 9px 0;
  background: rgba(242, 155, 46, .10);
  border: 1px solid rgba(242, 155, 46, .40);
  border-radius: 6px;
  color: #ffdc9e;
  font-size: 11px;
  line-height: 1.45;
}
.index_leftShell > .index_panelContent,
.index_right:not(.index_collapsed),
.index_right .index_panelContent {
  background: #111722;
}
.index_leftShell .index_drawerHeader {
  background: #171d29;
  border-bottom: 1px solid #303a4a;
  padding-block: 18px;
}
.index_leftShell .index_drawerHeader b {
  color: #f7f9fd;
  font-size: 19px;
  font-weight: 730;
  letter-spacing: -.035em;
}
.index_leftShell .index_drawerHeader span {
  color: #bac7d8;
  font-size: 13px;
  line-height: 1.45;
}
.index_leftShell .index_drawerHeader button {
  color: #cfdaeb;
}
.index_prepToolSection {
  padding: 17px 14px 26px !important;
  color: #e6edf7;
}
.index_prepPanelLabel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px 11px;
  font-size: 11px;
  letter-spacing: .09em;
  font-weight: 800;
  color: #b9c8dd;
}
.index_prepPanelLabel small {
  font-size: 11px;
  letter-spacing: .045em;
  color: #a9bdd7;
  font-weight: 650;
}
.index_prepToolSection .index_projectMessage {
  background: #1a2c49;
  border: 1px solid #345781;
  color: #e1efff;
  border-radius: 9px;
  padding: 11px 13px;
  margin: 0 0 13px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: none;
  overflow-wrap: anywhere;
}
.index_prepToolSection .index_toolGroup {
  border: 1px solid #344155;
  border-radius: 10px;
  background: #1a2230;
  margin: 0 0 8px;
  padding: 0;
  box-shadow: none;
  overflow: hidden;
}
.index_prepToolSection .index_toolGroupHead {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px;
  min-height: 51px;
  background: #1a2230;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.index_prepToolSection .index_toolGroupHead:hover {
  background: #222d3f;
}
.index_prepToolSection .index_toolGroupHead > b {
  flex: 1;
  min-width: 0;
  color: #f2f6fc;
  font-family: inherit;
  font-size: 15px;
  font-weight: 730;
  line-height: 1.36;
  letter-spacing: -.015em;
}
.index_prepToolSection .index_toolGroupHead > code {
  flex: 0 1 auto;
  max-width: 33%;
  font-family: inherit;
  font-weight: 650;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: normal;
  color: #b6c8e2;
  text-align: right;
}
.index_prepToolSection .index_toolGroupHead::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #bdd0ec;
  border-bottom: 2px solid #bdd0ec;
  transform: rotate(45deg);
  transition: transform .12s ease;
  margin: 0 3px 4px 1px;
  flex: none;
}
.index_prepToolSection .index_toolGroupExpanded {
  border-color: #4d80da;
  box-shadow: 0 0 0 1px rgba(80, 134, 231, .20);
}
.index_prepToolSection .index_toolGroupExpanded .index_toolGroupHead {
  background: #222c3d;
  border-bottom-color: #344155;
}
.index_prepToolSection .index_toolGroupExpanded .index_toolGroupHead::after {
  transform: rotate(225deg);
  margin-top: 7px;
}
.index_prepToolSection .index_toolGroupCollapsed > :not(.index_toolGroupHead) {
  display: none !important;
}
.index_prepToolSection .index_toolGroupExpanded > :not(.index_toolGroupHead) {
  margin-left: 13px;
  margin-right: 13px;
}
.index_prepToolSection .index_toolGroupExpanded > :nth-child(2) {
  margin-top: 13px;
}
.index_prepToolSection .index_toolGroupExpanded > :last-child {
  margin-bottom: 14px;
}
.index_prepToolSection .index_mockupNote,
.index_prepToolSection .index_vectorWarning,
.index_prepToolSection .index_upscaleSecretLabel,
.index_prepToolSection .index_compactGrid label,
.index_prepToolSection .index_restoreSliders label,
.index_prepToolSection label,
.index_prepToolSection p:not(.index_projectMessage) {
  font-size: 13px;
  line-height: 1.52;
  color: #cbd7e7;
}
.index_prepToolSection .index_mockupNote {
  margin-block: 9px 13px;
}
.index_prepToolSection .index_restoreSliders label b,
.index_prepToolSection .index_upscaleReview > b {
  color: #f3f7ff;
  font-size: 13px;
}
.index_prepToolSection .index_halftoneStyles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}
.index_prepToolSection .index_halftoneStyles button,
.index_prepToolSection .index_quick,
.index_prepToolSection .index_adjustActions button,
.index_right .index_quick,
.index_right .index_transformActions button,
.index_right .index_alignGrid button,
.index_right .index_objectUtilityGrid button,
.index_right .index_adjustActions button,
.index_right .index_halftoneStyles button {
  min-height: 42px;
  padding: 9px 10px;
  background: #2b3649;
  color: #f1f6ff;
  border: 1px solid #576780;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 670;
  line-height: 1.35;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.index_prepToolSection .index_quick {
  display: block;
  width: 100%;
  text-align: center;
  margin-block: 7px;
}
.index_prepToolSection .index_halftoneStyles button:hover:not(:disabled),
.index_prepToolSection .index_quick:hover:not(:disabled),
.index_right .index_quick:hover:not(:disabled) {
  background: #374660;
  color: #fff;
  border-color: #8ca2c5;
}
.index_prepToolSection .index_halftoneStyles .index_miniActive,
.index_prepToolSection .index_quickActive,
.index_right .index_quickActive,
.index_right .index_halftoneStyles .index_miniActive {
  background: #2563eb;
  color: #fff;
  border-color: #82aaff;
  box-shadow: none;
}
.index_prepToolSection .index_primaryToolButton,
.index_right .index_primaryToolButton,
.index_right .index_adjustActions .index_applyAdjust {
  background: #2563eb;
  color: #fff;
  border: 1px solid #3473fa;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  min-height: 44px;
  padding: 11px 13px;
  box-shadow: none;
  text-shadow: none;
}
.index_prepToolSection .index_primaryToolButton:hover:not(:disabled),
.index_right .index_primaryToolButton:hover:not(:disabled) {
  background: #1d53cb;
}
.index_prepToolSection button:disabled,
.index_right button:disabled {
  opacity: 1 !important;
  cursor: not-allowed;
}
.index_prepToolSection .index_quick:disabled,
.index_prepToolSection .index_halftoneStyles button:disabled,
.index_right .index_quick:disabled {
  background: #222b3a;
  border-color: #414e62;
  color: #9fadbf;
}
.index_prepToolSection .index_primaryToolButton:disabled,
.index_right .index_primaryToolButton:disabled {
  background: #324d7e;
  border-color: #506891;
  color: #c3d7fb;
}
.index_prepToolSection input:not([type=range]):not([type=color]),
.index_prepToolSection select {
  background: #202a3a;
  color: #f4f8ff;
  border: 1px solid #556682;
  border-radius: 8px;
  font-size: 14px;
  min-height: 39px;
}
.index_prepToolSection input[type=range] {
  accent-color: #6191f7;
}
.index_prepToolSection .index_vectorWarning {
  color: #ffe6b2;
  background: #422f19;
  border: 1px solid #816035;
  border-radius: 8px;
}
.index_prepToolSection button:focus-visible,
.index_prepToolSection .index_toolGroupHead:focus-visible,
.index_right button:focus-visible {
  outline: 3px solid #8bb6ff;
  outline-offset: 2px;
}
.index_right .index_panelContent > section {
  background: #1a2230;
  border: 1px solid #344155;
  margin: 10px 9px 12px;
  padding: 14px 12px;
  border-radius: 10px;
  box-shadow: none;
}
.index_right .index_panelContent > section > h2,
.index_right .index_sectionHeading > h2 {
  color: #eef4ff;
  font-size: 15px;
}
.index_rightTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 9px 8px;
  background: #161c28;
  border-bottom: 1px solid #344155;
}
.index_rightTabs button {
  min-height: 37px;
  border: 1px solid transparent;
  background: transparent;
  color: #bfcde0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 3px;
}
.index_rightTabs button:hover {
  background: #253146;
  color: #fff;
}
.index_rightTabs .index_rightTabActive {
  background: #1d3766;
  color: #f4f8ff;
  border-color: #457ce1;
  box-shadow: inset 0 -2px #5b97ff;
}
.index_appLight .index_leftShell > .index_panelContent,
.index_appLight .index_right:not(.index_collapsed),
.index_appLight .index_right .index_panelContent {
  background: #f2f5fa;
}
.index_appLight .index_leftShell .index_drawerHeader {
  background: #fff;
  border-bottom-color: #e0e6f0;
}
.index_appLight .index_leftShell .index_drawerHeader b {
  color: #142033;
}
.index_appLight .index_leftShell .index_drawerHeader span {
  color: #4b5e77;
}
.index_appLight .index_leftShell .index_drawerHeader button {
  color: #43536a;
}
.index_appLight .index_prepToolSection {
  color: #172439;
}
.index_appLight .index_prepPanelLabel {
  color: #425877;
}
.index_appLight .index_prepPanelLabel small {
  color: #526581;
}
.index_appLight .index_prepToolSection .index_projectMessage {
  background: #e9f2ff;
  border-color: #b4cff8;
  color: #1b447a;
}
.index_appLight .index_prepToolSection .index_toolGroup {
  background: #fff;
  border-color: #dae2ef;
  box-shadow: 0 2px 7px rgba(30, 55, 97, .045);
}
.index_appLight .index_prepToolSection .index_toolGroupHead {
  background: #fff;
}
.index_appLight .index_prepToolSection .index_toolGroupHead:hover {
  background: #f6f9fe;
}
.index_appLight .index_prepToolSection .index_toolGroupHead > b {
  color: #17253d;
}
.index_appLight .index_prepToolSection .index_toolGroupHead > code {
  color: #506581;
}
.index_appLight .index_prepToolSection .index_toolGroupHead::after {
  border-color: #5c718e;
}
.index_appLight .index_prepToolSection .index_toolGroupExpanded {
  border-color: #699aee;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .07);
}
.index_appLight .index_prepToolSection .index_toolGroupExpanded .index_toolGroupHead {
  background: #f3f7ff;
  border-bottom-color: #dce6f5;
}
.index_appLight .index_prepToolSection .index_mockupNote,
.index_appLight .index_prepToolSection .index_vectorWarning,
.index_appLight .index_prepToolSection .index_upscaleSecretLabel,
.index_appLight .index_prepToolSection .index_compactGrid label,
.index_appLight .index_prepToolSection .index_restoreSliders label,
.index_appLight .index_prepToolSection label,
.index_appLight .index_prepToolSection p:not(.index_projectMessage) {
  color: #41516b;
}
.index_appLight .index_prepToolSection .index_restoreSliders label b,
.index_appLight .index_prepToolSection .index_upscaleReview > b {
  color: #1f2f4a;
}
.index_appLight .index_prepToolSection .index_quick,
.index_appLight .index_prepToolSection .index_halftoneStyles button,
.index_appLight .index_prepToolSection .index_adjustActions button,
.index_appLight .index_right .index_quick,
.index_appLight .index_right .index_transformActions button,
.index_appLight .index_right .index_alignGrid button,
.index_appLight .index_right .index_objectUtilityGrid button,
.index_appLight .index_right .index_adjustActions button,
.index_appLight .index_right .index_halftoneStyles button {
  background: #f8faff;
  color: #1e3354;
  border-color: #b8c8df;
}
.index_appLight .index_prepToolSection .index_quick:hover:not(:disabled),
.index_appLight .index_prepToolSection .index_halftoneStyles button:hover:not(:disabled),
.index_appLight .index_right .index_quick:hover:not(:disabled) {
  background: #ebf2ff;
  color: #102b55;
  border-color: #7798d1;
}
.index_appLight .index_prepToolSection .index_halftoneStyles .index_miniActive,
.index_appLight .index_prepToolSection .index_quickActive,
.index_appLight .index_right .index_quickActive,
.index_appLight .index_right .index_halftoneStyles .index_miniActive {
  background: #245fdb;
  color: #fff;
  border-color: #1c4ba5;
}
.index_appLight .index_prepToolSection .index_primaryToolButton,
.index_appLight .index_right .index_primaryToolButton,
.index_appLight .index_right .index_adjustActions .index_applyAdjust {
  background: #2563eb;
  border-color: #1e55d4;
  color: #fff;
}
.index_appLight .index_prepToolSection .index_primaryToolButton:hover:not(:disabled),
.index_appLight .index_right .index_primaryToolButton:hover:not(:disabled) {
  background: #1d53c4;
}
.index_appLight .index_prepToolSection .index_quick:disabled,
.index_appLight .index_prepToolSection .index_halftoneStyles button:disabled,
.index_appLight .index_right .index_quick:disabled {
  background: #eef2f8;
  border-color: #d1daea;
  color: #5b6b85;
}
.index_appLight .index_prepToolSection .index_primaryToolButton:disabled,
.index_appLight .index_right .index_primaryToolButton:disabled {
  background: #b5c9ef;
  border-color: #a8bfeb;
  color: #304a78;
}
.index_appLight .index_prepToolSection input:not([type=range]):not([type=color]),
.index_appLight .index_prepToolSection select {
  background: #fff;
  color: #152a49;
  border-color: #aebed6;
}
.index_appLight .index_prepToolSection input[type=range] {
  accent-color: #2563eb;
}
.index_appLight .index_prepToolSection .index_vectorWarning {
  color: #694615;
  background: #fff6e7;
  border-color: #e9cda2;
}
.index_appLight .index_right .index_panelContent > section {
  background: #fff;
  border-color: #dae2ef;
  box-shadow: 0 2px 7px rgba(30, 55, 97, .045);
}
.index_appLight .index_right .index_panelContent > section > h2,
.index_appLight .index_right .index_sectionHeading > h2 {
  color: #192943;
}
.index_appLight .index_rightTabs {
  background: #fff;
  border-bottom-color: #dce4f0;
}
.index_appLight .index_rightTabs button {
  color: #425772;
}
.index_appLight .index_rightTabs button:hover {
  background: #eff4fc;
  color: #162840;
}
.index_appLight .index_rightTabs .index_rightTabActive {
  background: #eaf1ff;
  border-color: #acc5ee;
  color: #194b9f;
  box-shadow: inset 0 -2px #2563eb;
}
@media (max-width: 820px) {
  .index_prepToolSection .index_toolGroupHead > b {
    font-size: 14px;
  }
  .index_prepToolSection .index_toolGroupHead > code {
    font-size: 11px;
  }
}
.index_prepToolSection .index_toolGroupExpanded > :not(.index_toolGroupHead) {
  box-sizing: border-box;
  min-width: 0;
  max-width: calc(100% - 26px);
}
.index_prepToolSection .index_toolGroupExpanded > button,
.index_prepToolSection .index_toolGroupExpanded > .index_quick,
.index_prepToolSection .index_toolGroupExpanded > .index_primaryToolButton {
  box-sizing: border-box;
  width: calc(100% - 26px) !important;
  min-width: 0;
  max-width: calc(100% - 26px);
  margin-left: 13px;
  margin-right: 13px;
}
.index_prepToolSection .index_toolGroupExpanded input,
.index_prepToolSection .index_toolGroupExpanded select,
.index_prepToolSection .index_toolGroupExpanded textarea,
.index_prepToolSection .index_toolGroupExpanded .index_halftoneStyles button {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
.index_prepToolSection .index_toolGroupExpanded .index_halftoneStyles,
.index_prepToolSection .index_toolGroupExpanded .index_compactGrid,
.index_prepToolSection .index_toolGroupExpanded .index_restoreSliders {
  min-width: 0;
  max-width: calc(100% - 26px);
}
@media (min-width: 1101px) {
  .index_workspace:not(.index_rightClosed) {
    grid-template-columns: minmax(620px, 1fr) 304px;
  }
}
@media (max-width: 1100px) {
  .index_right:not(.index_collapsed) {
    width: min(320px, 84vw);
  }
}
@media (max-width: 820px) {
  .index_right:not(.index_collapsed) {
    width: min(320px, 88vw);
  }
}
.index_right,
.index_right .index_panelContent,
.index_right .index_panelContent > section {
  min-width: 0;
}
.index_right .index_panelContent {
  padding-bottom: 48px;
}
.index_right > .index_collapseRight:not(.index_collapsed) {
  position: absolute;
  top: 10px;
  right: 12px;
  left: auto;
  float: none;
  z-index: 37;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: 1px solid #52617a;
  border-radius: 7px;
  background: #253348;
  color: #eef4ff;
  line-height: 26px;
}
.index_right.index_collapsed > .index_collapseRight {
  left: 7px;
  right: auto;
  top: 10px;
}
.index_rightTabs {
  position: sticky;
  top: 0;
  z-index: 21;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #3d4c63;
  background: #161f2d;
}
.index_rightTabs::before {
  content: "INSPECTOR";
  display: flex;
  align-items: center;
  grid-column: 1/-1;
  height: 30px;
  padding: 0 7px;
  margin-right: 39px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .095em;
  color: #aabed9;
}
.index_rightTabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
  min-height: 35px;
  padding: 8px 2px;
  margin: 0;
  border: 1px solid #394b64;
  border-radius: 7px;
  background: #263248;
  color: #e5edfa;
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: none;
}
.index_rightTabs button:hover {
  background: #334661;
  color: #fff;
  border-color: #6d8ab4;
}
.index_rightTabs .index_rightTabActive {
  color: #f7fbff;
  background: #244a8d;
  border-color: #6fa2ff;
  box-shadow: inset 0 -2px #82b5ff;
}
.index_right .index_panelContent > section {
  box-sizing: border-box;
  min-width: 0;
  margin: 11px 10px 14px;
  padding: 17px 15px 18px;
  border-radius: 10px;
  border: 1px solid #36475e;
  background: #1a2535;
  box-shadow: none;
}
.index_right .index_panelContent > section * {
  box-sizing: border-box;
}
.index_right .index_sectionHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin: 0 0 18px;
}
.index_right .index_sectionHeading > h2,
.index_right .index_panelContent > section > h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 730;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-transform: none;
  color: #f0f5ff;
}
.index_right .index_sectionHeading > em {
  flex: 0 0 auto;
  max-width: 42%;
  padding: 6px 8px;
  border: 1px solid #435978;
  border-radius: 6px;
  background: #253650;
  color: #c7ddff;
  font-family: inherit;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index_right .index_sizeGrid,
.index_right .index_dimensionGrid,
.index_right .index_transformGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  min-width: 0;
}
.index_right .index_sizeGrid label,
.index_right .index_dimensionGrid label,
.index_right .index_transformGrid label,
.index_right .index_layerNameRow {
  min-width: 0;
  color: #c4d1e3;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 680;
}
.index_right .index_panelContent input:not([type=range]):not([type=color]),
.index_right .index_panelContent select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 41px;
  padding: 8px 11px;
  border: 1px solid #5b6e89;
  border-radius: 8px;
  background: #121d2d;
  color: #f4f8ff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 550;
}
.index_right .index_panelContent input:focus-visible,
.index_right .index_panelContent select:focus-visible {
  outline: 2px solid #80aeff;
  outline-offset: 1px;
}
.index_right .index_pixelRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  margin: 15px 0 16px;
  font-size: 12px;
  line-height: 1.35;
  color: #c2d0e3;
}
.index_right .index_pixelRow span {
  min-width: 0;
}
.index_right .index_pixelRow code {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #f0f5ff;
  white-space: nowrap;
}
.index_right .index_propertyBlock {
  padding: 16px 0 13px;
  border-bottom: 1px solid #38475b;
}
.index_right .index_propertyBlock > b {
  display: block;
  margin: 0 0 11px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: none;
  color: #e6eefb;
}
.index_right .index_adjustHint {
  font-size: 12px;
  line-height: 1.5;
  color: #b4c4d8;
}
.index_right .index_panelContent > section > .index_primaryToolButton,
.index_right .index_panelContent > section > .index_full,
.index_right .index_propertyBlock > .index_primaryToolButton,
.index_right .index_propertyBlock > .index_quick {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 10px 0 0;
  padding: 11px 12px;
  min-height: 45px;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 8px;
  white-space: normal;
  overflow-wrap: normal;
  text-align: center;
}
.index_right .index_panelContent > section > .index_primaryToolButton,
.index_right .index_propertyBlock > .index_primaryToolButton {
  background: #2563eb;
  color: #fff;
  border: 1px solid #3473fa;
  font-weight: 730;
  text-shadow: none;
  box-shadow: none;
}
.index_right .index_panelContent > section > .index_primaryToolButton:hover:not(:disabled) {
  background: #1f52c7;
}
.index_right .index_objectUtilityGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 9px 0 7px;
  min-width: 0;
}
.index_right .index_objectUtilityGrid button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 9px 6px;
  min-height: 43px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 680;
  white-space: normal;
  overflow-wrap: normal;
  border-radius: 8px;
  border: 1px solid #5a7090;
  color: #edf4ff;
  background: #283950;
}
.index_right .index_objectUtilityGrid .index_quickActive {
  background: #244a8d;
  border-color: #699cf5;
  color: #fff;
}
.index_right .index_viewToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 43px;
  margin: 7px 0;
  padding: 9px 11px;
  border: 1px solid #485c79;
  border-radius: 8px;
  background: #253248;
  color: #e1eaf7;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 630;
  text-align: left;
}
.index_right .index_viewToggle span {
  flex: 1 1 auto;
  min-width: 0;
}
.index_right .index_viewToggle b {
  flex: 0 0 auto;
  min-width: 39px;
  padding: 4px 6px;
  border-radius: 5px;
  background: #18283d;
  color: #b9c9dd;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.index_right .index_viewToggleActive {
  border-color: #5d8ddc !important;
  background: #233e69 !important;
  color: #f2f7ff !important;
}
.index_right .index_viewToggleActive b {
  background: #2563eb;
  color: #fff;
}
.index_right .index_panelContent > section > .index_full:not(.index_exportFormatButton) {
  background: #2a374c !important;
  color: #f1f5fd !important;
  border: 1px solid #60728b !important;
  box-shadow: none;
  font-weight: 720;
  text-shadow: none;
}
.index_right .index_panelContent > section > .index_full:not(.index_exportFormatButton):hover {
  background: #36455d !important;
}
.index_appLight .index_right > .index_collapseRight {
  background: #f4f7fc;
  border-color: #c1cfe1;
  color: #324760;
}
.index_appLight .index_rightTabs {
  background: #eef2f8;
  border-bottom-color: #d3deeb;
}
.index_appLight .index_rightTabs::before {
  color: #4a607c;
}
.index_appLight .index_rightTabs button {
  background: #fff;
  border-color: #ced9e8;
  color: #354860;
}
.index_appLight .index_rightTabs button:hover {
  background: #e5eefc;
  color: #142e53;
  border-color: #9cb6dc;
}
.index_appLight .index_rightTabs .index_rightTabActive {
  background: #e4efff;
  border-color: #81a9eb;
  color: #1851a5;
  box-shadow: inset 0 -2px #2563eb;
}
.index_appLight .index_right .index_panelContent > section {
  background: #fff;
  border-color: #d5deeb;
  box-shadow: 0 2px 7px rgba(32, 55, 89, .04);
}
.index_appLight .index_right .index_sectionHeading > h2,
.index_appLight .index_right .index_panelContent > section > h2 {
  color: #1e2b3f;
}
.index_appLight .index_right .index_sectionHeading > em {
  background: #eaf1fc;
  border-color: #c6d8f1;
  color: #315987;
}
.index_appLight .index_right .index_sizeGrid label,
.index_appLight .index_right .index_dimensionGrid label,
.index_appLight .index_right .index_transformGrid label,
.index_appLight .index_right .index_layerNameRow,
.index_appLight .index_right .index_pixelRow {
  color: #40536b;
}
.index_appLight .index_right .index_pixelRow code,
.index_appLight .index_right .index_propertyBlock > b {
  color: #233651;
}
.index_appLight .index_right .index_panelContent input:not([type=range]):not([type=color]),
.index_appLight .index_right .index_panelContent select {
  background: #fff;
  color: #1a2c44;
  border-color: #b5c7df;
}
.index_appLight .index_right .index_propertyBlock {
  border-bottom-color: #e1e8f1;
}
.index_appLight .index_right .index_adjustHint {
  color: #526581;
}
.index_appLight .index_right .index_objectUtilityGrid button {
  background: #f4f7fc;
  color: #203650;
  border-color: #c1d0e5;
}
.index_appLight .index_right .index_objectUtilityGrid .index_quickActive {
  background: #e6f0ff;
  color: #164b9c;
  border-color: #78a3ed;
}
.index_appLight .index_right .index_viewToggle {
  background: #f6f9fe;
  color: #273b55;
  border-color: #ced9e9;
}
.index_appLight .index_right .index_viewToggle b {
  background: #e4ebf5;
  color: #52667e;
}
.index_appLight .index_right .index_viewToggleActive {
  background: #e7f0ff !important;
  color: #1f4279 !important;
  border-color: #7aa6e9 !important;
}
.index_appLight .index_right .index_viewToggleActive b {
  background: #2563eb;
  color: #fff;
}
.index_appLight .index_right .index_panelContent > section > .index_full:not(.index_exportFormatButton) {
  background: #f2f5f9 !important;
  color: #344761 !important;
  border-color: #bdcbe0 !important;
}
.index_appLight .index_right .index_panelContent > section > .index_full:not(.index_exportFormatButton):hover {
  background: #e7edf6 !important;
}
@media (max-width: 490px) {
  .index_rightTabs {
    gap: 4px;
    padding-inline: 8px;
  }
  .index_rightTabs button {
    font-size: 11px;
  }
  .index_right .index_panelContent > section {
    margin-inline: 7px;
    padding-inline: 11px;
  }
  .index_right .index_sectionHeading > h2 {
    font-size: 15px;
  }
  .index_right .index_pixelRow {
    flex-wrap: wrap;
  }
}
.index_prepToolSection .index_cleanupReport {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 11px 0;
  padding: 12px 13px;
  border-radius: 9px;
  border: 1px solid #617594;
  background: #223248;
  color: #eff4ff;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.index_prepToolSection .index_cleanupReport strong {
  font-size: 13px;
  color: inherit;
}
.index_prepToolSection .index_cleanupReport span {
  color: inherit;
  opacity: .93;
}
.index_prepToolSection .index_cleanupReport span b {
  color: inherit;
}
.index_appLight .index_prepToolSection .index_cleanupReport {
  background: #eaf1fc;
  border-color: #bbceed;
  color: #263950;
}
.index_prepToolSection .index_upscaleReviewActions button:disabled {
  opacity: .65;
  cursor: not-allowed;
}
.index_buildVersionBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 26px;
  padding: 4px 11px;
  border: 1px solid #53677f;
  border-radius: 999px;
  background: #2b3748;
  color: #eef5ff;
  font: 800 12px/1 var(--font-family-base,system-ui,sans-serif);
  letter-spacing: .15px;
  white-space: nowrap;
  user-select: text;
}
.index_appLight .index_buildVersionBadge {
  border-color: #adbed1;
  background: #e9eff8;
  color: #213c58;
}
.index_toolRail .index_buildVersionBadge {
  margin-left: auto;
}
.index_toolRail .index_themeToggle {
  margin-left: 0;
}
.index_projectHomeTopActions {
  display: flex;
  align-items: center;
  gap: 9px;
}
@media (max-width: 850px) {
  .index_toolRail .index_buildVersionBadge {
    padding: 4px 7px;
    font-size: 11px;
  }
  .index_projectHomeTopbar {
    padding-left: 14px;
    padding-right: 14px;
  }
}
.index_bgPreviewTitle {
  display: inline-flex;
  align-items: center;
  max-width: 370px;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  color: #293446;
  white-space: normal;
}
.index_objectActionBar .index_bgKeepButton {
  background: #176c43;
  color: #fff;
  font-weight: 800;
}
.index_objectActionBar .index_bgKeepButton:hover {
  background: #125c37;
}
.index_newProjectOverlay {
  padding: clamp(10px, 2vh, 20px);
}
.index_newProjectDialog {
  height: min(720px, calc(100dvh - 28px));
  max-height: calc(100dvh - 20px);
  grid-template-rows: minmax(0, 1fr);
}
.index_newProjectChooser {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.index_newProjectSettings {
  min-height: 0;
  overflow: hidden;
  gap: 0;
  padding: 0;
}
.index_newProjectSettingsScroll {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 28px 24px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.index_newProjectSettingsScroll > label,
.index_newProjectSettingsScroll .index_newProjectSizeRow label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #5b6876;
  font-size: 8px;
  font-weight: 800;
}
.index_newProjectSettingsFooter {
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
  padding: 10px 24px 20px;
  border-top: 1px solid #dfe5eb;
  background: #fff;
  box-shadow: 0 -5px 14px rgba(31, 41, 55, .045);
}
.index_newProjectSettingsFooter .index_newProjectPixels {
  margin: 0 0 10px;
}
.index_newProjectSettingsFooter .index_newProjectCreate {
  display: block;
  width: 100%;
  min-height: 42px !important;
}
@media (max-height: 650px) {
  .index_newProjectOverlay {
    padding: 10px;
  }
  .index_newProjectDialog {
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }
  .index_newProjectChooser {
    padding: 20px 22px 20px;
  }
  .index_newProjectPresetGrid > button {
    min-height: 96px;
  }
  .index_newProjectSettingsScroll {
    gap: 12px;
    padding: 24px 20px 12px;
  }
  .index_newProjectSettingsFooter {
    padding: 8px 20px 12px;
  }
  .index_newProjectSettingsFooter .index_newProjectPixels {
    margin-bottom: 8px;
    padding: 8px 10px;
  }
}
@media (max-width: 760px) {
  .index_newProjectDialog {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(150px, .9fr) minmax(255px, 1.4fr);
    overflow: hidden;
  }
  .index_newProjectChooser {
    min-height: 0;
  }
  .index_newProjectSettings {
    min-height: 0;
  }
  .index_newProjectSettingsScroll {
    padding-top: 18px;
  }
  .index_newProjectPresetGrid > button {
    min-height: 88px;
  }
}
@media (min-width: 761px) {
  .index_newProjectDialog {
    width: min(850px, 88vw);
    height: min(570px, 78dvh);
    max-height: calc(100dvh - 24px);
    grid-template-columns: minmax(0, 1.52fr) minmax(280px, 1fr);
  }
  .index_newProjectChooser {
    padding: 20px 22px 24px;
    scrollbar-gutter: stable;
  }
  .index_newProjectHeading h2,
  .index_newProjectSettings h2 {
    font-size: 22px;
    line-height: 1.15;
  }
  .index_newProjectHeading p {
    margin: 7px 0 15px;
  }
  .index_newProjectPresetGrid {
    gap: 9px;
  }
  .index_newProjectPresetGrid > button {
    min-height: 81px;
    padding: 11px 13px;
    gap: 3px;
  }
  .index_newProjectSettingsScroll {
    gap: 12px;
    padding: 19px 20px 10px;
  }
  .index_newProjectSettingsFooter {
    padding: 9px 20px 13px;
  }
  .index_newProjectSettingsFooter .index_newProjectPixels {
    margin-bottom: 8px;
  }
}
@media (min-width: 761px) and (max-height: 560px) {
  .index_newProjectDialog {
    height: calc(100dvh - 20px);
  }
  .index_newProjectChooser {
    padding: 14px 18px 20px;
  }
  .index_newProjectSettingsScroll {
    padding: 15px 16px 9px;
  }
  .index_newProjectSettingsFooter {
    padding: 8px 16px 10px;
  }
}
.index_newProjectSizeError {
  padding: 5px 9px;
  margin: 0 0 7px;
  border: 1px solid #edb8b8;
  border-radius: 6px;
  background: #fff2f2;
  color: #97282a;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}
.index_studioModeHeader {
  height: 68px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 730;
  box-sizing: border-box;
  background:
    linear-gradient(
      110deg,
      #111824 0%,
      #202735 55%,
      #111824 100%);
  border-bottom: 1px solid #485067;
  display: flex;
  gap: 14px;
  align-items: stretch;
  padding: 7px 14px;
  color: #eaf2fb;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .34);
}
.index_studioModeBrand {
  width: 196px;
  min-width: 175px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  gap: 6px;
}
.index_studioModeBrand strong {
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -.7px;
}
.index_studioModeBrand strong i {
  font-style: normal;
  color: #ce79fc;
  text-shadow: 0 0 10px #8736c155;
}
.index_studioModeBrand span {
  font-size: 8px;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: #c5b9d5;
}
.index_studioModeNav {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #596173 transparent;
}
.index_studioModeNav button {
  border-radius: 8px;
  border: 1px solid #343d4b;
  min-width: 101px;
  flex: 1 1 104px;
  padding: 6px 6px;
  background:
    linear-gradient(
      175deg,
      #303847,
      #222b39);
  color: #e4eaf4;
  cursor: pointer;
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 5px;
  text-align: left;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.index_studioModeNav button:hover {
  background: #384457;
  border-color: #68809e;
}
.index_studioModeNav button:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.index_studioModeNav .index_studioModeActive {
  background:
    linear-gradient(
      135deg,
      #8436ce,
      #ac4aee 70%,
      #7530ce);
  border-color: #c67cff;
  box-shadow: inset 0 -2px 0 #e6a6ff;
}
.index_studioNavGlyph {
  grid-row: span 2;
  align-self: center;
  font-size: 20px;
  text-align: center;
  color: #d5c5ff;
}
.index_studioModeNav b {
  font-size: 11px;
  font-weight: 850;
  align-self: end;
}
.index_studioModeNav small {
  font-size: 8px;
  color: #b7c0d2;
  align-self: start;
}
.index_studioModeNav .index_studioModeActive small {
  color: #f4e5ff;
}
.index_studioModeInfo {
  width: 150px;
  flex: 0 0 150px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: right;
  gap: 6px;
}
.index_studioModeInfo strong {
  font-size: 11px;
  white-space: nowrap;
}
.index_studioModeInfo small {
  font-size: 9px;
  color: #b7c3d4;
  white-space: nowrap;
}
.index_studioWorkspace {
  padding-top: 108px;
}
.index_studioWorkspace > .index_toolRail {
  top: 68px;
  height: 40px;
  z-index: 710;
  background:
    linear-gradient(
      180deg,
      #1b2532,
      #151c27);
  border-color: #3e4c60;
}
.index_studioWorkspace > .index_leftShell {
  top: 108px;
}
.index_studioWorkspace > .index_leftMainMenu {
  top: 108px;
  left: 8px;
  max-height: calc(100vh - 116px);
}
.index_studioWorkspace > .index_center .index_stage {
  background-color: #303945;
  background-image:
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .024) 1px,
      transparent 1px);
  background-size: 22px 22px;
}
.index_studioWorkspace > .index_right {
  background: #252e3a;
}
.index_studioWorkspace > .index_leftShell .index_panelContent {
  background: #26303d;
  color: #edf2f9;
}
.index_studioWorkspace > .index_leftShell .index_drawerHeader {
  background: #1d2634;
  color: #ecf3ff;
}
.index_studioWorkspace .index_rightTabs {
  top: 0;
}
.index_studioPinnedInspector {
  margin: 8px 10px 12px;
  padding: 12px;
  border: 1px solid #40516a;
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      #1d2735,
      #222f3b);
  color: #eff5fd;
}
.index_studioPinnedHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
  color: #c4d5f3;
  font-size: 10px;
  letter-spacing: .9px;
  font-weight: 800;
}
.index_studioPinnedHead b {
  font-size: 9px;
  color: #bbf5d2;
}
.index_studioReadyButton {
  width: 100%;
  border-radius: 9px;
  border: 1px solid #5b736d;
  background: #102f29;
  color: #d5ffea;
  cursor: pointer;
  padding: 10px 9px;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  text-align: left;
  align-items: center;
  gap: 2px 9px;
}
.index_studioReadyButton > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
  font-size: 18px;
  background: #198556;
  color: #fff;
  width: 28px;
  height: 28px;
}
.index_studioReadyButton strong {
  font-size: 13px;
  line-height: 1.2;
}
.index_studioReadyButton small {
  font-size: 9px;
  color: #bce1d2;
}
.index_studioReadyWarn {
  background: #302b20;
  border-color: #715a35;
  color: #ffe3ae;
}
.index_studioReadyWarn > span {
  background: #ba791e;
}
.index_studioReadyWarn small {
  color: #e4cda0;
}
.index_studioInspectorStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding-top: 10px;
}
.index_studioInspectorStats div {
  min-width: 0;
  border-top: 1px solid #405063;
  padding-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.index_studioInspectorStats span {
  color: #b1bfd0;
  font-size: 8px;
  letter-spacing: .4px;
}
.index_studioInspectorStats strong {
  font-size: 10px;
  overflow-wrap: anywhere;
}
.index_studioManualPanel {
  padding: 0 12px 32px !important;
  background: transparent;
  color: #eef4fd;
}
.index_studioManualPanel h2 {
  font-size: 20px;
  margin: 12px 0 4px;
  color: #fff;
}
.index_studioManualPanel > p {
  font-size: 11px;
  line-height: 1.45;
  color: #b0c0d0;
  margin: 5px 0 15px;
}
.index_studioPanelKicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c19aff;
  font-size: 9px;
  letter-spacing: .8px;
  font-weight: 800;
  margin-top: 12px;
}
.index_studioPanelKicker span {
  border: 1px solid #3b8b60;
  background: #15412d;
  color: #9bf0bf;
  border-radius: 20px;
  padding: 4px;
  font-size: 8px;
  white-space: nowrap;
}
.index_studioManualGroupTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #455467;
  margin: 14px 0 10px;
  padding-top: 11px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #cfdaea;
}
.index_studioManualGroupTitle span {
  color: #93a7bc;
  font-size: 9px;
}
.index_studioManualGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.index_studioManualGrid button {
  min-width: 0;
  min-height: 60px;
  display: flex;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #48596f;
  border-radius: 8px;
  background: #2f3a49;
  color: #e9f1fc;
  cursor: pointer;
}
.index_studioManualGrid button:hover {
  background: #475369;
}
.index_studioManualGrid button:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.index_studioManualGrid .index_studioManualSelected {
  border-color: #c18aff;
  background: #4a3268;
}
.index_studioManualGrid strong {
  font-size: 21px;
  line-height: 1.1;
}
.index_studioManualGrid span {
  font-size: 9px;
  font-weight: 700;
}
.index_studioShapeGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.index_studioShapeGrid button {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 1px;
  min-height: 52px;
  border: 1px solid #45536a;
  border-radius: 7px;
  background: #303b4a;
  color: #f5f6fa;
  cursor: pointer;
}
.index_studioShapeGrid b {
  font-size: 19px;
}
.index_studioShapeGrid span {
  font-size: 7px;
}
.index_studioShapeGrid button:hover {
  background: #4c4166;
}
.index_studioColorBar {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 9px;
}
.index_studioColorBar label {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 10px;
  min-width: 0;
}
.index_studioColorBar input[type=color] {
  width: 35px;
  height: 29px;
  border-radius: 6px;
  border: 1px solid #627085;
  padding: 2px;
  background: #202a39;
}
.index_studioColorBar input[type=number] {
  width: 44px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #526175;
  background: #27313f;
  color: #fff;
  font-size: 11px;
  text-align: center;
}
.index_studioManualActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.index_studioManualActions button,
.index_studioLayerFooter {
  border: 1px solid #66517c;
  background:
    linear-gradient(
      180deg,
      #614080,
      #48315d);
  color: #faf1ff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 7px;
  padding: 10px 4px;
  cursor: pointer;
}
.index_studioLayerFooter {
  width: 100%;
  margin-top: 8px;
  background: #343f4f;
  border-color: #506076;
  color: #dce8ff;
}
.index_studioLayerMini {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 210px;
  overflow-y: auto;
}
.index_studioLayerMini > p {
  color: #b9c3d2;
  font-size: 11px;
  line-height: 1.5;
}
.index_studioLayerMini button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px;
  background: #293441;
  border: 1px solid #455268;
  border-radius: 5px;
  text-align: left;
  color: #dee6f1;
  cursor: pointer;
}
.index_studioLayerMini button > span {
  font-size: 11px;
}
.index_studioLayerMini button b {
  font-weight: 600;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.index_studioLayerMini button small {
  font-size: 8px;
  color: #b5c5d6;
}
.index_studioLayerMini .index_studioLayerSelected {
  border-color: #b781e3;
  background: #453454;
}
.index_studioCanvasView {
  position: absolute;
  right: 18px;
  top: 16px;
  z-index: 44;
  background: rgba(23, 31, 43, .96);
  border: 1px solid #596a85;
  border-radius: 10px;
  color: #f2f6ff;
  padding: 10px;
  box-shadow: 0 10px 24px #10172255;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: auto;
  min-width: 174px;
  user-select: none;
}
.index_studioCanvasView > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.index_studioCanvasView strong {
  font-size: 10px;
  letter-spacing: .6px;
}
.index_studioCanvasView small {
  font-size: 9px;
  color: #b8c4d5;
}
.index_studioViewChoices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.index_studioViewChoices button {
  font-size: 9px;
  font-weight: 700;
  color: #d8e4f3;
  background: #2c3747;
  border: 1px solid #526177;
  border-radius: 5px;
  padding: 7px 5px;
  cursor: pointer;
}
.index_studioViewChoices .index_studioViewSelected {
  border-color: #bd85ff;
  background: #513676;
  color: #fff;
}
@media (min-width: 1320px) {
  .index_studioWorkspace {
    grid-template-columns: 0 minmax(0, 1fr) 298px !important;
  }
  .index_studioWorkspace.index_studioLeftDocked {
    grid-template-columns: 282px minmax(0, 1fr) 298px !important;
  }
  .index_studioWorkspace.index_rightClosed {
    grid-template-columns: 0 minmax(0, 1fr) 48px !important;
  }
  .index_studioWorkspace.index_studioLeftDocked.index_rightClosed {
    grid-template-columns: 282px minmax(0, 1fr) 48px !important;
  }
  .index_studioWorkspace > .index_leftShell {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    left: auto;
    top: auto;
    bottom: auto;
    height: 100%;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    pointer-events: auto;
  }
  .index_studioWorkspace > .index_leftShell.index_collapsed {
    width: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .index_studioWorkspace > .index_leftShell > .index_panelContent {
    height: 100%;
    box-shadow: none;
  }
  .index_studioWorkspace > .index_center {
    grid-column: 2;
    grid-row: 1;
  }
  .index_studioWorkspace > .index_right {
    grid-column: 3;
    grid-row: 1;
  }
  .index_studioWorkspace > .index_leftMainMenu {
    grid-column: 1;
  }
  .index_studioWorkspace.index_studioLeftDocked .index_commandDock {
    left: calc(50% - 8px);
  }
}
@media (max-width: 1319px) {
  .index_studioWorkspace > .index_leftShell {
    top: 108px;
  }
  .index_studioModeBrand {
    width: 135px;
    min-width: 135px;
  }
  .index_studioModeBrand strong {
    font-size: 19px;
  }
  .index_studioModeBrand span {
    font-size: 7px;
  }
  .index_studioModeInfo {
    display: none;
  }
}
@media (max-width: 900px) {
  .index_studioModeHeader {
    padding: 6px;
    gap: 6px;
  }
  .index_studioModeBrand {
    display: none;
  }
  .index_studioModeNav {
    gap: 3px;
  }
  .index_studioModeNav button {
    min-width: 96px;
    flex: 0 0 96px;
  }
  .index_studioCanvasView {
    right: 7px;
    top: 7px;
    min-width: 139px;
    padding: 7px;
  }
  .index_studioViewChoices button {
    font-size: 8px;
  }
  .index_studioPinnedInspector {
    margin: 4px 7px 10px;
  }
}
.index_appLight .index_studioModeHeader {
  background:
    linear-gradient(
      120deg,
      #fbfdff,
      #eff3fa 62%,
      #f9fbff);
  border-bottom: 1px solid #cbd5e3;
  color: #152238;
  box-shadow: 0 2px 12px rgba(40, 60, 92, .13);
}
.index_appLight .index_studioModeBrand strong {
  color: #17243c;
}
.index_appLight .index_studioModeBrand strong i {
  color: #7a39b2;
  text-shadow: none;
}
.index_appLight .index_studioModeBrand span {
  color: #63758a;
}
.index_appLight .index_studioModeNav button {
  background: #fff;
  color: #23344c;
  border-color: #d0d9e5;
  box-shadow: 0 1px 3px rgba(28, 50, 80, .06);
}
.index_appLight .index_studioModeNav button:hover {
  background: #eff5fc;
  border-color: #9fb3ce;
}
.index_appLight .index_studioModeNav .index_studioModeActive {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #7138b8,
      #9a5fce);
  border-color: #8f55c3;
}
.index_appLight .index_studioModeNav small {
  color: #69788e;
}
.index_appLight .index_studioModeNav .index_studioModeActive small {
  color: #f8eeff;
}
.index_appLight .index_studioNavGlyph {
  color: #7853a5;
}
.index_appLight .index_studioModeActive .index_studioNavGlyph {
  color: #fff;
}
.index_appLight .index_studioModeInfo {
  color: #27344c;
}
.index_appLight .index_studioModeInfo small {
  color: #6b7b91;
}
.index_appLight .index_studioWorkspace > .index_toolRail {
  background:
    linear-gradient(
      180deg,
      #fff,
      #f1f5fa);
  border-color: #ccd8e6;
}
.index_appLight .index_studioWorkspace > .index_center .index_stage {
  background-color: #e8edf4;
  background-image:
    linear-gradient(rgba(44, 68, 99, .06) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(44, 68, 99, .06) 1px,
      transparent 1px);
}
.index_appLight .index_studioWorkspace > .index_right {
  background: #f5f7fb;
  border-color: #ced9e5;
  color: #27354a;
}
.index_appLight .index_studioWorkspace > .index_leftShell .index_panelContent {
  background: #f7f9fc;
  color: #243247;
  border-color: #d5deea;
  box-shadow: 8px 0 21px rgba(30, 56, 88, .1);
}
.index_appLight .index_studioWorkspace > .index_leftShell .index_drawerHeader {
  background: #eff3f9;
  color: #20314b;
}
.index_appLight .index_studioPinnedInspector {
  border-color: #c9d6e6;
  background:
    linear-gradient(
      180deg,
      #fff,
      #f5f9ff);
  color: #263a4e;
}
.index_appLight .index_studioPinnedHead {
  color: #3c526b;
}
.index_appLight .index_studioPinnedHead b {
  color: #227f4e;
}
.index_appLight .index_studioInspectorStats div {
  border-color: #d1dce8;
}
.index_appLight .index_studioInspectorStats span {
  color: #61748c;
}
.index_appLight .index_studioReadyButton {
  background: #e3f8ed;
  color: #14543b;
  border-color: #83c9a4;
}
.index_appLight .index_studioReadyButton small {
  color: #3d8064;
}
.index_appLight .index_studioReadyWarn {
  background: #fff4d8;
  border-color: #e8cb89;
  color: #755320;
}
.index_appLight .index_studioReadyWarn small {
  color: #927242;
}
.index_appLight .index_studioManualPanel {
  color: #26384f;
}
.index_appLight .index_studioManualPanel h2 {
  color: #172640;
}
.index_appLight .index_studioManualPanel > p {
  color: #5d728a;
}
.index_appLight .index_studioPanelKicker {
  color: #8052bd;
}
.index_appLight .index_studioPanelKicker span {
  background: #def6e9;
  color: #136541;
  border-color: #abd9bf;
}
.index_appLight .index_studioManualGroupTitle {
  border-top-color: #d0dae6;
  color: #384c64;
}
.index_appLight .index_studioManualGroupTitle span {
  color: #718198;
}
.index_appLight .index_studioManualGrid button {
  border-color: #ccd7e3;
  background: #fff;
  color: #324357;
}
.index_appLight .index_studioManualGrid button:hover {
  background: #e6eefa;
  border-color: #9badd0;
}
.index_appLight .index_studioManualGrid .index_studioManualSelected {
  background: #eadcff;
  border-color: #ab7be3;
  color: #523081;
}
.index_appLight .index_studioShapeGrid button {
  background: #fff;
  color: #24354b;
  border-color: #d1dbe7;
}
.index_appLight .index_studioShapeGrid button:hover,
.index_appLight .index_studioShapeGrid button:focus-visible {
  background: #edf2fc;
  border-color: #9e82d7;
}
.index_appLight .index_studioLayerFooter {
  background: #eef2f8;
  color: #324c68;
  border-color: #b7c8dd;
}
.index_appLight .index_studioCanvasView {
  background: rgba(255, 255, 255, .98);
  border-color: #c5d3e1;
  color: #2d4059;
  box-shadow: 0 8px 20px rgba(33, 57, 86, .14);
}
.index_appLight .index_studioCanvasView small {
  color: #647791;
}
.index_appLight .index_studioViewChoices button {
  background: #f4f7fb;
  border-color: #ccd7e5;
  color: #314963;
}
.index_appLight .index_studioViewChoices .index_studioViewSelected {
  background: #ecdefb;
  border-color: #a276d4;
  color: #50307a;
}
.index_prepToolSection {
  padding: 10px 9px 18px !important;
}
.index_prepPanelLabel {
  padding: 2px 4px 9px;
}
.index_prepToolSection .index_toolGroup {
  margin-bottom: 5px;
  border-radius: 8px;
}
.index_prepToolSection .index_toolGroupHead {
  min-height: 39px;
  padding: 8px 10px;
  gap: 7px;
}
.index_prepToolSection .index_toolGroupHead > b {
  font-size: 12.5px;
  line-height: 1.25;
  letter-spacing: 0;
}
.index_prepToolSection .index_toolGroupHead > code {
  font-size: 10px;
  max-width: 40%;
  white-space: nowrap;
}
.index_prepToolSection .index_toolGroupHead::after {
  width: 6px;
  height: 6px;
  margin-right: 2px;
}
.index_prepToolSection .index_toolGroupExpanded > :not(.index_toolGroupHead) {
  margin-left: 9px;
  margin-right: 9px;
}
.index_prepToolSection .index_toolGroupExpanded > :nth-child(2) {
  margin-top: 9px;
}
.index_prepToolSection .index_toolGroupExpanded > :last-child {
  margin-bottom: 10px;
}
.index_prepToolSection .index_prepAutoAction {
  border-color: #327e90;
  background: #15313b;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead {
  width: 100%;
  font-family: inherit;
  text-align: left;
  background: #173741;
  color: #fff;
  border: 0;
  cursor: pointer;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:hover:not(:disabled) {
  background: #20505c;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > code {
  color: #8ce7da;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead::after {
  display: none;
}
.index_prepToolSection .index_prepAutoAction.index_toolGroupCollapsed > :not(.index_toolGroupHead) {
  display: none !important;
}
.index_prepToolSection {
  padding: 10px 9px 18px !important;
}
.index_prepPanelLabel {
  padding: 2px 4px 9px;
  font-size: 10px;
}
.index_prepPanelLabel small {
  font-size: 9px;
}
.index_prepToolSection .index_toolGroup {
  margin-bottom: 5px;
  border-radius: 7px;
}
.index_prepToolSection .index_toolGroupHead {
  padding: 9px 10px;
  min-height: 39px;
  gap: 7px;
}
.index_prepToolSection .index_toolGroupHead > b {
  font-size: 12px;
  line-height: 1.2;
}
.index_prepToolSection .index_toolGroupHead > code {
  font-size: 9px;
  white-space: nowrap;
  max-width: 40%;
}
.index_prepToolSection .index_toolGroupHead::after {
  width: 6px;
  height: 6px;
  margin-right: 2px;
}
.index_prepToolSection .index_toolGroupExpanded > :not(.index_toolGroupHead) {
  margin-left: 9px;
  margin-right: 9px;
}
.index_prepToolSection .index_toolGroupExpanded > :nth-child(2) {
  margin-top: 9px;
}
.index_prepToolSection .index_toolGroupExpanded > :last-child {
  margin-bottom: 10px;
}
.index_prepQuickActions {
  margin: 8px 0 11px;
}
.index_prepQuickActionsLabel {
  display: flex;
  justify-content: space-between;
  color: #d5e2f8;
  font-size: 10px;
  font-weight: 750;
  margin-bottom: 7px;
  letter-spacing: .065em;
}
.index_prepQuickActionsLabel span {
  font-size: 9px;
  color: #a4bdd9;
}
.index_prepQuickGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.index_prepQuickGrid button {
  min-width: 0;
  min-height: 40px;
  padding: 7px 5px;
  border: 1px solid #41627a;
  border-radius: 7px;
  background: #1b3747;
  color: #e5f9ff;
  font: 650 11px/1.2 inherit;
  cursor: pointer;
}
.index_prepQuickGrid button:hover:not(:disabled) {
  background: #28516a;
}
.index_prepQuickGrid button:disabled {
  opacity: .5 !important;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead {
  background: #17463e;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > code {
  font-size: 10px;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead::before {
  content: "\25b6";
  color: #8ce7da;
  font-size: 10px;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead,
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead {
  color: #ffffff;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > b,
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > b {
  color: #ffffff;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > code,
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > code {
  color: #bfffee;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead::before,
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead::before {
  color: #bfffee;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:hover:not(:disabled) {
  background: #205c53;
}
.index_appLight .index_prepToolSection .index_prepAutoAction {
  background: #ffffff;
  border-color: #bad3da;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead,
.index_appLight .index_prepToolSection .index_prepAutoAction.index_toolGroupExpanded > .index_toolGroupHead {
  background: #16515b;
  color: #ffffff;
  border-bottom-color: #16515b;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:hover:not(:disabled),
.index_appLight .index_prepToolSection .index_prepAutoAction.index_toolGroupExpanded > .index_toolGroupHead:hover:not(:disabled) {
  background: #206572;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > b {
  color: #ffffff;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > code,
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead::before {
  color: #d4fff5;
}
.index_appLight .index_prepToolSection .index_upscaleReview {
  background: #f4f8ff;
  border-color: #bfcfe5;
  color: #20314b;
}
.index_appLight .index_prepToolSection .index_upscaleReview > b {
  color: #1b2e4b;
}
.index_appLight .index_prepToolSection .index_upscaleReview .index_mockupNote {
  color: #364b69;
}
.index_prepToolSection {
  padding: 12px 12px 28px !important;
}
.index_prepToolSection .index_prepPanelLabel {
  margin: 0 0 12px;
  padding: 10px 11px;
  border-left: 4px solid #39c8fa;
  border-radius: 0 9px 9px 0;
  background:
    linear-gradient(
      90deg,
      #162e4c 0%,
      #1c3757 100%);
  color: #f4faff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .085em;
}
.index_prepToolSection .index_prepPanelLabel small {
  color: #a9eeff;
  font-size: 10px;
  letter-spacing: .04em;
}
.index_prepToolSection .index_toolGroup {
  margin: 0 0 8px;
  border-radius: 11px;
  border: 1px solid #445775;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.index_prepToolSection .index_toolGroupHead {
  min-height: 48px;
  padding: 10px 12px;
  gap: 8px;
}
.index_prepToolSection .index_toolGroupHead > b {
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 790;
  letter-spacing: -.025em;
}
.index_prepToolSection .index_toolGroupHead > code {
  font-size: 10px;
  font-weight: 790;
  padding: 4px 6px;
  max-width: 44%;
  border: 1px solid #536f92;
  background: #263851;
  border-radius: 6px;
  color: #cde9ff;
}
.index_prepToolSection .index_toolGroupExpanded {
  border-color: #49aafa;
  box-shadow: 0 0 0 1px rgba(49, 161, 246, .14), 0 5px 16px rgba(0, 0, 0, .12);
}
.index_prepToolSection .index_toolGroupHead:focus-visible,
.index_prepToolSection button:focus-visible {
  outline: 3px solid #66d3f8;
  outline-offset: 2px;
}
.index_prepToolSection .index_prepAutoAction {
  border: 1px solid #188e9d;
  background: #132f43;
  box-shadow: 0 5px 14px rgba(14, 127, 154, .15);
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead,
.index_prepToolSection .index_prepAutoAction.index_toolGroupExpanded > .index_toolGroupHead {
  position: relative;
  min-height: 52px;
  background:
    linear-gradient(
      112deg,
      #036d85 0%,
      #075f86 55%,
      #1749ab 100%);
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1);
  transition: filter .15s ease, background .15s ease;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead::before {
  content: "\2726";
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  flex: none;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 15px;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > b {
  color: #fff;
  font-size: 14px;
  font-weight: 840;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > code {
  flex: none;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 7px;
  background: #f4fffe;
  color: #095a6e;
  padding: 7px 9px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  max-width: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .14);
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:hover:not(:disabled),
.index_prepToolSection .index_prepAutoAction.index_toolGroupExpanded > .index_toolGroupHead:hover:not(:disabled) {
  background:
    linear-gradient(
      112deg,
      #067f98 0%,
      #08739f 55%,
      #1c59cc 100%);
  filter: saturate(1.07);
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:disabled {
  opacity: 1 !important;
  background: #dce5ef;
  color: #405571;
  cursor: not-allowed;
  box-shadow: none;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:disabled::before {
  background: #c6d3e3;
  color: #45617f;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:disabled > b {
  color: #405571;
}
.index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:disabled > code {
  background: #eff4fa;
  color: #4d657f;
  border-color: #b8c9dc;
  box-shadow: none;
}
.index_prepToolSection .index_prepAutoAction > .index_mockupNote {
  margin: 12px 12px 9px;
  font-size: 12.5px;
  line-height: 1.4;
}
.index_prepToolSection .index_prepAutoAction.index_toolGroupExpanded .index_upscaleReview {
  background: #202e47;
  border: 1px solid #587da2;
  border-radius: 11px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.index_prepToolSection .index_prepAutoAction .index_upscaleReview > b {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 830;
  color: #f2fbff;
}
.index_prepToolSection .index_prepAutoAction .index_upscaleReview .index_mockupNote {
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 10px;
  color: #cdddf1;
}
.index_prepToolSection .index_prepAutoAction .index_cleanupReport {
  background: #152339;
  border: 1px solid #49658c;
  border-left: 3px solid #28d5bb;
  color: #ecf5ff;
  padding: 11px;
  border-radius: 8px;
  font-size: 12px;
}
.index_prepToolSection .index_prepAutoAction .index_cleanupReport strong {
  color: #e7fff8;
  font-size: 12.5px;
}
.index_prepToolSection .index_prepAutoAction .index_upscaleReviewActions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: stretch;
}
.index_prepToolSection .index_prepAutoAction .index_upscaleReviewActions button {
  width: 100%;
  margin: 0;
  min-height: 39px;
}
.index_prepToolSection .index_prepQuickActions {
  margin: 10px 0 15px;
  padding: 11px;
  border: 1px solid #526784;
  border-radius: 11px;
  background: #1c2b42;
}
.index_prepToolSection .index_prepQuickActionsLabel {
  margin-bottom: 9px;
  color: #f2f9ff;
  font-size: 11px;
}
.index_prepToolSection .index_prepQuickActionsLabel span {
  color: #afc9e0;
}
.index_prepToolSection .index_prepQuickGrid {
  gap: 7px;
}
.index_prepToolSection .index_prepQuickGrid button {
  background: #253d56;
  border: 1px solid #4e779a;
  border-radius: 8px;
  min-height: 44px;
  color: #f3faff;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.3;
  padding: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.index_prepToolSection .index_prepQuickGrid button:hover:not(:disabled) {
  background: #34577a;
  border-color: #76cafa;
}
.index_prepToolSection .index_prepQuickGrid button:disabled {
  opacity: 1 !important;
  background: #283444;
  color: #a7b7c8;
  border-color: #425366;
}
.index_appLight .index_prepToolSection .index_prepPanelLabel {
  background:
    linear-gradient(
      100deg,
      #122e51 0%,
      #174979 100%);
  color: #fff;
  border-left-color: #36caff;
}
.index_appLight .index_prepToolSection .index_prepPanelLabel small {
  color: #bceeff;
}
.index_appLight .index_prepToolSection .index_toolGroup:not(.index_prepAutoAction) {
  background: #ffffff;
  border-color: #d5e0ef;
  box-shadow: 0 3px 9px rgba(32, 59, 101, .06);
}
.index_appLight .index_prepToolSection .index_toolGroup:not(.index_prepAutoAction) > .index_toolGroupHead {
  background: #fff;
}
.index_appLight .index_prepToolSection .index_toolGroup:not(.index_prepAutoAction) > .index_toolGroupHead:hover {
  background: #f0f6ff;
}
.index_appLight .index_prepToolSection .index_toolGroup:not(.index_prepAutoAction) > .index_toolGroupHead > b {
  color: #152f53;
}
.index_appLight .index_prepToolSection .index_toolGroup:not(.index_prepAutoAction) > .index_toolGroupHead > code {
  color: #285681;
  background: #ecf5ff;
  border-color: #d2e7f9;
}
.index_appLight .index_prepToolSection .index_toolGroupExpanded:not(.index_prepAutoAction) {
  border-color: #65aff1;
}
.index_appLight .index_prepToolSection .index_prepAutoAction {
  background: #ffffff;
  border-color: #1a8fa7;
  box-shadow: 0 4px 13px rgba(13, 105, 150, .13);
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead,
.index_appLight .index_prepToolSection .index_prepAutoAction.index_toolGroupExpanded > .index_toolGroupHead {
  background:
    linear-gradient(
      112deg,
      #036d85 0%,
      #075f86 55%,
      #1749ab 100%);
  color: #ffffff;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > b {
  color: #fff;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead::before {
  color: #fff;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead > code {
  color: #095a6e;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:hover:not(:disabled),
.index_appLight .index_prepToolSection .index_prepAutoAction.index_toolGroupExpanded > .index_toolGroupHead:hover:not(:disabled) {
  background:
    linear-gradient(
      112deg,
      #087e99 0%,
      #0d70a2 55%,
      #2258c2 100%);
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:disabled {
  opacity: 1 !important;
  background: #dce5ef;
  color: #405571;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:disabled > b {
  color: #405571;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:disabled::before {
  color: #45617f;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead:disabled > code {
  color: #4d657f;
}
.index_appLight .index_prepToolSection .index_prepAutoAction > .index_mockupNote {
  color: #405674;
}
.index_appLight .index_prepToolSection .index_prepAutoAction.index_toolGroupExpanded .index_upscaleReview {
  background: #f6faff;
  border-color: #c5d9ee;
  box-shadow: 0 4px 13px rgba(38, 71, 113, .09);
}
.index_appLight .index_prepToolSection .index_prepAutoAction .index_upscaleReview > b {
  color: #14365d;
}
.index_appLight .index_prepToolSection .index_prepAutoAction .index_upscaleReview .index_mockupNote {
  color: #385370;
}
.index_appLight .index_prepToolSection .index_prepAutoAction .index_cleanupReport {
  background: #ecf6fd;
  border-color: #c4d8ed;
  border-left-color: #00a58f;
  color: #25415e;
}
.index_appLight .index_prepToolSection .index_prepAutoAction .index_cleanupReport strong {
  color: #075566;
}
.index_appLight .index_prepToolSection .index_prepQuickActions {
  background: #f5f9ff;
  border-color: #d3e4f3;
}
.index_appLight .index_prepToolSection .index_prepQuickActionsLabel {
  color: #1e426a;
}
.index_appLight .index_prepToolSection .index_prepQuickActionsLabel span {
  color: #5c7792;
}
.index_appLight .index_prepToolSection .index_prepQuickGrid button {
  background: #fff;
  border-color: #bed6ef;
  color: #1a416c;
  box-shadow: 0 2px 5px rgba(26, 80, 137, .06);
}
.index_appLight .index_prepToolSection .index_prepQuickGrid button:hover:not(:disabled) {
  background: #e9f4ff;
  border-color: #6aaddf;
  color: #113a67;
}
.index_appLight .index_prepToolSection .index_prepQuickGrid button:disabled {
  opacity: 1 !important;
  background: #e8eef5;
  border-color: #d2dce7;
  color: #718398;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .index_prepToolSection .index_prepAutoAction > .index_toolGroupHead,
  .index_prepToolSection .index_prepQuickGrid button {
    transition: none;
  }
}
.index_studioWorkspace > .index_leftShell.index_prepRailOnly {
  box-sizing: border-box;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  visibility: visible;
  pointer-events: auto;
  overflow: hidden;
}
.index_studioWorkspace > .index_leftShell.index_prepRailOnly > .index_panelContent {
  display: block;
  box-sizing: border-box;
  width: 56px;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 5px !important;
  scrollbar-gutter: auto;
  overflow: hidden !important;
  box-shadow: none;
}
.index_prepRailOnly .index_drawerHeader {
  display: none !important;
}
.index_prepRailOnly .index_prepToolSection {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
}
@media (min-width: 1320px) {
  .index_studioWorkspace.index_studioLeftDocked.index_prepRailWorkspace {
    grid-template-columns: 56px minmax(0, 1fr) 298px !important;
  }
  .index_studioWorkspace.index_studioLeftDocked.index_prepRailWorkspace.index_rightClosed {
    grid-template-columns: 56px minmax(0, 1fr) 48px !important;
  }
}
@media (max-width: 1319px) {
  .index_studioWorkspace.index_prepRailWorkspace > .index_leftShell.index_prepRailOnly {
    width: 56px;
  }
}
.index_prepRailOnly > .index_panelContent > :not(.index_prepToolSection) {
  display: none !important;
}
.index_prepRailOnly .index_prepToolSection > [role=status] {
  display: none !important;
}
@media (min-width: 1320px) {
  .index_studioWorkspace.index_studioLeftDocked.index_prepWideWorkspace {
    grid-template-columns: 350px minmax(0, 1fr) 298px !important;
  }
  .index_studioWorkspace.index_studioLeftDocked.index_prepWideWorkspace.index_rightClosed {
    grid-template-columns: 350px minmax(0, 1fr) 48px !important;
  }
}
@media (max-width: 1319px) {
  .index_studioWorkspace > .index_leftShell.index_prepWideShell {
    width: min(350px, calc(100vw - 12px));
  }
}
.index_studioWorkspace > .index_leftShell.index_prepWideShell {
  scrollbar-gutter: auto;
  overflow: hidden;
}
.index_studioWorkspace > .index_leftShell.index_prepWideShell > .index_panelContent {
  scrollbar-gutter: auto;
  padding-right: 0 !important;
  overflow: hidden !important;
}
.index_leftShell .index_studioManualPanel {
  padding: 12px !important;
}
.index_leftShell .index_studioManualGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.index_leftShell .index_studioManualGrid button {
  min-height: 42px;
  flex-direction: row;
  justify-content: flex-start;
  padding: 8px;
  gap: 8px;
  border-radius: 7px;
}
.index_leftShell .index_studioManualGrid button svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.index_leftShell .index_studioManualGrid button span {
  font-size: 11px;
  font-weight: 550;
}
.index_leftShell .index_studioManualGroupTitle {
  margin: 12px 0 8px;
  padding-top: 9px;
  font-size: 10px;
  font-weight: 650;
}
.index_leftShell .index_studioManualPanel > .index_studioManualGroupTitle:first-child {
  border: 0;
  margin-top: 0;
  padding-top: 0;
}
.index_leftShell .index_studioColorBar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.index_leftShell .index_studioColorBar label {
  flex-direction: column;
  align-items: stretch;
  font-size: 11px;
}
.index_leftShell .index_studioColorBar input[type=color],
.index_leftShell .index_studioColorBar input[type=number] {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
}
@keyframes index_dtfUnrollDown {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 -12px 0);
  }
}
@keyframes index_dtfRollDown {
  0% {
    top: -9px;
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    top: calc(100% - 9px);
    opacity: 0;
  }
}
.index_contextMenu {
  animation: index_dtfUnrollDown 300ms cubic-bezier(.22, .8, .25, 1) backwards;
}
.index_contextMenu::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 9px;
  top: calc(100% - 9px);
  opacity: 0;
  pointer-events: none;
  border-radius: 5px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #e2e8f0 35%,
      #94a3b8 62%,
      #cbd5e1 82%,
      #f8fafc 100%);
  box-shadow: 0 3px 7px rgba(15, 23, 42, .25);
  animation: index_dtfRollDown 300ms cubic-bezier(.22, .8, .25, 1) backwards;
}
.index_objectActionBar {
  animation: index_dtfUnrollDown 260ms cubic-bezier(.22, .8, .25, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .index_contextMenu,
  .index_contextMenu::after,
  .index_objectActionBar {
    animation: none;
  }
  .index_contextMenu::after {
    display: none;
  }
}

/* src/components/CanvasComparisonSlider.module.css */
.CanvasComparisonSlider_compare {
  position: absolute;
  inset: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  outline: none;
  isolation: isolate;
}
.CanvasComparisonSlider_compare:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 3px;
}
.CanvasComparisonSlider_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.CanvasComparisonSlider_before {
  z-index: 1;
}
.CanvasComparisonSlider_divider {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px #242b38, 0 0 9px rgba(0, 0, 0, .65);
  pointer-events: none;
}
.CanvasComparisonSlider_handle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 62px;
  height: 35px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 20px;
  background: #282f3e;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  font: 800 12px/1 system-ui, sans-serif;
  white-space: nowrap;
}
.CanvasComparisonSlider_labelBefore,
.CanvasComparisonSlider_labelAfter {
  position: absolute;
  z-index: 2;
  top: 10px;
  padding: 5px 10px;
  color: #fff;
  background: rgba(20, 25, 33, .83);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 5px;
  font: 800 11px/1.2 system-ui, sans-serif;
  letter-spacing: .05em;
  pointer-events: none;
}
.CanvasComparisonSlider_labelBefore {
  left: 10px;
}
.CanvasComparisonSlider_labelAfter {
  right: 10px;
}
@media (max-width: 600px) {
  .CanvasComparisonSlider_labelBefore,
  .CanvasComparisonSlider_labelAfter {
    font-size: 9px;
    padding: 4px 6px;
  }
  .CanvasComparisonSlider_handle {
    min-width: 48px;
    height: 29px;
    font-size: 10px;
  }
}

/* src/helpers/shapePaintControls.css */
.dtf-shape-paint {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 0;
  margin: 8px 0;
  border: 0;
  color: #334155;
}
.dtf-shape-paint label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
}
.dtf-shape-paint label:first-child {
  grid-column: 1/-1;
}
.dtf-shape-paint :is(input, select) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #172554;
  font: inherit;
}
.dtf-shape-paint input[type=color] {
  padding: 3px;
}
.dtf-shape-paint-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 6px;
}
.dtf-shape-paint-compact label {
  flex: 0 0 48px;
}
.dtf-shape-paint-compact label:first-child {
  flex-basis: 115px;
}
.dtf-shape-paint-compact input[type=color] {
  width: 36px;
}
section > .dtf-object-tools-dock {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  max-width: 100%;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-bottom: 1px solid #cbd5e1;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  background: #f7f9fb;
  z-index: 2;
}
section > .dtf-object-tools-dock button {
  flex-shrink: 0;
  min-height: 28px !important;
  height: 28px;
  padding: 4px 6px;
  font-size: 10px;
}
.dtf-object-tools-dock .dtf-shape-paint-compact {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin: 0 4px 0 0;
}
.dtf-object-tools-dock .dtf-shape-paint-compact label {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  font-size: 0;
}
.dtf-object-tools-dock .dtf-shape-paint-compact label:first-child {
  flex: 0 0 102px;
}
.dtf-object-tools-dock .dtf-shape-paint-compact :is(input, select) {
  height: 28px;
  min-height: 28px;
  padding: 3px;
  font-size: 11px;
}
.dtf-object-tools-dock .dtf-shape-paint-compact input[type=color] {
  width: 28px;
}
.dtf-object-tools-dock .dtf-shape-paint-compact input[type=number] {
  width: 42px;
}

/* src/helpers/shapeLibrary.css */
.dtf-shape-library {
  margin: 8px 0 12px;
}
.dtf-shape-search input,
.dtf-shape-filter select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 7px 9px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: #243247;
}
.dtf-shape-filter {
  display: grid;
  gap: 4px;
  margin: 10px 0;
  font-size: 11px;
  color: #64748b;
}
.dtf-shape-library .dtf-shape-collection {
  margin: 12px 0;
  padding: 0 !important;
  border: 0;
}
.dtf-shape-collection header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
}
.dtf-shape-collection strong {
  font-size: 12px;
  font-weight: 650;
}
.dtf-shape-library .dtf-shape-collection header button,
.dtf-shape-library .dtf-shape-back {
  width: auto;
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.dtf-shape-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.dtf-shape-library .dtf-shape-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 84px;
  padding: 7px 3px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}
.dtf-shape-grid img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.dtf-shape-grid span {
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
.dtf-shape-library .dtf-shape-grid button:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.dtf-shape-library button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.dtf-shape-library > small {
  display: block;
  font-size: 10px;
  color: #64748b;
  line-height: 1.4;
}
.dtf-shape-color-tools {
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #243247;
}
.dtf-shape-color-tools > strong {
  font-size: 12px;
}
.dtf-shape-color-tools > div {
  margin: 8px 0;
}
.dtf-shape-color-tools > p {
  font-size: 11px;
  line-height: 1.45;
  margin: 6px 0 0;
  color: #64748b;
}
.dtf-shape-color-tools > button {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  margin: 4px 0;
  font-size: 12px;
}

/* src/helpers/prepNavigation.css */
.dtf-prep-nav {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  container-type: inline-size;
}
.dtf-prep-rail {
  display: grid;
  gap: 4px;
  padding: 4px 0;
  align-self: start;
}
.dtf-prep-nav .dtf-prep-rail button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 7px 5px 7px 7px;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-right: 0;
  border-radius: 7px 0 0 7px;
  background: #f1f5f9;
  color: #475569;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.dtf-prep-nav .dtf-prep-rail button[aria-expanded=true] {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #93c5fd;
  box-shadow: inset 3px 0 #2563eb;
}
.dtf-prep-workspace {
  min-width: 0;
  min-height: 220px;
  border-left: 1px solid #cbd5e1;
  padding-left: 10px;
}
.dtf-prep-workspace:focus {
  outline: none;
}
.dtf-prep-workspace:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
.dtf-prep-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
}
.dtf-prep-nav .dtf-prep-panel-header button {
  flex-shrink: 0;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  font-size: 24px;
  cursor: pointer;
}
.dtf-prep-empty {
  padding: 12px 4px;
  font-size: 13px;
  color: #64748b;
}
.dtf-prep-nav .dtf-prep-section {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.dtf-prep-nav .dtf-prep-section[hidden] {
  display: none !important;
}
.dtf-prep-body {
  min-width: 0;
  padding-top: 10px;
}
.dtf-prep-nav .dtf-prep-section:not([hidden]) {
  position: relative;
  animation: dtf-prep-unroll 320ms cubic-bezier(.22, .8, .25, 1) backwards;
}
.dtf-prep-nav .dtf-prep-section:not([hidden])::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 10px;
  left: calc(100% - 10px);
  opacity: 0;
  pointer-events: none;
  border-radius: 5px;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #e2e8f0 35%,
      #94a3b8 62%,
      #cbd5e1 82%,
      #f8fafc 100%);
  box-shadow: 3px 0 7px rgba(15, 23, 42, .22);
  animation: dtf-prep-roll 320ms cubic-bezier(.22, .8, .25, 1) backwards;
}
.dtf-prep-nav .dtf-prep-body :is(input, select, button, fieldset) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.dtf-prep-nav .dtf-prep-body :is(button, select, input[type=number], input[type=text]) {
  min-height: 44px;
}
.dtf-prep-nav .dtf-prep-body input[type=range] {
  width: 100%;
  min-height: 32px;
}
.dtf-prep-nav button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
.dtf-prep-background {
  margin: 0 0 8px;
  padding: 8px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
}
.dtf-prep-background summary {
  cursor: pointer;
  min-height: 32px;
  line-height: 32px;
  font-weight: 600;
}
.dtf-prep-background button {
  min-height: 44px;
  min-width: 44px;
}
@container (max-width: 440px) {
  .dtf-prep-nav .dtf-prep-body div:has(> label:nth-child(2)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .dtf-prep-body label {
    overflow-wrap: anywhere;
  }
  .dtf-prep-body label > :is(input:not([type=checkbox]):not([type=color]), select) {
    display: block;
    width: 100%;
  }
}
@keyframes dtf-prep-unroll {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 -14px 0 0);
  }
}
@keyframes dtf-prep-roll {
  0% {
    left: -10px;
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 10px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dtf-prep-nav .dtf-prep-section:not([hidden]) {
    animation: none;
  }
  .dtf-prep-nav .dtf-prep-section:not([hidden])::before {
    display: none;
  }
}
.dtf-prep-scroll-host {
  overflow: hidden !important;
}
.dtf-prep-nav {
  grid-template-columns: 56px minmax(0, 1fr);
  height: var(--prep-available-height, 65dvh);
  min-height: 0;
  overflow: hidden;
}
.dtf-prep-rail {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 8px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
.dtf-prep-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.dtf-prep-nav .dtf-prep-rail button {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 12px;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
}
.dtf-prep-nav .dtf-prep-rail button:hover {
  background: #f1f5f9;
  color: #334155;
}
.dtf-prep-nav .dtf-prep-rail button[aria-expanded=true] {
  color: #1d4ed8;
  background: #e2e8f0;
  box-shadow: none;
}
.dtf-prep-tab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.dtf-prep-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 0 0 12px;
  background: #fff;
}
.dtf-prep-workspace[data-open=false] {
  visibility: hidden;
}
.dtf-prep-panel-header {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 0 8px;
}
.dtf-prep-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding-right: 6px;
}
@container (max-width: 320px) {
  .dtf-prep-workspace {
    padding-left: 6px;
  }
}
.dtf-prep-scroll-host {
  padding: 0 8px !important;
}
.dtf-prep-scroll-host .dtf-prep-drawer-header {
  min-height: 44px;
  padding: 4px 2px !important;
  margin: 0 !important;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.dtf-prep-scroll-host .dtf-prep-drawer-header b {
  font-size: 16px;
  line-height: 1.25;
}
.dtf-prep-scroll-host .dtf-prep-drawer-header span {
  display: none;
}
.dtf-prep-scroll-host .dtf-prep-drawer-header button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
}
.dtf-prep-scroll-host .dtf-prep-shell {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0;
  border: 0;
  background: #fff;
}
.dtf-prep-background {
  padding: 0 2px;
  margin: 0;
  border: 0;
  font-size: 12px;
}
.dtf-prep-background summary {
  min-height: 30px;
  line-height: 30px;
  font-weight: 500;
}
.dtf-prep-background[open] {
  padding-bottom: 6px;
}
.dtf-prep-nav {
  grid-template-columns: 46px minmax(0, 1fr);
}
.dtf-prep-rail {
  gap: 2px;
  padding: 0 2px 0 0;
}
.dtf-prep-nav .dtf-prep-rail button {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 11px;
  border-radius: 7px;
  margin: 0;
}
.dtf-prep-rail svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.dtf-prep-workspace {
  padding-left: 6px;
}
.dtf-prep-nav .dtf-prep-panel-header {
  min-height: 44px;
  padding: 0;
  font-size: 14px;
  gap: 4px;
}
.dtf-prep-panel-header strong {
  font-size: 14px;
  line-height: 1.3;
}
.dtf-prep-nav .dtf-prep-panel-header button {
  background: transparent;
  width: 44px;
  min-height: 44px;
  font-size: 22px;
}
.dtf-prep-workspace:focus-visible {
  outline: none;
}
.dtf-prep-panel-scroll {
  padding-right: 3px;
}
.dtf-prep-body {
  padding-top: 6px;
  font-size: 13px;
  line-height: 1.45;
}
.dtf-prep-nav .dtf-prep-body p {
  font-size: 12px;
  line-height: 1.45;
  margin: 6px 0 8px;
}
.dtf-prep-help {
  margin: 0 0 6px;
  font-size: 12px;
}
.dtf-prep-help summary {
  cursor: pointer;
  min-height: 28px;
  line-height: 28px;
  color: #64748b;
}
.dtf-prep-nav .dtf-prep-body .dtf-prep-size-presets {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px;
  margin: 6px 0;
}
.dtf-prep-nav .dtf-prep-size-presets button {
  width: 100%;
  min-height: 44px;
  padding: 6px 2px;
  margin: 0;
  font-size: 13px;
}
.dtf-prep-scroll-host {
  scrollbar-gutter: auto;
}
aside:has(> .dtf-prep-scroll-host .dtf-prep-nav[data-open=false]) .dtf-prep-background {
  display: none;
}
.dtf-prep-nav[data-open=false] {
  grid-template-columns: 46px;
  width: 46px;
}
.dtf-prep-nav[data-open=false] .dtf-prep-workspace {
  display: none;
}
.dtf-prep-nav .dtf-distress-controls > p {
  margin: 0 0 8px;
}
.dtf-prep-nav .dtf-distress-controls fieldset {
  gap: 8px !important;
}
.dtf-prep-nav .dtf-distress-controls label {
  font-size: 13px;
  line-height: 1.4;
}
.dtf-prep-nav .dtf-distress-controls select,
.dtf-prep-nav .dtf-distress-controls input[type=number] {
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  font-size: 14px;
}
.dtf-prep-nav .dtf-distress-controls button {
  padding: 6px 8px;
  font-size: 13px;
}
.dtf-prep-garment {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  padding: 6px 2px 8px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.dtf-prep-garment-label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  margin-right: 2px;
}
.dtf-prep-background.dtf-prep-garment button.dtf-prep-swatch {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  cursor: pointer;
  outline-offset: 1px;
}
.dtf-prep-swatch-custom {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.dtf-prep-background.dtf-prep-garment button.dtf-prep-garment-toggle {
  margin-left: auto;
  min-height: 24px;
  min-width: 0;
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
}
.dtf-prep-nav .dtf-prep-panel-scroll section.dtf-prep-section ~ section.dtf-prep-section,
.dtf-prep-nav .dtf-prep-legacy section.dtf-prep-section ~ section.dtf-prep-section {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 4px solid #94a3b8 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.dtf-prep-nav .dtf-prep-panel-scroll h4.dtf-prep-subtitle {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-left: 5px solid #2563eb !important;
  border-radius: 4px !important;
  background: #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0f172a !important;
  line-height: 1.3 !important;
}
.dtf-prep-nav .dtf-prep-body :is(button, select, input[type=number], input[type=text]) {
  min-height: 34px;
}
.dtf-prep-nav .dtf-prep-body input[type=range] {
  min-height: 22px;
}
.dtf-prep-nav .dtf-prep-body p {
  margin: 4px 0 6px;
}
.dtf-finish {
  display: grid;
  gap: 8px;
}
.dtf-finish-lead {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  color: #475569;
}
.dtf-hint {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}
.dtf-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
}
.dtf-row-label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.dtf-row-value {
  font-size: 12px;
  min-width: 38px;
  text-align: right;
}
.dtf-row > select,
.dtf-row > .dtf-seg {
  grid-column: 2 / -1;
}
.dtf-prep-nav .dtf-prep-body .dtf-row select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
}
.dtf-prep-nav .dtf-prep-body input.dtf-row-color {
  width: 28px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.dtf-prep-nav .dtf-prep-body input.dtf-row-color:disabled {
  opacity: .35;
  cursor: default;
}
.dtf-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  overflow: hidden;
}
.dtf-prep-nav .dtf-prep-body .dtf-seg button {
  min-height: 30px;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dtf-prep-nav .dtf-prep-body .dtf-seg button + button {
  border-left: 1px solid #cbd5e1;
}
.dtf-prep-nav .dtf-prep-body .dtf-seg button.dtf-seg-on {
  background: #2563eb;
  color: #fff;
}
.dtf-prep-nav .dtf-prep-body .dtf-seg button:disabled {
  opacity: .6;
  cursor: default;
}
.dtf-finish-action {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 8px 0;
  margin-top: 6px;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0),
      #fff 30%);
}
.dtf-finish-action button {
  width: 100%;
  margin: 0 !important;
}
.dtf-prep-legacy {
  margin-top: 10px;
  border-top: 1px solid #eef2f7;
  padding-top: 6px;
  font-size: 12px;
  color: #64748b;
}
.dtf-prep-legacy > summary {
  cursor: pointer;
  min-height: 28px;
  line-height: 28px;
}
.dtf-prep-legacy[open] > summary {
  color: #334155;
  font-weight: 600;
}
.dtf-prep-nav {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}
.dtf-prep-nav[data-open=false] {
  grid-template-columns: 68px !important;
  width: 68px !important;
}
.dtf-prep-rail {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  padding: 2px 4px 8px 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}
.dtf-prep-rail-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dtf-prep-rail-group + .dtf-prep-rail-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}
.dtf-prep-nav .dtf-prep-rail button {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 62px !important;
  height: auto !important;
  min-height: 54px !important;
  padding: 6px 2px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent;
  color: #475569;
}
.dtf-prep-nav .dtf-prep-rail button:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.dtf-prep-nav .dtf-prep-rail button[aria-expanded=true] {
  background: #e0e7ff !important;
  color: #1d4ed8 !important;
}
.dtf-prep-rail svg {
  width: 20px !important;
  height: 20px !important;
}
.dtf-prep-rail-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
.dtf-prep-nav {
  grid-template-columns: 52px minmax(0, 1fr) !important;
}
.dtf-prep-nav[data-open=false] {
  grid-template-columns: 52px !important;
  width: 52px !important;
}
.dtf-prep-rail-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.dtf-prep-nav .dtf-prep-rail button {
  width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
}
.dtf-prep-rail svg {
  width: 22px !important;
  height: 22px !important;
}

/* src/components/Button.module.css */
@layer base {
  .Button_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    font-family: var(--font-family-base);
    font-weight: 500;
    border-radius: var(--radius);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--animation-duration-fast) ease,
      border-color var(--animation-duration-fast) ease,
      color var(--animation-duration-fast) ease,
      box-shadow var(--animation-duration-fast) ease;
    outline: none;
    border: 1px solid transparent;
    position: relative;
  }
  .Button_button:focus-visible {
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
    outline: none;
  }
  .Button_sm {
    height: 1.5rem;
    padding: 0 var(--spacing-2);
    font-size: 0.875rem;
  }
  .Button_md {
    height: 2.5rem;
    padding: 0 var(--spacing-3);
    font-size: 0.9375rem;
  }
  .Button_lg {
    height: 3rem;
    padding: 0 var(--spacing-4);
    font-size: 1rem;
    border-radius: var(--radius-md);
  }
  .Button_icon,
  .Button_icon-md {
    width: 2rem;
    height: 2rem;
    padding: 0;
  }
  .Button_icon-sm {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
  }
  .Button_icon-lg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--radius-md);
  }
  .Button_button svg {
    flex-shrink: 0;
  }
  .Button_sm svg,
  .Button_icon-sm svg {
    width: 1rem;
    height: 1rem;
  }
  .Button_md svg,
  .Button_icon svg,
  .Button_icon-md svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .Button_lg svg,
  .Button_icon-lg svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .Button_primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
    --spinner-color: var(--primary-foreground);
  }
  .Button_primary:hover {
    background-color: color-mix(in oklch, var(--primary) 90%, var(--primary-foreground));
    border-color: color-mix(in oklch, var(--primary) 90%, var(--primary-foreground));
  }
  .Button_primary:active {
    background-color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
    border-color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
  }
  .Button_secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border-color: var(--secondary);
    --spinner-color: var(--secondary-foreground);
  }
  .Button_secondary:hover {
    background-color: color-mix(in oklch, var(--secondary) 90%, var(--secondary-foreground));
    border-color: color-mix(in oklch, var(--secondary) 90%, var(--secondary-foreground));
  }
  .Button_secondary:active {
    background-color: color-mix(in oklch, var(--secondary) 85%, var(--secondary-foreground));
    border-color: color-mix(in oklch, var(--secondary) 85%, var(--secondary-foreground));
  }
  .Button_destructive {
    background-color: var(--error);
    color: var(--error-foreground);
    border-color: var(--error);
    --spinner-color: var(--error-foreground);
  }
  .Button_destructive:hover {
    background-color: color-mix(in oklch, var(--error) 90%, var(--error-foreground));
    border-color: color-mix(in oklch, var(--error) 90%, var(--error-foreground));
  }
  .Button_destructive:active {
    background-color: color-mix(in oklch, var(--error) 85%, var(--error-foreground));
    border-color: color-mix(in oklch, var(--error) 85%, var(--error-foreground));
  }
  .Button_destructive:focus-visible {
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--error);
  }
  .Button_outline {
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
    --spinner-color: var(--primary);
  }
  .Button_outline:hover {
    background-color: color-mix(in oklch, var(--primary) 12%, var(--background));
    border-color: color-mix(in oklch, var(--primary) 90%, var(--primary-foreground));
    color: color-mix(in oklch, var(--primary) 90%, var(--primary-foreground));
  }
  .Button_outline:active {
    background-color: color-mix(in oklch, var(--primary) 15%, var(--background));
    border-color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
    color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
  }
  .Button_ghost {
    background-color: transparent;
    border-color: transparent;
    --spinner-color: var(--primary);
  }
  .Button_ghost:hover {
    background-color: color-mix(in oklch, var(--primary) 12%, var(--background));
    color: color-mix(in oklch, var(--primary) 90%, var(--primary-foreground));
  }
  .Button_ghost:active {
    background-color: color-mix(in oklch, var(--primary) 15%, var(--background));
    color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
  }
  .Button_link {
    background-color: transparent;
    color: var(--primary);
    height: auto;
    padding: 0;
    text-decoration: none;
    border: none;
    border-radius: 0;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    --spinner-color: var(--primary);
  }
  .Button_link:hover {
    text-decoration: underline;
    color: color-mix(in oklch, var(--primary) 90%, var(--primary-foreground));
    background-color: transparent;
  }
  .Button_link:active {
    color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
    background-color: transparent;
  }
  .Button_link:focus-visible {
    box-shadow: 0 0 0 2px var(--primary);
    outline: none;
    border-radius: 0.25rem;
  }
  .Button_disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .dark .Button_primary:focus-visible,
  .dark .Button_outline:focus-visible,
  .dark .Button_ghost:focus-visible {
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
  }
  .dark .Button_destructive:focus-visible {
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--error);
  }
  .dark .Button_link:focus-visible {
    box-shadow: 0 0 0 2px var(--primary);
  }
}

/* src/components/Input.module.css */
@layer base {
  .Input_input {
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--foreground);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--spacing-2) var(--spacing-3);
    width: 100%;
    transition:
      border-color var(--animation-duration-normal) ease,
      background-color var(--animation-duration-normal) ease,
      box-shadow var(--animation-duration-normal) ease,
      transform var(--animation-duration-fast) ease;
    outline: none;
    height: 2.5rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  .Input_input::placeholder {
    color: var(--muted-foreground);
    opacity: 0.7;
  }
  .Input_input:hover {
    border-color: color-mix(in srgb, var(--primary) 80%, transparent);
    background-color: color-mix(in srgb, var(--card) 98%, var(--primary) 2%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  .Input_input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent), 0 2px 4px rgba(0, 0, 0, 0.05);
    background-color: var(--card);
  }
  .Input_input:disabled {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 0.75;
    box-shadow: none;
    transform: none;
  }
  .dark .Input_input {
    background-color: color-mix(in srgb, var(--background) 80%, black);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .dark .Input_input:hover {
    background-color: color-mix(in srgb, var(--background) 75%, black);
    border-color: color-mix(in srgb, var(--primary) 90%, white);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15);
  }
  .dark .Input_input:focus {
    background-color: color-mix(in srgb, var(--background) 80%, black);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent), 0 2px 4px rgba(0, 0, 0, 0.15);
  }
}

/* src/components/Textarea.module.css */
@layer base {
  .Textarea_textarea {
    padding: var(--spacing-2);
    width: 100%;
    min-height: 6rem;
    resize: vertical;
  }
  .Textarea_textarea::placeholder {
    color: var(--muted-foreground);
  }
  .Textarea_noResize {
    resize: none;
  }
  .Textarea_clear {
    background-color: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .Textarea_clear:hover,
  .Textarea_clear:focus {
    background-color: transparent;
    border: none;
    box-shadow: none;
  }
}

/* src/components/Select.module.css */
@layer base {
  .Select_selectTrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.5rem;
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
    overflow: hidden;
    & > *:not(svg) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .Select_selectTrigger[data-placeholder] {
    color: var(--muted-foreground);
  }
  .Select_selectIcon {
    height: 1rem;
    width: 1rem;
    color: var(--muted-foreground);
    margin-left: var(--spacing-2);
    transition: transform var(--animation-duration-normal) ease;
  }
  .Select_selectTrigger[data-state=open] .Select_selectIcon {
    transform: rotate(180deg);
  }
  .Select_selectContent {
    z-index: var(--z-overlay);
    max-height: var(--radix-select-content-available-height);
    min-width: 12rem;
    max-width: 24rem;
    overflow: hidden;
    background-color: var(--popup);
    color: var(--popup-foreground);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    animation: Select_scaleIn var(--animation-duration-normal) ease;
  }
  @keyframes Select_scaleIn {
    from {
      opacity: 0;
      transform: scale(0.97);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .Select_selectViewport {
    padding: var(--spacing-2);
  }
  .Select_scrollButton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--spacing-6);
    background-color: var(--popup);
    color: var(--popup-foreground);
    cursor: pointer;
    border: none;
    outline: none;
  }
  .Select_scrollButton:hover .Select_scrollIcon {
    color: var(--primary);
  }
  .Select_scrollIcon {
    height: 1rem;
    width: 1rem;
    color: var(--muted-foreground);
    transition: color var(--animation-duration-fast) ease;
  }
  .Select_selectLabel {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-foreground);
  }
  .Select_selectItem {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    padding-right: var(--spacing-8);
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    color: var(--popup-foreground);
    user-select: none;
    outline: none;
    cursor: pointer;
    transition: background-color var(--animation-duration-fast) ease, color var(--animation-duration-fast) ease;
  }
  .Select_selectItem:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }
  .Select_selectItem:focus-visible {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }
  .Select_selectItem[data-disabled] {
    color: var(--muted-foreground);
    opacity: 0.5;
    pointer-events: none;
  }
  .Select_selectItemIndicator {
    position: absolute;
    right: var(--spacing-3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .Select_checkIcon {
    height: 1rem;
    width: 1rem;
    color: currentColor;
  }
  .Select_selectSeparator {
    height: 1px;
    background-color: var(--border);
    margin: var(--spacing-2) var(--spacing-1);
  }
}

/* src/components/Dialog.module.css */
@layer base {
  .Dialog_overlay {
    position: fixed;
    inset: 0;
    background-color: color-mix(in srgb, black 50%, transparent);
    z-index: var(--z-overlay) !important;
    animation: Dialog_overlayShow var(--animation-duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .Dialog_content {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 85vh;
    width: 32rem;
    background-color: var(--popup);
    color: var(--popup-foreground);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-overlay) !important;
    overflow: auto;
    padding: var(--spacing-6);
    animation: Dialog_contentShow var(--animation-duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .Dialog_close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background-color: var(--muted);
    color: var(--muted-foreground);
    border: none;
    cursor: pointer;
    transition:
      background-color var(--animation-duration-fast) ease,
      color var(--animation-duration-fast) ease,
      transform var(--animation-duration-fast) ease;
  }
  .Dialog_close:hover {
    background-color: var(--muted-foreground);
    color: var(--muted);
    transform: scale(1.05);
  }
  .Dialog_close:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
  }
  .Dialog_closeIcon {
    width: 1rem;
    height: 1rem;
  }
  .Dialog_header {
    margin-bottom: var(--spacing-4);
  }
  .Dialog_footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-6);
  }
  .Dialog_title {
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--popup-foreground);
    line-height: 1.4;
    margin-bottom: var(--spacing-2);
  }
  .Dialog_description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin-bottom: var(--spacing-4);
  }
  .Dialog_screenReaderText {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  @keyframes Dialog_overlayShow {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes Dialog_contentShow {
    from {
      opacity: 0;
      scale: 0.95;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }
}

/* src/components/Checkbox.module.css */
@layer base {
  .Checkbox_checkboxWrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }
  .Checkbox_checkbox {
    appearance: none;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    transition: all var(--animation-duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .Checkbox_checkbox:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
  }
  .Checkbox_checkbox:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--primary);
  }
  .Checkbox_checkbox:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    transform: scale(1);
    animation: Checkbox_checkboxPulse var(--animation-duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .Checkbox_checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--muted);
    border-color: var(--muted);
  }
  .Checkbox_checkmark {
    position: absolute;
    width: 1rem;
    height: 1rem;
    color: var(--primary-foreground);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--animation-duration-normal) cubic-bezier(0.16, 1, 0.3, 1), transform var(--animation-duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .Checkbox_checkbox:checked + .Checkbox_checkmark {
    opacity: 1;
    transform: scale(1);
  }
  .Checkbox_checkbox:disabled + .Checkbox_checkmark {
    color: var(--muted-foreground);
  }
  @keyframes Checkbox_checkboxPulse {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent);
    }
    70% {
      transform: scale(1.02);
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 0%, transparent);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
    }
  }
}

/* src/components/ExportArtworkDialog.module.css */
.ExportArtworkDialog_dialog {
  max-width: 560px;
}
.ExportArtworkDialog_field {
  display: grid;
  gap: 8px;
}
.ExportArtworkDialog_note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.ExportArtworkDialog_check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.ExportArtworkDialog_error {
  font-size: 13px;
  line-height: 1.5;
  color: #ff8899;
}

/* src/components/ProjectMenu.module.css */
.ProjectMenu_projectHeader {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px 10px;
  border-bottom: 1px solid var(--menu-divider,#3c4754);
}
.ProjectMenu_projectMark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #4f5c6c;
  border-radius: 8px;
  background: #252e39;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
}
.ProjectMenu_projectCopy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ProjectMenu_projectCopy > strong {
  overflow: hidden;
  color: #f3f6fa;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ProjectMenu_saveStatus {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8f9aa8;
  font-size: 9px;
  font-weight: 700;
}
.ProjectMenu_saveStatus i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #778290;
}
.ProjectMenu_statusSaved i {
  background: #36d278;
}
.ProjectMenu_statusPending i {
  background: #f2b94b;
}
.ProjectMenu_statusSaving i {
  background: #61b5ff;
  box-shadow: 0 0 0 3px rgba(97, 181, 255, .12);
}
.ProjectMenu_statusError {
  color: #ff9e9e;
}
.ProjectMenu_statusError i {
  background: #ff6262;
}
.ProjectMenu_closeProjectButton {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #4a5664;
  border-radius: 7px;
  background: #252e38;
  color: #aeb9c6;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.ProjectMenu_closeProjectButton:hover {
  border-color: #667486;
  background: #343f4c;
  color: #fff;
}
.ProjectMenu_closeProjectButton:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.ProjectMenu_group {
  padding: 7px 6px;
  border-bottom: 1px solid var(--menu-divider,#3c4754);
}
.ProjectMenu_groupTitle {
  padding: 2px 7px 5px;
  color: #748192;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .9px;
}
.ProjectMenu_item {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #d2d9e2;
  text-align: left;
  cursor: pointer;
}
.ProjectMenu_item:hover {
  background: #343e4a;
  color: #fff;
}
.ProjectMenu_item:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.ProjectMenu_icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #28313c;
  color: #b9c5d2;
  font-size: 13px;
  font-weight: 900;
}
.ProjectMenu_item:hover .ProjectMenu_icon {
  background: #414d5b;
  color: #fff;
}
.ProjectMenu_itemCopy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ProjectMenu_itemCopy b {
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ProjectMenu_itemCopy small {
  overflow: hidden;
  color: #8592a1;
  font-size: 8px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ProjectMenu_item:hover .ProjectMenu_itemCopy small {
  color: #aeb8c5;
}
.ProjectMenu_item kbd {
  padding: 2px 5px;
  border: 1px solid #485463;
  border-radius: 4px;
  background: #252e38;
  color: #8f9baa;
  font: 700 7px var(--font-family-monospace);
}
.ProjectMenu_recentItem {
  min-height: 34px;
}
.ProjectMenu_recentItem .ProjectMenu_icon {
  background: transparent;
}
.ProjectMenu_switchPill {
  padding: 3px 6px;
  border: 1px solid #46515e;
  border-radius: 999px;
  color: #9ba8b6;
  font-size: 7px;
  font-weight: 800;
}
.ProjectMenu_toggle {
  position: relative;
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: #46515e;
}
.ProjectMenu_toggle i {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cfd6df;
  transition: transform .15s ease;
}
.ProjectMenu_toggleOn {
  background: #17723e;
}
.ProjectMenu_toggleOn i {
  transform: translateX(12px);
  background: #fff;
}
.ProjectMenu_exportButton {
  width: calc(100% - 12px);
  height: 34px;
  margin: 7px 6px;
  border: 1px solid #a46af4;
  border-radius: 7px;
  background:
    linear-gradient(
      180deg,
      #9f49ec,
      #8939d8);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.ProjectMenu_exportButton:hover {
  filter: brightness(1.08);
}
.ProjectMenu_dialog {
  max-width: 520px;
}
.ProjectMenu_savedList {
  max-height: 340px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.ProjectMenu_savedProject {
  height: auto !important;
  min-height: 54px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}
.ProjectMenu_savedProject strong {
  font-size: 11px;
}
.ProjectMenu_savedProject span {
  font-size: 9px;
  color: var(--muted-foreground);
}
.ProjectMenu_name {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 800;
}
.ProjectMenu_error {
  margin: 8px 0 0;
  color: #ff7070;
  font-size: 10px;
}
.ProjectMenu_toast {
  position: fixed;
  z-index: 250;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  max-width: 520px;
  padding: 8px 12px;
  border: 1px solid #4b5664;
  border-radius: 7px;
  background: #1e252e;
  color: #fff;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .35);
  font-size: 9px;
  font-weight: 700;
}
.light .ProjectMenu_projectHeader {
  --menu-divider:#d2d8e0;
}
.light .ProjectMenu_projectMark {
  border-color: #c8d0d9;
  background: #eef2f6;
  color: #27313c;
}
.light .ProjectMenu_projectCopy > strong {
  color: #26303b;
}
.light .ProjectMenu_closeProjectButton {
  border-color: #cbd3dc;
  background: #f1f4f7;
  color: #66727f;
}
.light .ProjectMenu_closeProjectButton:hover {
  background: #e5eaf0;
  color: #26313c;
}
.light .ProjectMenu_group {
  --menu-divider:#d2d8e0;
}
.light .ProjectMenu_groupTitle {
  color: #7a8592;
}
.light .ProjectMenu_item {
  color: #465260;
}
.light .ProjectMenu_item:hover {
  background: #e7ebf0;
  color: #202832;
}
.light .ProjectMenu_icon {
  background: #edf1f5;
  color: #65717f;
}
.light .ProjectMenu_item:hover .ProjectMenu_icon {
  background: #dce3ea;
  color: #26313c;
}
.light .ProjectMenu_itemCopy small {
  color: #7b8794;
}
.light .ProjectMenu_item:hover .ProjectMenu_itemCopy small {
  color: #65717f;
}
.light .ProjectMenu_item kbd {
  border-color: #cbd3dc;
  background: #f4f6f8;
  color: #66727f;
}
.light .ProjectMenu_switchPill {
  border-color: #cbd3dc;
  color: #66727f;
}

/* src/components/PatternKnockoutOverlay.module.css */
.PatternKnockoutOverlay_overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.PatternKnockoutOverlay_target {
  position: relative;
  width: 190px;
  height: 190px;
  border: 1px dashed rgba(255, 255, 255, .58);
  border-radius: 50%;
  background: rgba(16, 18, 23, .12);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .2);
}
.PatternKnockoutOverlay_axisX,
.PatternKnockoutOverlay_axisY {
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 255, 255, .5);
  transform: translate(-50%, -50%);
}
.PatternKnockoutOverlay_axisX {
  width: 132px;
  height: 1px;
}
.PatternKnockoutOverlay_axisY {
  width: 1px;
  height: 132px;
}
.PatternKnockoutOverlay_ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(124, 92, 255, .7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.PatternKnockoutOverlay_centerDot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #7c5cff;
  transform: translate(-50%, -50%);
}
.PatternKnockoutOverlay_handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .9);
  background: #171a21;
  color: #fff;
  font: 800 10px/1 system-ui, sans-serif;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
}
.PatternKnockoutOverlay_handle:active {
  cursor: grabbing;
}
.PatternKnockoutOverlay_sizeHandle {
  border-color: #9f8bff;
}
.PatternKnockoutOverlay_angleHandle {
  border-color: #77d7e8;
}
.PatternKnockoutOverlay_readout {
  position: absolute;
  left: 50%;
  bottom: -27px;
  transform: translateX(-50%);
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(19, 22, 28, .9);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #edf1f7;
  font:
    700 9px/1.1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .PatternKnockoutOverlay_target {
    width: 170px;
    height: 170px;
  }
  .PatternKnockoutOverlay_handle {
    width: 34px;
    height: 34px;
  }
}

/* src/base.css */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(/assets/fonts/3y9U6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiaaD30YfKfjZZoLvcXlyM0.ttf) format("truetype");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(/assets/fonts/3y9U6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiaaD30YfKfjZZoLvfzlyM0.ttf) format("truetype");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  font-display: swap;
  src: url(/assets/fonts/3y9U6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiaaD30YfKfjZZoLvZvlyM0.ttf) format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/-F6qfjptAgt5VM-kVkqdyU8n3twJ8lc.ttf) format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/-F6qfjptAgt5VM-kVkqdyU8n3vAO8lc.ttf) format("truetype");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mjDw-qXA.ttf) format("truetype");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mjPQ-qXA.ttf) format("truetype");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mj0QiqXA.ttf) format("truetype");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mj6AiqXA.ttf) format("truetype");
}
@font-face {
  font-family: "Bebas Neue";
  src: url(/assets/fonts/bebas-neue-regular.ttf) format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --z-overlay: 400;
  --z-spotlight: 1000;
  --z-critical: 2000;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
}
:root {
  --background: #252a33;
  --foreground: #f8fafc;
  --surface: #343b47;
  --surface-foreground: #f8fafc;
  --sidebar: #303743;
  --sidebar-foreground: #f8fafc;
  --card: #394250;
  --card-foreground: #f8fafc;
  --popup: #343b47;
  --popup-foreground: #f8fafc;
  --primary: #9852f5;
  --primary-foreground: #ffffff;
  --secondary: #46505f;
  --secondary-foreground: #f8fafc;
  --accent: #43d1ff;
  --accent-foreground: #10202a;
  --muted: #4a5362;
  --muted-foreground: #c1c8d2;
  --success: #4ce28a;
  --success-foreground: #10251a;
  --error: #ff667d;
  --error-foreground: #2d0b10;
  --warning: #f5c451;
  --warning-foreground: #2c2108;
  --info: #43d1ff;
  --info-foreground: #10202a;
  --info-hover: #65d9ff;
  --info-active: #25bde9;
  --border: #5a6574;
  --font-family-base: "Inter Tight", sans-serif;
  --font-family-display: "Bricolage Grotesque", sans-serif;
  --font-family-monospace: "IBM Plex Mono", monospace;
  --font-family-cursive: cursive;
  --shadow: 0 2px 8px rgba(0,0,0,.18);
  --shadow-md: 0 8px 24px rgba(0,0,0,.22);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.28);
  --shadow-focus: 0 0 0 3px rgba(152,82,245,.3);
  --radius-sm: 5px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --animation-duration-fast: 120ms;
  --animation-duration-normal: 180ms;
  --animation-duration-slow: 280ms;
  --chart-color-1: #9852f5;
  --chart-color-2: #43d1ff;
  --chart-color-3: #4ce28a;
  --chart-color-4: #f5c451;
  --chart-color-5: #ff667d;
}
.dark {
  --background: #252a33;
  --foreground: #f8fafc;
  --surface: #343b47;
  --surface-foreground: #f8fafc;
  --sidebar: #303743;
  --sidebar-foreground: #f8fafc;
  --card: #394250;
  --card-foreground: #f8fafc;
  --popup: #343b47;
  --popup-foreground: #f8fafc;
  --primary: #9852f5;
  --primary-foreground: #ffffff;
  --secondary: #46505f;
  --secondary-foreground: #f8fafc;
  --accent: #43d1ff;
  --accent-foreground: #10202a;
  --muted: #4a5362;
  --muted-foreground: #c1c8d2;
  --success: #4ce28a;
  --success-foreground: #10251a;
  --error: #ff667d;
  --error-foreground: #2d0b10;
  --warning: #f5c451;
  --warning-foreground: #2c2108;
  --info: #43d1ff;
  --info-foreground: #10202a;
  --info-hover: #65d9ff;
  --info-active: #25bde9;
  --border: #5a6574;
}
.light {
  --background: #f3f5f8;
  --foreground: #1f2630;
  --surface: #e8ecf1;
  --surface-foreground: #1f2630;
  --sidebar: #f8f9fb;
  --sidebar-foreground: #1f2630;
  --card: #ffffff;
  --card-foreground: #1f2630;
  --popup: #ffffff;
  --popup-foreground: #1f2630;
  --primary: #7d42d8;
  --primary-foreground: #ffffff;
  --secondary: #e7ebf0;
  --secondary-foreground: #26303b;
  --accent: #168fc0;
  --accent-foreground: #ffffff;
  --muted: #e0e5eb;
  --muted-foreground: #5e6977;
  --success: #249556;
  --success-foreground: #ffffff;
  --error: #c9475a;
  --error-foreground: #ffffff;
  --warning: #b98213;
  --warning-foreground: #ffffff;
  --info: #168fc0;
  --info-foreground: #ffffff;
  --info-hover: #117da8;
  --info-active: #0e6b90;
  --border: #c8d0da;
  --shadow: 0 2px 8px rgba(31,38,48,.12);
  --shadow-md: 0 8px 24px rgba(31,38,48,.14);
  --shadow-lg: 0 18px 50px rgba(31,38,48,.18);
}
@layer base {
  :root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-family-base);
  }
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  th,
  td {
    display: table-cell !important;
  }
}
.rbc-month-view {
  overflow: visible !important;
}