/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-black: #000;
    --spacing: 0.25rem;
    --container-md: 28rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-full {
    top: 100%;
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .isolate {
    isolation: isolate;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-50 {
    z-index: 50;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .-mt-10 {
    margin-top: calc(var(--spacing) * -10);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .table-cell {
    display: table-cell;
  }
  .table-row {
    display: table-row;
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-\[46px\] {
    height: 46px;
  }
  .h-full {
    height: 100%;
  }
  .max-h-32 {
    max-height: calc(var(--spacing) * 32);
  }
  .min-h-28 {
    min-height: calc(var(--spacing) * 28);
  }
  .min-h-\[200px\] {
    min-height: 200px;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-full {
    width: 100%;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .min-w-\[120px\] {
    min-width: 120px;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .origin-center {
    transform-origin: center;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-copy {
    cursor: copy;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .appearance-none {
    appearance: none;
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-current {
    border-color: currentcolor;
  }
  .bg-\[var\(--sdm-tbg\)\] {
    background-color: var(--sdm-tbg);
  }
  .bg-black\/10 {
    background-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .text-left {
    text-align: left;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .wrap-anywhere {
    overflow-wrap: anywhere;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-\[var\(--sdm-c\,inherit\)\] {
    color: var(--sdm-c,inherit);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .\[counter-increment\:line_0\] {
    counter-increment: line 0;
  }
  .\[counter-reset\:line\] {
    counter-reset: line;
  }
  .group-hover\:block {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: block;
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .before\:mr-4 {
    &::before {
      content: var(--tw-content);
      margin-right: calc(var(--spacing) * 4);
    }
  }
  .before\:inline-block {
    &::before {
      content: var(--tw-content);
      display: inline-block;
    }
  }
  .before\:w-6 {
    &::before {
      content: var(--tw-content);
      width: calc(var(--spacing) * 6);
    }
  }
  .before\:text-right {
    &::before {
      content: var(--tw-content);
      text-align: right;
    }
  }
  .before\:font-mono {
    &::before {
      content: var(--tw-content);
      font-family: var(--font-mono);
    }
  }
  .before\:text-\[13px\] {
    &::before {
      content: var(--tw-content);
      font-size: 13px;
    }
  }
  .before\:content-\[counter\(line\)\] {
    &::before {
      --tw-content: counter(line);
      content: var(--tw-content);
    }
  }
  .before\:select-none {
    &::before {
      content: var(--tw-content);
      -webkit-user-select: none;
      user-select: none;
    }
  }
  .before\:\[counter-increment\:line\] {
    &::before {
      content: var(--tw-content);
      counter-increment: line;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .supports-\[backdrop-filter\]\:backdrop-blur {
    @supports (backdrop-filter: var(--tw)) {
      --tw-backdrop-blur: blur(8px);
      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    }
  }
  .supports-\[backdrop-filter\]\:backdrop-blur-sm {
    @supports (backdrop-filter: var(--tw)) {
      --tw-backdrop-blur: blur(var(--blur-sm));
      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    }
  }
  .dark\:bg-\[var\(--shiki-dark-bg\,var\(--sdm-tbg\)\)\] {
    @media (prefers-color-scheme: dark) {
      background-color: var(--shiki-dark-bg,var(--sdm-tbg));
    }
  }
  .dark\:text-\[var\(--shiki-dark\,var\(--sdm-c\,inherit\)\)\] {
    @media (prefers-color-scheme: dark) {
      color: var(--shiki-dark,var(--sdm-c,inherit));
    }
  }
  .\[\&_svg\]\:h-auto {
    & svg {
      height: auto;
    }
  }
  .\[\&_svg\]\:w-auto {
    & svg {
      width: auto;
    }
  }
  .\[\&_thead\]\:sticky {
    & thead {
      position: sticky;
    }
  }
  .\[\&_thead\]\:top-0 {
    & thead {
      top: calc(var(--spacing) * 0);
    }
  }
  .\[\&_thead\]\:z-10 {
    & thead {
      z-index: 10;
    }
  }
  .\[\&\>\*\:first-child\]\:mt-0 {
    &>*:first-child {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .\[\&\>\*\:last-child\]\:mb-0 {
    &>*:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .\[\&\>\*\:last-child\]\:after\:inline {
    &>*:last-child {
      &::after {
        content: var(--tw-content);
        display: inline;
      }
    }
  }
  .\[\&\>\*\:last-child\]\:after\:align-baseline {
    &>*:last-child {
      &::after {
        content: var(--tw-content);
        vertical-align: baseline;
      }
    }
  }
  .\[\&\>\*\:last-child\]\:after\:content-\[var\(--streamdown-caret\)\] {
    &>*:last-child {
      &::after {
        --tw-content: var(--streamdown-caret);
        content: var(--tw-content);
      }
    }
  }
  .\[\&\>p\]\:inline {
    &>p {
      display: inline;
    }
  }
  .\[li_\&\]\:pl-6 {
    li & {
      padding-left: calc(var(--spacing) * 6);
    }
  }
}
:root {
  color-scheme: dark;
  --ink: #f5f6f7;
  --muted: #8f959e;
  --line: rgba(255, 255, 255, 0.09);
  --panel: #14171c;
  --panel-2: #1a1e24;
  --canvas: #08090b;
  --blue: #8ab4ff;
  --accent: #f1ff63;
  --menu-surface: rgba(20, 22, 27, 0.985);
  --menu-border: rgba(255, 255, 255, 0.12);
  --menu-radius: 12px;
  --menu-item-radius: 8px;
  --menu-item-height: 36px;
  --menu-item-font: 11px;
  --menu-shadow: 0 22px 60px rgba(0, 0, 0, 0.52);
}
.df180-root {
  --df-paper: #f7f7f4;
  --df-white: #fff;
  --df-ink: #101110;
  --df-soft-ink: #252724;
  --df-muted: #676a64;
  --df-line: #d9dbd4;
  --df-dark-line: #30322f;
  --df-coral: #ff5a45;
  --df-lime: #d7f36b;
  --df-control-weight: 560;
  --df-public-action-size: 13px;
  --df-public-action-weight: 500;
  --df-public-action-radius: 9px;
  --df-public-action-height: 44px;
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  background: var(--df-paper);
  color: var(--df-ink);
  font-family: var(--font-geist-sans), Arial, sans-serif;
  overscroll-behavior-y: contain;
}
.df180-root * {
  box-sizing: border-box;
}
.df180-root button,
.df180-root a,
.df180-root textarea {
  font: inherit;
}
.df180-root button,
.df180-root a {
  -webkit-tap-highlight-color: transparent;
}
.df180-root button:focus-visible,
.df180-root a:focus-visible,
.df180-root textarea:focus-visible,
.df180-gallery:focus-visible {
  outline: 3px solid var(--df-coral);
  outline-offset: 3px;
}
.df180-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 34px;
  border-bottom: 1px solid var(--df-line);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--df-line) 72%, transparent);
  }
  background: var(--df-paper);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-paper) 92%, transparent);
  }
  backdrop-filter: blur(18px);
}
.df180-logo {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  color: var(--df-ink);
  text-decoration: none;
}
.df180-footer .df180-logo {
  --donefeed-wordmark-size: 13px;
}
.df180-nav nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.df180-nav nav a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #4f524d;
  font-size: 13px;
  text-decoration: none;
}
.df180-nav nav a::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 2px;
  background: var(--df-coral);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s ease;
}
.df180-nav nav a.active {
  color: var(--df-ink);
}
.df180-nav nav a.active::after {
  transform: scaleX(1);
}
.df180-nav > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.df180-login,
.df180-nav-cta {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.df180-login {
  padding: 0 16px;
  background: transparent;
  color: var(--df-ink);
}
.df180-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  background: var(--df-ink);
  color: #fff;
  font-weight: var(--df-control-weight);
}
.df180-section {
  position: relative;
  width: 100%;
}
.df180-hero {
  min-height: 920px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: clamp(54px, 7vh, 86px) 24px 74px;
  isolation: isolate;
}
.df180-hero-copy {
  position: relative;
  z-index: 4;
  width: min(1100px, 100%);
  text-align: center;
}
.df180-hero-copy > p:first-child {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 19px;
  color: #696c67;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.df180-hero-copy > p:first-child i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--df-coral);
}
.df180-hero h1 {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(58px, 5.25vw, 76px);
  font-weight: 730;
  letter-spacing: -.058em;
  line-height: .94;
  text-wrap: balance;
}
.df180-hero h1 span {
  display: block;
  color: inherit;
}
.df180-hero-copy h2 {
  margin: 24px 0 0;
  font-size: clamp(21px, 2.25vw, 30px);
  font-weight: 530;
  letter-spacing: -.035em;
}
.df180-hero-deck {
  width: min(720px, 100%);
  margin: 22px auto 0;
  color: var(--df-muted);
  font-size: 17px;
  line-height: 1.55;
}
.df180-conveyor {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 600px;
  pointer-events: none;
  transform: translateY(calc(var(--df-hero-progress, 0) * -92px));
  transform-origin: center bottom;
  will-change: transform;
  perspective: 920px;
  perspective-origin: 50% 6%;
}
.df180-conveyor::before {
  position: absolute;
  z-index: 4;
  inset: -20px 0 auto;
  height: 110px;
  background: linear-gradient(to bottom, var(--df-paper), transparent);
  content: "";
}
.df180-runway {
  position: absolute;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(5, 190px);
  gap: 13px;
  width: max-content;
  transform-origin: center top;
}
.df180-runway-back {
  z-index: 1;
  top: -24px;
  transform: translateX(-50%) rotateX(56deg) scale(.84);
}
.df180-runway-middle {
  z-index: 2;
  top: 128px;
  grid-template-columns: repeat(4, 262px);
  gap: 15px;
  transform: translateX(-50%) rotateX(48deg) scale(.98);
}
.df180-runway-front {
  z-index: 3;
  top: 318px;
  grid-template-columns: repeat(3, 342px);
  gap: 18px;
  transform: translateX(-50%) rotateX(37deg) scale(1.06);
}
.df180-conveyor-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: visible;
  box-shadow: 0 28px 58px rgba(15, 16, 14, .18);
}
.df180-conveyor-card img {
  object-fit: cover;
  animation: df180-image-breathe 11s ease-in-out infinite alternate;
}
.df180-runway .df180-conveyor-card:nth-child(2),
.df180-runway .df180-conveyor-card:nth-child(5) {
  transform: translateY(16px);
}
.df180-runway .df180-conveyor-card:nth-child(3),
.df180-runway .df180-conveyor-card:nth-child(4) {
  transform: translateY(28px);
}
.df180-template-card {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 16px;
  border: 1px solid #b8bbb4;
  border-radius: 14px;
  background: #252825;
  color: #fff;
  isolation: isolate;
}
.df180-template-card > img {
  z-index: -2;
  object-fit: cover;
}
.df180-template-card > div {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 12, 10, .14) 0%, rgba(10, 12, 10, .04) 36%, rgba(10, 12, 10, .8) 100%);
}
.df180-template-card header,
.df180-template-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.df180-template-card header span,
.df180-template-card header small,
.df180-template-card footer {
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.df180-template-card header small {
  opacity: .7;
}
.df180-template-card > strong {
  max-width: 95%;
  margin-top: auto;
  margin-bottom: 18px;
  font-size: clamp(18px, 1.8vw, 29px);
  letter-spacing: -.045em;
  line-height: .95;
}
.df180-template-card footer i {
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, .42);
}
.df180-template-card.tone-coral {
  border-color: #ce4f3d;
}
.df180-template-card.tone-paper > div {
  background: linear-gradient(to bottom, rgba(10, 12, 10, .08) 0%, rgba(10, 12, 10, .03) 34%, rgba(10, 12, 10, .74) 100%);
}
.df180-conveyor-card > .df180-template-card {
  animation: df180-post-wave 6.8s ease-in-out infinite alternate;
  will-change: transform;
}
.df180-conveyor-card:nth-child(2) > .df180-template-card {
  animation-delay: -5.1s;
}
.df180-conveyor-card:nth-child(3) > .df180-template-card {
  animation-delay: -2.4s;
}
.df180-conveyor-card:nth-child(4) > .df180-template-card {
  animation-delay: -6.2s;
}
.df180-conveyor-card:nth-child(5) > .df180-template-card {
  animation-delay: -3.3s;
}
.df180-conveyor-card:nth-child(6) > .df180-template-card {
  animation-delay: -1.2s;
}
@keyframes df180-post-wave {
  from {
    transform: translateY(12px);
  }
  to {
    transform: translateY(-24px);
  }
}
@keyframes df180-image-breathe {
  from {
    transform: scale(1.001);
  }
  to {
    transform: scale(1.035);
  }
}
.df180-composer-wrap {
  position: relative;
  z-index: 5;
  width: min(780px, calc(100vw - 32px));
  margin-top: 28px;
}
.df180-composer {
  overflow: hidden;
  padding: 16px;
  border: 1px solid #343734;
  border-radius: 17px;
  background: #171918;
  box-shadow: 0 30px 80px rgba(11, 12, 10, .27), 0 2px 0 rgba(255, 255, 255, .08) inset;
  color: #fff;
}
.df180-composer:focus-within {
  border-color: #656a64;
  box-shadow: 0 30px 80px rgba(11, 12, 10, .3), 0 0 0 3px rgba(255, 90, 69, .24);
}
.df180-composer label {
  display: block;
  margin: 0 0 8px;
  color: #f7f7f5;
  font-size: 13px;
  font-weight: 700;
}
.df180-composer textarea {
  width: 100%;
  min-height: 60px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 17px;
  line-height: 1.45;
}
.df180-composer textarea::placeholder {
  color: #b7bbb5;
}
.df180-composer footer {
  min-height: 46px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid #2e312e;
}
.df180-composer footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.df180-composer footer > div span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #343734;
  border-radius: 7px;
  background: #202321;
  color: #c6cac4;
  font-size: 11px;
}
.df180-composer footer > small {
  color: #777c76;
  font-size: 10px;
}
.df180-composer footer > button {
  min-width: 126px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 9px;
  background: var(--df-coral);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.df180-composer footer > button:disabled {
  cursor: default;
  opacity: .42;
}
.df180-ideas {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.df180-ideas > span {
  color: #5e615c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.df180-ideas button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d3d5cf;
  border-radius: 999px;
  background: var(--df-paper);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-paper) 82%, transparent);
  }
  color: #4c4f4a;
  cursor: pointer;
  font-size: 11px;
}
.df180-trial,
.df180-error {
  display: flex;
  justify-content: center;
  align-items: center;
}
.df180-trial {
  display: none;
}
.df180-trial i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #999c96;
}
.df180-error {
  margin: 8px 0 0;
  color: #b62d22;
  font-size: 12px;
}
.df180-scroll-cue {
  display: none;
  position: absolute;
  z-index: 6;
  right: 32px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3c3f3a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: right top;
}
.df180-section-intro {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.df180-section-intro > span {
  display: block;
  margin-bottom: 17px;
  color: var(--df-coral);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
}
.df180-section-intro h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(43px, 6vw, 78px);
  font-weight: 680;
  letter-spacing: -.045em;
  line-height: .99;
}
.df180-section-intro > p {
  max-width: 600px;
  margin: 18px 0 0;
  color: #7e827c;
  font-size: 17px;
  line-height: 1.5;
}
.df180-demo {
  min-height: auto;
  padding: 36px 0 76px;
  background: #101211;
  color: #f7f7f4;
}
.df180-demo .df180-section-intro {
  width: min(1360px, calc(100% - 80px));
}
.df180-demo .df180-section-intro > span {
  display: none;
}
.df180-demo-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
}
.df180-demo-heading h2 {
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -.04em;
}
.df180-demo-heading p {
  max-width: 300px;
  margin: 0 0 8px;
  color: #8a8f89;
  font-size: 14px;
  line-height: 1.45;
}
.df180-demo-heading p strong {
  color: #d8dbd7;
}
.df180-demo-grid {
  width: min(1360px, calc(100% - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin: 44px auto 0;
}
.df180-demo-story {
  display: grid;
  gap: 8px;
}
.df180-demo-story button {
  position: relative;
  min-height: 128px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 15px;
  overflow: hidden;
  padding: 19px 16px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #8d928c;
  cursor: pointer;
  text-align: left;
}
.df180-demo-story button[aria-pressed="true"] {
  border-color: #333633;
  background: #181b19;
  color: #fff;
}
.df180-demo-story button > span {
  font-size: 11px;
  font-weight: 800;
}
.df180-demo-story button small {
  display: block;
  margin-bottom: 7px;
  color: var(--df-coral);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.df180-demo-story button strong {
  display: block;
  color: inherit;
  font-size: 15px;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.df180-demo-story button p {
  margin: 8px 0 0;
  color: #8e938d;
  font-size: 12px;
  line-height: 1.45;
}
.df180-demo-story button > i {
  position: absolute;
  right: 16px;
  bottom: 11px;
  left: 65px;
  height: 1px;
  overflow: hidden;
  background: #2e312e;
}
.df180-demo-story button > i b {
  display: none;
  width: 100%;
  height: 100%;
  background: var(--df-coral);
  transform-origin: left;
}
.df180-demo-story button[aria-pressed="true"] > i b {
  display: block;
  animation: df180-step-progress linear forwards;
}
@keyframes df180-step-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.df180-product-shell {
  position: relative;
  min-height: 735px;
  overflow: hidden;
  border: 1px solid #353835;
  border-radius: 14px;
  background: #181a19;
  box-shadow: 0 46px 100px rgba(0, 0, 0, .33);
}
.df180-product-shell > header {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 0 19px;
  border-bottom: 1px solid var(--df-dark-line);
  background: #141615;
}
.df180-product-shell > header .donefeed-logo-mark {
  flex: 0 0 auto;
}
.df180-product-shell > header div {
  display: grid;
  gap: 3px;
}
.df180-product-shell > header strong {
  font-size: 13px;
}
.df180-product-shell > header small,
.df180-saved {
  color: #858a84;
  font-size: 10px;
}
.df180-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.df180-saved i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--df-lime);
}
.df180-shell-actions {
  display: flex !important;
  grid-auto-flow: column;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px !important;
}
.df180-shell-actions > i {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid #343834;
  border-radius: 6px;
  background: #272a28;
  color: #f4f4f1;
  font-size: 9px;
  font-style: normal;
}
.df180-shell-actions > i:last-child {
  border-color: var(--df-coral);
  background: var(--df-coral);
}
.df180-product-shell > nav {
  min-height: 58px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--df-dark-line);
}
.df180-product-shell > nav button {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid #242724;
  background: transparent;
  color: #70756f;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  text-align: left;
}
.df180-product-shell > nav button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.df180-product-shell > nav button small {
  overflow: hidden;
  color: #666b65;
  font-size: 7px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df180-product-shell > nav button b {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #424642;
  border-radius: 50%;
  font-size: 9px;
}
.df180-product-shell > nav button.active {
  color: #fff;
}
.df180-product-shell > nav button.active b {
  border-color: var(--df-coral);
  background: var(--df-coral);
}
.df180-product-shell > nav button.complete b {
  border-color: #596057;
  background: #30342f;
  color: var(--df-lime);
}
.df180-product-shell > nav button > i {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  overflow: hidden;
}
.df180-product-shell > nav button > i em {
  display: none;
  width: 100%;
  height: 100%;
  background: var(--df-coral);
  transform-origin: left;
}
.df180-product-shell > nav button.active > i em {
  display: block;
  animation: df180-step-progress linear forwards;
}
.df180-artifact {
  min-height: 498px;
  padding: 22px;
  animation: df180-artifact-in .42s cubic-bezier(.22, .8, .25, 1);
}
.df180-mobile-artifact {
  display: none;
}
.df180-desktop-artifact {
  min-height: 558px;
  display: block;
}
@keyframes df180-artifact-in {
  from {
    opacity: .35;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.df180-product-shell > footer {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 19px;
  border-top: 1px solid var(--df-dark-line);
  color: #7f847e;
  font-size: 10px;
}
.df180-product-shell > footer > span:last-child {
  justify-self: end;
}
.df180-product-shell > footer span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.df180-studio {
  min-height: 558px;
  display: grid;
  grid-template-columns: minmax(170px, .78fr) minmax(190px, .9fr) minmax(420px, 1.9fr) minmax(190px, .82fr);
  background: #151716;
}
.df180-studio > section,
.df180-studio > aside {
  min-width: 0;
  border-right: 1px solid #303330;
}
.df180-studio-source,
.df180-studio-outline,
.df180-studio-canvas,
.df180-studio-meta {
  transition: background .3s ease, box-shadow .3s ease;
}
.df180-studio.is-step-0 .df180-studio-source,
.df180-studio.is-step-1 .df180-studio-outline,
.df180-studio.is-step-2 .df180-studio-canvas,
.df180-studio.is-step-3 .df180-studio-meta {
  background: #1b1e1c;
  box-shadow: inset 0 2px 0 var(--df-coral);
}
.df180-studio-source {
  padding: 14px;
}
.df180-studio-source > header,
.df180-studio-outline > header,
.df180-studio-canvas > header,
.df180-studio-meta section > header {
  min-height: 31px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #d7dad6;
  font-size: 9px;
  font-weight: 750;
}
.df180-studio-source header i,
.df180-studio-canvas header i,
.df180-studio-meta header i {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #333633;
  border-radius: 5px;
  background: #252825;
  color: #a4a8a3;
  font-size: 8px;
  font-style: normal;
}
.df180-studio-source figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 11px 0 13px;
  border: 1px solid #3b3e3b;
  border-radius: 6px;
  background: #202220;
}
.df180-studio-source figure img {
  object-fit: cover;
}
.df180-studio-source > strong {
  display: block;
  font-size: clamp(14px, 1.3vw, 19px);
  letter-spacing: -.035em;
  line-height: 1.08;
}
.df180-studio-source > p {
  margin: 9px 0 0;
  color: #8b908a;
  font-size: 9px;
  line-height: 1.45;
}
.df180-studio-source > footer {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  color: #696e68;
  font-size: 7px;
}
.df180-studio-outline {
  padding: 14px 12px;
}
.df180-studio-outline > header {
  justify-content: flex-start;
  gap: 18px;
  border-bottom: 1px solid #303330;
}
.df180-studio-outline > header strong {
  align-self: stretch;
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--df-coral);
  color: #fff;
}
.df180-studio-outline ol {
  display: grid;
  gap: 7px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}
.df180-studio-outline li {
  min-height: 67px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 9px 8px;
  border: 1px solid #303330;
  border-radius: 6px;
  background: #1d201e;
}
.df180-studio-outline li > span {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2a2d2a;
  color: #afb3ad;
  font-size: 7px;
}
.df180-studio-outline li div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.df180-studio-outline li strong {
  font-size: 9px;
}
.df180-studio-outline li small {
  overflow: hidden;
  color: #737872;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df180-studio-outline li > i {
  color: #666b65;
  font-size: 10px;
  font-style: normal;
}
.df180-studio-add {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  border: 1px solid #343734;
  border-radius: 6px;
  background: transparent;
  color: #a2a7a1;
  font-size: 8px;
  font-style: normal;
}
.df180-studio-canvas {
  padding: 14px;
}
.df180-studio-canvas > header > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.df180-studio-canvas > header small {
  color: #656a64;
  font-size: 7px;
}
.df180-studio-slides {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.df180-studio-slides article,
.df180-studio-new-slide {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #444844;
  border-radius: 4px;
  background: #f0efe8;
  color: #111311;
}
.df180-studio-slides article > img {
  z-index: 0;
  object-fit: cover;
}
.df180-studio-slides article.tone-cover {
  background: #eab439;
}
.df180-studio-slides article.tone-olive {
  background: #c8d3b4;
}
.df180-studio-slides article.tone-dark {
  background: #202420;
  color: #fff;
}
.df180-studio-slides article.tone-coral {
  background: var(--df-coral);
  color: #fff;
}
.df180-studio-slides article.tone-image {
  color: #fff;
}
.df180-studio-slides article.tone-image::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .72));
  content: "";
}
.df180-studio-slides article small,
.df180-studio-slides article strong,
.df180-studio-slides article span {
  position: relative;
  z-index: 2;
}
.df180-studio-slides article small {
  font-size: 7px;
  font-weight: 800;
}
.df180-studio-slides article strong {
  font-size: clamp(10px, 1vw, 15px);
  letter-spacing: -.045em;
  line-height: .98;
}
.df180-studio-slides article span {
  font-size: 6px;
}
.df180-studio-slides article.selected {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.df180-studio-new-slide {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: transparent;
  color: #747973;
  font-size: 18px;
  font-style: normal;
}
.df180-studio-canvas > footer {
  min-height: 42px;
  display: grid;
  grid-template-columns: 25px 1fr auto 25px;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0 9px;
  border: 1px solid #303330;
  border-radius: 6px;
  color: #797e78;
  font-size: 8px;
}
.df180-studio-canvas > footer > span {
  color: #989d97;
}
.df180-studio-canvas > footer i {
  height: 2px;
  background: #393c39;
}
.df180-studio-canvas > footer i b {
  width: 62%;
  height: 100%;
  display: block;
  background: #f5f5f2;
}
.df180-studio-meta {
  display: grid;
  grid-template-rows: 1.15fr .85fr;
}
.df180-studio-meta > section {
  min-height: 0;
  padding: 14px;
  border-bottom: 1px solid #303330;
}
.df180-studio-meta p {
  margin: 14px 0 0;
  color: #b0b4af;
  font-size: 9px;
  line-height: 1.5;
}
.df180-studio-meta p + p {
  color: #888d87;
}
.df180-studio-meta section > div {
  margin-top: 18px;
  color: #708bc2;
  font-size: 8px;
  line-height: 1.5;
}
.df180-studio-meta section > small {
  display: block;
  margin-top: 13px;
  color: #5f645e;
  font-size: 7px;
  text-align: right;
}
.df180-studio-meta ul {
  display: grid;
  gap: 6px;
  margin: 11px 0;
  padding: 0;
  list-style: none;
}
.df180-studio-meta li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 7px;
  border-bottom: 1px solid #2a2d2a;
  color: #a4a9a3;
  font-size: 8px;
}
.df180-studio-meta li small {
  color: #5f645e;
}
.df180-studio-meta section > .df180-studio-add {
  width: 100%;
  min-height: 30px;
  margin-top: 0;
  border: 1px solid #343734;
  border-radius: 5px;
  background: transparent;
  color: #a2a7a1;
  font-size: 8px;
}
.df180-ui-label {
  color: var(--df-coral);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
}
.df180-source-view {
  min-height: 454px;
  display: grid;
  grid-template-columns: minmax(190px, 280px) 1fr;
  gap: 34px;
  align-items: center;
  padding: 16px 22px;
}
.df180-source-view figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  border: 1px solid #3c403c;
  border-radius: 10px;
  background: #222;
}
.df180-source-view figure img {
  object-fit: cover;
}
.df180-source-view h3 {
  max-width: 390px;
  margin: 15px 0 12px;
  font-size: clamp(24px, 3vw, 39px);
  letter-spacing: -.045em;
  line-height: 1.05;
}
.df180-source-view p {
  max-width: 440px;
  margin: 0;
  color: #a4a9a3;
  font-size: 14px;
  line-height: 1.55;
}
.df180-source-view small {
  display: block;
  margin-top: 26px;
  color: #737872;
  font-size: 10px;
}
.df180-research-view {
  min-height: 454px;
  padding: 10px;
}
.df180-research-view > header {
  display: grid;
  gap: 8px;
  padding: 6px 7px 18px;
}
.df180-research-view > header strong {
  font-size: 21px;
  letter-spacing: -.035em;
}
.df180-research-view > header small {
  color: #7f847e;
  font-size: 11px;
}
.df180-research-view ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.df180-research-view li {
  min-height: 72px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid #303330;
  border-radius: 9px;
  background: #1d201e;
}
.df180-research-view li > span {
  color: var(--df-coral);
  font-size: 10px;
  font-weight: 850;
}
.df180-research-view li div {
  display: grid;
  gap: 4px;
}
.df180-research-view li strong {
  font-size: 13px;
}
.df180-research-view li small {
  color: #858a84;
  font-size: 10px;
}
.df180-research-view li > svg {
  color: var(--df-lime);
}
.df180-source-trace {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 0 0;
  padding: 0 13px;
  border: 1px solid #303330;
  border-radius: 9px;
  color: #8b908a;
  font-size: 10px;
}
.df180-source-trace i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #555a54;
}
.df180-edit-view {
  min-height: 454px;
}
.df180-edit-view > header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding: 3px 2px 16px;
}
.df180-edit-view > header div {
  display: grid;
  gap: 7px;
}
.df180-edit-view > header strong {
  font-size: 16px;
}
.df180-edit-view > header > small {
  color: #727771;
  font-size: 9px;
}
.df180-slide-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  min-width: 0;
}
.df180-slide-strip article {
  min-width: 0;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid #474b46;
  border-radius: 7px;
  background: #efeee7;
  color: #171817;
}
.df180-slide-strip article:nth-child(2) {
  background: #ccd9b8;
}
.df180-slide-strip article:nth-child(3) {
  background: #ff674f;
  color: #fff;
}
.df180-slide-strip article:nth-child(4) {
  background: #1c211d;
  color: #fff;
}
.df180-slide-strip article.is-selected {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.df180-slide-strip article small,
.df180-slide-strip article span {
  font-size: 8px;
  font-weight: 750;
  line-height: 1.35;
}
.df180-slide-strip article strong {
  font-size: clamp(15px, 1.7vw, 23px);
  letter-spacing: -.045em;
  line-height: .98;
}
.df180-edit-status {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 17px;
  padding: 0 14px;
  border: 1px solid #303330;
  border-radius: 8px;
  color: #9da29c;
  font-size: 10px;
}
.df180-edit-status span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.df180-edit-status svg {
  color: var(--df-lime);
}
.df180-export-view {
  min-height: 454px;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 12px;
}
.df180-export-view section,
.df180-export-view aside {
  padding: 26px;
  border: 1px solid #303330;
  border-radius: 10px;
  background: #1c1f1d;
}
.df180-export-view h3 {
  max-width: 460px;
  margin: 45px 0 20px;
  font-size: clamp(25px, 3.1vw, 40px);
  letter-spacing: -.05em;
  line-height: 1.05;
}
.df180-export-view section p {
  max-width: 470px;
  color: #a0a59f;
  font-size: 13px;
  line-height: 1.55;
}
.df180-export-view section div {
  margin-top: 28px;
  color: #d7dad6;
  font-size: 11px;
}
.df180-export-view section small {
  display: block;
  margin-top: 44px;
  color: #6f746e;
}
.df180-export-view aside {
  display: flex;
  flex-direction: column;
}
.df180-export-view aside p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: #b6bab5;
  font-size: 11px;
}
.df180-export-view aside p svg {
  color: var(--df-lime);
}
.df180-export-view aside strong {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border-radius: 8px;
  background: #f6f6f2;
  color: #171817;
  font-size: 11px;
}
.df180-discover {
  overflow: hidden;
  padding: 130px 0 120px;
  background: var(--df-paper);
}
.df180-gallery-actions {
  width: min(1180px, calc(100% - 48px));
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 55px auto 11px;
}
.df180-gallery-actions p {
  margin: 0;
  color: #6c706a;
  font-size: 11px;
}
.df180-gallery-actions div {
  display: flex;
  gap: 7px;
}
.df180-gallery-actions button {
  width: 44px;
  height: 44px;
  border: 1px solid #cfd1ca;
  border-radius: 50%;
  background: transparent;
  color: var(--df-ink);
  cursor: pointer;
}
.df180-gallery {
  width: min(1280px, calc(100% - 48px));
  display: grid;
  grid-template-columns: repeat(6, minmax(240px, 1fr));
  gap: 13px;
  overflow-x: auto;
  margin: 0 auto;
  padding: 4px 0 18px;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pan-y;
}
.df180-gallery figure {
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}
.df180-gallery figure > .df180-template-card {
  position: relative;
  aspect-ratio: 4 / 5;
}
.df180-gallery figure > .df180-template-card img {
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22, .8, .25, 1);
}
.df180-gallery figcaption {
  display: grid;
  gap: 7px;
  padding: 13px 2px 0;
}
.df180-gallery figcaption span {
  color: var(--df-coral);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.df180-gallery figcaption strong {
  font-size: 14px;
  letter-spacing: -.015em;
}
.df180-gallery figcaption small {
  color: #767a74;
  font-size: 10px;
}
.df180-provenance {
  width: min(1180px, calc(100% - 48px));
  margin: 24px auto 0;
  color: #71756f;
  font-size: 11px;
  line-height: 1.5;
}
.df180-control {
  padding: 126px 24px 120px;
  border-top: 1px solid var(--df-line);
  background: #fff;
}
.df180-ledger,
.df180-audience-notes,
.df180-evidence {
  width: min(1180px, 100%);
  margin-right: auto;
  margin-left: auto;
}
.df180-ledger {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  margin-top: 68px;
  border: 1px solid var(--df-line);
  border-radius: 18px;
  background: var(--df-paper);
}
.df180-ledger > article {
  padding: clamp(30px, 4vw, 54px);
}
.df180-ledger > i {
  width: 1px;
  background: var(--df-line);
}
.df180-ledger article > span,
.df180-audience-notes article > span {
  color: var(--df-coral);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}
.df180-ledger h3 {
  margin: 12px 0 28px;
  font-size: clamp(27px, 3vw, 40px);
  letter-spacing: -.05em;
}
.df180-ledger ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.df180-ledger li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #555954;
  font-size: 13px;
}
.df180-ledger li svg {
  color: #222521;
}
.df180-audience-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.df180-audience-notes article {
  min-height: 180px;
  padding: 30px;
  border: 1px solid var(--df-line);
  border-radius: 14px;
}
.df180-audience-notes strong {
  display: block;
  max-width: 430px;
  margin-top: 21px;
  font-size: 21px;
  letter-spacing: -.035em;
}
.df180-audience-notes p {
  max-width: 480px;
  margin: 10px 0 0;
  color: #737771;
  font-size: 13px;
  line-height: 1.5;
}
.df180-evidence {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-top: 22px;
  padding: 20px 0;
  border-top: 1px solid var(--df-line);
}
.df180-evidence p {
  max-width: 690px;
  margin: 0;
  color: #6a6e68;
  font-size: 11px;
  line-height: 1.55;
}
.df180-evidence div {
  display: flex;
  gap: 18px;
}
.df180-evidence a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  color: var(--df-ink);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.df180-start {
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 80px;
  align-items: center;
  padding: 100px max(24px, calc((100vw - 1180px) / 2));
  background: #101211;
  color: #fff;
}
.df180-start > div > span,
.df180-start > aside > span {
  color: var(--df-coral);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}
.df180-start h2 {
  max-width: 690px;
  margin: 18px 0 20px;
  font-size: clamp(64px, 7vw, 104px);
  letter-spacing: -.055em;
  line-height: .9;
}
.df180-start > div > p {
  max-width: 540px;
  margin: 0;
  color: #989d97;
  font-size: 16px;
  line-height: 1.5;
}
.df180-start > div > button {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--df-coral);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}
.df180-start > div > small {
  display: block;
  margin-top: 13px;
  color: #7c817b;
  font-size: 10px;
}
.df180-start > aside {
  padding: 10px 0;
}
.df180-start > aside > button {
  width: 100%;
  min-height: 86px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid #313431;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.df180-start > aside > button > span {
  display: grid;
  gap: 5px;
}
.df180-start > aside > button strong {
  font-size: 15px;
}
.df180-start > aside > button small {
  color: #7f847e;
  font-size: 10px;
  font-weight: 450;
}
.df180-start > aside > button > b {
  font-size: 20px;
}
.df180-start > aside > a {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.df180-footer {
  min-height: 98px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 34px;
  border-top: 1px solid #2c2f2c;
  background: #101211;
  color: #fff;
}
.df180-footer .df180-logo {
  color: #fff;
}
.df180-footer p {
  margin: 0;
  color: #727771;
  font-size: 10px;
}
.df180-footer > div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.df180-footer > div a,
.df180-footer > div button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: #9ca19b;
  cursor: pointer;
  font-size: 10px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .df180-nav a:hover,
  .df180-login:hover,
  .df180-footer a:hover,
  .df180-footer button:hover {
    color: var(--df-coral);
  }
  .df180-nav-cta:hover,
  .df180-composer footer > button:not(:disabled):hover,
  .df180-start > div > button:hover {
    background: #e94734;
  }
  .df180-ideas button:hover,
  .df180-gallery-actions button:hover {
    border-color: #9da099;
    background: #fff;
  }
  .df180-gallery figure:hover .df180-template-card img {
    transform: scale(1.025);
  }
  .df180-start > aside > button:hover {
    color: var(--df-coral);
  }
}
@media (max-width: 1120px) {
  .df180-desktop-artifact {
    display: none;
  }
  .df180-mobile-artifact {
    display: block;
  }
}
@media (max-width: 900px) {
  .df180-nav {
    grid-template-columns: 1fr auto;
    padding: 0 18px;
  }
  .df180-nav nav {
    display: none;
  }
  .df180-demo {
    min-height: auto;
  }
  .df180-demo-grid {
    grid-template-columns: 1fr;
  }
  .df180-product-shell {
    position: relative;
    top: auto;
  }
  .df180-start {
    grid-template-columns: 1fr;
    gap: 65px;
  }
}
@media (max-width: 760px) {
  .df180-nav .df180-logo,
  .df180-footer .df180-logo {
    min-height: 44px;
  }
  .df180-root {
    scroll-behavior: auto;
  }
  .df180-nav {
    min-height: 60px;
  }
  .df180-nav-cta {
    padding: 0 13px;
  }
  .df180-login {
    display: none;
  }
  .df180-hero {
    min-height: 930px;
    padding: 62px 16px 60px;
  }
  .df180-hero-copy > p:first-child {
    flex-wrap: wrap;
    margin-bottom: 17px;
    font-size: 9px;
  }
  .df180-hero h1 {
    max-width: 355px;
    margin: 0 auto;
    font-size: clamp(44px, 12vw, 48px);
    line-height: .96;
  }
  .df180-hero-deck {
    max-width: 350px;
    margin-top: 18px;
    font-size: 14px;
  }
  .df180-composer-wrap {
    width: 100%;
    margin-top: 28px;
  }
  .df180-composer {
    padding: 15px;
    border-radius: 14px;
  }
  .df180-composer textarea {
    min-height: 76px;
    font-size: 16px;
  }
  .df180-composer footer {
    grid-template-columns: 1fr auto;
    gap: 9px;
  }
  .df180-composer footer > div {
    gap: 5px;
  }
  .df180-composer footer > div span {
    min-height: 29px;
    padding: 0 7px;
    font-size: 9px;
  }
  .df180-composer footer > small {
    display: none;
  }
  .df180-composer footer > button {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }
  .df180-composer footer > button span {
    display: none;
  }
  .df180-ideas {
    flex-wrap: wrap;
    gap: 5px;
  }
  .df180-ideas > span {
    width: 100%;
    text-align: center;
  }
  .df180-ideas button {
    min-height: 40px;
  }
  .df180-trial {
    font-size: 11px;
  }
  .df180-conveyor {
    bottom: 0;
    height: 390px;
    perspective: none;
  }
  .df180-conveyor-card {
    width: 44vw;
    border-radius: 10px;
  }
  .df180-runway-back,
  .df180-runway-front {
    display: none;
  }
  .df180-runway-middle {
    top: -8px;
    left: -24vw;
    grid-template-columns: repeat(4, 44vw);
    gap: 9px;
    transform: none;
  }
  .df180-runway-middle .df180-conveyor-card:nth-child(2) {
    transform: translateY(28px);
  }
  .df180-runway-middle .df180-conveyor-card:nth-child(3) {
    transform: translateY(52px);
  }
  .df180-runway-middle .df180-conveyor-card:nth-child(4) {
    transform: translateY(28px);
  }
  .df180-template-card {
    padding: 10px;
    border-radius: 10px;
  }
  .df180-template-card > strong {
    margin-bottom: 10px;
    font-size: 17px;
  }
  .df180-template-card header span,
  .df180-template-card header small,
  .df180-template-card footer {
    font-size: 6.5px;
  }
  .df180-scroll-cue {
    display: none;
  }
  .df180-section-intro {
    width: calc(100% - 32px);
  }
  .df180-section-intro h2 {
    font-size: 43px;
    line-height: 1;
  }
  .df180-section-intro > p {
    font-size: 14px;
  }
  .df180-demo {
    padding: 85px 0 86px;
  }
  .df180-demo-grid {
    width: calc(100% - 24px);
    gap: 16px;
    margin-top: 46px;
  }
  .df180-demo-heading {
    display: block;
  }
  .df180-demo-heading p {
    margin-top: 16px;
  }
  .df180-product-shell {
    min-height: 585px;
    border-radius: 13px;
  }
  .df180-product-shell > header {
    min-height: 60px;
    padding: 0 13px;
  }
  .df180-product-shell > header strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .df180-saved {
    display: none;
  }
  .df180-product-shell > nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .df180-product-shell > nav button {
    min-height: 58px;
    justify-content: flex-start;
    gap: 5px;
    padding: 0 7px;
    font-size: 8px;
  }
  .df180-product-shell > nav button small {
    display: none;
  }
  .df180-artifact {
    min-height: 425px;
    padding: 12px;
  }
  .df180-product-shell > footer span:first-child {
    max-width: 250px;
  }
  .df180-source-view {
    min-height: 400px;
    grid-template-columns: 125px 1fr;
    gap: 16px;
    padding: 8px 4px;
  }
  .df180-source-view h3 {
    margin-top: 10px;
    font-size: 22px;
  }
  .df180-source-view p {
    font-size: 11px;
  }
  .df180-source-view small {
    margin-top: 14px;
    font-size: 8px;
  }
  .df180-research-view li {
    min-height: 67px;
    padding: 8px 10px;
  }
  .df180-research-view li small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .df180-source-trace {
    gap: 6px;
    overflow: hidden;
    font-size: 8px;
    white-space: nowrap;
  }
  .df180-edit-view > header {
    align-items: start;
  }
  .df180-edit-view > header > small {
    max-width: 96px;
    text-align: right;
  }
  .df180-slide-strip {
    grid-template-columns: repeat(4, 138px);
    overflow-x: auto;
    padding: 4px;
    scroll-snap-type: x mandatory;
  }
  .df180-slide-strip article {
    scroll-snap-align: center;
  }
  .df180-edit-status {
    gap: 9px;
    overflow-x: auto;
    font-size: 8px;
    white-space: nowrap;
  }
  .df180-export-view {
    min-height: 400px;
    grid-template-columns: 1fr;
  }
  .df180-export-view section,
  .df180-export-view aside {
    padding: 17px;
  }
  .df180-export-view h3 {
    margin: 18px 0 10px;
    font-size: 25px;
  }
  .df180-export-view section div,
  .df180-export-view section small {
    margin-top: 14px;
  }
  .df180-export-view aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  .df180-export-view aside > span,
  .df180-export-view aside > strong {
    grid-column: 1 / -1;
  }
  .df180-export-view aside p {
    margin: 3px 0;
    font-size: 9px;
  }
  .df180-export-view aside strong {
    min-height: 38px;
    margin-top: 7px;
  }
  .df180-discover {
    padding: 84px 0 78px;
  }
  .df180-gallery-actions,
  .df180-provenance {
    width: calc(100% - 32px);
  }
  .df180-gallery-actions {
    margin-top: 38px;
  }
  .df180-gallery-actions p {
    max-width: 190px;
    font-size: 9px;
    line-height: 1.4;
  }
  .df180-gallery {
    width: 100%;
    grid-template-columns: repeat(6, 72vw);
    padding-right: 16px;
    padding-left: 16px;
  }
  .df180-control {
    padding: 82px 16px 72px;
  }
  .df180-ledger {
    grid-template-columns: 1fr;
    margin-top: 42px;
  }
  .df180-ledger > article {
    padding: 29px 24px;
  }
  .df180-ledger > i {
    width: 100%;
    height: 1px;
  }
  .df180-audience-notes {
    grid-template-columns: 1fr;
  }
  .df180-audience-notes article {
    min-height: 160px;
    padding: 24px;
  }
  .df180-evidence {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .df180-evidence div {
    flex-wrap: wrap;
  }
  .df180-start {
    min-height: 760px;
    gap: 54px;
    padding: 82px 20px;
  }
  .df180-start h2 {
    font-size: 61px;
  }
  .df180-footer {
    grid-template-columns: 1fr auto;
    padding: 22px 18px;
  }
  .df180-footer p {
    display: none;
  }
  .df180-footer > div {
    gap: 12px;
  }
}
@media (pointer: coarse) {
  .df180-root button,
  .df180-root a {
    min-height: 44px;
  }
}
.df180-hero {
  min-height: 1040px;
  padding-top: clamp(56px, 7vh, 84px);
}
.df180-mobile-hero-gallery {
  display: none;
}
.df180-conveyor {
  height: 620px;
  overflow: hidden;
  perspective: 1120px;
  perspective-origin: 50% 2%;
}
.df180-runway {
  gap: 18px;
}
.df180-runway-back {
  top: -8px;
  grid-template-columns: repeat(5, 176px);
  transform: translateX(-50%) rotateX(52deg) scale(.88);
}
.df180-runway-middle {
  top: 122px;
  grid-template-columns: repeat(4, 236px);
  gap: 20px;
  transform: translateX(-50%) rotateX(40deg) scale(.98);
}
.df180-runway-front {
  top: 302px;
  grid-template-columns: repeat(3, 292px);
  gap: 24px;
  transform: translateX(-50%) rotateX(24deg);
}
.df180-runway .df180-conveyor-card:nth-child(2),
.df180-runway .df180-conveyor-card:nth-child(5) {
  transform: translateY(10px);
}
.df180-runway .df180-conveyor-card:nth-child(3),
.df180-runway .df180-conveyor-card:nth-child(4) {
  transform: translateY(18px);
}
.df180-conveyor-card > .df180-template-card {
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(.45, 0, .55, 1);
}
@keyframes df180-post-wave {
  from {
    transform: translateY(8px);
  }
  to {
    transform: translateY(-12px);
  }
}
.df180-template-card {
  color: #fff;
}
.df180-template-card img {
  animation: none;
}
.df180-template-card.layout-manifesto > div,
.df180-template-card.layout-report > div,
.df180-template-card.layout-collage > div {
  background: linear-gradient(180deg, rgba(246, 244, 236, .92), rgba(246, 244, 236, .4) 52%, rgba(18, 20, 18, .7));
}
.df180-template-card.layout-manifesto,
.df180-template-card.layout-report,
.df180-template-card.layout-collage {
  color: #111311;
}
.df180-template-card.layout-manifesto > img {
  opacity: .58;
  filter: saturate(.72);
}
.df180-template-card.layout-manifesto > strong {
  align-self: start;
  max-width: 78%;
  margin: 18px 0 auto;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: .88;
}
.df180-template-card.layout-report > img {
  object-position: center bottom;
}
.df180-template-card.layout-report > strong {
  max-width: 76%;
  margin: 26px 0 auto;
  font-size: clamp(20px, 1.9vw, 30px);
}
.df180-template-card.layout-product {
  color: #fff;
}
.df180-template-card.layout-product > div {
  background: linear-gradient(180deg, rgba(6, 39, 91, .1), rgba(4, 28, 72, .13) 52%, rgba(4, 24, 57, .86));
}
.df180-template-card.layout-product > strong {
  max-width: 76%;
  margin-left: auto;
  text-align: right;
}
.df180-template-card.layout-portrait > strong {
  max-width: 72%;
  font-size: clamp(19px, 1.75vw, 28px);
}
.df180-template-card.layout-minimal > strong {
  max-width: 76%;
  margin-top: 40%;
  font-size: clamp(19px, 1.7vw, 27px);
}
.df180-template-card.layout-serif > strong {
  max-width: 84%;
  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(21px, 2vw, 31px);
  font-weight: 520;
  line-height: .96;
}
.df180-template-card.layout-split {
  color: #171917;
}
.df180-template-card.layout-split > div {
  background: linear-gradient(90deg, rgba(246, 243, 234, .94) 0 51%, rgba(246, 243, 234, .06) 76%), linear-gradient(180deg, transparent 60%, rgba(8, 9, 8, .68));
}
.df180-template-card.layout-split > strong {
  align-self: start;
  max-width: 50%;
  margin: 24px 0 auto;
  font-size: clamp(20px, 1.8vw, 29px);
}
.df180-template-card.layout-collage > strong {
  width: fit-content;
  max-width: 76%;
  padding: 7px 9px;
  background: rgba(247, 245, 238, .9);
  box-shadow: 7px 7px 0 rgba(17, 19, 17, .14);
  font-family: var(--font-serif), Georgia, serif;
  font-weight: 560;
}
.df180-template-card.layout-local > div {
  background: linear-gradient(180deg, rgba(8, 9, 8, .52), transparent 45%, rgba(8, 9, 8, .76));
}
.df180-template-card.layout-local > strong {
  margin-top: 20px;
  margin-bottom: auto;
}
.df180-template-card.tone-olive {
  border-color: #66705f;
}
.df180-template-card.tone-blue {
  border-color: #7ca3c7;
}
.df180-composer-wrap {
  z-index: 8;
}
.df180-demo {
  padding-top: 44px;
}
.df180-demo-heading {
  align-items: end;
}
.df180-demo-heading p {
  max-width: 390px;
}
.df180-product-shell {
  min-height: 810px;
}
.df180-live-studio {
  min-height: 632px;
  display: grid;
  grid-template-columns: 48px minmax(230px, .82fr) minmax(500px, 1.82fr) minmax(230px, .82fr);
  background: #111412;
}
.df180-live-studio > * {
  min-width: 0;
}
.df180-live-chat,
.df180-live-inspector {
  padding: 15px;
  border-right: 1px solid #303330;
  background: #171a18;
}
.df180-live-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border-right: 1px solid #303330;
  background: #141715;
}
.df180-live-rail span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #757a74;
}
.df180-live-rail span.active {
  background: #2a2e2a;
  color: #fff;
}
.df180-live-rail span:last-child {
  margin-top: auto;
}
.df180-live-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.df180-live-chat > header,
.df180-live-canvas > header {
  min-height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #dce0da;
  font-size: 9px;
  font-weight: 760;
}
.df180-live-chat > header small {
  color: #717670;
  font-size: 8px;
  font-weight: 500;
}
.df180-source-chip {
  min-height: 62px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid #343834;
  border-radius: 8px;
  background: #1d201e;
}
.df180-source-chip > span {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #f0eee8;
  color: #d84939;
  font-size: 7px;
  font-weight: 850;
}
.df180-source-chip > div {
  display: grid;
  gap: 3px;
}
.df180-source-chip strong {
  color: #e7eae5;
  font-size: 10px;
}
.df180-source-chip small,
.df180-source-chip > i {
  color: #717670;
  font-size: 7px;
  font-style: normal;
}
.df180-creation-settings {
  display: flex;
  gap: 5px;
}
.df180-creation-settings span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid #343834;
  border-radius: 6px;
  background: #1b1e1c;
  color: #9ca29b;
  font-size: 7px;
}
.df180-chat-message {
  padding: 10px 11px;
  border: 1px solid #323632;
  border-radius: 8px;
  background: #1c1f1d;
}
.df180-chat-message > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #dfe2de;
  font-size: 8px;
  font-weight: 760;
}
.df180-chat-message > span i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--df-coral);
}
.df180-chat-message p {
  margin: 7px 0 0;
  color: #b2b7b1;
  font-size: 9px;
  line-height: 1.45;
}
.df180-chat-message.is-donefeed p {
  overflow: hidden;
  animation: df180-message-reveal 1.15s cubic-bezier(.22, .8, .25, 1) both;
  clip-path: inset(0 100% 0 0);
}
@keyframes df180-message-reveal {
  to {
    clip-path: inset(0);
  }
}
.df180-research-signals {
  display: grid;
  gap: 5px;
}
.df180-research-signals span {
  min-height: 27px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid #303530;
  border-radius: 6px;
  background: #1b1e1c;
  color: #9ca29b;
  font-size: 8px;
}
.df180-research-signals span b {
  min-width: 0;
  overflow: hidden;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df180-research-signals span small {
  margin-left: auto;
  color: #686e68;
  font-size: 6.5px;
}
.df180-research-signals svg {
  color: var(--df-lime);
}
.df180-live-studio.is-step-1 .df180-research-signals span {
  animation: df180-signal-scan .86s cubic-bezier(.22, .8, .25, 1) var(--signal-delay) both;
}
@keyframes df180-signal-scan {
  from {
    clip-path: inset(0 100% 0 0);
    background: #262c27;
  }
  to {
    clip-path: inset(0);
    background: #1b1e1c;
  }
}
.df180-angle-suggestion {
  padding: 10px;
  border: 1px solid #343834;
  border-radius: 8px;
  background: #1d201e;
}
.df180-angle-suggestion small {
  color: #a796ef;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}
.df180-angle-suggestion p {
  margin: 7px 0;
  color: #b8bcb7;
  font-size: 8px;
  line-height: 1.4;
}
.df180-angle-suggestion > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #e4e7e2;
  font-size: 8px;
  font-weight: 720;
}
.df180-chat-composer {
  min-height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 0 7px 0 11px;
  border: 1px solid #4b504b;
  border-radius: 8px;
  background: #131614;
  color: #c9cdc8;
  font-size: 8px;
}
.df180-chat-composer b {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #eef0eb;
  color: #171917;
}
.df180-live-canvas {
  position: relative;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr) auto auto 39px;
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid #303330;
  background: #121513;
}
.df180-live-canvas > header {
  padding: 0 3px;
}
.df180-live-canvas > header div {
  display: flex;
  gap: 5px;
}
.df180-live-canvas > header i {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #303430;
  border-radius: 5px;
  color: #858b84;
  font-size: 7px;
  font-style: normal;
}
.df180-canvas-stage {
  position: relative;
  min-height: 415px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #282c28;
  background: #0e110f;
}
.df180-canvas-frame {
  position: relative;
  width: min(330px, 68%);
  aspect-ratio: 4 / 5;
  transition: transform .55s cubic-bezier(.22, .8, .25, 1);
}
.df180-main-slide,
.df180-live-thumbnails .slide-preview-surface,
.df180-production-slides .slide-preview-surface,
.df180-start-slide .slide-preview-surface,
.df180-export-slide {
  width: 100%;
  height: 100%;
  display: block;
}
.df180-canvas-frame.is-selected {
  outline: 2px solid #eef2ed;
  outline-offset: 3px;
}
.df180-selection-handles,
.df180-selection-handles i {
  position: absolute;
}
.df180-selection-handles {
  inset: -6px;
  opacity: 0;
  transition: opacity .25s ease;
}
.df180-live-studio.is-step-2 .df180-selection-handles {
  opacity: 1;
}
.df180-selection-handles i {
  width: 7px;
  height: 7px;
  border: 1px solid #2f61b5;
  background: #fff;
}
.df180-selection-handles i:nth-child(1) {
  top: 0;
  left: 0;
}
.df180-selection-handles i:nth-child(2) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.df180-selection-handles i:nth-child(3) {
  top: 0;
  right: 0;
}
.df180-selection-handles i:nth-child(4) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.df180-selection-handles i:nth-child(5) {
  right: 0;
  bottom: 0;
}
.df180-selection-handles i:nth-child(6) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.df180-selection-handles i:nth-child(7) {
  bottom: 0;
  left: 0;
}
.df180-selection-handles i:nth-child(8) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.df180-remote-cursor {
  position: absolute;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border-radius: 4px;
  color: #fff;
  font-size: 7px;
  font-weight: 760;
  opacity: 0;
}
.df180-remote-cursor i {
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 9px solid currentColor;
  transform: rotate(-28deg);
}
.df180-remote-cursor.cursor-ava {
  top: 27%;
  left: 43%;
  background: #2f7ef8;
}
.df180-remote-cursor.cursor-sam {
  right: 10%;
  bottom: 27%;
  background: #eaa518;
}
.df180-live-studio.is-step-2 .df180-remote-cursor {
  opacity: 1;
  animation: df180-cursor-settle 1.2s cubic-bezier(.22, .8, .25, 1) both;
}
.df180-live-studio.is-step-2 .cursor-sam {
  animation-delay: .32s;
}
@keyframes df180-cursor-settle {
  from {
    opacity: 0;
    transform: translate(42px, 30px);
  }
  70% {
    opacity: 1;
    transform: translate(-4px, -3px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.df180-live-thumbnails {
  display: grid;
  grid-template-columns: repeat(7, minmax(52px, 1fr));
  gap: 6px;
  margin-top: 9px;
}
.df180-live-thumbnails > span {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #3b403b;
  border-radius: 4px;
  background: #1c1f1d;
}
.df180-live-thumbnails > span.active {
  outline: 2px solid #e5ac2f;
  outline-offset: 1px;
}
.df180-live-studio.is-step-1 .df180-live-thumbnails > span {
  animation: df180-thumbnail-deal .52s cubic-bezier(.22, .8, .25, 1) both;
}
.df180-live-studio.is-step-1 .df180-live-thumbnails > span:nth-child(2) {
  animation-delay: .12s;
}
.df180-live-studio.is-step-1 .df180-live-thumbnails > span:nth-child(3) {
  animation-delay: .24s;
}
.df180-live-studio.is-step-1 .df180-live-thumbnails > span:nth-child(4) {
  animation-delay: .36s;
}
.df180-live-studio.is-step-1 .df180-live-thumbnails > span:nth-child(5) {
  animation-delay: .48s;
}
.df180-live-studio.is-step-1 .df180-live-thumbnails > span:nth-child(6) {
  animation-delay: .6s;
}
.df180-live-studio.is-step-1 .df180-live-thumbnails > span:nth-child(7) {
  animation-delay: .72s;
}
@keyframes df180-thumbnail-deal {
  from {
    opacity: .12;
    clip-path: inset(100% 0 0);
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0);
  }
}
.df180-export-grid {
  width: min(460px, 84%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.df180-export-slide {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  animation: df180-export-gather .7s cubic-bezier(.22, .8, .25, 1) both;
}
.df180-export-slide.export-2 {
  animation-delay: .08s;
}
.df180-export-slide.export-3 {
  animation-delay: .16s;
}
.df180-export-slide.export-4 {
  animation-delay: .24s;
}
@keyframes df180-export-gather {
  from {
    opacity: 0;
    transform: translate(var(--export-x, 30px), 40px) rotate(3deg) scale(.88);
  }
  to {
    opacity: 1;
    transform: translate(0) rotate(0) scale(1);
  }
}
.df180-live-inspector {
  border-right: 0;
}
.df180-live-inspector > nav {
  min-height: 38px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 12px;
}
.df180-live-inspector > nav span {
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: #767b75;
  font-size: 8px;
}
.df180-live-inspector > nav span.active {
  background: #292c2a;
  color: #fff;
}
.df180-design-controls {
  display: grid;
  gap: 8px;
}
.df180-design-controls label {
  display: grid;
  gap: 6px;
  color: #92978f;
  font-size: 8px;
}
.df180-design-controls label > span {
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #333733;
  border-radius: 6px;
  background: #1c1f1d;
  color: #d0d4cf;
}
.df180-design-controls label i {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.df180-design-controls .swatch-mustard {
  background: #eeb83d;
}
.df180-design-controls label small {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid #393d39;
  border-radius: 4px;
}
.df180-design-controls > div {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding-top: 13px;
  border-top: 1px solid #303430;
}
.df180-design-controls > div span,
.df180-export-ready > span,
.df180-export-ready div span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #aeb3ad;
  font-size: 8px;
}
.df180-design-controls svg,
.df180-export-ready svg {
  color: var(--df-lime);
}
.df180-export-ready {
  display: flex;
  min-height: 510px;
  flex-direction: column;
}
.df180-export-ready > span {
  width: fit-content;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(215, 243, 107, .09);
  color: var(--df-lime);
}
.df180-export-ready h3 {
  margin: 22px 0 7px;
  color: #f3f5f1;
  font-size: 22px;
  letter-spacing: -.04em;
}
.df180-export-ready p {
  margin: 0;
  color: #7e837d;
  font-size: 9px;
}
.df180-export-ready div {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.df180-export-ready strong {
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  border-radius: 7px;
  background: #f4f5f1;
  color: #151715;
  font-size: 9px;
}
.df180-discover {
  padding: 116px 0 104px;
}
.df180-discover .df180-section-intro h2 {
  max-width: 880px;
}
.df180-discover .df180-section-intro h2 > span {
  display: inline-block;
}
.df180-feed-browser {
  width: min(1360px, calc(100% - 48px));
  margin: 42px auto 0;
  overflow: hidden;
  border: 1px solid #d8dad3;
  border-radius: 16px;
  background: #fff;
}
.df180-feed-bar {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid #e3e4df;
}
.df180-feed-bar strong {
  font-size: 13px;
  letter-spacing: -.02em;
}
.df180-feed-bar span {
  color: #777b75;
  font-size: 10px;
}
.df180-feed-bar svg {
  justify-self: end;
}
.df180-feed-stories {
  display: flex;
  gap: 18px;
  overflow: hidden;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #ecece8;
}
.df180-feed-stories > span {
  width: 62px;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 7px;
}
.df180-feed-stories i {
  position: relative;
  width: 58px;
  height: 58px;
  overflow: hidden;
  padding: 3px;
  border: 2px solid #f05a46;
  border-radius: 50%;
  background: #fff;
}
.df180-feed-stories img {
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}
.df180-feed-stories small {
  width: 100%;
  overflow: hidden;
  color: #585c56;
  font-size: 8px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df180-gallery-actions {
  width: calc(100% - 36px);
  margin: 12px auto 0;
}
.df180-gallery-actions p {
  display: flex;
  align-items: center;
  gap: 7px;
}
.df180-gallery {
  width: 100%;
  grid-auto-flow: column;
  grid-auto-columns: clamp(292px, 25vw, 344px);
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  padding: 12px 18px 24px;
  cursor: grab;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  user-select: none;
}
.df180-gallery::-webkit-scrollbar {
  display: none;
}
.df180-gallery.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.df180-instagram-post {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dedfd9;
  border-radius: 12px;
  background: #fff;
  scroll-snap-align: center;
}
.df180-instagram-post > header {
  min-height: 56px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
}
.df180-instagram-post > header > i {
  position: relative;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 2px solid #f05a46;
  border-radius: 50%;
}
.df180-instagram-post > header img {
  object-fit: cover;
}
.df180-instagram-post > header div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.df180-instagram-post > header strong {
  font-size: 10px;
}
.df180-instagram-post > header small {
  overflow: hidden;
  color: #747872;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df180-instagram-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-top: 1px solid #e4e5e0;
  border-bottom: 1px solid #e4e5e0;
}
.df180-gallery .df180-template-card {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.df180-series-count {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  padding: 5px 7px;
  border-radius: 12px;
  background: rgba(16, 17, 16, .74);
  color: #fff;
  font-size: 8px;
}
.df180-instagram-post > footer {
  display: grid;
  gap: 9px;
  padding: 10px 11px 11px;
}
.df180-instagram-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.df180-instagram-actions > span {
  display: flex;
  gap: 12px;
}
.df180-instagram-actions > svg {
  justify-self: end;
}
.df180-instagram-actions > i {
  display: flex;
  gap: 3px;
}
.df180-instagram-actions b {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c7c9c3;
}
.df180-instagram-actions b:first-child {
  background: #4585d5;
}
.df180-instagram-post > footer button {
  min-height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #20221f;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}
.df180-control {
  padding: 118px 24px 104px;
}
.df180-control .df180-section-intro h2 {
  max-width: 760px;
}
.df180-audience-toggle {
  width: min(1360px, 100%);
  display: flex;
  gap: 4px;
  margin: 42px auto 10px;
}
.df180-audience-toggle button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--df-line);
  border-radius: 8px;
  background: #fff;
  color: #565a54;
  cursor: pointer;
  font-size: 11px;
  font-weight: 730;
}
.df180-audience-toggle button[aria-pressed="true"] {
  border-color: #171917;
  background: #171917;
  color: #fff;
}
.df180-production-line {
  width: min(1360px, 100%);
  min-height: 430px;
  display: grid;
  grid-template-columns: 176px 26px 174px 26px 148px 26px minmax(430px, 1fr) 26px 92px;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--df-line);
  border-radius: 18px;
  background: #f1f0e9;
}
.df180-production-line section {
  min-width: 0;
}
.df180-production-line section > span {
  display: block;
  margin-bottom: 11px;
  color: #6e726c;
  font-size: 9px;
  font-weight: 820;
}
.df180-production-source figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  border: 1px solid #cfd1ca;
  border-radius: 8px;
  background: #151715;
}
.df180-production-source figure img {
  object-fit: cover;
}
.df180-production-source figcaption {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  padding: 7px;
  border-radius: 5px;
  background: rgba(17, 19, 17, .82);
  color: #fff;
  font-size: 7px;
}
.df180-business-brief {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 8px;
  background: #181b19;
  color: #fff;
}
.df180-business-brief small {
  color: var(--df-coral);
  font-size: 8px;
  letter-spacing: .09em;
}
.df180-business-brief strong {
  margin-top: 18px;
  font-size: 22px;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.df180-business-brief span {
  margin-top: auto;
  color: #919690;
  font-size: 9px;
}
.df180-flow-arrow {
  color: #8d918b;
  font-size: 18px;
  font-style: normal;
  text-align: center;
}
.df180-production-research,
.df180-production-outline {
  display: grid;
  align-content: center;
  gap: 7px;
}
.df180-production-research > small,
.df180-production-outline > small {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid #d0d2cb;
  border-radius: 7px;
  background: #faf9f5;
  color: #4c504b;
  font-size: 8px;
  line-height: 1.25;
}
.df180-production-research svg {
  color: #57904f;
}
.df180-production-outline > small b {
  width: 18px;
  height: 18px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #e4e4de;
  font-size: 7px;
}
.df180-production-slides {
  position: relative;
}
.df180-production-slides > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(58px, 1fr));
  gap: 7px;
}
.df180-production-slides > div > span {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #bfc2bb;
  border-radius: 5px;
  background: #dedfd8;
}
.df180-production-cursor {
  position: absolute;
  z-index: 3;
  top: 46%;
  left: 58%;
  color: var(--df-coral);
  font-size: 23px;
  font-style: normal;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18));
  animation: df180-editorial-cursor 4.8s cubic-bezier(.22, .8, .25, 1) infinite;
}
.df180-production-cursor small {
  display: inline-block;
  margin-left: -4px;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--df-coral);
  color: #fff;
  font-size: 7px;
  font-weight: 760;
}
@keyframes df180-editorial-cursor {
  0%, 18% {
    transform: translate(32px, 22px);
  }
  42%, 72% {
    transform: translate(-10px, -8px);
  }
  100% {
    transform: translate(32px, 22px);
  }
}
.df180-production-export {
  display: grid;
  gap: 8px;
}
.df180-production-export strong {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #d0d2cb;
  border-radius: 7px;
  background: #faf9f5;
  font-size: 9px;
}
.df180-start {
  min-height: 760px;
  grid-template-columns: minmax(420px, .9fr) minmax(480px, 1.1fr);
  gap: 70px;
  overflow: hidden;
  padding-top: 92px;
  padding-bottom: 92px;
}
.df180-start-copy h2 {
  max-width: 650px;
  font-size: clamp(54px, 6vw, 86px);
  line-height: .94;
}
.df180-final-composer {
  position: relative;
  max-width: 520px;
  margin-top: 34px;
  padding: 16px 64px 16px 16px;
  border: 1px solid #3a3e3a;
  border-radius: 14px;
  background: #171a18;
}
.df180-final-composer label {
  display: block;
  margin-bottom: 10px;
  color: #9da29c;
  font-size: 10px;
  font-weight: 720;
}
.df180-final-composer textarea {
  width: 100%;
  min-height: 88px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
}
.df180-final-composer textarea::placeholder {
  color: #747a74;
}
.df180-final-composer > button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--df-coral);
  color: #fff;
  cursor: pointer;
}
.df180-final-action {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 0 21px;
  border: 0;
  border-radius: 9px;
  background: var(--df-coral);
  color: #fff;
  cursor: pointer;
  font-weight: 780;
}
.df180-final-action:disabled,
.df180-final-composer > button:disabled {
  cursor: default;
  opacity: .42;
}
.df180-start-copy > p {
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  color: #90958f;
  font-size: 10px;
}
.df180-start-copy > p a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #c9cdc8;
  text-decoration: none;
}
.df180-start-assembly {
  position: relative;
  min-height: 570px;
}
.df180-start-slide {
  position: absolute;
  width: clamp(160px, 15vw, 220px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .32);
}
.df180-start-slide.slide-1 {
  z-index: 3;
  top: 70px;
  left: 10%;
  transform: rotate(-5deg);
}
.df180-start-slide.slide-2 {
  z-index: 2;
  top: 36px;
  left: 38%;
  transform: rotate(2deg);
}
.df180-start-slide.slide-3 {
  z-index: 1;
  top: 92px;
  left: 65%;
  transform: rotate(7deg);
}
.df180-prompt-word {
  position: absolute;
  z-index: 6;
  padding: 7px 9px;
  border: 1px solid #434743;
  border-radius: 6px;
  background: #242824;
  color: #d7dad6;
  font-size: 8px;
}
.df180-prompt-word.word-1 {
  top: 8px;
  left: 8%;
}
.df180-prompt-word.word-2 {
  top: 390px;
  left: 32%;
}
.df180-prompt-word.word-3 {
  top: 16px;
  right: 6%;
}
.df180-start-slide,
.df180-prompt-word {
  animation: df180-assembly-float 7s ease-in-out infinite alternate;
}
.df180-start-slide.slide-2,
.df180-prompt-word.word-2 {
  animation-delay: -2.6s;
}
.df180-start-slide.slide-3,
.df180-prompt-word.word-3 {
  animation-delay: -4.1s;
}
@keyframes df180-assembly-float {
  from {
    translate: 0 8px;
  }
  to {
    translate: 0 -8px;
  }
}
@media (max-width: 1120px) {
  .df180-live-studio {
    grid-template-columns: minmax(240px, .72fr) minmax(500px, 1.5fr);
  }
  .df180-live-rail,
  .df180-live-inspector {
    display: none;
  }
  .df180-production-line {
    grid-template-columns: 150px 18px 150px 18px 132px 18px minmax(350px, 1fr);
    overflow-x: auto;
  }
  .df180-production-export,
  .df180-production-slides + .df180-flow-arrow {
    display: none;
  }
  .df180-start {
    grid-template-columns: minmax(380px, .9fr) minmax(420px, 1.1fr);
    gap: 30px;
  }
}
@media (max-width: 760px) {
  .df180-hero {
    min-height: 980px;
  }
  .df180-conveyor {
    display: none;
  }
  .df180-mobile-hero-gallery {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 438px;
    display: grid;
    grid-template-columns: repeat(3, 44vw);
    justify-content: center;
    gap: 8px;
    align-items: stretch;
    overflow: hidden;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 100%);
  }
  .df180-mobile-hero-gallery::before {
    position: absolute;
    z-index: 4;
    inset: 0 0 auto;
    height: 96px;
    background: linear-gradient(to bottom, var(--df-paper), transparent);
    content: "";
  }
  .df180-mobile-hero-card {
    width: 100%;
    aspect-ratio: 4 / 5;
    filter: drop-shadow(0 14px 18px rgba(20, 22, 19, .14));
  }
  .df180-mobile-hero-card.is-poster {
    width: 44vw;
    margin: 48px auto 0;
  }
  .df180-mobile-hero-lane {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    animation: df180-mobile-hero-waterfall 24s linear infinite;
    will-change: transform;
  }
  .df180-mobile-hero-lane.lane-1 {
    margin-top: -114px;
    animation-duration: 26s;
  }
  .df180-mobile-hero-lane.lane-2 {
    margin-top: -38px;
    animation-delay: -8s;
    animation-duration: 23s;
  }
  .df180-mobile-hero-lane.lane-3 {
    margin-top: -92px;
    animation-delay: -15s;
    animation-duration: 28s;
  }
  .df180-mobile-hero-card .df180-template-card {
    height: 100%;
    border-radius: 10px;
  }
  @keyframes df180-mobile-hero-waterfall {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(0, calc(-50% - 5px), 0);
    }
  }
  .df180-template-card.layout-manifesto > strong,
  .df180-template-card.layout-report > strong,
  .df180-template-card.layout-product > strong,
  .df180-template-card.layout-portrait > strong,
  .df180-template-card.layout-minimal > strong,
  .df180-template-card.layout-serif > strong,
  .df180-template-card.layout-split > strong,
  .df180-template-card.layout-collage > strong,
  .df180-template-card.layout-local > strong {
    font-size: 16px;
  }
  .df180-demo {
    padding-top: 58px;
  }
  .df180-demo .df180-section-intro {
    width: calc(100% - 32px);
  }
  .df180-demo-heading h2 {
    font-size: 40px;
  }
  .df180-demo-grid {
    margin-top: 34px;
  }
  .df180-product-shell {
    min-height: auto;
  }
  .df180-live-studio {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .df180-live-rail {
    display: none;
  }
  .df180-live-chat,
  .df180-live-canvas,
  .df180-live-inspector {
    border-right: 0;
  }
  .df180-live-chat {
    order: 2;
    max-height: 330px;
    overflow: hidden;
    border-top: 1px solid #303330;
    border-bottom: 1px solid #303330;
  }
  .df180-live-studio.is-step-0 .df180-live-chat {
    order: 1;
    max-height: none;
    border-top: 0;
  }
  .df180-live-studio.is-step-0 .df180-live-canvas {
    order: 2;
  }
  .df180-live-studio.is-step-0 .df180-research-signals,
  .df180-live-studio.is-step-0 .df180-angle-suggestion {
    display: none;
  }
  .df180-live-studio.is-step-1 .df180-live-chat {
    position: relative;
    z-index: 5;
    max-height: 208px;
    margin: -190px 10px 12px;
    overflow: visible;
    border: 1px solid #3b403b;
    border-radius: 14px;
    background: #1a1d1b;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .34);
  }
  .df180-live-studio.is-step-1 .df180-source-chip,
  .df180-live-studio.is-step-1 .df180-creation-settings,
  .df180-live-studio.is-step-1 .df180-chat-message,
  .df180-live-studio.is-step-1 .df180-angle-suggestion,
  .df180-live-studio.is-step-1 .df180-chat-composer {
    display: none;
  }
  .df180-live-studio.is-step-2 .df180-live-chat,
  .df180-live-studio.is-step-3 .df180-live-chat {
    display: none;
  }
  .df180-live-canvas {
    order: 1;
    grid-template-rows: 39px auto auto auto 34px;
    padding: 0 9px;
  }
  .df180-canvas-stage {
    min-height: 420px;
  }
  .df180-live-studio.is-step-0 .df180-canvas-stage {
    min-height: 360px;
  }
  .df180-live-studio.is-step-1 .df180-canvas-stage,
  .df180-live-studio.is-step-2 .df180-canvas-stage {
    min-height: 500px;
  }
  .df180-canvas-frame {
    width: min(288px, 88%);
  }
  .df180-live-thumbnails {
    grid-template-columns: repeat(7, 72px);
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: none;
  }
  .df180-live-thumbnails::-webkit-scrollbar {
    display: none;
  }
  .df180-live-studio.is-step-0 .df180-live-thumbnails {
    display: none;
  }
  .df180-export-grid {
    width: min(340px, 94%);
    gap: 8px;
  }
  .df180-live-studio.is-step-3 .df180-live-thumbnails {
    display: none;
  }
  .df180-live-studio.is-step-3 .df180-live-inspector {
    display: block;
    border-top: 1px solid #303330;
  }
  .df180-live-inspector > nav {
    display: none;
  }
  .df180-live-inspector {
    order: 3;
  }
  .df180-export-ready {
    min-height: 280px;
  }
  .df180-discover {
    padding: 88px 0 80px;
  }
  .df180-discover .df180-section-intro h2,
  .df180-control .df180-section-intro h2 {
    font-size: 43px;
  }
  .df180-feed-browser {
    width: 100%;
    margin-top: 28px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .df180-feed-bar {
    padding: 0 16px;
  }
  .df180-feed-bar span {
    display: none;
  }
  .df180-feed-bar {
    grid-template-columns: 1fr auto;
  }
  .df180-feed-stories {
    gap: 14px;
    overflow-x: auto;
    padding-right: 16px;
    padding-left: 16px;
    scrollbar-width: none;
  }
  .df180-feed-stories::-webkit-scrollbar {
    display: none;
  }
  .df180-gallery-actions {
    display: none;
  }
  .df180-gallery {
    grid-auto-columns: min(88vw, 342px);
    gap: 10px;
    padding: 14px 16px 24px;
    scroll-snap-type: x mandatory;
  }
  .df180-instagram-post > footer button {
    min-height: 44px;
  }
  .df180-control {
    padding: 86px 16px 80px;
  }
  .df180-audience-toggle {
    margin-top: 32px;
  }
  .df180-production-line {
    min-height: 400px;
    grid-template-columns: 150px 20px 160px 20px 140px 20px 420px 20px 90px;
    overflow-x: auto;
    padding: 18px;
    scroll-snap-type: x proximity;
  }
  .df180-production-line section {
    scroll-snap-align: center;
  }
  .df180-production-export,
  .df180-production-slides + .df180-flow-arrow {
    display: grid;
  }
  .df180-production-slides > div {
    grid-template-columns: repeat(6, 62px);
  }
  .df180-evidence {
    margin-top: 18px;
  }
  .df180-start {
    min-height: 980px;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 78px 18px 64px;
  }
  .df180-start-copy h2 {
    font-size: 58px;
  }
  .df180-final-composer {
    margin-top: 28px;
  }
  .df180-start-copy > p {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .df180-start-copy > p a {
    width: 100%;
    margin: 4px 0 0;
  }
  .df180-start-assembly {
    min-height: 390px;
  }
  .df180-start-slide {
    width: 42vw;
  }
  .df180-start-slide.slide-1 {
    top: 52px;
    left: 0;
  }
  .df180-start-slide.slide-2 {
    top: 18px;
    left: 28%;
  }
  .df180-start-slide.slide-3 {
    top: 66px;
    left: 57%;
  }
  .df180-prompt-word.word-2 {
    top: 330px;
  }
}
.df180-ideas,
.df180-trial {
  display: none;
}
.df180-trial {
  gap: 8px;
  margin: 11px 0 0;
  color: #5f625d;
  font-size: 11px;
}
.df180-trial svg {
  color: #3f7b31;
}
.df180-project-proof {
  width: min(1120px, calc(100% - 48px));
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: clamp(38px, 6vw, 92px);
  margin: 0 auto 96px;
  padding: 30px clamp(30px, 5vw, 68px);
  border: 1px solid #d7d9d2;
  border-radius: 16px;
  background: #eeefe9;
  box-shadow: 0 24px 70px rgba(28, 30, 27, .08);
}
.df180-project-proof-visual {
  min-height: 312px;
  display: grid;
  grid-template-columns: minmax(170px, 228px) 58px;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.df180-project-proof-slide {
  position: relative;
  aspect-ratio: 4 / 5;
  filter: drop-shadow(0 26px 34px rgba(20, 22, 19, .2));
  transform: rotate(-1.5deg);
}
.df180-project-proof-slide > .slide-preview-surface {
  width: 100%;
  height: 100%;
  border-radius: 9px;
}
.df180-project-proof-slide > span {
  position: absolute;
  right: -17px;
  bottom: 22px;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 6px;
  background: #171917;
  box-shadow: 0 12px 28px rgba(10, 11, 10, .24);
  color: #fff;
  font-size: 9px;
  font-weight: 760;
}
.df180-project-proof-slide > span svg {
  color: var(--df-lime);
}
.df180-project-proof-sequence {
  display: grid;
  gap: 7px;
}
.df180-project-proof-sequence i {
  position: relative;
  width: 48px;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: end start;
  overflow: hidden;
  padding: 5px;
  border: 1px solid rgba(18, 20, 18, .18);
  border-radius: 4px;
  background: var(--proof-color);
  box-shadow: 0 5px 10px rgba(21, 23, 20, .09);
  color: var(--proof-color);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--proof-color) 8%, white);
  }
  font-style: normal;
}
.df180-project-proof-sequence i::after {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 17px;
  height: 1px;
  background: currentColor;
  opacity: .72;
  content: "";
}
.df180-project-proof-sequence i.active {
  outline: 2px solid var(--df-coral);
  outline-offset: 2px;
}
.df180-project-proof-sequence small {
  font-size: 7px;
  font-weight: 800;
}
.df180-project-proof-copy > span {
  color: var(--df-coral);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}
.df180-project-proof-copy h2 {
  max-width: 520px;
  margin: 12px 0 0;
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 690;
  letter-spacing: -.04em;
  line-height: .96;
}
.df180-project-proof-copy > p {
  max-width: 560px;
  margin: 17px 0 0;
  color: #646862;
  font-size: 15px;
  line-height: 1.55;
}
.df180-project-proof-copy ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #ced1ca;
  list-style: none;
}
.df180-project-proof-copy li {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding-right: 12px;
}
.df180-project-proof-copy li strong,
.df180-project-proof-copy li > svg {
  min-height: 24px;
  color: #181a18;
  font-size: 21px;
  line-height: 1;
}
.df180-project-proof-copy li > svg {
  color: #3f7b31;
}
.df180-project-proof-copy li span {
  color: #777b75;
  font-size: 9px;
  font-weight: 660;
  line-height: 1.3;
}
.df180-demo-playback {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #343834;
  border-radius: 6px;
  background: #1d201e;
  color: #aeb3ad;
  cursor: pointer;
  font-size: 8px;
  font-weight: 720;
}
.df180-export-stamp {
  position: absolute;
  right: -24px;
  bottom: 20px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--df-lime);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  color: #172016;
  font-size: 9px;
  font-weight: 820;
  opacity: 0;
  transform: translateY(12px) rotate(2deg);
  transition: opacity .35s ease, transform .55s cubic-bezier(.22, .8, .25, 1);
}
.df180-canvas-frame.is-exporting {
  transform: translateY(-6px) scale(.96);
}
.df180-canvas-frame.is-exporting .df180-export-stamp {
  opacity: 1;
  transform: translateY(0) rotate(-1deg);
}
.df180-production-mobile {
  display: none;
}
@media (max-width: 760px) {
  .df180-hero {
    min-height: 1040px;
    padding-top: 52px;
  }
  .df180-hero-copy > p:first-child {
    display: flex;
  }
  .df180-hero h1 {
    max-width: 360px;
    font-size: clamp(43px, 12.4vw, 50px);
    letter-spacing: -.04em;
  }
  .df180-hero-deck {
    max-width: 330px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.45;
  }
  .df180-composer-wrap {
    margin-top: 22px;
  }
  .df180-composer textarea {
    min-height: 66px;
  }
  .df180-ideas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
  }
  .df180-ideas > span {
    grid-column: 1 / -1;
    width: auto;
    text-align: left;
  }
  .df180-ideas button {
    min-width: 0;
    min-height: 44px;
    padding: 0 9px;
    border-radius: 8px;
    background: rgba(247, 247, 244, .88);
    font-size: 10px;
    font-weight: 680;
  }
  .df180-trial {
    display: flex;
    justify-content: flex-start;
    margin-top: 9px;
    font-size: 10px;
  }
  .df180-mobile-hero-gallery {
    height: 450px;
    opacity: .92;
  }
  .df180-mobile-hero-gallery::before {
    height: 132px;
  }
  .df180-conveyor-card > .df180-template-card {
    animation: none;
    will-change: auto;
  }
  .df180-project-proof {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 31px;
    margin: 0;
    padding: 50px 18px 60px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .df180-project-proof-visual {
    min-height: 266px;
    grid-template-columns: minmax(150px, 190px) 51px;
    gap: 15px;
  }
  .df180-project-proof-slide > span {
    right: -11px;
  }
  .df180-project-proof-sequence {
    gap: 5px;
  }
  .df180-project-proof-sequence i {
    width: 42px;
  }
  .df180-project-proof-copy h2 {
    max-width: 350px;
    font-size: 39px;
  }
  .df180-project-proof-copy > p {
    max-width: 350px;
    font-size: 14px;
  }
  .df180-project-proof-copy ul {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 18px;
  }
  .df180-project-proof-copy li span {
    font-size: 10px;
  }
  .df180-demo {
    padding-top: 70px;
  }
  .df180-product-shell > header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .df180-shell-actions {
    display: none !important;
  }
  .df180-product-shell > nav button {
    justify-content: center;
    padding: 0 3px;
    font-size: 8px;
  }
  .df180-product-shell > nav button b {
    width: 18px;
    height: 18px;
  }
  .df180-live-studio .df180-live-canvas,
  .df180-live-studio.is-step-0 .df180-live-canvas {
    order: 1;
  }
  .df180-live-chat,
  .df180-live-studio.is-step-0 .df180-live-chat,
  .df180-live-inspector {
    order: 2;
  }
  .df180-live-studio.is-step-0 .df180-live-chat,
  .df180-live-studio.is-step-1 .df180-live-chat {
    position: relative;
    z-index: 5;
    display: flex;
    max-height: 238px;
    margin: -82px 10px 12px;
    overflow: hidden;
    border: 1px solid #3b403b;
    border-radius: 13px;
    background: #1a1d1b;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .32);
  }
  .df180-live-studio.is-step-1 .df180-live-chat {
    max-height: 196px;
    margin-top: -102px;
  }
  .df180-live-studio.is-step-0 .df180-research-signals,
  .df180-live-studio.is-step-0 .df180-angle-suggestion,
  .df180-live-studio.is-step-1 .df180-source-chip,
  .df180-live-studio.is-step-1 .df180-creation-settings,
  .df180-live-studio.is-step-1 .df180-chat-message,
  .df180-live-studio.is-step-1 .df180-angle-suggestion,
  .df180-live-studio.is-step-1 .df180-chat-composer {
    display: none;
  }
  .df180-live-studio.is-step-2 .df180-live-chat,
  .df180-live-studio.is-step-3 .df180-live-chat {
    display: none;
  }
  .df180-live-canvas {
    grid-template-rows: 40px minmax(0, 1fr) auto auto 34px;
  }
  .df180-canvas-stage,
  .df180-live-studio.is-step-0 .df180-canvas-stage,
  .df180-live-studio.is-step-1 .df180-canvas-stage,
  .df180-live-studio.is-step-2 .df180-canvas-stage {
    min-height: 455px;
  }
  .df180-canvas-frame {
    width: min(250px, 78%);
  }
  .df180-live-studio.is-step-0 .df180-live-thumbnails {
    display: grid;
  }
  .df180-live-studio.is-step-2 .df180-live-inspector,
  .df180-live-studio.is-step-3 .df180-live-inspector {
    display: block;
    border-top: 1px solid #303330;
  }
  .df180-live-studio.is-step-2 .df180-live-inspector {
    min-height: 238px;
  }
  .df180-live-studio.is-step-2 .df180-design-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .df180-live-studio.is-step-2 .df180-design-controls > div {
    grid-column: 1 / -1;
  }
  .df180-live-chat > header,
  .df180-live-canvas > header {
    font-size: 10px;
  }
  .df180-live-chat > header small,
  .df180-chat-message p,
  .df180-source-chip strong,
  .df180-research-signals span,
  .df180-design-controls label {
    font-size: 9px;
  }
  .df180-source-chip small,
  .df180-research-signals span small {
    font-size: 8px;
  }
  .df180-export-stamp {
    right: -18px;
  }
  .df180-product-shell > footer {
    gap: 7px;
    padding: 0 11px;
  }
  .df180-product-shell > footer > span:first-child {
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .df180-demo-playback {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
  }
  .df180-demo-playback span {
    display: none;
  }
  .df180-production-line {
    display: none;
  }
  .df180-audience-toggle button {
    min-height: 44px;
  }
  .df180-production-mobile {
    display: block;
    margin-top: 20px;
    border: 1px solid #d6d8d2;
    border-radius: 14px;
    background: #f0f1ec;
    overflow: hidden;
  }
  .df180-production-mobile > nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid #d4d7d0;
    background: #e7e9e3;
  }
  .df180-production-mobile > nav button {
    min-width: 0;
    min-height: 60px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 4px 1px;
    border: 0;
    border-right: 1px solid #d4d7d0;
    background: transparent;
    color: #777b74;
    cursor: pointer;
    font-size: 8px;
    font-weight: 760;
  }
  .df180-production-mobile > nav button:last-child {
    border-right: 0;
  }
  .df180-production-mobile > nav button b {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid #bbbfb7;
    border-radius: 50%;
    font-size: 8px;
  }
  .df180-production-mobile > nav button[aria-pressed="true"] {
    background: #fff;
    color: #181a18;
  }
  .df180-production-mobile > nav button[aria-pressed="true"] b {
    border-color: var(--df-coral);
    background: var(--df-coral);
    color: #fff;
  }
  .df180-production-mobile-stage {
    min-height: 420px;
    display: grid;
    grid-template-columns: minmax(128px, 42%) 1fr;
    align-items: center;
    gap: 18px;
    padding: 24px 18px;
  }
  .df180-production-mobile-artifact {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    filter: drop-shadow(0 18px 28px rgba(22, 24, 21, .18));
  }
  .df180-production-mobile-artifact > .slide-preview-surface {
    width: 100%;
    height: 100%;
    border-radius: 7px;
  }
  .df180-production-mobile-artifact > span {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(16, 18, 16, .82);
    color: #fff;
    font-size: 8px;
    font-weight: 760;
  }
  .df180-production-mobile-artifact .df180-production-cursor {
    top: 26%;
    right: -18px;
    bottom: auto;
    left: auto;
    opacity: 1;
  }
  .df180-production-mobile-detail {
    min-width: 0;
  }
  .df180-production-mobile-detail > small {
    color: var(--df-coral);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .1em;
  }
  .df180-production-mobile-detail h3 {
    margin: 10px 0 0;
    font-size: clamp(24px, 7vw, 32px);
    font-weight: 680;
    letter-spacing: -.04em;
    line-height: .98;
  }
  .df180-production-mobile-detail > div {
    display: grid;
    gap: 7px;
    margin-top: 20px;
  }
  .df180-production-mobile-detail > div span {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid #d4d7d0;
    border-radius: 6px;
    background: #fff;
    color: #646861;
    font-size: 9px;
    font-weight: 650;
  }
  .df180-production-mobile-detail > div svg {
    color: #3f7b31;
  }
  .df180-evidence {
    font-size: 12px;
  }
  .df180-final-composer {
    min-height: 144px;
  }
  .df180-final-composer textarea {
    min-height: 82px;
  }
  .df180-final-action {
    width: 100%;
  }
  .df180-start-copy > p a {
    min-height: 44px;
    align-items: center;
  }
  .df180-footer > div {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .df180-footer > div a,
  .df180-footer > div button {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    white-space: nowrap;
  }
}
@media (max-width: 340px) {
  .df180-hero h1 {
    font-size: 42px;
  }
  .df180-ideas button {
    font-size: 9px;
  }
  .df180-project-proof-copy ul {
    column-gap: 10px;
  }
  .df180-production-mobile-stage {
    grid-template-columns: 118px 1fr;
    gap: 13px;
    padding: 20px 12px;
  }
  .df180-production-mobile-detail h3 {
    font-size: 23px;
  }
}
.df180-trial {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin: 11px 0 0;
  color: #5f625d;
  font-size: 11px;
}
.df180-trial svg {
  color: #3f7b31;
}
.df180-inspire {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #343734;
  border-radius: 7px;
  background: #202321;
  color: #c6cac4;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}
.df180-composer footer > div .df180-inspire {
  min-height: 34px;
}
.df180-demo {
  padding-top: 92px;
}
.df180-demo-heading h2 {
  font-size: clamp(42px, 4.5vw, 64px);
}
.df180-demo-heading p {
  max-width: 480px;
  font-size: 15px;
}
.df180-product-shell > nav button {
  min-height: 58px;
}
.df180-mobile-studio {
  display: none;
}
.df180-export-package-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px !important;
  margin: 18px 0 0 !important;
}
.df180-export-package-grid i {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #3b403b;
  border-radius: 5px;
  background: #111;
  animation: df180-export-gather .65s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-export-package-grid i:nth-child(2) {
  animation-delay: .08s;
}
.df180-export-package-grid i:nth-child(3) {
  animation-delay: .16s;
}
.df180-export-package-grid i:nth-child(4) {
  animation-delay: .24s;
}
.df180-export-package-grid + div {
  margin-top: 17px;
}
.df180-feed-stories {
  overflow-x: auto;
  scrollbar-width: none;
}
.df180-feed-stories::-webkit-scrollbar {
  display: none;
}
.df180-feed-stories > button {
  width: 62px;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.df180-feed-stories > button i {
  transition: border-color .2s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.df180-feed-stories > button small {
  width: 100%;
}
.df180-control .df180-section-intro h2 {
  max-width: 930px;
}
.df180-control-proof {
  width: min(1180px, 100%);
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid #d4d7d0;
  border-radius: 18px;
  background: #f0f1ec;
  box-shadow: 0 26px 70px rgba(23, 26, 22, .08);
}
.df180-control-proof > nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #d4d7d0;
  background: #e7e9e3;
}
.df180-control-proof > nav button {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-right: 1px solid #d4d7d0;
  background: transparent;
  color: #747972;
  cursor: pointer;
  font-size: 11px;
  font-weight: 730;
}
.df180-control-proof > nav button:last-child {
  border-right: 0;
}
.df180-control-proof > nav button b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #b9bdb5;
  border-radius: 50%;
  font-size: 9px;
}
.df180-control-proof > nav button[aria-pressed="true"] {
  background: #fff;
  color: #171917;
}
.df180-control-proof > nav button[aria-pressed="true"] b {
  border-color: var(--df-coral);
  background: var(--df-coral);
  color: #fff;
}
.df180-control-stage {
  min-height: 500px;
  display: grid;
  grid-template-columns: 190px 84px minmax(230px, 300px) minmax(270px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 46px;
}
.df180-control-input,
.df180-control-artifact {
  min-width: 0;
}
.df180-control-input figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  border-radius: 10px;
  background: #151715;
  box-shadow: 0 20px 36px rgba(23, 25, 22, .17);
}
.df180-control-input figure img {
  object-fit: cover;
}
.df180-control-input figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-radius: 6px;
  background: rgba(15, 17, 15, .85);
  color: #fff;
  font-size: 9px;
  font-weight: 690;
}
.df180-control-input .df180-business-brief {
  min-height: 238px;
}
.df180-control-connection {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--df-coral);
}
.df180-control-connection span {
  height: 1px;
  background: #bfc3bb;
  transform-origin: left;
  animation: df180-connection-draw .8s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-control-connection span:last-child {
  animation-delay: .18s;
}
@keyframes df180-connection-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.df180-control-artifact {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 4 / 5;
  filter: drop-shadow(0 24px 40px rgba(22, 24, 21, .2));
}
.df180-control-artifact > .slide-preview-surface {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.df180-control-signals {
  position: absolute;
  right: -20px;
  bottom: 22px;
  left: 20px;
  display: grid;
  gap: 6px;
}
.df180-control-signals span {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #d6d8d2;
  border-radius: 6px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 18px rgba(22, 24, 21, .11);
  color: #535851;
  font-size: 9px;
  font-weight: 680;
  animation: df180-signal-scan .72s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-control-signals span:nth-child(2) {
  animation-delay: .16s;
}
.df180-control-signals span:nth-child(3) {
  animation-delay: .32s;
}
.df180-control-artifact .df180-selection-handles {
  opacity: 1;
}
.df180-control-artifact .df180-production-cursor {
  top: 32%;
  right: -28px;
  bottom: auto;
  left: auto;
  opacity: 1;
}
.df180-control-copy small {
  color: var(--df-coral);
  font-size: 9px;
  font-weight: 840;
  letter-spacing: .11em;
}
.df180-control-copy h3 {
  max-width: 430px;
  margin: 13px 0 0;
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 670;
  letter-spacing: -.04em;
  line-height: .98;
}
.df180-control-copy > div {
  display: grid;
  gap: 8px;
  margin-top: 28px;
}
.df180-control-copy > div span {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid #d4d7d0;
  border-radius: 7px;
  background: #fff;
  color: #646861;
  font-size: 10px;
  font-weight: 650;
}
.df180-control-copy > div svg {
  color: #3f7b31;
}
.df180-control-proof > footer {
  min-height: 52px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-top: 1px solid #d4d7d0;
  color: #727770;
  font-size: 9px;
}
.df180-control-proof > footer button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #cfd2cb;
  border-radius: 6px;
  background: #fff;
  color: #4f544e;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}
.df180-final-composer {
  padding-right: 16px;
}
.df180-final-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.df180-final-composer > div label {
  margin: 0;
}
.df180-final-composer .df180-inspire {
  min-height: 32px;
  color: #bfc4bd;
}
.df180-start-assembly .df180-start-slide,
.df180-start-assembly .df180-prompt-word {
  animation: none;
}
.df180-start-assembly.has-prompt .df180-prompt-word {
  animation: df180-prompt-route .62s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-start-assembly.has-prompt .df180-start-slide {
  animation: df180-post-deal .74s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-start-assembly.has-prompt .word-2,
.df180-start-assembly.has-prompt .slide-2 {
  animation-delay: .09s;
}
.df180-start-assembly.has-prompt .word-3,
.df180-start-assembly.has-prompt .slide-3 {
  animation-delay: .18s;
}
@keyframes df180-prompt-route {
  from {
    opacity: 0;
    transform: translateY(-18px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes df180-post-deal {
  from {
    opacity: .15;
    scale: .88;
    translate: 0 56px;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    filter: blur(0);
  }
}
.df180-footer {
  position: relative;
  min-height: 480px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(420px, .9fr);
  align-content: start;
  align-items: start;
  gap: 70px;
  overflow: hidden;
  padding: 72px 42px 0;
}
.df180-footer-brand {
  display: grid !important;
  justify-content: start !important;
  gap: 18px !important;
}
.df180-footer-brand p {
  max-width: 360px;
  color: #a0a59e;
  font-size: 16px;
  line-height: 1.45;
}
.df180-footer > nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}
.df180-footer > nav > div {
  display: grid;
  align-content: start;
  gap: 6px;
}
.df180-footer > nav span {
  margin-bottom: 8px;
  color: #666b65;
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.df180-footer > nav a,
.df180-footer > nav button {
  width: fit-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b9bdb7;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
}
.df180-footer-wordmark {
  position: absolute;
  right: -1.5vw;
  bottom: -4vw;
  left: -1.5vw;
  color: #f0f2ed;
  font-size: clamp(130px, 20vw, 320px);
  font-weight: 760;
  letter-spacing: -.075em;
  line-height: .72;
  opacity: .94;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .df180-inspire:hover {
    border-color: #5b605a;
    color: #fff;
  }
  .df180-feed-stories > button:hover i {
    border-color: #171917;
    transform: translateY(-3px);
  }
  .df180-control-proof button:hover,
  .df180-footer > nav a:hover,
  .df180-footer > nav button:hover {
    color: var(--df-coral);
  }
}
@media (max-width: 760px) {
  .df180-hero {
    min-height: 980px;
  }
  .df180-composer footer {
    gap: 8px;
  }
  .df180-composer footer > div {
    gap: 6px;
  }
  .df180-composer footer > div .df180-inspire,
  .df180-composer footer > div span {
    min-height: 34px;
    padding: 0 8px;
    font-size: 9px;
  }
  .df180-trial {
    margin-top: 9px;
    font-size: 10px;
  }
  .df180-demo {
    padding-top: 72px;
  }
  .df180-demo-heading {
    display: grid;
    gap: 14px;
  }
  .df180-demo-heading h2 {
    font-size: 42px;
  }
  .df180-demo-heading p {
    max-width: 350px;
    margin: 0;
    font-size: 14px;
  }
  .df180-product-shell > nav {
    position: sticky;
    z-index: 12;
    top: 59px;
    background: #171a18;
  }
  .df180-product-shell > nav button {
    min-height: 60px;
    gap: 5px;
    padding: 0 2px;
  }
  .df180-product-shell > nav button small {
    display: none;
  }
  .df180-live-studio {
    display: none;
  }
  .df180-mobile-studio {
    min-height: 560px;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #111412;
  }
  .df180-mobile-studio > header {
    min-height: 102px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 17px 18px;
    border-bottom: 1px solid #303330;
  }
  .df180-mobile-studio > header span {
    color: #f1f3ef;
    font-size: 18px;
    font-weight: 680;
    letter-spacing: -.025em;
  }
  .df180-mobile-studio > header small {
    max-width: 330px;
    color: #888e87;
    font-size: 11px;
    line-height: 1.45;
  }
  .df180-mobile-studio-scene {
    min-height: 458px;
    padding: 18px;
  }
  .df180-mobile-prompt-scene {
    display: grid;
    align-content: center;
    gap: 12px;
  }
  .df180-mobile-source-note {
    min-height: 58px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid #353a35;
    border-radius: 9px;
    background: #1a1e1b;
    color: #aeb4ad;
    animation: df180-source-arrive .56s cubic-bezier(.16, 1, .3, 1) both;
  }
  .df180-mobile-source-note > span {
    display: grid;
    gap: 3px;
  }
  .df180-mobile-source-note strong {
    color: #f2f4f0;
    font-size: 11px;
  }
  .df180-mobile-source-note small {
    color: #737a73;
    font-size: 8px;
  }
  .df180-mobile-source-note > svg:last-child {
    color: var(--df-lime);
  }
  @keyframes df180-source-arrive {
    from {
      opacity: 0;
      transform: translateX(-28px);
      clip-path: inset(0 100% 0 0);
    }
    to {
      opacity: 1;
      transform: translateX(0);
      clip-path: inset(0);
    }
  }
  .df180-mobile-prompt-scene article {
    padding: 14px;
    border: 1px solid #343834;
    border-radius: 10px;
    background: #202321;
  }
  .df180-mobile-prompt-scene article span {
    color: var(--df-coral);
    font-size: 9px;
    font-weight: 760;
  }
  .df180-mobile-prompt-scene article p {
    margin: 8px 0 0;
    color: #d9dcd7;
    font-size: 13px;
    line-height: 1.45;
    animation: df180-message-reveal 1.15s cubic-bezier(.16, 1, .3, 1) both;
  }
  .df180-mobile-build-cue {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aeb4ad;
    font-size: 10px;
  }
  .df180-mobile-build-cue svg:first-child {
    color: var(--df-coral);
  }
  .df180-mobile-build-cue svg:last-child {
    margin-left: auto;
  }
  .df180-mobile-slide-shells {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
  }
  .df180-mobile-slide-shells i {
    aspect-ratio: 4 / 5;
    border: 1px solid #303530;
    border-radius: 5px;
    background: #191d1a;
    animation: df180-thumbnail-deal .5s cubic-bezier(.16, 1, .3, 1) both;
  }
  .df180-mobile-slide-shells i:nth-child(2) {
    animation-delay: .1s;
  }
  .df180-mobile-slide-shells i:nth-child(3) {
    animation-delay: .2s;
  }
  .df180-mobile-slide-shells i:nth-child(4) {
    animation-delay: .3s;
  }
  .df180-mobile-build-scene {
    display: grid;
    grid-template-columns: minmax(108px, .72fr) minmax(150px, 1fr);
    align-items: center;
    gap: 17px;
  }
  .df180-mobile-research-stack {
    display: grid;
    gap: 8px;
  }
  .df180-mobile-research-stack span {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid #343934;
    border-radius: 7px;
    background: #1b1f1c;
    color: #adb3ac;
    font-size: 9px;
    animation: df180-signal-scan .7s cubic-bezier(.16, 1, .3, 1) var(--signal-delay) both;
  }
  .df180-mobile-research-stack svg {
    color: var(--df-lime);
  }
  .df180-mobile-built-slide {
    position: relative;
    aspect-ratio: 4 / 5;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .32));
  }
  .df180-mobile-built-slide > .slide-preview-surface {
    width: 100%;
    height: 100%;
    border-radius: 7px;
  }
  .df180-mobile-built-slide > span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 7px;
    border-radius: 5px;
    background: rgba(17, 19, 17, .87);
    color: #fff;
    font-size: 8px;
  }
  .df180-mobile-built-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 7px;
  }
  .df180-mobile-built-rail i {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid #3a3f3a;
    border-radius: 4px;
    animation: df180-thumbnail-deal .48s cubic-bezier(.16, 1, .3, 1) both;
  }
  .df180-mobile-edit-scene {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 16px;
  }
  .df180-mobile-edit-slide {
    position: relative;
    width: min(230px, 72%);
    aspect-ratio: 4 / 5;
    outline: 2px solid #eef2ed;
    outline-offset: 3px;
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .35));
  }
  .df180-mobile-edit-slide > .slide-preview-surface {
    width: 100%;
    height: 100%;
  }
  .df180-mobile-edit-slide .df180-selection-handles,
  .df180-mobile-edit-slide .df180-remote-cursor {
    opacity: 1;
  }
  .df180-mobile-edit-slide .df180-remote-cursor {
    animation: df180-cursor-settle 1.1s cubic-bezier(.16, 1, .3, 1) both;
  }
  .df180-mobile-edit-tools {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #323732;
    border-radius: 7px;
  }
  .df180-mobile-edit-tools span {
    min-height: 40px;
    display: grid;
    place-items: center;
    border-right: 1px solid #323732;
    color: #aeb4ad;
    font-size: 9px;
  }
  .df180-mobile-edit-tools span:last-child {
    border-right: 0;
  }
  .df180-mobile-edit-scene > p {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #aeb4ad;
    font-size: 10px;
  }
  .df180-mobile-edit-scene > p svg {
    color: var(--df-lime);
  }
  .df180-mobile-export-scene {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(120px, .8fr);
    align-items: center;
    gap: 18px;
  }
  .df180-mobile-export-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }
  .df180-mobile-export-grid i {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid #3a3f3a;
    border-radius: 5px;
    animation: df180-export-gather .65s cubic-bezier(.16, 1, .3, 1) both;
  }
  .df180-mobile-export-grid i:nth-child(2) {
    animation-delay: .08s;
  }
  .df180-mobile-export-grid i:nth-child(3) {
    animation-delay: .16s;
  }
  .df180-mobile-export-grid i:nth-child(4) {
    animation-delay: .24s;
  }
  .df180-mobile-export-receipt {
    display: grid;
    gap: 9px;
  }
  .df180-mobile-export-receipt span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #aeb4ad;
    font-size: 9px;
  }
  .df180-mobile-export-receipt span svg {
    color: var(--df-lime);
  }
  .df180-mobile-export-receipt strong {
    min-height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    border-radius: 7px;
    background: var(--df-coral);
    color: #fff;
    font-size: 9px;
  }
  .df180-control {
    padding-top: 92px;
  }
  .df180-control .df180-section-intro h2 {
    max-width: 360px;
    font-size: 43px;
  }
  .df180-control-proof > nav button {
    min-height: 62px;
    gap: 5px;
    padding: 0 3px;
    font-size: 9px;
  }
  .df180-control-proof > nav button b {
    width: 21px;
    height: 21px;
  }
  .df180-control-stage {
    min-height: 450px;
    grid-template-columns: 126px minmax(0, 1fr);
    grid-template-areas: "input artifact"
      "copy copy";
    gap: 24px 18px;
    padding: 25px 18px;
  }
  .df180-control-input {
    grid-area: input;
  }
  .df180-control-input .df180-business-brief {
    min-height: 158px;
    padding: 12px;
  }
  .df180-control-input .df180-business-brief strong {
    font-size: 17px;
  }
  .df180-control-connection {
    display: none;
  }
  .df180-control-artifact {
    grid-area: artifact;
    width: min(100%, 150px);
    justify-self: center;
  }
  .df180-control-signals {
    right: -14px;
    bottom: 10px;
    left: 8px;
  }
  .df180-control-signals span {
    min-height: 28px;
    font-size: 8px;
  }
  .df180-control-copy {
    grid-area: copy;
  }
  .df180-control-copy h3 {
    max-width: 340px;
    font-size: 31px;
  }
  .df180-control-copy > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
  }
  .df180-control-copy > div span {
    min-height: 42px;
    font-size: 9px;
  }
  .df180-control-proof > footer {
    min-height: 52px;
  }
  .df180-control-proof > footer button {
    min-height: 44px;
  }
  .df180-final-composer {
    padding: 16px;
  }
  .df180-final-composer .df180-inspire {
    min-height: 36px;
  }
  .df180-start-copy h2 {
    max-width: 360px;
    font-size: 54px;
  }
  .df180-footer {
    min-height: 600px;
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 62px 18px 0;
  }
  .df180-footer-brand p {
    display: block;
    max-width: 310px;
    font-size: 14px;
  }
  .df180-footer > nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 18px;
  }
  .df180-footer > nav > div:last-child {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 18px;
  }
  .df180-footer > nav > div:last-child span {
    grid-column: 1 / -1;
  }
  .df180-footer > nav a,
  .df180-footer > nav button {
    min-height: 44px;
    font-size: 12px;
  }
  .df180-footer-wordmark {
    right: -3vw;
    bottom: -1vw;
    left: -3vw;
    font-size: 25vw;
  }
}
@media (max-width: 340px) {
  .df180-composer footer > div span {
    display: none;
  }
  .df180-mobile-studio-scene {
    padding: 14px;
  }
  .df180-mobile-build-scene {
    gap: 12px;
  }
  .df180-control-stage {
    grid-template-columns: 112px minmax(0, 1fr);
    padding: 22px 12px;
  }
  .df180-control-copy h3 {
    font-size: 28px;
  }
}
.donefeed-preview-badge {
  position: fixed;
  z-index: 2147483000;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  min-height: 30px;
  max-width: calc(100vw - 24px);
  padding: 6px 10px;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 232, 117, .52);
  border-radius: 999px;
  background: rgba(25, 21, 7, .94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .34);
  color: #fff3a6;
  font-family: var(--font-geist-sans), sans-serif;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.donefeed-preview-badge strong {
  font-size: 9px;
  letter-spacing: .08em;
}
.donefeed-preview-badge span {
  overflow: hidden;
  color: rgba(255, 255, 255, .72);
  text-overflow: ellipsis;
}
.donefeed-preview-badge nav {
  display: flex;
  padding: 2px;
  gap: 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .34);
}
.donefeed-preview-badge nav a {
  display: flex;
  min-height: 24px;
  padding: 5px 8px;
  align-items: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-decoration: none;
}
.donefeed-preview-badge nav a.active {
  background: #fff3a6;
  color: #171304;
}
@media (hover: none) and (pointer: coarse) {
  .donefeed-preview-badge nav a {
    min-height: 44px;
    padding-block: 15px;
  }
}
@media (max-width: 540px) {
  .donefeed-preview-badge {
    top: max(5px, env(safe-area-inset-top));
    min-height: 26px;
    padding: 5px 8px;
    gap: 6px;
    font-size: 8px;
  }
  .donefeed-preview-badge strong {
    font-size: 8px;
  }
  .donefeed-preview-badge span {
    display: none;
  }
  .donefeed-preview-badge nav a {
    padding: 4px 7px;
    font-size: 8px;
  }
}
.pricing-page.pricing-v2 {
  --pricing-accent: #ff4f9a;
  --pricing-purple: #9a82ff;
  --pricing-panel: #111216;
  --pricing-panel-raised: #15161b;
  --pricing-border: rgba(255,255,255,.1);
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  background: radial-gradient(850px 560px at 50% -120px, rgba(139,92,246,.17), transparent 68%),
    radial-gradient(680px 520px at 100% 31%, rgba(255,47,146,.075), transparent 70%),
    #070709;
  color: #f7f7f8;
}
.pricing-v2 .pricing-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  width: 100%;
  height: 72px;
  padding: 0 max(24px,calc((100vw - 1240px)/2));
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(7,7,9,.82);
  backdrop-filter: blur(24px) saturate(140%);
}
.pricing-back,
.pricing-manage,
.pricing-brand {
  display: inline-flex;
  width: max-content;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  color: #afb2ba;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
.pricing-back,
.pricing-manage {
  padding: 0 13px;
  border: 1px solid var(--pricing-border);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}
@media (hover: hover) and (pointer: fine) {
  .pricing-back:hover,
.pricing-manage:hover {
    border-color: rgba(255,255,255,.2);
    color: #fff;
    background: rgba(255,255,255,.055);
  }
}
.pricing-brand {
  justify-self: center;
  color: #fff;
}
.pricing-brand strong {
  font-family: var(--font-condensed),sans-serif;
  font-size: 18px;
  letter-spacing: .14em;
}
.pricing-manage {
  margin-left: auto;
}
.pricing-v2 .pricing-page-hero {
  max-width: 920px;
  margin: 0 auto;
  padding: 118px 24px 88px;
  text-align: center;
}
.pricing-v2 .pricing-page-hero > span,
.pricing-v2 .pricing-section-heading > span,
.pricing-v2 .pricing-included > div:first-child > span,
.pricing-v2 .pricing-usage-addons > span {
  display: block;
  color: #ff82b8;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .13em;
}
.pricing-v2 .pricing-page-hero h1 {
  margin: 20px 0 22px;
  font-size: clamp(52px,6vw,82px);
  font-weight: 610;
  letter-spacing: -.06em;
  line-height: .98;
  text-wrap: balance;
}
.pricing-v2 .pricing-page-hero p {
  max-width: 700px;
  margin: 0 auto;
  color: #a2a4ac;
  font-size: 17px;
  line-height: 1.62;
  text-wrap: balance;
}
.pricing-v2 .pricing-page-hero > a,
.pricing-compare-jump {
  display: inline-flex;
  min-height: 44px;
  margin-top: 26px;
  padding: 0 16px;
  align-items: center;
  gap: 8px;
  border-radius: 11px;
  background: rgba(255,255,255,.07);
  color: #f2f2f3;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.pricing-account-usage {
  display: grid;
  width: min(960px,calc(100% - 48px));
  min-height: 104px;
  margin: -40px auto 76px;
  padding: 18px 20px;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(255,90,160,.2);
  border-radius: 18px;
  background: linear-gradient(110deg,rgba(255,47,146,.07),rgba(139,92,246,.08),rgba(255,255,255,.025));
  box-shadow: 0 24px 70px rgba(0,0,0,.2);
}
.pricing-account-plan {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #ff79b1;
}
.pricing-account-plan > span {
  display: grid;
  gap: 2px;
}
.pricing-account-plan small {
  color: #858891;
  font-size: 12px;
}
.pricing-account-plan strong {
  color: #fff;
  font-size: 15px;
}
.pricing-mini-meter {
  display: grid;
  gap: 7px;
}
.pricing-mini-meter > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.pricing-mini-meter em {
  color: #c0b3ff;
  font-style: normal;
  font-weight: 750;
}
.pricing-mini-meter > i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.pricing-mini-meter > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--pricing-accent),var(--pricing-purple));
}
.pricing-mini-meter small {
  color: #777a83;
  font-size: 11px;
}
.pricing-account-usage > button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--pricing-border);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.pricing-included,
.pricing-plan-section,
.pricing-comparison,
.pricing-faq {
  width: min(1240px,calc(100% - 48px));
  margin: 0 auto;
  padding: 88px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pricing-included > div:first-child {
  display: grid;
  margin-bottom: 34px;
  grid-template-columns: minmax(0,.65fr) minmax(420px,1.35fr);
  align-items: end;
  gap: 48px;
}
.pricing-included h2,
.pricing-section-heading h2,
.pricing-usage-addons h2,
.pricing-final-cta h2 {
  margin: 12px 0 0;
  font-size: clamp(34px,4vw,54px);
  font-weight: 610;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.pricing-included-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.pricing-included-grid article {
  min-height: 210px;
  padding: 24px;
  border: 1px solid var(--pricing-border);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}
.pricing-included-grid svg {
  color: #ff75af;
}
.pricing-included-grid h3 {
  margin: 46px 0 10px;
  font-size: 17px;
  letter-spacing: -.015em;
}
.pricing-included-grid p {
  margin: 0;
  color: #91949c;
  font-size: 13px;
  line-height: 1.55;
}
.pricing-section-heading {
  max-width: 760px;
  margin-bottom: 42px;
}
.pricing-section-heading p {
  margin: 15px 0 0;
  color: #9699a1;
  font-size: 15px;
  line-height: 1.6;
}
.pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: stretch;
  gap: 11px;
}
.pricing-plan-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 600px;
  padding: 25px;
  flex-direction: column;
  border: 1px solid var(--pricing-border);
  border-radius: 20px;
  background: linear-gradient(155deg,#15161b,#0e0f12 70%);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.pricing-plan-card.popular {
  border-color: rgba(255,78,156,.5);
  background: radial-gradient(circle at 90% 0,rgba(139,92,246,.23),transparent 43%),radial-gradient(circle at 0 24%,rgba(255,47,146,.1),transparent 42%),linear-gradient(155deg,#1a131b,#101116 65%);
  box-shadow: 0 30px 90px rgba(62,19,79,.22),inset 0 1px rgba(255,255,255,.04);
}
.pricing-plan-card.current {
  box-shadow: inset 0 0 0 1px rgba(134,225,172,.28);
}
.pricing-plan-card > header {
  display: flex;
  min-height: 48px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pricing-plan-card > header > div {
  display: grid;
  gap: 5px;
}
.pricing-plan-card > header span {
  color: #fff;
  font-size: 18px;
  font-weight: 720;
}
.pricing-plan-card > header small {
  color: #7f828a;
  font-size: 12px;
  line-height: 1.35;
}
.pricing-plan-card > header em {
  padding: 6px 8px;
  border: 1px solid rgba(255,99,168,.25);
  border-radius: 999px;
  background: rgba(255,47,146,.1);
  color: #ff94c1;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pricing-plan-card > header em.current-label {
  border-color: rgba(99,210,145,.24);
  background: rgba(65,166,108,.1);
  color: #8ee4b4;
}
.pricing-plan-card.popular.current > header em:not(.current-label) {
  display: none;
}
.pricing-plan-price {
  display: grid;
  margin-top: 28px;
  gap: 4px;
}
.pricing-plan-price strong {
  font-size: 52px;
  font-weight: 560;
  letter-spacing: -.055em;
  line-height: 1;
}
.pricing-plan-price span {
  color: #747780;
  font-size: 12px;
}
.pricing-plan-output {
  display: grid;
  margin-top: 25px;
  padding: 15px;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(255,255,255,.028);
}
.pricing-plan-output strong {
  font-size: 14px;
}
.pricing-plan-output span {
  color: #888b93;
  font-size: 12px;
  line-height: 1.4;
}
.pricing-plan-card > p {
  min-height: 66px;
  margin: 18px 0 20px;
  color: #9a9da5;
  font-size: 13px;
  line-height: 1.55;
}
.pricing-plan-cta {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  background: #f3f3f4;
  color: #101115;
  font-size: 13px;
  font-weight: 780;
}
.pricing-plan-card.popular .pricing-plan-cta {
  border: 0;
  background: linear-gradient(100deg,#ff5ca5,#a486ff);
  color: #fff;
  box-shadow: 0 12px 28px rgba(134,55,157,.2);
}
.pricing-plan-cta:disabled {
  background: rgba(255,255,255,.08) !important;
  color: #777a81 !important;
  box-shadow: none !important;
}
.pricing-plan-card ul {
  display: grid;
  margin: 24px 0 0;
  padding: 0;
  gap: 13px;
  list-style: none;
}
.pricing-plan-card li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #b0b2b8;
  font-size: 13px;
  line-height: 1.4;
}
.pricing-plan-card li svg {
  margin-top: 1px;
  flex: 0 0 auto;
  color: #86d8a8;
}
.pricing-compare-jump {
  margin: 26px auto 0;
}
.pricing-page-error {
  width: min(700px,calc(100% - 48px));
  margin: 18px auto 0;
  padding: 13px 15px;
  border: 1px solid rgba(255,106,125,.16);
  border-radius: 11px;
  background: rgba(255,72,98,.07);
  color: #ffa0ad;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.pricing-comparison-header,
.pricing-comparison-row {
  display: grid;
  grid-template-columns: minmax(260px,1.5fr) repeat(4,minmax(115px,.75fr));
  align-items: center;
}
.pricing-comparison-header {
  position: sticky;
  z-index: 5;
  top: 72px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid var(--pricing-border);
  border-radius: 14px;
  background: rgba(17,18,22,.94);
  backdrop-filter: blur(20px);
}
.pricing-comparison-header span {
  color: #777a82;
  font-size: 12px;
  font-weight: 700;
}
.pricing-comparison-header strong {
  color: #a8abb3;
  font-size: 13px;
  text-align: center;
}
.pricing-comparison-header strong.accent {
  color: #ff8cbd;
}
.pricing-comparison-groups {
  display: grid;
  margin-top: 10px;
  gap: 9px;
}
.pricing-comparison-groups details {
  overflow: clip;
  border: 1px solid var(--pricing-border);
  border-radius: 16px;
  background: rgba(17,18,22,.72);
}
.pricing-comparison-groups summary {
  display: flex;
  min-height: 76px;
  padding: 16px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
}
.pricing-comparison-groups summary::-webkit-details-marker {
  display: none;
}
.pricing-comparison-groups summary > span {
  display: grid;
  gap: 4px;
}
.pricing-comparison-groups summary strong {
  font-size: 16px;
}
.pricing-comparison-groups summary small {
  color: #858890;
  font-size: 12px;
  line-height: 1.4;
}
.pricing-comparison-groups summary svg {
  flex: 0 0 auto;
  color: #777a82;
  transition: transform .2s ease;
}
.pricing-comparison-groups details[open] summary svg {
  transform: rotate(180deg);
}
.pricing-comparison-groups details > div {
  border-top: 1px solid rgba(255,255,255,.075);
}
.pricing-comparison-row {
  min-height: 62px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.pricing-comparison-row:last-child {
  border-bottom: 0;
}
.pricing-comparison-row > span {
  display: grid;
  padding-right: 20px;
  gap: 4px;
}
.pricing-comparison-row > span strong {
  color: #d7d8dc;
  font-size: 13px;
  font-weight: 620;
}
.pricing-comparison-row > span small {
  color: #747780;
  font-size: 11px;
  line-height: 1.35;
}
.pricing-comparison-row > div {
  color: #a9acb3;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
.pricing-feature-check {
  display: inline-grid;
  width: 28px;
  height: 28px;
  margin: auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(73,180,119,.1);
  color: #86d8a8;
}
.pricing-feature-empty {
  color: #555860;
}
.pricing-v2 .pricing-usage-addons {
  width: min(960px,calc(100% - 48px));
  margin: 22px auto 88px;
  padding: 36px;
  border: 1px solid rgba(255,88,158,.18);
  border-radius: 22px;
  background: radial-gradient(circle at 100% 0,rgba(139,92,246,.15),transparent 42%),linear-gradient(145deg,rgba(255,47,146,.055),rgba(255,255,255,.02));
  text-align: left;
}
.pricing-v2 .pricing-usage-addons h2 {
  font-size: 34px;
}
.pricing-v2 .pricing-usage-addons > p {
  max-width: 700px;
  margin: 11px 0 0;
  color: #9699a1;
  font-size: 14px;
  line-height: 1.55;
}
.pricing-v2 .pricing-usage-addons > div {
  display: grid;
  margin-top: 24px;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
}
.pricing-v2 .pricing-usage-addons button {
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--pricing-border);
  border-radius: 12px;
  background: #15161a;
  color: #f3f3f4;
  font-size: 12px;
}
.pricing-v2 .pricing-usage-addons button span {
  color: #ff87b9;
}
.pricing-v2 .pricing-usage-addons footer {
  display: flex;
  margin-top: 18px;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: #777a82;
  font-size: 11px;
}
.pricing-v2 .pricing-usage-addons footer em {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #b2b4ba;
  font-style: normal;
}
.pricing-faq {
  display: grid;
  grid-template-columns: minmax(260px,.75fr) minmax(440px,1.25fr);
  gap: 80px;
}
.pricing-faq .pricing-section-heading {
  margin-bottom: 0;
}
.pricing-faq > div:last-child {
  display: grid;
  gap: 8px;
}
.pricing-faq details {
  border: 1px solid var(--pricing-border);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}
.pricing-faq summary {
  display: flex;
  min-height: 64px;
  padding: 14px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.pricing-faq summary::-webkit-details-marker {
  display: none;
}
.pricing-faq summary strong {
  font-size: 14px;
}
.pricing-faq summary svg {
  flex: 0 0 auto;
  color: #777a82;
  transition: transform .2s ease;
}
.pricing-faq details[open] summary svg {
  transform: rotate(180deg);
}
.pricing-faq details p {
  margin: 0;
  padding: 0 16px 18px;
  color: #9699a1;
  font-size: 13px;
  line-height: 1.65;
}
.pricing-final-cta {
  display: grid;
  width: min(960px,calc(100% - 48px));
  margin: 32px auto 92px;
  padding: 70px 32px;
  place-items: center;
  border: 1px solid rgba(255,78,157,.31);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0,rgba(255,47,146,.16),transparent 48%),radial-gradient(circle at 90% 80%,rgba(139,92,246,.18),transparent 42%),#111116;
  text-align: center;
}
.pricing-final-cta > svg {
  color: #ff7db5;
}
.pricing-final-cta p {
  max-width: 650px;
  margin: 16px auto 0;
  color: #9b9ea6;
  font-size: 15px;
  line-height: 1.6;
}
.pricing-final-cta button {
  display: flex;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 18px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  background: #f4f4f5;
  color: #101115;
  font-size: 13px;
  font-weight: 780;
}
.pricing-footer {
  display: grid;
  width: min(1240px,calc(100% - 48px));
  min-height: 110px;
  margin: auto;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pricing-footer .pricing-brand {
  justify-self: start;
}
.pricing-footer p {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #73767e;
  font-size: 11px;
}
.pricing-footer nav {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.pricing-footer nav a {
  color: #8f929a;
  font-size: 12px;
  text-decoration: none;
}
@media (max-width: 1080px) {
  .pricing-included-grid,
  .pricing-plan-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .pricing-plan-card {
    min-height: 560px;
  }
  .pricing-account-usage {
    grid-template-columns: auto 1fr 1fr;
  }
  .pricing-account-usage > button {
    display: none;
  }
  .pricing-comparison-header,
  .pricing-comparison-row {
    grid-template-columns: minmax(220px,1.35fr) repeat(4,minmax(90px,.75fr));
  }
}
@media (max-width: 760px) {
  .pricing-v2 .pricing-header {
    height: 60px;
    padding: 0 12px;
  }
  .pricing-v2 .pricing-header .pricing-brand strong {
    display: none;
  }
  .pricing-back,
  .pricing-manage {
    width: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
  }
  .pricing-back > span,
  .pricing-manage > span {
    display: none;
  }
  .pricing-v2 .pricing-page-hero {
    padding: 78px 18px 72px;
  }
  .pricing-v2 .pricing-page-hero h1 {
    font-size: clamp(46px,13vw,61px);
  }
  .pricing-v2 .pricing-page-hero p {
    font-size: 15px;
  }
  .pricing-account-usage {
    width: calc(100% - 28px);
    margin: -28px auto 60px;
    padding: 16px;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .pricing-account-plan {
    grid-column: 1/-1;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .pricing-included,
  .pricing-plan-section,
  .pricing-comparison,
  .pricing-faq {
    width: calc(100% - 28px);
    padding: 68px 0;
  }
  .pricing-included > div:first-child {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pricing-included h2,
  .pricing-section-heading h2 {
    font-size: 38px;
  }
  .pricing-included-grid,
  .pricing-plan-grid {
    grid-template-columns: 1fr;
  }
  .pricing-included-grid article {
    min-height: 170px;
  }
  .pricing-included-grid h3 {
    margin-top: 34px;
  }
  .pricing-plan-card {
    min-height: auto;
    padding: 23px;
  }
  .pricing-plan-card > p {
    min-height: 0;
  }
  .pricing-plan-card ul {
    margin-bottom: 4px;
  }
  .pricing-comparison-header {
    top: 60px;
    padding: 8px 8px;
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .pricing-comparison-header > span {
    display: none;
  }
  .pricing-comparison-header strong {
    font-size: 11px;
  }
  .pricing-comparison-groups summary {
    min-height: 74px;
    padding: 15px 14px;
  }
  .pricing-comparison-row {
    padding: 13px 10px;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px 4px;
  }
  .pricing-comparison-row > span {
    grid-column: 1/-1;
    padding: 0 2px 5px;
  }
  .pricing-comparison-row > div {
    position: relative;
    padding-top: 18px;
    font-size: 11px;
  }
  .pricing-comparison-row > div::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    color: #656870;
    font-size: 9px;
    font-weight: 750;
    content: attr(data-plan);
    text-transform: uppercase;
  }
  .pricing-feature-check {
    width: 26px;
    height: 26px;
  }
  .pricing-faq {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .pricing-v2 .pricing-usage-addons {
    width: calc(100% - 28px);
    padding: 24px 18px;
  }
  .pricing-v2 .pricing-usage-addons > div {
    grid-template-columns: 1fr 1fr;
  }
  .pricing-final-cta {
    width: calc(100% - 28px);
    padding: 56px 20px;
  }
  .pricing-final-cta h2 {
    font-size: 38px;
  }
  .pricing-footer {
    width: calc(100% - 28px);
    min-height: 140px;
    padding: 24px 0;
    grid-template-columns: 1fr auto;
  }
  .pricing-footer p {
    grid-column: 1/-1;
    grid-row: 2;
    margin: 12px 0 0;
  }
}
@media (max-width: 430px) {
  .pricing-v2 .pricing-page-hero h1 {
    font-size: 47px;
  }
  .pricing-account-usage {
    grid-template-columns: 1fr;
  }
  .pricing-account-plan {
    grid-column: auto;
  }
  .pricing-mini-meter + .pricing-mini-meter {
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .pricing-v2 .pricing-usage-addons > div {
    grid-template-columns: 1fr;
  }
}
* {
  box-sizing: border-box;
}
html {
  background: #0b0d10;
}
body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at 34% 10%, rgba(75, 86, 104, 0.1), transparent 31rem),
    #0b0d10;
  color: var(--ink);
  font-family: var(--font-geist-sans), Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.maintenance-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10000;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.42);
  background: rgba(69, 26, 3, 0.96);
  color: #fef3c7;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  backdrop-filter: blur(12px);
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  color: inherit;
}
button:not(:disabled),
select,
input[type="range"],
input[type="color"] {
  cursor: pointer;
}
select {
  color-scheme: dark;
}
select option,
select optgroup {
  background: #15181d;
  color: #dfe2e7;
}
button:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.studio-root {
  --generation-status-height: 0px;
  min-height: 100vh;
  background: transparent;
  isolation: isolate;
}
.studio-root.generation-status-visible {
  --generation-status-height: 44px;
}
.editor-project-loading {
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: #0b0d10;
  color: #f1f2f3;
}
.editor-project-wordmark {
  margin-top: 4px;
}
.editor-project-loading > span {
  color: #717780;
  font-size: 11px;
}
.studio-topbar {
  position: relative;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
  align-items: center;
  height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 14, 17, 0.96);
  backdrop-filter: blur(18px);
}
.studio-brand,
.top-actions,
.view-switch,
.project-center,
.focus-header,
.grid-header,
.selection-summary,
.media-actions button,
.ai-context,
.export-action,
.readiness-list > div {
  display: flex;
  align-items: center;
}
.studio-brand {
  width: 100%;
  min-width: 0;
  gap: 10px;
  overflow: hidden;
}
.brand-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 2px;
  overflow: hidden;
  line-height: 1;
}
.brand-copy strong {
  font-family: var(--font-condensed), sans-serif;
  font-size: 17px;
  letter-spacing: 0.09em;
}
.brand-copy strong em {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 5px;
  border: 1px solid rgba(169, 154, 255, .24);
  border-radius: 999px;
  background: rgba(119, 92, 235, .11);
  color: #bdb3f5;
  font-family: var(--font-geist-sans), sans-serif;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.template-load-error {
  gap: 10px;
  text-align: center;
}
.template-load-actions {
  display: flex;
  gap: 7px;
}
.template-load-actions > button, .template-load-actions > a {
  display: flex;
  height: 35px;
  padding: 0 13px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  color: #d6d9de;
  text-decoration: none;
}
.template-load-actions > button:first-child {
  border-color: rgba(167,149,255,.3);
  background: rgba(132,104,255,.1);
  color: #c8bdff;
}
.brand-copy input {
  display: block;
  width: 100%;
  max-width: 260px;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #8b929b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
}
.brand-copy input:focus {
  color: #f1f3f5;
}
@media (hover: hover) and (pointer: fine) {
  .brand-copy input:hover {
    color: #f1f3f5;
  }
}
.brand-copy input:focus {
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}
.mobile-close,
.mobile-ai,
.mobile-next {
  display: none;
}
.project-center {
  min-width: 0;
  justify-content: center;
  gap: 9px;
  color: #a8adb4;
  font-size: 12px;
}
.project-center strong {
  max-width: min(30vw, 390px);
  overflow: hidden;
  color: #e4e6e8;
  font-size: 12px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-kicker {
  color: #666c75;
}
.saved-dot {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666d75;
}
.saved-dot i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #70dda8;
}
.view-switch {
  justify-self: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.view-switch button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #777e88;
  font-size: 12px;
  font-weight: 600;
  transition: 160ms ease;
}
.view-switch button.active {
  background: #f3f4f5;
  color: #111317;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}
.top-actions {
  justify-self: end;
  justify-content: flex-end;
  gap: 7px;
}
.top-actions button,
.mobile-close,
.panel-more,
.sheet-handle button,
.modal-head > button {
  border: 0;
  background: transparent;
}
.top-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px !important;
  color: #888f99;
}
@media (hover: hover) and (pointer: fine) {
  .top-icon:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }
}
.cost-chip {
  display: inline-flex;
  height: 34px;
  padding: 0 11px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(157, 197, 255, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(91, 137, 194, 0.08) !important;
  color: #d8e6ff;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.cost-chip em {
  color: #9fb9df;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cost-chip small {
  color: #7f99bd;
  font-size: 9px;
  font-weight: 650;
}
@media (hover: hover) and (pointer: fine) {
  .cost-chip:hover {
    border-color: rgba(157, 197, 255, 0.32) !important;
    background: rgba(91, 137, 194, 0.14) !important;
  }
}
.usage-chip {
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.045) !important;
  color: #d5d7dc;
  text-decoration: none;
}
.usage-chip.is-low {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.065) !important;
  color: #f1f2f4;
}
.usage-chip-label {
  font-size: 10px;
  font-weight: 760;
}
.usage-progress-ring {
  position: relative;
  display: block;
  width: 22px;
  height: 4px;
  flex: 0 0 22px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
}
.usage-progress-ring > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--usage-progress);
  border-radius: inherit;
  background: #d9dbe0;
}
.mobile-usage-chip {
  display: none;
}
.image-layer-purpose {
  margin: -2px 0 0;
  padding: 9px 10px;
  border: 1px solid rgba(157, 197, 255, 0.12);
  border-radius: 9px;
  background: rgba(91, 137, 194, 0.07);
  color: #8794a5;
  font-size: 8px;
  line-height: 1.45;
}
.caption-button,
.next-button {
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 650;
}
.caption-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #b8bdc4;
}
.next-button {
  display: flex;
  align-items: center;
  gap: 7px;
  border-color: #f5f5f5 !important;
  background: #f5f5f5 !important;
  color: #111317;
}
.template-review-label {
  margin-left: 5px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 209, 92, .32);
  border-radius: 999px;
  background: rgba(255, 209, 92, .1);
  color: #ffe39a !important;
  font-size: 8px !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.template-review-mobile-label {
  display: none;
}
.studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  height: calc(100vh - 58px - var(--generation-status-height));
}
.canvas-stage {
  position: relative;
  min-width: 0;
  overflow: auto;
  padding: 12px 22px 10px;
  scrollbar-color: #363b43 transparent;
  scrollbar-width: thin;
}
.studio-layout.view-focus .canvas-stage {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.focus-preview-stack {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  padding: 4px 0 18px;
}
.focus-header {
  justify-content: space-between;
  width: min(54vh, 540px);
  max-width: calc(100% - 110px);
  margin: 0 auto 8px;
}
.focus-header > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.focus-header span,
.grid-header span {
  color: #6f7680;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.focus-header strong {
  color: #b4bac1;
  font-size: 11px;
}
.fact-status {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  color: #8e949b;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.018);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .fact-status:hover {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.045);
  }
}
.fact-status.passed {
  color: #80d2a8;
}
.fact-status.review,
.fact-status.pending {
  color: #e8be71;
}
.carousel-workspace {
  position: relative;
  display: grid;
  width: min(calc((100vh - 205px) * 0.8), 620px, calc(100% - 150px));
  max-width: calc(100% - 130px);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  isolation: isolate;
}
.editor-canvas,
.slide-surface {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #14171a;
  container-type: inline-size;
  user-select: none;
  touch-action: none;
}
.editor-canvas {
  z-index: 5;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56);
}
.canvas-content-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: inherit;
  touch-action: none;
}
.slide-transition-shell {
  position: relative;
  z-index: 5;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  will-change: transform, opacity;
}
.slide-transition-shell .editor-canvas {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
}
.slide-preview-bounds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.slide-transition-shell.direction-1 {
  animation: slide-in-from-right 310ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.slide-transition-shell.direction--1 {
  animation: slide-in-from-left 310ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes slide-in-from-right {
  from {
    opacity: 0.42;
    transform: translateX(12%) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes slide-in-from-left {
  from {
    opacity: 0.42;
    transform: translateX(-12%) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.slide-background {
  object-fit: cover;
  pointer-events: none;
  transition: object-position 90ms linear;
}
.canvas-layer,
.preview-layer {
  position: absolute;
  transform-origin: center;
}
.canvas-layer {
  display: block;
  touch-action: none;
}
.canvas-layer:not(.locked) {
  cursor: move;
}
.canvas-layer.selected {
  filter: none;
}
.canvas-layer.selected.kind-scrim {
  outline-color: #9cc1ff;
}
.canvas-layer.editing {
  outline-color: #9cc1ff;
  cursor: text;
}
.text-layer,
.text-layer-frame,
.scrim-layer,
.image-layer {
  width: 100%;
  height: 100%;
}
.text-layer-frame {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.text-layer-frame.is-hugging .text-layer {
  min-height: 1em;
}
.text-layer {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  line-height: 0.98;
  letter-spacing: -0.018em;
  white-space: pre-wrap;
  word-break: break-word;
}
.kind-text .text-layer[contenteditable="true"] {
  background: rgba(5, 8, 12, 0.45);
  box-shadow: inset 0 0 0 0.16cqw rgba(156, 193, 255, 0.65);
  caret-color: #fff;
  user-select: text;
}
.kind-image {
  overflow: visible;
}
.image-layer {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.image-mask-inner {
  position: absolute;
  overflow: hidden;
  background: #050608;
  box-sizing: border-box;
}
.image-transform {
  position: absolute;
  overflow: hidden;
  transition: none;
}
.image-progressive-preview,
.image-progressive-full {
  visibility: hidden;
}
.image-progressive-preview {
  transform: scale(1.004);
}
.image-progressive-full {
  opacity: 0;
  transition: opacity 170ms ease-out;
}
.image-progressive-preview.is-loaded,
.image-progressive-full.is-loaded {
  visibility: visible;
}
.image-progressive-full.is-loaded {
  opacity: 1;
}
.image-transform img,
.image-transform video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--image-object-fit, cover);
  object-position: var(--image-object-position, 50% 50%);
  user-select: none;
  pointer-events: none;
}
.image-transform video {
  border: 0;
  background: #050608;
}
.video-layer-badge {
  position: absolute;
  z-index: 3;
  top: 1.2cqw;
  right: 1.2cqw;
  padding: .55cqw .85cqw;
  border-radius: 99px;
  background: rgba(6, 8, 12, .7);
  color: rgba(255,255,255,.86);
  font-size: 1.5cqw;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.video-source-modal {
  width: min(560px,calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: #111319;
  box-shadow: 0 28px 90px rgba(0,0,0,.58);
}
.video-source-body {
  display: grid;
  padding: 18px;
  gap: 13px;
}
.video-upload-option {
  display: grid;
  min-height: 68px;
  padding: 12px 14px;
  grid-template-columns: 24px minmax(0,1fr) 18px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(162,142,255,.25);
  border-radius: 13px;
  background: linear-gradient(135deg,rgba(130,95,240,.15),rgba(255,255,255,.025));
  color: #d9d2ff;
  text-align: left;
}
.video-upload-option > span,.video-export-note > span,.video-preparation-progress > span {
  display: grid;
  gap: 3px;
}
.video-upload-option strong,.video-export-note strong,.video-preparation-progress strong {
  color: #f1f2f5;
  font-size: 12px;
}
.video-upload-option small,.video-export-note small,.video-preparation-progress small {
  color: #9299a4;
  font-size: 10px;
  line-height: 1.45;
}
.video-source-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #747b85;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.video-source-divider::before,.video-source-divider::after {
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.07);
  content: "";
}
.video-url-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 8px;
}
.video-url-form label {
  display: grid;
  gap: 6px;
  color: #9299a3;
  font-size: 10px;
}
.video-url-form input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  outline: 0;
  background: #0b0d11;
  color: #eef0f3;
  font-size: 13px;
}
.video-url-form input:focus {
  border-color: #9b8cff;
  box-shadow: 0 0 0 3px rgba(132,103,239,.15);
}
.video-url-form > button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #efeaff;
  color: #1a1624;
  font-size: 11px;
  font-weight: 750;
}
.video-preparation-progress,.video-preparation-error,.video-export-note {
  display: flex;
  min-height: 52px;
  padding: 10px 12px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(159,139,255,.18);
  border-radius: 11px;
  background: rgba(126,96,238,.08);
  color: #cfc7fb;
}
.video-preparation-error {
  border-color: rgba(240,111,124,.22);
  background: rgba(188,57,72,.08);
  color: #f19ca6;
  font-size: 11px;
}
.video-export-note {
  border-color: rgba(255,255,255,.07);
  background: #0d0f13;
}
.desktop-video-controls {
  display: grid;
  padding: 10px;
  gap: 9px;
  border: 1px solid rgba(159,139,255,.16);
  border-radius: 12px;
  background: rgba(126,96,238,.055);
}
.desktop-video-controls > button:first-child,.mobile-video-background {
  display: flex;
  min-height: 48px;
  padding: 8px 10px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: #111319;
  color: #aaa0df;
  text-align: left;
}
.desktop-video-controls > button:first-child > span,.mobile-video-background > span {
  display: grid;
  gap: 2px;
}
.desktop-video-controls > button:first-child strong,.mobile-video-background strong {
  color: #e9e6fa;
  font-size: 10px;
}
.desktop-video-controls > button:first-child small,.mobile-video-background small {
  color: #858b96;
  font-size: 9px;
}
.desktop-video-controls > button:first-child.active {
  border-color: rgba(170,151,255,.35);
  background: rgba(126,96,238,.12);
}
.desktop-remove-video,.mobile-remove-video {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: transparent;
  color: #9ca3ae;
  font-size: 10px;
}
.export-gallery-card video {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  background: #050608;
  object-fit: contain;
}
.export-render-stage .video-layer-badge {
  display: none;
}
.image-pan-surface {
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}
.image-pan-surface:active {
  cursor: grabbing;
}
.image-bottom-fade {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.scrim-layer {
  pointer-events: none;
}
.canvas-layer.kind-scrim {
  pointer-events: none;
}
.editor-image-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border: 1px dashed rgba(189, 180, 225, .42);
  background: linear-gradient(135deg, rgba(139, 119, 219, .08), rgba(255, 255, 255, .018)),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(255, 255, 255, .022) 13px 14px);
  color: #b8aecf;
  box-sizing: border-box;
  pointer-events: none;
}
.editor-image-placeholder > span {
  display: grid;
  min-width: min(70%, 210px);
  padding: 12px 14px;
  place-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  background: rgba(8, 9, 13, .76);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .26);
  text-align: center;
  backdrop-filter: blur(9px);
}
.editor-image-placeholder strong {
  color: #eeeaf8;
  font-size: 2.4cqw;
  font-weight: 720;
}
.editor-image-placeholder small {
  color: #817b8f;
  font-size: 1.55cqw;
}
.editor-image-placeholder.is-overlay > span {
  min-width: 0;
  padding: 7px;
  border: 0;
  background: rgba(8, 9, 13, .62);
  box-shadow: none;
}
.editor-image-placeholder.is-overlay strong {
  font-size: 1.65cqw;
}
.editor-image-placeholder.is-overlay small {
  display: none;
}
.selection-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: -1px;
  max-width: 150px;
  overflow: hidden;
  padding: 4px 6px;
  border-radius: 4px;
  background: #f6f6f7;
  color: #111318;
  font-family: var(--font-geist-sans), sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.layer-resize-handle,
.layer-rotate-handle {
  position: absolute;
  z-index: 5;
  display: grid;
  width: 21px;
  height: 21px;
  padding: 0;
  place-items: center;
  border: 1px solid #15171b;
  border-radius: 50%;
  background: #fff;
  color: #111318;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  touch-action: none;
}
.selection-interaction-frame {
  position: absolute;
  z-index: 2000;
  transform-origin: center;
  outline: 1.5px solid #fff;
  outline-offset: 0;
  filter: drop-shadow(0 0 1px #000);
  pointer-events: none;
}
.selection-image-pan-control {
  position: absolute;
  z-index: 1;
  inset: 11px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.selection-image-pan-control:active {
  cursor: grabbing;
}
.selection-interaction-frame.is-hugging-text {
  outline-color: #a99aff;
  outline-style: dashed;
  filter: drop-shadow(0 0 3px rgba(169, 154, 255, .45));
}
.selection-interaction-frame.is-hugging-text .selection-label {
  background: #a99aff;
  color: #100d18;
}
.selection-quick-actions {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  left: 50%;
  display: flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 9px;
  background: rgba(18, 21, 26, .96);
  box-shadow: 0 9px 28px rgba(0, 0, 0, .42);
  transform: translateX(-50%);
  pointer-events: auto;
  backdrop-filter: blur(16px);
}
.selection-quick-actions button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #cdd1d6;
}
@media (hover: hover) and (pointer: fine) {
  .selection-quick-actions button:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
  }
}
.selection-quick-actions button.danger {
  color: #ff8894;
}
.remote-cursor {
  position: absolute;
  z-index: 3100;
  display: grid;
  grid-template-columns: 11px auto;
  align-items: start;
  pointer-events: none;
  transition: left .12s linear, top .12s linear;
}
.remote-cursor i {
  width: 0;
  height: 0;
  border-top: 14px solid currentColor;
  border-right: 9px solid transparent;
  transform: rotate(-18deg);
  transform-origin: top left;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}
.remote-cursor span {
  margin: 12px 0 0 -1px;
  padding: 3px 5px;
  border-radius: 4px;
  background: currentColor;
  color: #0d0f12;
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.selection-edge {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
}
.selection-edge.top,
.selection-edge.bottom {
  right: 8px;
  left: 8px;
  height: 12px;
  cursor: move;
}
.selection-edge.left,
.selection-edge.right {
  top: 8px;
  bottom: 8px;
  width: 12px;
  cursor: move;
}
.selection-edge.top {
  top: -6px;
}
.selection-edge.bottom {
  bottom: -6px;
}
.selection-edge.left {
  left: -6px;
}
.selection-edge.right {
  right: -6px;
}
.layer-resize-handle {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  cursor: nwse-resize;
}
.layer-resize-handle.bottom-right {
  right: -10px;
  bottom: -10px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
}
.layer-resize-handle.bottom-left {
  bottom: -9px;
  left: -9px;
  cursor: nesw-resize;
}
.layer-resize-handle.top-right {
  top: -9px;
  right: -9px;
  cursor: nesw-resize;
}
.layer-resize-handle.top-left {
  top: -9px;
  left: -9px;
}
.layer-resize-handle.edge-top,
.layer-resize-handle.edge-bottom {
  left: 50%;
  width: 30px;
  height: 12px;
  border-radius: 999px;
  cursor: ns-resize;
  transform: translateX(-50%);
}
.layer-resize-handle.edge-left,
.layer-resize-handle.edge-right {
  top: 50%;
  width: 12px;
  height: 30px;
  border-radius: 999px;
  cursor: ew-resize;
  transform: translateY(-50%);
}
.layer-resize-handle.edge-top {
  top: -6px;
}
.layer-resize-handle.edge-bottom {
  bottom: -6px;
}
.layer-resize-handle.edge-left {
  left: -6px;
}
.layer-resize-handle.edge-right {
  right: -6px;
}
.selection-interaction-frame.group-selection {
  outline-style: dashed;
  outline-color: #b7a9ff;
}
.resize-dimension-badge {
  position: absolute;
  z-index: 6000;
  display: flex;
  height: 29px;
  padding: 0 9px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  background: rgba(14,17,21,.94);
  color: #7c8490;
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
  line-height: 1;
  box-shadow: 0 8px 26px rgba(0,0,0,.38);
  pointer-events: none;
  backdrop-filter: blur(12px);
}
.resize-dimension-badge strong {
  color: #f3f4f5;
  font-size: 10px;
}
.resize-dimension-badge em {
  margin-left: 1px;
  color: #777f89;
  font-size: 7px;
  font-style: normal;
}
.layer-rotate-handle {
  top: -10px;
  right: -10px;
  cursor: grab;
}
.corner {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid #15171b;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}
.corner.top-left {
  top: -3px;
  left: -3px;
}
.corner.top-right {
  top: -3px;
  right: -3px;
}
.corner.bottom-left {
  bottom: -3px;
  left: -3px;
}
.background-selection {
  position: absolute;
  z-index: 30;
  inset: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  pointer-events: none;
}
.background-selection span {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(9, 11, 14, 0.82);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  backdrop-filter: blur(8px);
}
.background-resize-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  border: 1px solid #15171b;
  border-radius: 50%;
  background: #fff;
  color: #111318;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  touch-action: none;
}
.peek-card {
  position: absolute;
  z-index: 0;
  top: 3.5%;
  width: 76%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #111317;
  opacity: 0.58;
  filter: saturate(0.82) brightness(0.86);
  transition: opacity 280ms ease, filter 280ms ease, transform 310ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .peek-card:hover {
    opacity: 0.68;
    filter: saturate(0.9) brightness(0.9);
  }
}
.peek-prev {
  right: 81%;
  -webkit-mask-image: linear-gradient(to left, #000 17%, rgba(0, 0, 0, 0.82) 43%, transparent 100%);
  mask-image: linear-gradient(to left, #000 17%, rgba(0, 0, 0, 0.82) 43%, transparent 100%);
  transform: scale(0.94);
}
.peek-next {
  left: 81%;
  -webkit-mask-image: linear-gradient(to right, #000 17%, rgba(0, 0, 0, 0.82) 43%, transparent 100%);
  mask-image: linear-gradient(to right, #000 17%, rgba(0, 0, 0, 0.82) 43%, transparent 100%);
  transform: scale(0.94);
}
.carousel-arrow {
  position: absolute;
  z-index: 20;
  top: 50%;
  display: grid;
  width: 35px;
  height: 35px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(27, 30, 35, 0.9);
  color: #e9e9ea;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .carousel-arrow:hover:not(:disabled) {
    background: #f1f2f3;
    color: #111317;
  }
}
.carousel-arrow:disabled {
  opacity: 0.22;
}
.carousel-arrow.previous {
  left: -52px;
}
.carousel-arrow.next {
  right: -52px;
}
.canvas-hint {
  display: flex;
  width: min(53vh, 570px);
  max-width: calc(100% - 96px);
  margin: 10px auto 0;
  justify-content: center;
  gap: 17px;
  color: #606771;
  font-size: 10px;
}
.canvas-hint span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.slide-rail {
  display: flex;
  width: min(760px, 100%);
  margin: 11px auto 0;
  padding: 6px 5px 1px;
  overflow-x: auto;
  gap: 8px;
  scrollbar-width: none;
}
.slide-rail::-webkit-scrollbar {
  display: none;
}
.slide-rail > button {
  position: relative;
  flex: 0 0 45px;
  width: 45px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  opacity: 0.48;
}
.slide-rail > button.active {
  opacity: 1;
}
.slide-rail > button.active::before {
  position: absolute;
  z-index: 5;
  inset: -3px;
  border: 1.5px solid #f6f6f7;
  border-radius: 8px;
  content: "";
}
.slide-rail .slide-surface {
  border-radius: 5px;
}
.slide-rail button > span:last-child {
  position: absolute;
  z-index: 10;
  right: 3px;
  bottom: 3px;
  display: grid;
  min-width: 13px;
  height: 13px;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
}
.add-slide-thumb {
  display: grid;
  height: 56px;
  place-items: center;
  border: 1px dashed #424850 !important;
  opacity: 0.7 !important;
}
.add-slide-thumb > span {
  display: none !important;
}
.slide-picker {
  min-width: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: min(1040px, calc(100% - 4px));
  margin: 0 auto;
  padding: 12px 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  background: transparent;
  scrollbar-color: #383e47 transparent;
  scrollbar-width: thin;
  scroll-padding-inline: 28px;
  overscroll-behavior-inline: contain;
  touch-action: auto;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.slide-picker-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 10px 28px;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  touch-action: auto;
}
.slide-picker.is-panning {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.slide-picker-item {
  position: relative;
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  grid-template-rows: auto 22px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  background: #15181d;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.25);
  opacity: 0.72;
  transition: opacity 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.slide-picker-item.active {
  border-color: rgba(255, 255, 255, 0.58);
  opacity: 1;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
@media (hover: hover) and (pointer: fine) {
  .slide-picker-item:hover {
    border-color: rgba(255, 255, 255, 0.58);
    opacity: 1;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  }
}
.slide-picker-item.active::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  pointer-events: none;
}
.slide-picker-item.dragging {
  border-style: dashed;
  opacity: 0.22;
  transform: scale(0.96);
}
.slide-picker-track.is-reordering .slide-picker-item {
  transition: none;
}
.slide-picker-item.drop-target {
  border-color: #b8aaff;
  box-shadow: -5px 0 0 -3px #b8aaff, 0 12px 30px rgba(0, 0, 0, 0.44);
  transform: translateX(3px);
}
.slide-picker-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 9px 9px 3px 3px;
  background: #0c0e11;
  touch-action: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.slide-picker .slide-surface {
  touch-action: auto;
}
.slide-picker-preview .slide-surface {
  border-radius: inherit;
}
.slide-picker-preview > .slide-picker-number {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.74);
  color: #fff;
  font-size: 8px;
  font-weight: 750;
}
.slide-picker-grip {
  position: relative;
  display: grid;
  width: 100%;
  height: 22px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0 0 7px 7px;
  background: #1a1e24;
  color: #676e78;
  cursor: grab;
  touch-action: none;
  -webkit-touch-callout: none;
}
.slide-picker-grip:active {
  cursor: grabbing;
  color: #fff;
}
.slide-picker-add {
  display: flex;
  flex: 0 0 72px;
  width: 72px;
  min-height: 112px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px dashed #3e444d;
  border-radius: 8px;
  background: transparent;
  color: #737b85;
  font-size: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .slide-picker-add:hover {
    border-color: #737b85;
    color: #dfe2e5;
  }
}
.slide-picker-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  display: grid;
  grid-template-rows: 1fr 22px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  background: #171a1f;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.62), 0 0 0 4px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
}
.slide-picker-drag-ghost .slide-surface {
  height: auto;
  border-radius: 8px 8px 2px 2px;
}
.slide-picker-drag-ghost > span {
  display: grid;
  place-items: center;
  color: #f2f3f4;
  font-size: 7px;
  font-weight: 700;
}
.editor-generation-status {
  position: absolute;
  z-index: 45;
  top: 12px;
  left: 50%;
  display: flex;
  max-width: min(390px, calc(100% - 28px));
  min-height: 42px;
  padding: 7px 11px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(22, 25, 30, 0.92);
  color: #b8aaff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}
.editor-generation-status > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.editor-generation-status strong {
  overflow: hidden;
  color: #eef0f2;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-generation-status small {
  color: #777e88;
  font-size: 8px;
}
.editor-generation-status.error {
  color: #ff929d;
}
.slide-surface.is-placeholder::after,
.editor-canvas.is-placeholder .canvas-content-clip::after {
  position: absolute;
  z-index: 100;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.07) 48%, transparent 62%);
  content: "";
  pointer-events: none;
  animation: placeholder-sweep 1.7s ease-in-out infinite;
}
.editor-canvas.is-provisional-visual .canvas-layer.kind-image:first-child {
  filter: blur(18px) saturate(.72);
}
.editor-canvas.is-provisional-visual .canvas-layer.kind-image:first-child .image-layer {
  transform: scale(1.08);
}
.slide-preview-surface.is-provisional-visual .slide-preview-layer.kind-image:first-child {
  filter: blur(12px) saturate(.72);
}
.slide-preview-surface.is-provisional-visual .slide-preview-layer.kind-image:first-child .image-layer {
  transform: scale(1.06);
}
.provisional-visual-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: linear-gradient(110deg, rgba(8, 10, 14, .18) 30%, rgba(255, 255, 255, .09) 45%, rgba(8, 10, 14, .18) 60%);
  background-size: 220% 100%;
  color: #fff;
  cursor: pointer;
  animation: provisional-visual-shimmer 1.7s linear infinite;
}
.provisional-visual-loading span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(9, 11, 15, .62);
  font-size: 9px;
  font-weight: 750;
  backdrop-filter: blur(10px);
}
.provisional-visual-loading span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #72b8ff;
  box-shadow: 0 0 0 0 rgba(114, 184, 255, .5);
  animation: generation-pulse 1.3s ease-out infinite;
}
.provisional-visual-loading small {
  color: rgba(255, 255, 255, .72);
  font-size: 7px;
  font-weight: 650;
}
@keyframes provisional-visual-shimmer {
  to {
    background-position: -220% 0;
  }
}
@keyframes placeholder-sweep {
  from {
    transform: translateX(-90%);
  }
  to {
    transform: translateX(90%);
  }
}
.snap-guide {
  position: absolute;
  z-index: 1000;
  display: block;
  background: #ff4eb8;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.snap-guide.vertical {
  top: 0;
  bottom: 0;
  width: 1px;
}
.snap-guide.horizontal {
  right: 0;
  left: 0;
  height: 1px;
}
.edge-distance-guides {
  position: absolute;
  z-index: 5200;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.edge-distance-guide {
  position: absolute;
  display: block;
  background: #ff4eb8;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .24);
}
.edge-distance-guide.horizontal {
  height: 1px;
}
.edge-distance-guide.vertical {
  width: 1px;
}
.edge-distance-guide b {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  min-width: max-content;
  padding: 3px 5px;
  border-radius: 4px;
  background: #ff4eb8;
  color: #fff;
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
  font-weight: 750;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  transform: translate(-50%, -50%);
}
.canvas-selection {
  position: absolute;
  z-index: 1001;
  inset: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  pointer-events: none;
}
.canvas-selection span {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(8, 10, 13, 0.85);
  color: #e9ebed;
  font-size: 8px;
  font-weight: 650;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.ui-menu-surface {
  border: 1px solid var(--menu-border);
  border-radius: var(--menu-radius);
  background: var(--menu-surface);
  box-shadow: var(--menu-shadow);
  backdrop-filter: blur(18px) saturate(135%);
}
.ui-menu-item {
  display: flex;
  width: 100%;
  min-height: var(--menu-item-height);
  padding: 0 10px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: var(--menu-item-radius);
  background: transparent;
  color: #cdd1d7;
  font-size: var(--menu-item-font);
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .ui-menu-item:hover {
    background: rgba(255, 255, 255, 0.075);
    color: #fff;
  }
}
.ui-menu-item:focus-visible,
.ui-menu-item[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
}
.ui-menu-item[aria-selected="true"] {
  background: rgba(142, 123, 232, 0.14);
}
.ui-menu-separator {
  height: 1px;
  margin: 5px 8px;
  background: var(--line);
}
.menu-select {
  position: relative;
  min-width: 0;
}
.menu-select-trigger {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.menu-select-icon,
.menu-select-chevron {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
}
.menu-select-chevron {
  color: #6f7680;
  transition: transform 140ms ease, color 140ms ease;
}
.menu-select-trigger[aria-expanded="true"] .menu-select-chevron {
  color: #c8cdd4;
  transform: rotate(180deg);
}
.menu-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-select-popover {
  position: fixed;
  z-index: 9000;
  display: grid;
  overflow-y: auto;
  padding: 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #3b414a transparent;
}
.menu-select-group {
  display: grid;
}
.menu-select-group + .menu-select-group {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
}
.menu-select-group-label {
  padding: 7px 10px 5px;
  color: #727983;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.menu-select-option {
  justify-content: space-between;
}
.menu-select-option > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-select-option > svg {
  flex: 0 0 auto;
  color: #b0a4ff;
}
.canvas-context-menu {
  position: fixed;
  z-index: 500;
  display: grid;
  width: 224px;
  padding: 6px;
  border: 1px solid var(--menu-border);
  border-radius: var(--menu-radius);
  background: var(--menu-surface);
  box-shadow: var(--menu-shadow);
  backdrop-filter: blur(18px) saturate(135%);
}
.context-menu-title {
  display: flex;
  padding: 7px 8px 8px;
  align-items: baseline;
  justify-content: space-between;
  color: #e4e6e9;
  font-size: 10px;
  font-weight: 650;
}
.context-menu-title small {
  color: #6f7680;
  font-size: 8px;
  font-weight: 500;
  text-transform: capitalize;
}
.canvas-context-menu > button {
  display: flex;
  width: 100%;
  min-height: var(--menu-item-height);
  padding: 0 10px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: var(--menu-item-radius);
  background: transparent;
  color: #cdd1d7;
  font-size: var(--menu-item-font);
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .canvas-context-menu > button:hover {
    background: rgba(255, 255, 255, 0.075);
    color: #fff;
  }
}
.canvas-context-menu > button:focus-visible {
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
}
.canvas-context-menu > button.danger {
  color: #e88d94;
}
.context-separator {
  height: 1px;
  margin: 5px 8px;
  background: var(--line);
}
.context-color {
  display: flex;
  height: 37px;
  padding: 0 8px;
  align-items: center;
  justify-content: space-between;
  color: #c0c4ca;
  font-size: 9px;
}
.context-color input {
  width: 30px;
  height: 23px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111419;
}
.grid-view {
  width: min(1140px, 100%);
  margin: 0 auto;
  padding: 13px 12px 40px;
}
.grid-header {
  justify-content: space-between;
  margin: 6px 0 20px;
}
.grid-header h1 {
  margin: 4px 0 3px;
  font-size: 23px;
  letter-spacing: -0.04em;
}
.grid-header p {
  margin: 0;
  color: #737982;
  font-size: 11px;
}
.grid-summary {
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #76d2a1;
  font-size: 10px;
}
.grid-summary span {
  padding-left: 7px;
  border-left: 1px solid var(--line);
  color: #e0b56a;
  letter-spacing: 0;
  text-transform: none;
}
.deck-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.deck-grid > article,
.deck-grid > button {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #13161a;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease;
}
.grid-card-select {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.grid-card-select > .slide-surface,
.deck-grid > button > .slide-surface {
  height: auto;
  aspect-ratio: 4 / 5;
}
@media (hover: hover) and (pointer: fine) {
  .deck-grid > article:hover,
.deck-grid > button:hover {
    border-color: rgba(255, 255, 255, 0.26);
    transform: translateY(-2px);
  }
}
.deck-grid > article.active,
.deck-grid > button.active {
  border-color: rgba(255, 255, 255, 0.6);
}
.deck-grid > article.selected-for-ai,
.deck-grid > button.selected-for-ai {
  border-color: #bdadff;
  box-shadow: 0 0 0 1px rgba(189, 173, 255, 0.2), 0 12px 30px rgba(75, 54, 150, 0.15);
}
.grid-replace-image {
  position: absolute;
  z-index: 45;
  right: 8px;
  bottom: 38px;
  display: flex;
  min-height: 30px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(10,12,15,.88);
  color: #f1f2f4;
  font-size: 8px;
  font-weight: 750;
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
  backdrop-filter: blur(12px);
}
.deck-grid > article:focus-within .grid-replace-image,
.grid-replace-image:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .deck-grid > article:hover .grid-replace-image {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (hover: hover) and (pointer: fine) {
  .grid-replace-image:hover {
    background: rgba(78,59,151,.94);
  }
}
.grid-ai-badge {
  position: absolute;
  z-index: 40;
  top: 8px;
  right: 8px;
  display: flex;
  height: 22px;
  padding: 0 7px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(25, 20, 43, 0.87);
  color: #ded6ff !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  backdrop-filter: blur(10px);
}
.grid-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 35px;
  padding: 0 9px;
  color: #777e87;
  font-size: 9px;
  text-transform: capitalize;
}
.grid-card-meta strong {
  color: #d8dade;
}
.grid-card-meta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e1b765;
}
.grid-card-meta i.passed {
  background: #62c694;
}
.grid-add-card {
  display: flex;
  min-height: 250px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  border-style: dashed !important;
  color: #7b828c;
  text-align: center !important;
}
.grid-add-card > span {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 3px;
  place-items: center;
  border: 1px solid #404650;
  border-radius: 50%;
}
.grid-add-card strong {
  color: #c5c9ce;
  font-size: 12px;
}
.grid-add-card small {
  color: #656b74;
  font-size: 9px;
}
.editor-panel {
  position: relative;
  z-index: 70;
  display: flex;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: rgba(19, 22, 27, 0.98);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.12);
}
.sheet-handle {
  display: none;
}
.panel-header {
  display: flex;
  min-height: 61px;
  padding: 0 17px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.panel-header > div {
  display: grid;
  gap: 3px;
}
.panel-header span {
  color: #666d76;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.panel-header strong {
  font-size: 13px;
  font-weight: 600;
}
.panel-cost-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 52px;
  margin: 0 10px 8px;
  padding: 9px 10px;
  align-items: center;
  gap: 2px 10px;
  border: 1px solid rgba(157, 197, 255, 0.14);
  border-radius: 9px;
  background: rgba(91, 137, 194, 0.07);
  text-align: left;
}
.panel-cost-summary span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: #91aeda;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.panel-cost-summary strong {
  color: #f0f5ff;
  font-size: 16px;
  font-weight: 750;
}
.panel-cost-summary small {
  grid-column: 1 / -1;
  color: #6f829d;
  font-size: 8px;
}
.panel-more,
.sheet-handle button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border-radius: 8px;
  color: #7f8690;
}
.panel-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
}
.panel-tabs button {
  display: flex;
  height: 35px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f7680;
  font-size: 10px;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .panel-tabs button:hover {
    color: #c4c8ce;
  }
}
.panel-tabs button.active {
  background: #252a31;
  color: #f4f5f6;
}
.panel-content {
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  flex: 1;
  scrollbar-color: #363b43 transparent;
  scrollbar-width: thin;
}
.add-layer-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 17px;
}
.add-layer-row button {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #1a1e23;
  color: #a3a9b1;
  font-size: 9px;
}
@media (hover: hover) and (pointer: fine) {
  .add-layer-row button:hover {
    border-color: rgba(255, 255, 255, 0.21);
    color: #fff;
  }
}
.section-title {
  display: flex;
  margin: 4px 1px 8px;
  align-items: center;
  justify-content: space-between;
  color: #777e88;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section-title small {
  color: #575e67;
  font-size: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.layer-list {
  display: grid;
  gap: 4px;
}
.layer-list > button,
.layer-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 46px;
  padding: 5px 7px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
}
.layer-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0 5px 0 0;
}
.layer-select {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  min-width: 0;
  min-height: 44px;
  padding: 5px 7px;
  align-items: center;
  border: 0;
  background: transparent;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .layer-list > button:hover,
.layer-row:hover {
    background: rgba(255, 255, 255, 0.028);
  }
}
.layer-list > button.active,
.layer-row.active {
  border-color: rgba(255, 255, 255, 0.1);
  background: #22272e;
}
.layer-thumb {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  overflow: hidden;
  place-items: center;
  border-radius: 6px;
  background: #292e36;
  color: #9aa1aa;
}
.layer-thumb.background img {
  object-fit: cover;
}
.layer-thumb.text {
  background: #262c34;
  color: #d6dae0;
}
.layer-thumb.scrim {
  background: linear-gradient(135deg, #2b3037, #060708);
  color: #8eb4f4;
}
.layer-thumb.image {
  background: #29362f;
  color: #81c69f;
}
.layer-name {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.layer-name strong,
.layer-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-name strong {
  color: #cdd1d6;
  font-size: 10px;
  font-weight: 570;
}
.layer-name small {
  color: #606771;
  font-size: 8px;
}
.layer-name strong {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.global-layer-badge {
  padding: 2px 5px;
  border: 1px solid rgba(157, 137, 255, 0.22);
  border-radius: 999px;
  background: rgba(119, 92, 235, 0.12);
  color: #bdb0ff;
  font-size: 6px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.group-layer-badge {
  padding: 2px 5px;
  border: 1px solid rgba(107, 185, 255, 0.2);
  border-radius: 999px;
  background: rgba(64, 139, 214, 0.1);
  color: #8ec7ff;
  font-size: 6px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.group-actions {
  display: flex;
  min-height: 38px;
  margin: 0 0 8px;
  padding: 6px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(142, 199, 255, 0.12);
  border-radius: 8px;
  background: rgba(60, 119, 177, 0.06);
}
.group-actions button {
  display: flex;
  height: 27px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: #222830;
  color: #d8dce1;
  font-size: 8px;
}
.group-actions span {
  color: #626a74;
  font-size: 7px;
}
.muted-icon {
  color: #454b54;
}
.layer-mini-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.layer-mini-actions button {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #555c65;
}
@media (hover: hover) and (pointer: fine) {
  .layer-mini-actions button:hover {
    background: #30353d;
    color: #d8dbdf;
  }
}
.layer-order-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
}
.panel-action-row button,
.subtle-action,
.wide-action,
.format-row button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1a1e23;
  color: #9ca2aa;
}
.panel-action-row button {
  height: 34px;
  gap: 4px;
  font-size: 9px;
}
.panel-action-row button:disabled,
.panel-footer button:disabled {
  opacity: 0.3;
}
.panel-footer {
  display: grid;
  gap: 4px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--line);
  background: #12151a;
}
.panel-footer > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.panel-footer button {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1a1e23;
  color: #9ca2aa;
  font-size: 9px;
}
@media (hover: hover) and (pointer: fine) {
  .panel-footer button:hover:not(:disabled) {
    background: #22262d;
    color: #cdd1d6;
  }
}
@media (hover: hover) and (pointer: fine) {
  .panel-footer button.danger:hover:not(:disabled) {
    color: #ff8790;
  }
}
.control-stack,
.media-panel,
.ai-panel {
  display: grid;
  gap: 14px;
}
.desktop-primary-controls {
  display: grid;
  padding: 11px;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 12px;
  background: rgba(255, 255, 255, .018);
}
.desktop-control-label {
  color: #727983;
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
}
.desktop-text-input {
  min-height: 86px;
  margin: -4px 0 0;
  font-family: inherit;
  font-size: 13px;
}
.desktop-rich-text-input {
  max-height: 190px;
  padding: 12px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: #fff;
  cursor: text;
  outline: none;
}
.desktop-rich-text-input:focus {
  border-color: rgba(168, 145, 255, .55);
  box-shadow: 0 0 0 3px rgba(128, 96, 238, .12);
}
.desktop-rich-text-input:empty::before {
  color: #666d77;
  content: attr(data-placeholder);
  pointer-events: none;
  -webkit-text-fill-color: #666d77;
}
.desktop-rich-text-input [style*="font-size"] {
  font-size: 1em !important;
}
.desktop-control-label.has-selection {
  color: #bcaeff;
}
.text-rewrite-control {
  display: grid;
  gap: 8px;
}
.text-rewrite-trigger {
  display: grid;
  width: 100%;
  min-height: 43px;
  padding: 7px 9px;
  grid-template-columns: 22px minmax(0,1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(168,145,255,.16);
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(128,96,238,.08),rgba(255,255,255,.018));
  color: #a99de1;
  text-align: left;
}
.text-rewrite-trigger > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.text-rewrite-trigger strong {
  color: #ddd9ef;
  font-size: 10px;
  font-weight: 720;
}
.text-rewrite-trigger small {
  overflow: hidden;
  color: #77718d;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-rewrite-trigger > svg:last-child {
  color: #716a86;
  transition: transform 150ms ease;
}
.text-rewrite-control.is-open .text-rewrite-trigger {
  border-color: rgba(168,145,255,.32);
  background: rgba(128,96,238,.11);
}
.text-rewrite-control.is-open .text-rewrite-trigger > svg:last-child {
  transform: rotate(180deg);
}
.text-rewrite-menu {
  display: grid;
  padding: 9px;
  gap: 8px;
  border: 1px solid rgba(168,145,255,.18);
  border-radius: 11px;
  background: linear-gradient(145deg,rgba(128,96,238,.08),rgba(255,255,255,.012) 58%),#101216;
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
  animation: text-rewrite-reveal 150ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes text-rewrite-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.text-rewrite-menu > header {
  display: grid;
  gap: 2px;
}
.text-rewrite-menu > header strong {
  color: #eceaf3;
  font-size: 10px;
}
.text-rewrite-menu > header small {
  color: #7e788f;
  font-size: 8px;
  line-height: 1.4;
}
.text-rewrite-options {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
}
.text-rewrite-options > button {
  display: grid;
  min-width: 0;
  min-height: 49px;
  padding: 7px 8px;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 8px;
  background: rgba(255,255,255,.022);
  color: #d2cedf;
  text-align: left;
}
.text-rewrite-options > button:last-child {
  grid-column: 1 / -1;
}
@media (hover: hover) and (pointer: fine) {
  .text-rewrite-options > button:hover:not(:disabled) {
    border-color: rgba(168,145,255,.3);
    background: rgba(128,96,238,.1);
  }
}
.text-rewrite-options strong {
  font-size: 9px;
}
.text-rewrite-options small {
  overflow: hidden;
  color: #777281;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-rewrite-custom {
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px;
  gap: 5px;
}
.text-rewrite-custom input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  outline: 0;
  background: #0b0d10;
  color: #e6e5eb;
  font-size: 10px;
}
.text-rewrite-custom input:focus {
  border-color: rgba(168,145,255,.42);
  box-shadow: 0 0 0 3px rgba(128,96,238,.09);
}
.text-rewrite-custom > button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(168,145,255,.24);
  border-radius: 8px;
  background: rgba(128,96,238,.14);
  color: #d7d0fa;
}
.text-rewrite-custom > button:disabled,.text-rewrite-options > button:disabled {
  opacity: .45;
}
.desktop-text-alignments,.desktop-text-effects {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}
.desktop-text-alignments > span,.desktop-text-effects > span {
  width: 39px;
  flex: 0 0 39px;
  color: #707680;
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
}
.desktop-text-alignments > i {
  width: 1px;
  height: 25px;
  margin: 0 2px;
  flex: 0 0 1px;
  background: rgba(255,255,255,.075);
}
.desktop-text-alignments button,.desktop-text-effects button {
  display: grid;
  min-width: 32px;
  height: 34px;
  padding: 0 7px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 8px;
  background: #101216;
  color: #777d86;
  font-size: 7px;
}
.desktop-text-alignments button.active,.desktop-text-effects button.active {
  border-color: rgba(168,145,255,.36);
  background: rgba(128,96,238,.13);
  color: #fff;
}
.desktop-text-effects input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: #101216;
}
.desktop-color-mode {
  display: grid;
  padding: 3px;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border-radius: 9px;
  background: #0e0f12;
}
.desktop-color-mode button {
  height: 31px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #707680;
  font-size: 8px;
}
.desktop-color-mode button.active {
  background: #27292f;
  color: #fff;
}
.desktop-color-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}
.desktop-color-swatches > button,.desktop-custom-color {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 2px solid #2b2d32;
  border-radius: 50%;
  color: #fff;
}
.desktop-color-swatches > button.active {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.desktop-custom-color {
  border-style: dashed;
  background: conic-gradient(from 45deg,#ff5c6a,#ffd15c,#43d18b,#4ba3ff,#9a7cff,#ff5c6a);
  box-shadow: inset 0 0 0 6px #202228;
  cursor: pointer;
}
.desktop-custom-color input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.desktop-gradient-controls {
  display: grid;
  grid-template-columns: 70px 70px minmax(0,1fr);
  align-items: end;
  gap: 7px;
}
.desktop-gradient-controls > label,.desktop-fade-controls > label {
  display: grid;
  min-height: 48px;
  padding: 6px 7px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  background: #101216;
  color: #737981;
  font-size: 7px;
}
.desktop-gradient-controls input[type="color"],.desktop-fade-controls input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.desktop-font-strip {
  display: flex;
  padding-bottom: 3px;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.desktop-font-strip::-webkit-scrollbar {
  display: none;
}
.desktop-font-strip > span {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: 8px 7px 8px 0;
  flex: 0 0 auto;
  background: #16181d;
  color: #6f757e;
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
}
.desktop-font-strip button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: #101216;
  color: #a9adb3;
  font-size: 10px;
}
.desktop-font-strip button.active {
  border-color: #fff;
  color: #fff;
}
.font-weight-strip {
  display: flex;
  padding-bottom: 3px;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.font-weight-strip::-webkit-scrollbar {
  display: none;
}
.font-weight-strip > span {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: 8px 7px 8px 0;
  flex: 0 0 auto;
  background: #16181d;
  color: #6f757e;
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
}
.font-weight-strip button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: #101216;
  color: #a9adb3;
  font-size: 9px;
}
.font-weight-strip button.active {
  border-color: rgba(168,145,255,.52);
  background: rgba(128,96,238,.14);
  color: #fff;
}
.desktop-advanced-divider {
  display: flex;
  margin-top: 2px;
  padding-top: 13px;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.075);
}
.desktop-advanced-divider span {
  color: #aeb3ba;
  font-size: 9px;
  font-weight: 750;
}
.desktop-advanced-divider small {
  color: #606771;
  font-size: 7px;
}
.desktop-bold-toggle {
  display: flex;
  height: 35px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: #12151a;
  color: #737b85;
  font-size: 8px;
}
.desktop-bold-toggle.active {
  border-color: rgba(168,145,255,.36);
  background: rgba(128,96,238,.13);
  color: #fff;
}
.desktop-fade-controls {
  width: 100%;
  box-sizing: border-box;
}
.desktop-fade-controls > p {
  margin: 0;
  color: #838994;
  font-size: 9px;
  line-height: 1.45;
}
.text-layout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.text-layout-actions > button {
  display: grid;
  min-width: 0;
  min-height: 51px;
  padding: 7px 9px;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: #101216;
  color: #767d87;
  text-align: left;
}
.text-layout-actions > button > svg,.text-layout-actions > button > b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #a6abb3;
  font-size: 11px;
  line-height: 1;
}
.text-layout-actions > button > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.text-layout-actions strong {
  color: #cdd0d5;
  font-size: 8px;
}
.text-layout-actions small {
  overflow: hidden;
  color: #666d77;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-layout-actions > button.active {
  border-color: rgba(168,145,255,.38);
  background: rgba(128,96,238,.13);
  color: #e7e2ff;
}
.text-layout-actions > button.active > svg,.text-layout-actions > button.active > b,.text-layout-actions > button.active strong {
  color: #eeeaff;
}
.desktop-image-controls .image-layer-purpose {
  margin: 0;
}
.desktop-image-adjust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.desktop-image-stroke-row {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) 68px;
  align-items: end;
  gap: 7px;
}
.desktop-image-stroke-row > label {
  display: grid;
  height: 48px;
  padding: 6px;
  box-sizing: border-box;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  background: #101216;
  color: #737981;
  font-size: 7px;
}
.desktop-image-stroke-row input[type="color"] {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.desktop-image-stroke-row > button {
  height: 48px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: #101216;
  color: #717780;
  font-size: 7px;
}
.desktop-image-stroke-row > button strong {
  display: block;
  margin-top: 3px;
  color: #aaaeb5;
  font-size: 6px;
}
.desktop-image-stroke-row > button.active {
  border-color: rgba(168,145,255,.3);
  color: #ded8ff;
}
.desktop-ranked-picks {
  display: grid;
  gap: 8px;
}
.desktop-ranked-picks .section-title {
  margin: 0;
}
.selection-summary {
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #181c21;
}
.large-layer-icon {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #292f37;
  color: #c9cdd2;
}
.large-layer-icon.background img {
  object-fit: cover;
}
.large-layer-icon.shadow {
  background: linear-gradient(135deg, #313740, #090b0e);
  color: #96bfff;
}
.large-layer-icon.image {
  background: #26332c;
  color: #76c799;
}
.selection-summary > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.selection-summary strong {
  font-size: 11px;
  font-weight: 600;
}
.selection-summary small {
  color: #696f78;
  font-size: 8px;
  line-height: 1.35;
}
.wide-action,
.subtle-action {
  height: 36px;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
}
.wide-action {
  border-color: rgba(255, 255, 255, 0.13);
  color: #d9dce0;
}
.subtle-action {
  height: 31px;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .wide-action:hover,
.subtle-action:hover {
    background: #242a31;
    color: #fff;
  }
}
.field-label,
.select-row label > span {
  color: #707781;
  font-size: 9px;
  font-weight: 600;
}
.text-control,
.ai-composer textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #101318;
  color: #e9eaec;
}
.text-control {
  min-height: 92px;
  margin-top: -8px;
  padding: 10px;
  font-size: 11px;
  line-height: 1.45;
}
input.text-control {
  min-height: 40px;
  padding-block: 0;
  line-height: 1.2;
}
.two-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.select-row label {
  display: grid;
  gap: 5px;
}
.select-row select {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #1a1e23;
  color: #c6cad0;
  font-size: 10px;
}
.select-row input[type="color"] {
  width: 100%;
  height: 34px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #1a1e23;
}
.range-control {
  display: grid;
  gap: 7px;
}
.range-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.range-control strong {
  color: #9298a0;
  font-size: 9px;
  font-weight: 550;
}
.range-control em {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #696f78;
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
  font-style: normal;
}
.range-control em input {
  width: 52px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: #15191e;
  color: #bfc3c9;
  font: inherit;
  text-align: right;
}
.range-control em i {
  font-style: normal;
  white-space: nowrap;
}
.range-reset {
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(169, 154, 255, 0.2);
  border-radius: 5px;
  background: rgba(126, 101, 222, 0.1);
  color: #b8adf1;
  font: inherit;
  font-weight: 700;
}
.range-control > input[type="range"] {
  width: 100%;
  height: 2px;
  appearance: none;
  border-radius: 2px;
  background: linear-gradient(90deg, #f2f3f4 0 var(--range-progress, 0%), #3b414a var(--range-progress, 0%) 100%);
  accent-color: #f2f3f4;
}
.auto-layout-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auto-layout-toggle-row > button {
  display: inline-flex;
  min-height: 36px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #15191e;
  color: #a4aab2;
}
.auto-layout-toggle-row > button.active {
  border-color: rgba(169,154,255,.38);
  background: rgba(126,101,222,.12);
  color: #e8e4ff;
}
.auto-layout-toggle-row > small {
  color: #747b84;
}
.auto-layout-controls {
  display: grid;
  margin-top: 9px;
  gap: 9px;
}
.auto-layout-controls > label {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 58px;
  align-items: center;
  gap: 7px;
  color: #8f969f;
  font-size: 11px;
}
.auto-layout-controls > label input[type="range"] {
  width: 100%;
}
.auto-layout-controls > label input[type="number"] {
  width: 58px;
  height: 32px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #15191e;
  color: #d6d9dd;
}
.auto-layout-anchor-grid {
  display: grid;
  grid-template-columns: 64px repeat(3,1fr);
  align-items: center;
  gap: 5px;
}
.auto-layout-anchor-grid > span {
  color: #858c95;
  font-size: 11px;
}
.auto-layout-anchor-grid > button {
  min-height: 33px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #15191e;
  color: #8f969f;
}
.auto-layout-anchor-grid > button.active {
  border-color: rgba(169,154,255,.36);
  background: rgba(126,101,222,.12);
  color: #fff;
}
.range-control > input[type="range"]::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  appearance: none;
  border: 2px solid #1c2026;
  border-radius: 50%;
  background: #f2f3f4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.format-row {
  display: grid;
  grid-template-columns: repeat(4, 38px);
  gap: 6px;
}
.format-row button {
  height: 34px;
}
.format-row button.active {
  border-color: rgba(255, 255, 255, 0.25);
  background: #30353d;
  color: #fff;
}
.media-actions {
  display: grid;
  gap: 7px;
}
.media-actions button {
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #191d22;
  color: #aeb3ba;
  text-align: left;
}
.media-actions button:disabled,
.ai-suggestions button:disabled,
.ai-composer button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.geometry-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.geometry-controls label {
  position: relative;
  display: grid;
  gap: 5px;
  color: #777e87;
  font-size: 8px;
}
.geometry-controls input {
  width: 100%;
  height: 33px;
  padding: 0 23px 0 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #15191e;
  color: #d8dbe0;
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
}
.geometry-controls label > em {
  position: absolute;
  right: 7px;
  bottom: 12px;
  color: #555d67;
  font-family: var(--font-geist-mono), monospace;
  font-size: 6px;
  font-style: normal;
  pointer-events: none;
}
.geometry-controls > small {
  grid-column: 1 / -1;
  margin-top: 1px;
  color: #555d67;
  font-size: 6px;
  line-height: 1.35;
}
.canvas-color,
.large-layer-icon.canvas-color {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background-image: linear-gradient(135deg, transparent 47%, rgba(255, 255, 255, 0.25) 49%, transparent 51%);
}
.canvas-color-control {
  display: grid;
  grid-template-columns: 1fr 42px auto;
  align-items: center;
  gap: 9px;
  color: #90969e;
  font-size: 9px;
}
.canvas-color-control input {
  width: 42px;
  height: 32px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #15191e;
}
.canvas-color-control strong {
  color: #737a84;
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
}
.modifier-note {
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.modifier-note strong {
  color: #aeb3ba;
  font-size: 9px;
}
.modifier-note span {
  color: #6f7680;
  font-size: 8px;
  line-height: 1.45;
}
.multi-layer-controls > section {
  display: grid;
  gap: 8px;
}
.multi-align-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.multi-align-grid button,
.multi-distribute-row button,
.multi-selection-actions button {
  display: flex;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #191d22;
  color: #aeb4bc;
  font-size: 7px;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .multi-align-grid button:hover,
.multi-distribute-row button:hover,
.multi-selection-actions button:hover {
    border-color: rgba(183, 169, 255, .28);
    background: #242831;
    color: #fff;
  }
}
.multi-distribute-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.multi-selection-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.multi-selection-actions button:last-child {
  grid-column: 1 / -1;
}
.multi-selection-actions button.danger {
  color: #ff929d;
}
.global-layer-toggle {
  display: flex;
  width: 100%;
  min-height: 49px;
  padding: 8px 10px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #171b20;
  color: #727983;
  text-align: left;
}
.global-layer-toggle.active {
  border-color: rgba(163, 143, 255, 0.25);
  background: rgba(112, 87, 213, 0.1);
  color: #b8aaff;
}
.global-layer-toggle > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.global-layer-toggle strong {
  color: #b8bdc4;
  font-size: 9px;
  font-weight: 620;
}
.global-layer-toggle small {
  color: #666d76;
  font-size: 7px;
  line-height: 1.35;
}
.global-layer-toggle > em {
  margin-left: auto;
  color: #a99aff;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}
.bottom-fade-toggle {
  display: flex;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #171b20;
  color: #737a84;
  text-align: left;
}
.bottom-fade-toggle.active {
  border-color: rgba(156, 193, 255, 0.26);
  background: rgba(91, 137, 194, 0.1);
}
.bottom-fade-toggle > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.bottom-fade-toggle strong {
  color: #c0c5cc;
  font-size: 9px;
  font-weight: 650;
}
.bottom-fade-toggle small {
  color: #6c737d;
  font-size: 7px;
  line-height: 1.35;
}
.bottom-fade-toggle > em {
  margin-left: auto;
  color: #9cc1ff;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}
.image-fade-controls {
  display: grid;
  gap: 10px;
}
.match-canvas-button {
  height: 32px;
  align-self: end;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #191d22;
  color: #aeb3ba;
  font-size: 8px;
}
.mask-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.mask-controls button {
  display: flex;
  min-width: 0;
  height: 48px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #171b20;
  color: #777e87;
  font-size: 7px;
}
.mask-controls button.active {
  border-color: rgba(255, 255, 255, 0.34);
  background: #2b3037;
  color: #fff;
}
.image-zoom-actions {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  gap: 6px;
}
.image-zoom-actions button {
  display: grid;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #191d22;
  color: #aeb3ba;
  font-size: 8px;
}
.image-fit-controls {
  display: grid;
  gap: 5px;
}
.image-fit-controls button {
  display: grid;
  min-height: 42px;
  padding: 7px 8px;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171b20;
  color: #767d87;
  text-align: left;
}
.image-fit-controls button.active {
  border-color: rgba(255, 255, 255, .26);
  background: #272c33;
  color: #f2f4f6;
}
.image-fit-controls button strong {
  color: inherit;
  font-size: 9px;
  font-weight: 750;
}
.image-fit-controls button small {
  color: #6f7680;
  font-size: 7px;
}
.image-position-controls {
  align-items: end;
}
.image-stroke-controls {
  align-items: end;
}
.image-stroke-controls .range-control {
  align-self: end;
  padding-bottom: 7px;
}
.split-controls button {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #191d22;
  color: #aeb3ba;
  font-size: 8px;
}
.spin {
  animation: spin 800ms linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.media-actions button > span,
.ai-context span {
  display: grid;
  gap: 2px;
}
.media-actions strong,
.ai-context strong {
  font-size: 10px;
  font-weight: 600;
}
.media-actions small,
.ai-context small {
  color: #666d76;
  font-size: 8px;
}
.cost-panel {
  display: grid;
  gap: 13px;
}
.cost-hero {
  display: flex;
  min-height: 105px;
  padding: 15px;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)),
    #14181d;
}
.cost-hero > div {
  display: grid;
  gap: 5px;
}
.cost-hero span {
  color: #7e858f;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cost-hero strong {
  color: #f4f5f7;
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.cost-hero small {
  color: #8d949e;
  font-size: 9px;
}
.cost-hero svg {
  color: #9dc5ff;
}
.cost-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.cost-metrics div {
  display: grid;
  min-height: 56px;
  padding: 9px;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #161a1f;
}
.cost-metrics span,
.cost-controls span {
  color: #737a84;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cost-metrics strong {
  color: #e6e8eb;
  font-size: 13px;
  font-weight: 650;
}
.cost-mode-picker {
  display: grid;
  gap: 6px;
}
.cost-mode-picker button {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #14181d;
  color: #d7dbe0;
  text-align: left;
  cursor: pointer;
}
.cost-mode-picker button.active {
  border-color: rgba(157, 197, 255, 0.45);
  background: linear-gradient(135deg, rgba(157, 197, 255, 0.14), rgba(255, 255, 255, 0.035));
}
.cost-mode-picker strong {
  font-size: 10px;
  font-weight: 750;
  text-transform: capitalize;
}
.cost-mode-picker span {
  color: #7d858f;
  font-size: 8px;
  line-height: 1.35;
}
.cost-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cost-controls label {
  display: grid;
  gap: 5px;
}
.cost-controls input {
  height: 34px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: #111419;
  color: #e4e7eb;
  font-size: 10px;
}
.cost-lines {
  display: grid;
  gap: 5px;
}
.cost-lines > div {
  display: flex;
  min-height: 54px;
  padding: 9px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #171b20;
}
.cost-lines > div.muted {
  background: rgba(255, 255, 255, 0.018);
}
.cost-lines span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.cost-lines strong {
  color: #d5d9de;
  font-size: 9px;
  font-weight: 650;
}
.cost-lines small {
  color: #69717b;
  font-size: 7px;
  line-height: 1.35;
}
.cost-lines em {
  display: grid;
  flex: 0 0 auto;
  min-width: 58px;
  color: #f1f3f5;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}
.cost-lines em small {
  color: #7c8490;
  font-size: 7px;
  font-weight: 600;
}
.cost-callout {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(157, 197, 255, 0.16);
  border-radius: 8px;
  background: rgba(91, 137, 194, 0.08);
}
.cost-callout strong {
  color: #cbdfff;
  font-size: 9px;
}
.cost-callout span {
  color: #7f99bd;
  font-size: 8px;
  line-height: 1.4;
}
.cost-assumptions {
  display: grid;
  gap: 5px;
  padding-top: 2px;
}
.cost-assumptions p {
  margin: 0;
  color: #656d77;
  font-size: 7px;
  line-height: 1.45;
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.media-grid button {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #222;
}
@media (hover: hover) and (pointer: fine) {
  .media-grid button:hover {
    border-color: #fff;
  }
}
.media-grid img {
  object-fit: cover;
}
.media-grid button > span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 7px;
}
.media-search-loading {
  display: flex;
  min-height: 108px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  color: #747b85;
  font-size: 9px;
}
.media-search-loading.has-results {
  min-height: 38px;
  justify-content: flex-start;
  padding: 0 10px;
  border-style: solid;
  background: rgba(128,96,238,.06);
  color: #a9a2ca;
}
.media-search-meta {
  display: flex;
  min-height: 24px;
  padding: 0 2px;
  align-items: center;
  justify-content: space-between;
  color: #777e88;
  font-size: 7px;
}
.media-search-meta small {
  color: #5f6670;
  font-size: 7px;
}
.ranked-media-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.image-option-area.compact .ranked-media-grid {
  max-height: min(58vh, 680px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  overflow-y: auto;
  padding: 0 3px 72px 0;
  scroll-padding-bottom: 72px;
  scrollbar-color: #343a43 transparent;
  scrollbar-width: thin;
}
.ranked-media-grid article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: #11151a;
}
.ranked-media-grid article > button.ranked-media-use {
  position: relative;
  display: block;
  width: 100%;
  min-height: 126px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 0;
  background: #0d1014;
  isolation: isolate;
}
.image-option-area.compact .ranked-media-grid article > button.ranked-media-use {
  min-height: 0;
  aspect-ratio: 4 / 5;
}
.ranked-media-grid article > button.ranked-media-use img {
  transition: transform 180ms ease, filter 180ms ease;
}
.ranked-media-grid article > button.ranked-media-use .ranked-media-image {
  z-index: 0;
  object-fit: cover;
  object-position: center;
}
@media (hover: hover) and (pointer: fine) {
  .ranked-media-grid article > button.ranked-media-use:hover .ranked-media-image {
    transform: scale(1.035);
  }
}
.ranked-media-grid article > button.ranked-media-use:disabled {
  cursor: wait;
}
.ranked-media-grid article > button.ranked-media-use:disabled:not(.is-selecting) {
  opacity: .58;
}
.ranked-media-grid article > button.ranked-media-use.is-selecting {
  box-shadow: inset 0 0 0 2px rgba(184,168,255,.78);
}
.ranked-media-grid article > button.ranked-media-use.is-selecting::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(7,8,11,.2);
  content: "";
  pointer-events: none;
}
.media-rank {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(6,8,10,.78);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}
.media-subject-tag {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 38px;
  left: 7px;
  overflow: hidden;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
  background: rgba(7,9,12,.78);
  color: #f0f2f5;
  font-size: 10px;
  font-weight: 720;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}
.media-dimensions {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(6,8,10,.74);
  color: rgba(255,255,255,.82);
  font-family: var(--font-geist-mono), monospace;
  font-size: 6px;
  backdrop-filter: blur(8px);
}
.media-cleaned-badge {
  position: absolute;
  z-index: 2;
  right: 7px;
  bottom: 7px;
  padding: 5px 7px;
  border: 1px solid rgba(176, 255, 201, .22);
  border-radius: 999px;
  background: rgba(12, 42, 27, .86);
  color: #b9ffd0;
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .02em;
  backdrop-filter: blur(9px);
}
.media-upscale-button {
  position: absolute;
  z-index: 4;
  left: 7px;
  bottom: 7px;
  display: flex;
  min-height: 23px;
  padding: 0 7px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(215,207,255,.28);
  border-radius: 999px;
  background: rgba(17,13,30,.82);
  color: #dcd5ff;
  font-size: 7px;
  font-weight: 760;
  backdrop-filter: blur(9px);
}
@media (hover: hover) and (pointer: fine) {
  .media-upscale-button:hover {
    border-color: rgba(215,207,255,.6);
    background: rgba(46,34,78,.9);
    color: #fff;
  }
}
.media-upscale-button:disabled {
  opacity: .48;
  cursor: wait;
}
.media-search-hint {
  display: block;
  margin: -3px 1px 1px;
  color: #5e6570;
  font-size: 7px;
  line-height: 1.4;
}
.media-apply-progress {
  display: flex;
  min-height: 48px;
  padding: 9px 10px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(178,161,255,.22);
  border-radius: 9px;
  background: linear-gradient(110deg, rgba(111,82,214,.12), rgba(31,34,42,.52));
  color: #d8d2f4;
}
.media-apply-progress > span {
  display: grid;
  gap: 2px;
}
.media-apply-progress strong {
  font-size: 8px;
}
.media-apply-progress small {
  color: #88829f;
  font-size: 7px;
  line-height: 1.35;
}
.media-apply-error {
  padding: 9px 10px;
  border: 1px solid rgba(255, 112, 130, .22);
  border-radius: 8px;
  background: rgba(116, 30, 44, .12);
  color: #ff9cab;
  font-size: 9px;
  line-height: 1.45;
}
.ranked-media-grid article > div {
  display: grid;
  padding: 7px;
  gap: 2px;
}
.ranked-media-grid strong {
  color: #cdd1d6;
  font-size: 8px;
}
.ranked-media-grid small {
  overflow: hidden;
  color: #656c76;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranked-media-grid a {
  display: flex;
  width: max-content;
  margin-top: 2px;
  align-items: center;
  gap: 3px;
  color: #9e92e8;
  font-size: 7px;
  text-decoration: none;
}
.media-note {
  display: flex;
  margin: 3px 0 0;
  gap: 7px;
  padding: 9px;
  border-radius: 8px;
  background: rgba(101, 190, 145, 0.08);
  color: #7b9c8c;
  font-size: 8px;
  line-height: 1.45;
}
.media-note svg {
  flex: 0 0 auto;
}
.text-fact-check {
  display: grid;
  width: 100%;
  min-height: 52px;
  padding: 9px 10px;
  grid-template-columns: 18px minmax(0,1fr) 16px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: #9ca3ad;
  text-align: left;
}
.text-fact-check > span {
  display: grid;
  gap: 2px;
}
.text-fact-check strong {
  color: #e7e9ec;
  font-size: 11px;
}
.text-fact-check small {
  color: #7f8792;
  font-size: 10px;
  line-height: 1.35;
}
.text-fact-check > svg:last-child {
  color: #686f79;
}
.text-fact-check.passed {
  border-color: rgba(83,202,139,.2);
  background: rgba(45,135,87,.07);
}
.text-fact-check.passed > svg:first-child {
  color: #69d49d;
}
.text-fact-check.review {
  border-color: rgba(247,190,86,.18);
  background: rgba(150,105,35,.06);
}
.text-fact-check.review > svg:first-child {
  color: #e9bd69;
}
.grid-quick-edit {
  display: grid;
  gap: 16px;
}
.grid-quick-edit-head {
  display: flex;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(154,137,236,.15);
  border-radius: 11px;
  background: linear-gradient(135deg,rgba(125,96,232,.09),rgba(255,255,255,.018));
}
.grid-quick-edit-head > span {
  display: grid;
  gap: 3px;
}
.grid-quick-edit-head strong {
  font-size: 13px;
}
.grid-quick-edit-head small {
  color: #7f8791;
  font-size: 10px;
  line-height: 1.4;
}
.grid-quick-edit-head em {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #b8bec6;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}
.grid-quick-copy,.grid-quick-images {
  display: grid;
  gap: 9px;
}
.grid-quick-copy label {
  display: grid;
  gap: 5px;
}
.grid-quick-copy label > span {
  color: #969da6;
  font-size: 10px;
  font-weight: 700;
}
.grid-quick-copy textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 11px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  outline: 0;
  background: #0d1014;
  color: #f0f1f3;
  font: 14px/1.4 var(--font-geist-sans),sans-serif;
}
.grid-quick-copy textarea:focus {
  border-color: rgba(167,145,255,.48);
  box-shadow: 0 0 0 3px rgba(128,96,238,.09);
}
.grid-quick-copy > p {
  margin: 0;
  color: #7d848e;
  font-size: 11px;
}
.ai-context {
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(153, 126, 255, 0.16);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(115, 96, 210, 0.12), rgba(72, 106, 199, 0.06));
  color: #c6bdf4;
}
.playbook-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(214, 173, 91, 0.18);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(214, 173, 91, 0.1), rgba(255, 255, 255, 0.018));
  color: #dfc78f;
}
.playbook-context > span {
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(214, 173, 91, 0.12);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.playbook-context > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.playbook-context strong {
  color: #dfd2b5;
  font-size: 9px;
}
.playbook-context small {
  overflow: hidden;
  color: #786f5f;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-messages {
  display: grid;
  gap: 8px;
}
.ai-messages > div {
  display: flex;
}
.ai-messages > div.user {
  justify-content: flex-end;
}
.ai-messages p {
  max-width: 88%;
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px 10px 10px 3px;
  background: #232830;
  color: #c9cdd2;
  font-size: 9px;
  line-height: 1.45;
}
.ai-messages .user p {
  border-radius: 10px 10px 3px;
  background: #e9ebed;
  color: #191b1f;
}
.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-suggestions button {
  display: flex;
  height: 28px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: #898f98;
  font-size: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .ai-suggestions button:hover {
    background: #242932;
    color: #fff;
  }
}
.ai-composer {
  position: relative;
}
.ai-composer textarea {
  min-height: 78px;
  padding: 10px 42px 10px 10px;
  font-size: 10px;
  line-height: 1.45;
}
.ai-composer button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  width: 29px;
  height: 29px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #edf0f2;
  color: #181a1e;
}
.empty-panel {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: #656c75;
}
.empty-panel strong {
  color: #a4a9b0;
  font-size: 11px;
}
.empty-panel span {
  font-size: 9px;
}
.mobile-toolbar {
  display: none;
}
.billing-checkout-backdrop {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(2, 3, 5, .82);
  backdrop-filter: blur(12px);
}
.billing-checkout-dialog {
  display: grid;
  width: min(760px, 100%);
  max-height: min(900px, calc(100dvh - 32px));
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  background: #17181b;
  color: #f4f4f5;
  box-shadow: 0 34px 120px rgba(0, 0, 0, .62);
}
.billing-checkout-header {
  display: grid;
  min-height: 68px;
  padding: 12px 16px;
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.billing-checkout-header > button {
  display: inline-flex;
  width: max-content;
  min-height: 42px;
  padding: 0 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  color: #d3d4d8;
  font-size: 12px;
  font-weight: 680;
}
.billing-checkout-header > div {
  min-width: 0;
  text-align: center;
}
.billing-checkout-header > div > span {
  color: #878a92;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.billing-checkout-header h2 {
  margin: 3px 0 0;
  color: #f7f7f8;
  font-size: 19px;
  letter-spacing: -.025em;
}
.billing-checkout-header > svg {
  justify-self: end;
  color: #8d919a;
}
.billing-checkout-scroll {
  min-height: 0;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.billing-checkout-summary {
  display: grid;
  min-height: 78px;
  padding: 14px 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}
.billing-checkout-summary > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.billing-checkout-summary > div:last-child {
  justify-items: end;
  text-align: right;
}
.billing-checkout-summary span {
  color: #858890;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.billing-checkout-summary strong {
  color: #f3f3f5;
  font-size: 15px;
}
.billing-checkout-summary > div:last-child strong {
  font-size: 21px;
  letter-spacing: -.035em;
}
.billing-checkout-referral {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}
.billing-checkout-referral form {
  display: grid;
  gap: 10px;
}
.billing-checkout-referral label {
  display: grid;
  gap: 3px;
}
.billing-checkout-referral label strong {
  color: #f3f3f5;
  font-size: 13px;
}
.billing-checkout-referral label span {
  color: #858890;
  font-size: 12px;
  line-height: 1.4;
}
.billing-checkout-referral form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.billing-checkout-referral input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  outline: 0;
  background: #111216;
  color: #f3f3f5;
  font-size: 14px;
  font-weight: 680;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.billing-checkout-referral input:focus-visible {
  border-color: #a9a0ea;
  box-shadow: 0 0 0 3px rgba(169, 160, 234, .18);
}
.billing-checkout-referral form button {
  min-width: 74px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #f3f3f5;
  font-size: 12px;
  font-weight: 760;
}
.billing-checkout-referral form button:disabled {
  cursor: not-allowed;
  opacity: .42;
}
.billing-checkout-referral-error {
  color: #ff8997;
  font-size: 12px;
  line-height: 1.4;
}
.billing-checkout-referral-linked {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  color: #7ed6a9;
}
.billing-checkout-referral-linked span {
  color: #aeb1b7;
  font-size: 12px;
  line-height: 1.45;
}
.billing-checkout-referral-linked strong {
  color: #f3f3f5;
  letter-spacing: .035em;
}
.billing-checkout-payment {
  min-height: 420px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 15px;
  background: #111216;
}
.billing-checkout-embed {
  min-height: 520px;
  background: #fff;
}
.billing-checkout-state {
  display: grid;
  min-height: 420px;
  padding: 32px;
  place-items: center;
  align-content: center;
  gap: 9px;
  background: #111216;
  color: #9f91f2;
  text-align: center;
}
.billing-checkout-state strong {
  color: #f1f1f3;
  font-size: 16px;
}
.billing-checkout-state span {
  max-width: 420px;
  color: #898d95;
  font-size: 14px;
  line-height: 1.5;
}
.billing-checkout-state.is-error {
  color: #ff8997;
}
.billing-checkout-state.is-complete {
  color: #7ed6a9;
}
.billing-checkout-state button {
  display: inline-flex;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  background: #f3f3f4;
  color: #151619;
  font-size: 12px;
  font-weight: 760;
}
.billing-checkout-footer {
  display: flex;
  min-height: 55px;
  padding: 10px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #777b84;
}
.billing-checkout-footer > span,
.billing-checkout-footer > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.billing-checkout-footer > button {
  min-height: 34px;
  color: #a9a0ea;
  text-align: right;
}
@media (hover: hover) and (pointer: fine) {
  .billing-checkout-header > button:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .07);
    color: #fff;
  }
  .billing-checkout-footer > button:hover {
    color: #d0c9ff;
  }
  .billing-checkout-referral form button:not(:disabled):hover {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .12);
  }
}
@media (max-width: 720px) {
  .billing-checkout-backdrop {
    padding: 0;
    align-items: end;
  }
  .billing-checkout-dialog {
    width: 100%;
    height: 92dvh;
    max-height: 92dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
  }
  .billing-checkout-header {
    min-height: 64px;
    padding: 10px 12px;
    grid-template-columns: 76px minmax(0, 1fr) 76px;
  }
  .billing-checkout-header > button {
    min-height: 44px;
    padding: 0 8px;
  }
  .billing-checkout-header h2 {
    font-size: 18px;
  }
  .billing-checkout-scroll {
    padding: 11px;
  }
  .billing-checkout-summary {
    min-height: 72px;
    padding: 12px;
    gap: 12px;
  }
  .billing-checkout-summary strong {
    font-size: 13px;
  }
  .billing-checkout-summary > div:last-child strong {
    font-size: 19px;
  }
  .billing-checkout-referral {
    margin-top: 9px;
    padding: 11px;
  }
  .billing-checkout-referral input {
    min-height: 44px;
    font-size: 16px;
  }
  .billing-checkout-referral form button {
    min-height: 44px;
  }
  .billing-checkout-payment {
    min-height: 480px;
    margin-top: 9px;
  }
  .billing-checkout-embed {
    min-height: 560px;
  }
  .billing-checkout-footer {
    min-height: 58px;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  }
  .billing-checkout-footer > span {
    display: none;
  }
  .billing-checkout-footer > button {
    min-height: 44px;
    margin-inline-start: auto;
  }
}
@media (pointer: coarse) {
  .billing-checkout-header > button,
  .billing-checkout-footer > button {
    min-height: 44px;
  }
}
.modal-backdrop {
  position: fixed;
  z-index: 8000;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(3, 4, 6, 0.78);
  backdrop-filter: blur(10px);
}
.caption-modal,
.export-modal,
.cost-modal,
.fact-modal,
.usage-modal {
  width: min(620px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 17px;
  background: #16191e;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
}
.fact-modal {
  display: grid;
  width: min(620px, 100%);
  max-height: min(820px, calc(100dvh - 34px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.fact-modal .modal-head p {
  max-width: 460px;
  margin: 5px 0 0;
  color: #747b85;
  font-size: 9px;
  line-height: 1.45;
}
.fact-modal-body {
  min-height: 0;
  padding: 15px 18px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fact-checking,.fact-check-error,.fact-stale {
  display: flex;
  min-height: 92px;
  padding: 16px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: #101318;
  color: #a99cff;
}
.fact-checking > span,.fact-check-error > span,.fact-stale > span {
  display: grid;
  gap: 3px;
}
.fact-checking strong,.fact-check-error strong,.fact-stale strong {
  color: #e3e5e8;
  font-size: 11px;
}
.fact-checking small,.fact-check-error small,.fact-stale small {
  color: #777e88;
  font-size: 9px;
  line-height: 1.45;
}
.fact-check-error {
  border-color: rgba(255,112,128,.16);
  color: #ff8f9d;
}
.fact-score-card {
  display: grid;
  min-height: 96px;
  padding: 14px;
  grid-template-columns: 118px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255,196,99,.16);
  border-radius: 13px;
  background: linear-gradient(135deg,rgba(255,193,90,.075),rgba(255,255,255,.018));
}
.fact-score-card.is-passed {
  border-color: rgba(98,217,154,.18);
  background: linear-gradient(135deg,rgba(85,206,142,.075),rgba(255,255,255,.018));
}
.fact-score-card > div {
  display: grid;
  gap: 2px;
}
.fact-score-card > div strong {
  color: #f3f5f5;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.05em;
}
.fact-score-card > div span {
  color: #7e858e;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fact-score-card p {
  margin: 0;
  color: #a4aab1;
  font-size: 10px;
  line-height: 1.5;
}
.fact-claim-list {
  display: grid;
  margin-top: 11px;
  gap: 8px;
}
.fact-claim {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  background: #111419;
}
.fact-claim header span {
  display: inline-flex;
  height: 23px;
  padding: 0 7px;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: rgba(255,192,93,.08);
  color: #e7bd73;
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
}
.fact-claim.is-supported header span {
  background: rgba(91,205,144,.09);
  color: #79d2a4;
}
.fact-claim.is-unsupported header span {
  background: rgba(255,102,120,.09);
  color: #ff94a1;
}
.fact-claim blockquote {
  margin: 9px 0 5px;
  color: #e5e7e9;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.42;
}
.fact-claim > p {
  margin: 0;
  color: #858c95;
  font-size: 9px;
  line-height: 1.5;
}
.fact-correction {
  display: grid;
  margin-top: 9px;
  padding: 8px 9px;
  gap: 3px;
  border-radius: 8px;
  background: rgba(160,143,255,.07);
}
.fact-correction span {
  color: #8f83ca;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fact-correction strong {
  color: #d9d4f8;
  font-size: 9px;
  line-height: 1.4;
}
.fact-sources {
  display: flex;
  margin-top: 9px;
  gap: 6px;
  flex-wrap: wrap;
}
.fact-sources a {
  display: inline-flex;
  min-height: 25px;
  padding: 0 7px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  color: #9aa5bb;
  font-size: 8px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .fact-sources a:hover {
    border-color: rgba(160,143,255,.3);
    color: #d0c9ff;
  }
}
.fact-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #75cba0;
  text-align: center;
}
.fact-empty strong {
  color: #dfe4e1;
  font-size: 11px;
}
.fact-empty span {
  max-width: 360px;
  color: #747c84;
  font-size: 9px;
  line-height: 1.5;
}
.fact-modal-actions button:disabled {
  cursor: wait;
  opacity: .55;
}
.export-modal {
  display: grid;
  width: min(900px, 100%);
  max-height: min(900px, calc(100dvh - 32px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.export-modal .modal-head p {
  max-width: 520px;
  margin: 5px 0 0;
  color: #737a84;
  font-size: 9px;
  line-height: 1.45;
}
.export-modal-body {
  min-height: 0;
  padding: 14px 20px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.export-status {
  display: grid;
  min-height: 48px;
  padding: 9px 11px;
  grid-template-columns: 28px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(165,149,255,.16);
  border-radius: 11px;
  background: rgba(145,123,255,.055);
}
.export-status > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(156,137,255,.12);
  color: #b9acff;
}
.export-status p {
  display: grid;
  min-width: 0;
  margin: 0;
  gap: 2px;
}
.export-status strong {
  color: #e8e9eb;
  font-size: 10px;
  font-weight: 680;
}
.export-status small {
  overflow: hidden;
  color: #747b85;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.export-status button {
  display: inline-flex;
  height: 29px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #cbc5f2;
  font-size: 8px;
}
.export-gallery {
  display: grid;
  margin-top: 14px;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.export-gallery-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: #0e1013;
}
.export-gallery-card > a:first-child,.export-gallery-card > .slide-surface {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #090a0c;
}
.export-gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-touch-callout: default;
  user-select: auto;
}
.export-gallery-card > i {
  position: absolute;
  top: calc(50% - 18px);
  left: 50%;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: rgba(7,8,10,.78);
  color: #b3a6ff;
  font-style: normal;
  transform: translate(-50%,-50%);
  backdrop-filter: blur(8px);
}
.export-gallery-card.is-rendering > .slide-surface {
  opacity: .42;
}
.export-gallery-card footer {
  display: flex;
  height: 32px;
  padding: 0 8px;
  align-items: center;
  justify-content: space-between;
  color: #878e98;
  font-size: 8px;
}
.export-gallery-card footer a,.export-gallery-card footer button {
  display: inline-flex;
  padding: 0;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #cbc5f2;
  font-size: inherit;
  font-weight: 700;
}
.export-gallery-card footer small {
  color: #626973;
  font-size: 7px;
}
.export-readiness {
  display: flex;
  margin-top: 12px;
  gap: 7px;
  flex-wrap: wrap;
}
.export-readiness span {
  display: inline-flex;
  height: 26px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: rgba(103,204,151,.08);
  color: #82cda6;
  font-size: 8px;
}
.export-caption-block {
  display: grid;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 11px;
  background: #0e1014;
}
.export-caption-block > header {
  display: flex;
  min-height: 43px;
  padding: 7px 9px 7px 11px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.export-caption-block > header > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0,1fr);
  gap: 1px 5px;
  align-items: center;
}
.export-caption-block > header svg {
  grid-row: 1 / 3;
  color: #a99cff;
}
.export-caption-block > header strong {
  color: #e9eaec;
  font-size: 10px;
}
.export-caption-block > header small {
  color: #707781;
  font-size: 8px;
}
.export-caption-block > header button {
  display: inline-flex;
  min-height: 32px;
  padding: 0 10px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(164,146,255,.2);
  border-radius: 8px;
  background: rgba(127,98,237,.09);
  color: #c9c0fb;
  font-size: 9px;
  font-weight: 720;
}
.export-caption-block > header button:disabled {
  cursor: default;
  opacity: .42;
}
.export-caption-block > textarea {
  width: 100%;
  min-height: 112px;
  max-height: 210px;
  padding: 11px 12px;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: #c8cbd0;
  font: 400 10px/1.55 var(--font-geist-sans),Arial,sans-serif;
}
.export-template-handoff {
  display: flex;
  min-height: 58px;
  margin-top: 12px;
  padding: 10px 11px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(164,146,255,.16);
  border-radius: 11px;
  background: rgba(127,98,237,.055);
}
.export-template-handoff > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: #a99cff;
}
.export-template-handoff > span > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.export-template-handoff strong {
  color: #ded9fa;
  font-size: 10px;
}
.export-template-handoff small {
  color: #777d88;
  font-size: 8px;
  line-height: 1.4;
}
.export-template-handoff button {
  display: inline-flex;
  min-height: 34px;
  padding: 0 11px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(164,146,255,.22);
  border-radius: 8px;
  background: rgba(127,98,237,.12);
  color: #d2c9ff;
  font-size: 9px;
  font-weight: 720;
}
.export-render-stage {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 432px;
  height: 540px;
  overflow: hidden;
  opacity: .001;
  pointer-events: none;
  contain: layout style paint;
  transform: translateZ(0);
}
.export-render-stage > div {
  width: 432px;
  height: 540px;
  overflow: hidden;
  background: #000;
}
.export-modal > :not(.export-render-stage) {
  position: relative;
  z-index: 1;
}
.cost-modal {
  width: min(520px, 100%);
  max-height: min(760px, calc(100dvh - 34px));
  overflow-y: auto;
}
.cost-modal-body {
  padding: 14px;
}
.usage-modal {
  display: grid;
  width: min(700px, 100%);
  max-height: min(860px, calc(100dvh - 34px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.usage-modal .modal-head {
  align-items: flex-start;
}
.usage-modal .modal-head > div {
  min-width: 0;
}
.usage-modal .modal-head p {
  max-width: 510px;
  margin: 6px 0 0;
  color: #747b85;
  font-size: 10px;
  line-height: 1.5;
}
.usage-modal-body {
  display: grid;
  min-height: 0;
  padding: 18px 20px;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.usage-balance-card {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
.usage-balance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.usage-balance-heading > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.usage-balance-heading strong {
  color: #f1f1f4;
  font-size: 14px;
}
.usage-balance-heading small {
  color: #787f89;
  font-size: 9px;
}
.usage-balance-heading em {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f1f2f4;
  font-style: normal;
}
.usage-balance-heading em strong {
  color: inherit;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.025em;
}
.usage-balance-heading em svg {
  display: block;
}
.usage-meter {
  height: 8px;
  margin-top: 17px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
}
.usage-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #e3e4e7;
}
.usage-balance-details {
  display: grid;
  margin-top: 13px;
}
.usage-balance-details > span {
  display: grid;
  gap: 3px;
}
.usage-balance-details strong {
  color: #d9dbe0;
  font-size: 11px;
}
.usage-balance-details small {
  color: #777e88;
  font-size: 9px;
  line-height: 1.4;
}
.usage-capacity-note {
  margin: 10px 0 0;
  color: #a4a8af;
  font-size: 10px;
  line-height: 1.45;
}
.usage-boost-note {
  display: flex;
  margin-top: 13px;
  padding-top: 12px;
  align-items: center;
  gap: 7px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #82d5aa;
  font-size: 9px;
}
.usage-next-plan {
  display: grid;
  min-height: 190px;
  padding: 19px;
  grid-template-columns: minmax(0,1fr) 188px;
  align-items: center;
  gap: 22px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: #111419;
}
.usage-next-copy > span {
  color: #9d8df0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.usage-next-copy h3 {
  margin: 7px 0 7px;
  color: #f0f1f3;
  font-size: 19px;
  letter-spacing: -.03em;
}
.usage-next-copy > p {
  max-width: 400px;
  margin: 0;
  color: #858c96;
  font-size: 10px;
  line-height: 1.5;
}
.usage-next-benefits {
  display: flex;
  margin-top: 15px;
  gap: 8px;
}
.usage-next-benefits > span {
  display: grid;
  min-width: 0;
  padding: 9px 10px;
  grid-template-columns: 19px minmax(0,1fr);
  gap: 2px 5px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}
.usage-next-benefits svg {
  grid-row: 1 / 3;
  color: #b4a6fb;
}
.usage-next-benefits strong {
  color: #d7d9de;
  font-size: 9px;
}
.usage-next-benefits small {
  color: #727984;
  font-size: 8px;
}
.usage-upgrade-action {
  display: grid;
  padding: 15px;
  gap: 10px;
  border: 1px solid rgba(161,141,255,.16);
  border-radius: 13px;
  background: rgba(131,101,235,.07);
}
.usage-upgrade-action > span {
  display: grid;
  gap: 2px;
}
.usage-upgrade-action > span strong {
  color: #fff;
  font-size: 26px;
  letter-spacing: -.045em;
}
.usage-upgrade-action > span small,.usage-upgrade-action > small {
  color: #797f8a;
  font-size: 8px;
  line-height: 1.4;
}
.usage-upgrade-action button {
  display: flex;
  min-height: 42px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(100deg,#ff5ca5,#9c81ff);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
}
.usage-upgrade-action button:disabled {
  cursor: wait;
  opacity: .58;
}
.usage-top-plan {
  min-height: 154px;
}
.usage-top-plan > a {
  display: flex;
  min-height: 42px;
  padding: 0 13px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  background: #f1f2f3;
  color: #15171a;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
}
.usage-modal-message {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 9px;
  line-height: 1.45;
}
.usage-modal-message.is-error {
  border: 1px solid rgba(255,106,125,.16);
  background: rgba(255,72,98,.07);
  color: #ffa0ad;
}
.usage-modal-message.is-success {
  border: 1px solid rgba(94,211,151,.16);
  background: rgba(67,178,121,.07);
  color: #8eddb4;
}
.usage-modal-footer > span {
  max-width: 400px;
  line-height: 1.45;
}
.usage-modal-footer > a {
  display: inline-flex;
  min-height: 34px;
  padding: 0 10px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #a8adb5;
  font-size: 9px;
  font-weight: 650;
  text-decoration: none;
}
.modal-head {
  display: flex;
  padding: 18px 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.modal-head span {
  color: #737a84;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.modal-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
  letter-spacing: -0.035em;
}
.modal-head > button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border-radius: 8px;
  color: #9298a1;
}
.caption-modal > textarea {
  width: calc(100% - 40px);
  min-height: 230px;
  margin: 18px 20px 10px;
  padding: 14px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0f1216;
  color: #d9dce0;
  font-size: 11px;
  line-height: 1.55;
}
.caption-signals {
  display: flex;
  margin: 0 20px 16px;
  gap: 7px;
  flex-wrap: wrap;
}
.caption-signals span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(103, 204, 151, 0.09);
  color: #79c69e;
  font-size: 8px;
}
.modal-footer {
  display: flex;
  padding: 12px 20px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
}
.modal-footer > span {
  margin-right: auto;
  color: #646b74;
  font-size: 8px;
}
.modal-footer button {
  display: flex;
  height: 34px;
  padding: 0 12px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
}
.secondary-modal {
  background: transparent;
  color: #9ca2aa;
}
.primary-modal {
  border-color: #eee !important;
  background: #f0f1f2;
  color: #121417;
}
.export-strip {
  display: flex;
  padding: 18px 20px 12px;
  gap: 7px;
  overflow-x: auto;
}
.export-strip > div {
  flex: 0 0 67px;
  overflow: hidden;
  border-radius: 6px;
}
.readiness-list {
  display: grid;
  margin: 4px 20px 14px;
  gap: 2px;
}
.readiness-list > div {
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.readiness-list i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
}
.readiness-list i.ready {
  background: rgba(98, 198, 148, 0.12);
  color: #6dcc9b;
}
.readiness-list i.warning {
  background: rgba(226, 182, 101, 0.12);
  color: #e2b665;
}
.readiness-list p {
  display: grid;
  margin: 0;
  gap: 2px;
}
.readiness-list strong {
  font-size: 10px;
  font-weight: 600;
}
.readiness-list span {
  color: #6f7680;
  font-size: 8px;
}
.export-action {
  margin: 0;
  padding: 12px;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #171a1f;
}
.export-action > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}
.export-action span {
  display: grid;
  gap: 2px;
}
.export-action strong {
  font-size: 10px;
}
.export-action small {
  color: #717781;
  font-size: 8px;
}
.export-action button,
.export-action a.export-download {
  display: flex;
  height: 35px;
  padding: 0 12px;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: #f3f4f5;
  color: #121417;
  font-size: 9px;
  font-weight: 650;
}
.export-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.export-action .secondary-export {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #d4d7dc;
}
.export-action button:disabled,
.export-action a.is-disabled {
  opacity: .42;
  cursor: wait;
  pointer-events: none;
}
.toast {
  position: fixed;
  z-index: 300;
  bottom: 24px;
  left: 50%;
  display: flex;
  min-height: 37px;
  padding: 0 13px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(34, 38, 44, 0.94);
  color: #e4e6e9;
  font-size: 10px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.image-preparation-tray {
  position: fixed;
  z-index: 290;
  top: 68px;
  right: 380px;
  display: grid;
  width: min(310px, calc(100vw - 32px));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(178, 161, 255, 0.2);
  border-radius: 14px;
  background: rgba(15, 17, 22, 0.94);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
}
.image-preparation-heading {
  display: flex;
  min-height: 22px;
  padding: 0 4px;
  align-items: center;
  justify-content: space-between;
  color: #cfc8ef;
}
.image-preparation-heading > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
}
.image-preparation-heading small {
  color: #777585;
  font-size: 7px;
}
.image-preparation-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  min-height: 52px;
  padding: 7px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #e7e5ed;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .image-preparation-task:hover {
    border-color: rgba(178, 161, 255, 0.28);
    background: rgba(178, 161, 255, 0.07);
  }
}
.image-preparation-open {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.image-preparation-open > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.image-preparation-task strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-preparation-task small {
  color: #8e8a9d;
  font-size: 7px;
  line-height: 1.35;
}
.image-preparation-dismiss {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #777585;
}
@media (hover: hover) and (pointer: fine) {
  .image-preparation-dismiss:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
}
.image-preparation-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: rgba(136, 108, 238, 0.13);
  color: #b8a9ef;
}
.image-preparation-task.is-completed .image-preparation-icon {
  background: rgba(69, 188, 130, 0.12);
  color: #79dca9;
}
.image-preparation-task.is-review .image-preparation-icon {
  background: rgba(225, 172, 65, 0.12);
  color: #e8bf68;
}
.image-preparation-task.is-failed .image-preparation-icon {
  background: rgba(222, 80, 93, 0.12);
  color: #ee8b95;
}
@media (max-width: 820px) {
  .image-preparation-tray {
    top: 58px;
    right: 10px;
    width: min(296px, calc(100vw - 20px));
  }
}
@media (max-width: 1180px) {
  .studio-topbar {
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  }
  .studio-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .canvas-stage {
    padding-inline: 22px;
  }
  .deck-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  body {
    overflow: hidden;
    background: #0a0c0f;
  }
  .studio-topbar {
    grid-template-columns: minmax(102px, 1fr) auto auto;
    height: 58px;
    padding: 0 8px;
    column-gap: 6px;
  }
  .studio-brand {
    min-width: 0;
    gap: 8px;
  }
  .editor-project-brand-mark,
  .project-center,
  .desktop-action {
    display: none !important;
  }
  .brand-copy {
    display: grid;
  }
  .brand-copy strong {
    display: none;
  }
  .brand-copy input {
    width: 100%;
    max-width: 118px;
    color: #eef0f2;
    font-size: 11px;
  }
  .mobile-close {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #eff0f1;
  }
  .view-switch {
    justify-self: center;
    grid-column: 2;
    grid-row: 1;
  }
  .view-switch button {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }
  .top-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 4px;
  }
  .mobile-ai {
    display: grid;
  }
  .mobile-next {
    display: inline;
  }
  .cost-chip {
    height: 32px;
    padding: 0 8px;
    gap: 4px;
    border-color: rgba(157, 197, 255, 0.34) !important;
    background: rgba(91, 137, 194, 0.18) !important;
  }
  .cost-chip em,
  .cost-chip small {
    display: none;
  }
  .cost-chip span {
    font-size: 10px;
  }
  .caption-button {
    display: none;
  }
  .caption-button span {
    display: none;
  }
  .next-button {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border: 0 !important;
    background: transparent !important;
    color: #fff;
    font-size: 11px;
  }
  .studio-layout {
    display: block;
    height: calc(100dvh - 58px);
  }
  .mobile-next {
    display: none;
  }
  .canvas-stage {
    height: 100%;
    padding: 12px 0 96px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .focus-header {
    width: min(85vw, calc((100dvh - 220px) * 0.8));
    max-width: none;
    margin-bottom: 8px;
  }
  .focus-header .fact-status {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .carousel-workspace {
    width: min(86vw, calc((100dvh - 218px) * 0.8));
    max-width: none;
  }
  .editor-canvas {
    border-radius: 13px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55);
  }
  .peek-card {
    top: 2.5%;
    width: 90%;
    opacity: 0.5;
    transform: scale(0.95);
  }
  .peek-prev {
    right: 89%;
  }
  .peek-next {
    left: 89%;
  }
  .carousel-arrow {
    display: none;
  }
  .slide-picker {
    width: 94vw;
    margin-top: 0;
    padding: 12px 0 18px;
  }
  .slide-picker-item {
    flex-basis: 64px;
    width: 64px;
  }
  .slide-picker-add {
    flex-basis: 64px;
    width: 64px;
    min-height: 102px;
  }
  .canvas-hint {
    width: 86vw;
    max-width: none;
    margin-top: 9px;
    gap: 0;
  }
  .canvas-hint span {
    display: none;
  }
  .canvas-hint span:first-child {
    display: flex;
    color: #747b85;
  }
  .canvas-hint span:first-child::after {
    margin-left: 4px;
    content: "· Swipe outside a layer for next slide";
  }
  .slide-rail {
    width: 92vw;
    margin-top: 8px;
    padding: 5px 3px 2px;
    gap: 7px;
  }
  .slide-rail > button {
    flex-basis: 40px;
    width: 40px;
  }
  .add-slide-thumb {
    height: 50px;
  }
  .editor-panel {
    position: fixed;
    z-index: 130;
    right: 0;
    bottom: 0;
    left: 0;
    height: min(69dvh, 610px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: rgba(20, 23, 28, 0.985);
    box-shadow: 0 -28px 90px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(24px);
    transform: translateY(calc(100% + 20px));
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .editor-panel.mobile-open {
    transform: translateY(0);
  }
  .sheet-handle {
    display: flex;
    height: 27px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .sheet-handle i {
    width: 34px;
    height: 4px;
    border-radius: 99px;
    background: #555b64;
  }
  .sheet-handle button {
    position: absolute;
    top: 8px;
    right: 12px;
  }
  .panel-header {
    min-height: 45px;
    padding: 0 16px;
  }
  .panel-tabs {
    padding: 5px 10px;
  }
  .panel-tabs button {
    height: 36px;
    font-size: 10px;
  }
  .panel-content {
    padding: 13px 15px 18px;
  }
  .panel-footer {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .mobile-toolbar {
    position: fixed;
    z-index: 110;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    height: calc(76px + env(safe-area-inset-bottom));
    padding: 9px 10px max(8px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(14, 16, 20, 0.96);
    backdrop-filter: blur(18px);
    transition: transform 180ms ease;
  }
  .studio-root:has(.editor-panel.mobile-open) .mobile-toolbar {
    transform: translateY(110%);
  }
  .mobile-toolbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #d4d7db;
    font-size: 9px;
  }
  .mobile-toolbar button:active {
    background: rgba(255, 255, 255, 0.06);
  }
  .grid-view {
    width: 100%;
    padding: 4px 13px 100px;
  }
  .grid-header {
    margin-bottom: 14px;
  }
  .grid-header h1 {
    font-size: 19px;
  }
  .grid-header p {
    display: none;
  }
  .grid-summary {
    padding: 6px 8px;
  }
  .grid-summary span {
    display: none;
  }
  .deck-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .grid-replace-image {
    right: 6px;
    bottom: 35px;
    min-height: 29px;
    padding-inline: 8px;
    opacity: 1;
    transform: none;
  }
  .grid-add-card {
    min-height: 200px;
  }
  .canvas-context-menu {
    width: min(224px, calc(100vw - 16px));
  }
  .modal-backdrop {
    padding: 10px;
    align-items: end;
  }
  .caption-modal,
  .export-modal,
  .fact-modal,
  .usage-modal {
    max-height: 88dvh;
    overflow-y: auto;
    border-radius: 20px 20px 10px 10px;
  }
  .fact-modal {
    width: 100%;
    max-height: 91dvh;
    border-radius: 20px 20px 0 0;
  }
  .fact-modal .modal-head {
    padding: 15px;
  }
  .fact-modal-body {
    padding: 12px;
  }
  .fact-score-card {
    grid-template-columns: 92px minmax(0,1fr);
  }
  .fact-score-card > div strong {
    font-size: 28px;
  }
  .usage-modal {
    width: 100%;
    max-height: 92dvh;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
  }
  .usage-modal .modal-head {
    padding: 15px 15px 13px;
  }
  .usage-modal .modal-head h2 {
    font-size: 18px;
  }
  .usage-modal-body {
    padding: 12px;
  }
  .usage-balance-card {
    padding: 15px;
  }
  .usage-balance-heading em {
    font-size: 22px;
  }
  .usage-next-plan {
    min-height: 0;
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .usage-next-copy h3 {
    font-size: 17px;
  }
  .usage-next-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .usage-upgrade-action {
    grid-template-columns: minmax(100px,.55fr) minmax(150px,1fr);
    align-items: center;
  }
  .usage-upgrade-action > small {
    grid-column: 1 / -1;
  }
  .usage-modal-footer {
    align-items: stretch;
  }
  .usage-modal-footer > a {
    justify-content: center;
  }
  .export-modal {
    width: 100%;
    height: min(94dvh,900px);
    max-height: 94dvh;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
  }
  .export-modal .modal-head {
    padding: 15px 15px 13px;
  }
  .export-modal .modal-head h2 {
    font-size: 18px;
  }
  .export-modal .modal-head p {
    font-size: 8px;
  }
  .export-modal-body {
    padding: 11px 12px 14px;
  }
  .export-gallery {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
  }
  .export-gallery-card footer {
    height: 34px;
  }
  .export-caption-block > textarea {
    min-height: 96px;
    max-height: 160px;
    font-size: 11px;
  }
  .export-template-handoff {
    align-items: stretch;
    flex-direction: column;
  }
  .export-template-handoff button {
    min-height: 42px;
  }
  .export-action {
    align-items: stretch;
    padding: 10px 12px max(10px,env(safe-area-inset-bottom));
    flex-direction: column;
  }
  .export-action > div:first-child {
    display: none;
  }
  .export-action-buttons {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1.15fr;
  }
  .export-action button,
  .export-action a.export-download {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }
  .caption-modal > textarea {
    min-height: 210px;
  }
  .modal-footer {
    flex-wrap: wrap;
  }
  .modal-footer > span {
    width: 100%;
  }
  .toast {
    bottom: 92px;
  }
}
@media (max-width: 390px) {
  .view-switch button svg {
    display: none;
  }
  .view-switch button {
    padding-inline: 8px;
  }
  .top-actions {
    gap: 2px;
  }
  .top-icon {
    width: 30px;
  }
  .cost-chip {
    padding-inline: 6px;
  }
  .focus-header {
    width: 87vw;
  }
  .carousel-workspace {
    width: 87vw;
  }
  .canvas-hint {
    width: 88vw;
  }
  .deck-grid {
    gap: 8px;
  }
}
.workspace-route-transition {
  backface-visibility: hidden;
  will-change: opacity, transform;
}
.workspace-route-enter-forward {
  animation: workspace-enter-forward-mobile 260ms cubic-bezier(.22,1,.36,1) both;
}
.workspace-route-enter-back {
  animation: workspace-enter-back-mobile 260ms cubic-bezier(.22,1,.36,1) both;
}
.workspace-route-exit-forward {
  animation: workspace-exit-forward-mobile 170ms cubic-bezier(.4,0,.8,.2) both;
  pointer-events: none;
}
.workspace-route-exit-back {
  animation: workspace-exit-back-mobile 170ms cubic-bezier(.4,0,.8,.2) both;
  pointer-events: none;
}
@keyframes workspace-enter-forward-mobile {
  from {
    opacity: .72;
    transform: translate3d(28px,0,0) scale(.994);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }
}
@keyframes workspace-enter-back-mobile {
  from {
    opacity: .72;
    transform: translate3d(-22px,0,0) scale(.994);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }
}
@keyframes workspace-exit-forward-mobile {
  from {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  to {
    opacity: .62;
    transform: translate3d(-18px,0,0);
  }
}
@keyframes workspace-exit-back-mobile {
  from {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  to {
    opacity: .62;
    transform: translate3d(24px,0,0);
  }
}
@media (min-width: 821px) {
  .workspace-route-enter-forward {
    animation-name: workspace-enter-forward-desktop;
  }
  .workspace-route-enter-back {
    animation-name: workspace-enter-back-desktop;
  }
  .workspace-route-exit-forward {
    animation-name: workspace-exit-forward-desktop;
  }
  .workspace-route-exit-back {
    animation-name: workspace-exit-back-desktop;
  }
  @keyframes workspace-enter-forward-desktop {
    from {
      opacity: .74;
      transform: translate3d(0,22px,0) scale(.996);
    }
    to {
      opacity: 1;
      transform: translate3d(0,0,0) scale(1);
    }
  }
  @keyframes workspace-enter-back-desktop {
    from {
      opacity: .74;
      transform: translate3d(0,-18px,0) scale(.996);
    }
    to {
      opacity: 1;
      transform: translate3d(0,0,0) scale(1);
    }
  }
  @keyframes workspace-exit-forward-desktop {
    from {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
    to {
      opacity: .65;
      transform: translate3d(0,-14px,0);
    }
  }
  @keyframes workspace-exit-back-desktop {
    from {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
    to {
      opacity: .65;
      transform: translate3d(0,18px,0);
    }
  }
}
body:has(.workspace-route-transition) {
  overflow-x: hidden;
}
.dashboard-root {
  min-height: 100dvh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 8%, rgba(246, 135, 104, 0.09), transparent 25rem),
    radial-gradient(circle at 68% 19%, rgba(126, 104, 255, 0.08), transparent 28rem),
    #090a0c;
  color: #f7f7f6;
}
.dashboard-session-pending {
  display: block;
  position: fixed;
  z-index: 30;
  inset: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 8%, rgba(246, 135, 104, 0.09), transparent 25rem),
    radial-gradient(circle at 68% 19%, rgba(126, 104, 255, 0.08), transparent 28rem),
    #090a0c;
  color: #f7f7f6;
}
html:is([data-postroom-session="likely"], [data-postroom-session="confirmed"]) .session-pending-public {
  display: none;
}
html:is([data-postroom-session="likely"], [data-postroom-session="confirmed"]) .dashboard-session-pending {
  display: block;
}
.product-route-error {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at 50% 8%, rgba(246, 135, 104, 0.09), transparent 25rem),
    radial-gradient(circle at 68% 19%, rgba(126, 104, 255, 0.08), transparent 28rem),
    var(--df-app-canvas, #090a0c);
  color: var(--df-text-primary, #f7f7f6);
}
.product-route-error > div {
  width: min(440px, 100%);
  padding: 30px;
  border: 1px solid var(--df-border-default, rgba(255, 255, 255, 0.12));
  border-radius: 18px;
  background: var(--df-surface-raised, #15171a);
  box-shadow: var(--df-shadow-overlay, 0 24px 70px rgba(0, 0, 0, 0.5));
}
.product-route-error-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 760;
  letter-spacing: -.02em;
}
.product-route-error-brand .donefeed-logo-mark {
  width: 22px;
  height: 22px;
}
.product-route-error strong,
.product-route-error p {
  display: block;
}
.product-route-error strong {
  margin-top: 18px;
  font-size: 25px;
}
.product-route-error p {
  margin: 8px 0 22px;
  color: var(--df-text-secondary, #a7abb1);
  line-height: 1.5;
}
.product-route-error button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  border: 0;
  border-radius: 9px;
  background: var(--df-coral, #ff5b49);
  color: #fff;
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}
.session-pending-status {
  display: flex;
  justify-self: center;
  align-items: center;
  gap: 7px;
  color: #858a92;
  font-size: 11px;
}
.session-pending-avatar {
  width: 34px;
  height: 34px;
  justify-self: end;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  background: rgba(255,255,255,.045);
}
.session-pending-stage {
  display: flex;
  max-width: 860px;
  min-height: calc(100dvh - 64px);
  margin: 0 auto;
  padding: clamp(70px, 12vh, 130px) 20px 60px;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.session-pending-stage > span {
  color: #858a92;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.session-pending-stage h1 {
  margin: 15px 0 28px;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 560;
  letter-spacing: -.05em;
  line-height: 1.02;
}
.session-pending-stage > p {
  max-width: 540px;
  margin: -12px 0 24px;
  color: #a5aab1;
  font-size: 14px;
  line-height: 1.55;
}
.session-recovery-actions {
  display: flex;
  z-index: 1;
  margin: -19px 0 22px;
  gap: 9px;
}
.session-recovery-actions button {
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  color: #fff;
}
.session-recovery-actions button:last-child {
  background: #f4f4ef;
  color: #191b18;
}
.session-pending-prompt {
  position: relative;
  width: min(760px, 100%);
  height: 164px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(25,27,31,.78);
  box-shadow: 0 28px 80px rgba(0,0,0,.3);
}
.session-pending-prompt i {
  position: absolute;
  left: 22px;
  height: 9px;
  border-radius: 99px;
  background: rgba(255,255,255,.075);
}
.session-pending-prompt i:first-child {
  top: 24px;
  width: 42%;
}
.session-pending-prompt i:nth-child(2) {
  top: 43px;
  width: 28%;
}
.session-pending-prompt b {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(169,154,255,.13);
}
.session-pending-projects {
  display: grid;
  width: 100%;
  margin-top: 70px;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}
.session-pending-projects i {
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.dashboard-topbar {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  height: 64px;
  padding: 0 22px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(9, 10, 12, 0.82);
  backdrop-filter: blur(18px);
}
.dashboard-brand {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f7f7f6;
  text-decoration: none;
}
.donefeed-brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.donefeed-wordmark,
.donefeed-brand > .donefeed-wordmark {
  font-family: var(--font-geist-sans), Arial, sans-serif;
  font-size: var(--donefeed-wordmark-size, 17px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
  text-transform: none;
}
.donefeed-logo-mark {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  overflow: hidden;
  place-items: center;
  border: 1.5px solid #101110;
  border-radius: 7px;
  background: #101110;
  box-shadow: none;
}
.donefeed-logo-mark::before,
.donefeed-logo-mark::after {
  position: absolute;
  width: 9px;
  height: 13px;
  border: 0;
  border-radius: 2px;
  content: "";
}
.donefeed-logo-mark::before {
  background: #ff5a45;
  transform: translateX(-2px) rotate(-7deg);
}
.donefeed-logo-mark::after {
  background: #f7f7f4;
  transform: translateX(2px) rotate(6deg);
  content: "";
}
.donefeed-logo-mark i {
  display: none;
}
.dashboard-header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 6px;
}
.dashboard-header-action {
  display: inline-flex;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--df-text-secondary, #a7abb1);
  font-size: var(--df-type-action-size, 11px);
  font-weight: var(--df-type-weight-quiet-control, 650);
  text-decoration: none;
}
.dashboard-schedule-link {
  width: 34px;
  padding: 0;
}
.dashboard-budget-chip span {
  white-space: nowrap;
}
.dashboard-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  aspect-ratio: 1;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: #1a1c20;
  color: #e7e8e9;
  font-size: 12px;
  font-weight: 650;
}
.dashboard-hero {
  display: flex;
  min-height: 535px;
  padding: 92px 20px 64px;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.dashboard-hero h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 560;
  letter-spacing: -0.055em;
  line-height: 1.02;
}
.dashboard-hero > p {
  margin: 15px 0 29px;
  color: #858a92;
  font-size: 15px;
}
.dashboard-prompt {
  position: relative;
  width: min(760px, 100%);
  min-height: 164px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  background: rgba(25, 27, 31, 0.95);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.025);
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.dashboard-prompt:focus-within {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.035);
  transform: translateY(-1px);
}
.dashboard-prompt textarea:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}
.dashboard-prompt textarea {
  width: 100%;
  height: 104px;
  padding: 23px 24px 12px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f4f4f3;
  font-size: 17px;
  line-height: 1.5;
}
.dashboard-prompt textarea::placeholder {
  color: #696e76;
}
.prompt-footer {
  display: grid;
  height: 59px;
  padding: 10px 11px 11px 15px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}
.prompt-options {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.reference-attach,
.slide-count-control .menu-select-trigger,
.layout-control .menu-select-trigger {
  display: flex;
  height: 35px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #a9adb4;
  font-size: 11px;
  line-height: 1;
}
.reference-attach.active {
  border-color: rgba(162, 143, 255, 0.3);
  background: rgba(112, 87, 213, 0.11);
  color: #c2b8ff;
}
.slide-count-control,
.layout-control {
  min-width: 0;
  flex: 0 0 auto;
}
.slide-count-control .menu-select-trigger,
.layout-control .menu-select-trigger {
  width: 100%;
  color: #c6c9cd;
  font-weight: 650;
}
.slide-count-control .menu-select-value {
  max-width: 132px;
}
.layout-control .menu-select-value {
  max-width: 110px;
}
.reference-builder {
  display: grid;
  margin: 0 11px 9px;
  padding: 8px;
  gap: 7px;
  border: 1px solid rgba(169, 154, 255, 0.13);
  border-radius: 11px;
  background: rgba(83, 68, 149, 0.055);
}
.reference-source-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: #8f86c7;
}
.reference-source-row input {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #2b3038;
  border-radius: 8px;
  outline: 0;
  background: #101318;
  color: #e7e8eb;
  font: inherit;
  font-size: 10px;
}
.reference-source-row input:focus {
  border-color: #7c70d8;
  box-shadow: 0 0 0 2px #7969d51f;
}
.reference-source-row button,
.reference-image-row button {
  display: inline-flex;
  height: 34px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  border: 1px solid #3b3563;
  border-radius: 8px;
  background: #211d36;
  color: #c9c2ff;
  font-size: 9px;
  font-weight: 700;
}
.reference-source-row button:disabled,
.reference-image-row button:disabled {
  opacity: 0.45;
}
.reference-image-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.reference-image-row button {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: #b9bdc5;
}
.reference-image-row small {
  color: #656b75;
  font-size: 8px;
  line-height: 1.35;
}
.prompt-image-attachments {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
}
.prompt-image-attachments > div {
  display: grid;
  gap: 2px;
}
.prompt-image-attachments strong {
  color: #d8dae0;
  font-size: 10px;
}
.prompt-image-attachments small {
  color: #7d838d;
  font-size: 9px;
  line-height: 1.4;
}
.prompt-image-attachments > button {
  display: inline-flex;
  min-height: 36px;
  padding: 0 11px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(175,158,255,.25);
  border-radius: 8px;
  background: rgba(133,108,242,.12);
  color: #cdc5ff;
  font-size: 10px;
  font-weight: 700;
}
.prompt-image-attachments > button:disabled {
  opacity: .5;
}
.prompt-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(72px,1fr));
  gap: 7px;
}
.prompt-attachment-grid article {
  position: relative;
  min-width: 0;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: #0d1014;
}
.prompt-attachment-grid article > img {
  object-fit: cover;
}
.prompt-attachment-grid article > span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  overflow: hidden;
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(5,7,10,.78);
  color: #e4e5e8;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-attachment-grid article > button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  width: 27px;
  height: 27px;
  min-height: 27px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: rgba(5,7,10,.82);
  color: #fff;
}
.reference-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6d737d;
  font-size: 9px;
}
.reference-divider::before,.reference-divider::after {
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.07);
  content: "";
}
.reference-preview {
  display: flex;
  min-height: 55px;
  margin: 0 11px 11px;
  padding: 6px 8px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.reference-preview img {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  object-fit: cover;
}
.reference-link-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 7px;
  background: rgba(126, 105, 223, 0.12);
  color: #b4a8ff;
}
.reference-preview > span {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}
.reference-preview strong {
  overflow: hidden;
  color: #d5d7da;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reference-preview small {
  color: #696f77;
  font-size: 8px;
}
.reference-preview a {
  width: max-content;
  color: #a99aff;
  font-size: 8px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .reference-preview a:hover {
    color: #c8c0ff;
    text-decoration: underline;
  }
}
.reference-preview button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #777d85;
}
.prompt-shortcut {
  color: #5f646c;
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
}
.prompt-submit {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: #f2f3f4;
  color: #111318;
  transition: transform 140ms ease, opacity 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .prompt-submit:not(:disabled):hover {
    transform: scale(1.04);
  }
}
.prompt-submit:disabled {
  opacity: 0.28;
}
.generation-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 4px;
  align-items: center;
}
.generation-progress i {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 2px;
  background: linear-gradient(90deg, #ff7d8f, #ffd25f, #9174ff);
  animation: dashboard-progress 1.2s ease-in-out infinite alternate;
}
.generation-progress span {
  position: absolute;
  top: 10px;
  left: 15px;
  color: #777c84;
  font-size: 10px;
}
@keyframes dashboard-progress {
  from {
    transform: translateX(-20%);
  }
  to {
    transform: translateX(210%);
  }
}
.prompt-examples {
  display: flex;
  width: min(760px, 100%);
  margin-top: 14px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.prompt-examples > span {
  color: #5f646c;
  font-size: 10px;
}
.prompt-examples button {
  max-width: 215px;
  height: 29px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #747981;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .prompt-examples button:hover {
    border-color: rgba(255, 255, 255, 0.16);
    color: #bbbfc5;
  }
}
.dashboard-error {
  min-height: 18px;
  margin-top: 15px;
  color: #ff929d;
  font-size: 11px;
}
.dashboard-capacity-notice,
.dashboard-low-capacity {
  display: grid;
  width: min(760px, 100%);
  margin: 10px auto 0;
  padding: 12px 13px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: #d9dbe0;
  text-align: left;
}
.dashboard-capacity-notice > span,
.dashboard-low-capacity > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.dashboard-capacity-notice strong,
.dashboard-low-capacity strong {
  color: #eef0f3;
  font-size: 12px;
  line-height: 1.35;
}
.dashboard-capacity-notice small,
.dashboard-low-capacity small {
  color: #8d929a;
  font-size: 10px;
  line-height: 1.4;
}
.dashboard-capacity-notice a,
.dashboard-low-capacity a {
  display: inline-flex;
  min-height: 38px;
  padding: 0 13px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f1f1f2;
  color: #17181b;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.dashboard-capacity-notice button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: #8b919a;
}
.capacity-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
}
.capacity-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #d9dbe0;
}
.dashboard-capacity-notice .capacity-progress,
.dashboard-low-capacity .capacity-progress {
  grid-column: 1;
}
.dashboard-low-capacity {
  grid-template-columns: minmax(0, 1fr) auto;
}
@media (max-width: 700px) {
  .dashboard-capacity-notice,
  .dashboard-low-capacity {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .dashboard-capacity-notice .capacity-progress,
  .dashboard-low-capacity .capacity-progress {
    grid-column: 1 / -1;
  }
  .dashboard-capacity-notice a,
  .dashboard-low-capacity a {
    min-height: 44px;
    grid-column: 1 / -1;
    justify-content: center;
  }
  .dashboard-capacity-notice button {
    width: 44px;
    height: 44px;
    grid-column: 2;
    grid-row: 1;
  }
}
.editor-capacity-notice {
  position: fixed;
  z-index: 79;
  top: 68px;
  left: 50%;
  display: grid;
  width: min(720px, calc(100vw - 32px));
  padding: 11px 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: #1b1d21;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
  color: #d9dbe0;
  transform: translateX(-50%);
}
.editor-capacity-notice > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.editor-capacity-notice strong {
  color: #f1f2f4;
  font-size: 11px;
  line-height: 1.35;
}
.editor-capacity-notice small {
  color: #989da5;
  font-size: 10px;
  line-height: 1.4;
}
.editor-capacity-notice .capacity-progress {
  grid-column: 1;
}
.editor-capacity-notice button {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 750;
}
.editor-capacity-action {
  display: inline-flex;
  min-height: 38px;
  padding: 0 11px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f1f1f2;
  color: #17181b;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.editor-capacity-dismiss {
  display: grid;
  width: 38px;
  padding: 0 !important;
  place-items: center;
  background: transparent;
  color: #969ba3;
}
@media (max-width: 700px) {
  .editor-capacity-notice {
    top: 66px;
    width: calc(100vw - 20px);
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .editor-capacity-notice .capacity-progress {
    grid-column: 1 / -1;
  }
  .editor-capacity-action {
    min-height: 44px !important;
    grid-column: 1 / -1;
  }
  .editor-capacity-dismiss {
    width: 44px;
    height: 44px;
    grid-column: 2;
    grid-row: 1;
  }
}
.topic-desk {
  display: grid;
  width: min(1040px, 100%);
  margin-top: 34px;
  padding: 18px;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(23,25,30,.88),rgba(13,15,18,.92));
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
  text-align: left;
}
.topic-desk-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.topic-desk-collapse {
  display: grid;
  min-width: 0;
  padding: 0;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 12px;
  border: 0;
  background: transparent;
  text-align: left;
}
.topic-desk-collapse > span {
  display: flex;
  grid-column: 1;
  align-items: center;
  gap: 6px;
  color: #9f92ed;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.topic-desk-collapse > strong {
  overflow: hidden;
  grid-column: 1;
  color: #f0f1f3;
  font-size: 20px;
  font-weight: 620;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-desk-collapse > svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #717783;
}
.topic-desk-heading form {
  display: grid;
  width: min(390px,46%);
  height: 39px;
  padding: 0 5px 0 11px;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: #0d1014;
  color: #696f79;
}
.topic-desk-heading input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e5e7ea;
  font-size: 10px;
}
.topic-desk-heading form button {
  height: 29px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: #252a32;
  color: #d9dde2;
  font-size: 8px;
  font-weight: 750;
}
.topic-desk-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #626a75;
  font-size: 7px;
}
.topic-desk-content {
  display: grid;
  gap: 12px;
}
.topic-desk.collapsed {
  padding-block: 12px;
}
.topic-desk.collapsed .topic-desk-heading {
  align-items: center;
}
.topic-desk.collapsed .topic-desk-content,
.topic-desk.collapsed .topic-desk-heading form {
  display: none;
}
.topic-desk-meta span {
  max-width: 50%;
  overflow: hidden;
  color: #8d939c;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-card-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.topic-card {
  display: grid;
  min-height: 158px;
  padding: 12px;
  align-content: space-between;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .topic-card:hover {
    border-color: rgba(171,151,255,.2);
    background: rgba(139,113,238,.045);
    transform: translateY(-1px);
  }
}
.topic-card.done {
  opacity: .72;
}
.topic-card-signal {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topic-card-signal > span {
  display: flex;
  height: 22px;
  padding: 0 7px;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: rgba(153,134,235,.09);
  color: #a99bed;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.topic-card-signal > span.is-trending {
  background: rgba(255,115,78,.1);
  color: #ff9a7e;
}
.topic-card-signal small {
  overflow: hidden;
  color: #59616b;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-headline {
  padding: 0;
  border: 0;
  background: transparent;
  color: #e9ebed;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.28;
  text-align: left;
  letter-spacing: -.012em;
}
@media (hover: hover) and (pointer: fine) {
  .topic-headline:hover {
    color: #fff;
  }
}
.topic-origin {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.topic-origin span {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px;
  color: #656d77;
  font-size: 5px;
  font-weight: 780;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.topic-origin small {
  overflow: hidden;
  color: #737b85;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.topic-card-actions button {
  display: flex;
  height: 29px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #717984;
  font-size: 7px;
  font-weight: 720;
}
.topic-card-actions button.active {
  border-color: rgba(124,207,163,.18);
  background: rgba(91,183,137,.07);
  color: #8ecfae;
}
.topic-card-actions .topic-create {
  margin-left: auto;
  border-color: rgba(174,155,255,.23);
  background: rgba(123,97,222,.1);
  color: #c4b9ff;
}
@media (hover: hover) and (pointer: fine) {
  .topic-card-actions .topic-create:hover {
    background: rgba(123,97,222,.18);
    color: #eeeaff;
  }
}
.topic-load-more {
  display: flex;
  width: 100%;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  color: #858c96;
  font-size: 8px;
  font-weight: 730;
}
.topic-card-skeleton {
  overflow: hidden;
}
.topic-card-skeleton i,.topic-card-skeleton span {
  display: block;
  border-radius: 5px;
  background: linear-gradient(90deg,#20242a,#292e35,#20242a);
  background-size: 200% 100%;
  animation: topic-shimmer 1.25s infinite linear;
}
.topic-card-skeleton i {
  width: 92px;
  height: 19px;
}
.topic-card-skeleton span {
  width: 78%;
  height: 11px;
}
.topic-card-skeleton span:last-child {
  width: 48%;
  height: 24px;
}
@keyframes topic-shimmer {
  to {
    background-position: -200% 0;
  }
}
.project-progress-chip {
  position: absolute;
  z-index: 20;
  top: 8px;
  right: 8px;
  display: flex;
  height: 25px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(178,160,255,.26);
  border-radius: 999px;
  background: rgba(13,15,20,.78);
  color: #c3b8ff;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.project-progress-chip.partial {
  color: #92d2b1;
  border-color: rgba(99,205,151,.2);
}
.project-progress-chip.error {
  color: #ff9aa5;
  border-color: rgba(255,112,127,.2);
}
.background-generation-runners {
  position: fixed;
  z-index: -9999;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.background-generation-runners iframe {
  width: 1px;
  height: 1px;
  border: 0;
}
.background-generation-status {
  position: fixed;
  z-index: 1100;
  right: 18px;
  bottom: 18px;
  display: flex;
  height: 38px;
  padding: 0 12px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(168,149,255,.2);
  border-radius: 12px;
  background: rgba(18,20,25,.9);
  color: #aa9cf3;
  box-shadow: 0 16px 42px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.background-generation-status span {
  color: #737b86;
  font-size: 7px;
}
.background-generation-status strong {
  color: #d6d0ff;
  font-size: 8px;
}
.global-generation-toast {
  position: fixed;
  z-index: 3000;
  right: 18px;
  bottom: 66px;
  display: grid;
  width: min(390px,calc(100vw - 28px));
  min-height: 64px;
  padding: 10px;
  grid-template-columns: 34px minmax(0,1fr) 28px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(21,23,28,.96);
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
  backdrop-filter: blur(20px);
}
.global-generation-toast > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(145,123,239,.12);
  color: #b3a4ff;
}
.global-generation-toast.error > span {
  background: rgba(255,102,119,.1);
  color: #ff8d9a;
}
.global-generation-toast > div {
  display: grid;
  gap: 3px;
}
.global-generation-toast strong {
  color: #eff1f3;
  font-size: 10px;
}
.global-generation-toast small {
  color: #7a828d;
  font-size: 7px;
  line-height: 1.4;
}
.global-generation-toast button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #666d77;
}
.projects-section {
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 90px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.projects-header {
  display: flex;
  margin-bottom: 22px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.projects-header span {
  color: #656a72;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.projects-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 580;
  letter-spacing: -0.025em;
}
.workspace-content-switcher {
  display: flex;
  min-width: 0;
  height: 39px;
  padding: 3px;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.workspace-search-control {
  display: flex;
  min-width: 0;
  height: 32px;
  align-items: center;
  color: #737a83;
}
.workspace-search-trigger {
  display: flex;
  height: 32px;
  padding: 0 10px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8b9199;
  font-weight: 570;
}
.workspace-search-control input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f2f3f5;
  font-size: 13px;
}
.workspace-search-control input::placeholder {
  color: #666d76;
}
.workspace-search-control > button:not(.workspace-search-trigger) {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  flex: 0 0 32px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #777e87;
}
.projects-header .workspace-search-label {
  display: flex;
  height: 32px;
  padding: 0 11px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  color: #d8dade;
  font-size: 12px;
  font-weight: 570;
  letter-spacing: -.01em;
  text-transform: none;
  white-space: nowrap;
}
.workspace-search-spinner {
  flex: 0 0 auto;
  color: #8b9199;
}
.projects-header.searching .workspace-content-switcher {
  max-width: 100%;
  flex: 0 1 auto;
}
.workspace-content-switcher.searching {
  padding: 3px;
}
.workspace-content-switcher.searching .workspace-search-control {
  width: 100%;
  height: 32px;
  flex: 1;
}
.workspace-content-switcher.searching .workspace-view-switch {
  display: none;
}
.workspace-view-switch {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
}
.workspace-view-switch button {
  display: flex;
  height: 32px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #7f858e;
  font-weight: 570;
  letter-spacing: -.015em;
}
.workspace-view-switch button small {
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  color: #777e87;
  font-size: 8px;
  letter-spacing: 0;
}
.workspace-view-switch button.active {
  background: rgba(255,255,255,.055);
  color: #f2f3f5;
}
.workspace-view-switch button.active small {
  background: rgba(169,154,255,.14);
  color: #c9c0ff;
}
.projects-header > button,
.projects-header-actions > button {
  display: flex;
  height: 39px;
  padding: 0 13px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #c7c9cd;
  font-size: 10px;
  font-weight: 600;
}
.projects-header-actions {
  display: flex !important;
  grid-auto-flow: column;
  gap: 7px !important;
}
.projects-header-actions > button.active {
  border-color: rgba(169,154,255,.3);
  background: rgba(169,154,255,.1);
  color: #d9d3ff;
}
.projects-header-actions > button.primary {
  border-color: rgba(255,255,255,.15);
  background: #f2f2f4;
  color: #111318;
}
.workspace-theme-filter {
  margin-right: auto;
  flex: 0 1 174px;
}
.workspace-theme-filter .menu-select-trigger {
  display: flex;
  width: 100%;
  height: 39px;
  padding: 0 11px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: #7f858e;
  font-weight: 570;
}
.workspace-theme-filter .menu-select-value {
  flex: 1;
  text-align: left;
  text-transform: none;
}
.workspace-search-empty {
  display: grid;
  min-height: 190px;
  padding: 24px;
  grid-column: 1 / -1;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 14px;
  color: #737a83;
  text-align: center;
}
.workspace-search-empty.compact {
  width: 100%;
  min-height: 160px;
}
.workspace-search-empty strong {
  color: #d9dbde;
  font-size: 12px;
}
.workspace-search-empty small {
  color: #737a83;
  font-size: 10px;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.projects-grid.filtering {
  align-content: start;
  overflow-anchor: none;
}
.project-card-shell {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  -webkit-touch-callout: none;
}
.project-card-shell .project-card {
  height: 100%;
}
.project-card-shell.selected::after {
  position: absolute;
  z-index: 25;
  inset: 0;
  border: 2px solid #aa9cff;
  border-radius: 13px;
  box-shadow: 0 0 0 2px rgba(8,9,12,.65), 0 0 0 5px rgba(170,156,255,.16);
  pointer-events: none;
  content: "";
}
.project-selection-check {
  position: absolute;
  z-index: 40;
  top: 9px;
  left: 9px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 999px;
  background: rgba(12,14,18,.82);
  color: transparent;
  box-shadow: 0 5px 18px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.project-card-shell.selected .project-selection-check {
  border-color: #b1a6ff;
  background: #9988ef;
  color: #111218;
}
.trash-project-card .project-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(4,5,7,.08) 45%,rgba(4,5,7,.96));
  content: "";
}
.trash-project-overlay {
  position: absolute;
  z-index: 10;
  right: 11px;
  bottom: 11px;
  left: 11px;
  display: grid;
  gap: 4px;
}
.trash-project-overlay strong {
  overflow: hidden;
  color: #f0f1f3;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-project-overlay small {
  color: #a7abb2;
  font-size: 10px;
}
.trash-empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 15px;
  color: #737984;
  text-align: center;
}
.trash-empty > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: #8b919b;
}
.trash-empty h2 {
  margin: 4px 0 0;
  color: #e2e4e7;
  font-size: 18px;
}
.trash-empty p {
  width: min(380px,calc(100% - 36px));
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}
.trash-empty button {
  min-height: 36px;
  margin-top: 6px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  color: #d3d6da;
}
.project-bulk-bar {
  position: fixed;
  z-index: 2500;
  right: 50%;
  bottom: max(18px,env(safe-area-inset-bottom));
  display: flex;
  min-height: 50px;
  padding: 6px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  background: rgba(20,22,27,.96);
  box-shadow: 0 20px 60px rgba(0,0,0,.48);
  transform: translateX(50%);
  backdrop-filter: blur(20px);
}
.project-bulk-bar > span {
  padding: 0 10px;
  color: #9ca2ab;
  font-size: 11px;
  white-space: nowrap;
}
.project-bulk-bar > span strong {
  color: #f0f1f3;
}
.project-bulk-bar button {
  display: flex;
  min-height: 36px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  color: #d3d6dc;
  font-size: 11px;
  white-space: nowrap;
}
.project-bulk-bar button.danger {
  background: rgba(255,85,102,.12);
  color: #ff9ca7;
}
.project-bulk-bar button:disabled {
  cursor: wait;
  opacity: .55;
}
.project-trash-toast {
  position: fixed;
  z-index: 2700;
  right: 18px;
  bottom: max(18px,env(safe-area-inset-bottom));
  display: flex;
  min-height: 46px;
  padding: 6px 7px 6px 13px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(22,24,29,.98);
  color: #d9dce1;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
  font-size: 11px;
}
.project-trash-toast button {
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: rgba(168,151,255,.12);
  color: #c9bfff;
  font-weight: 700;
}
.project-trash-toast button.close {
  display: grid;
  width: 32px;
  padding: 0;
  place-items: center;
  background: transparent;
  color: #747b85;
}
.project-job-controls {
  position: absolute;
  z-index: 30;
  top: 8px;
  left: 8px;
  display: flex;
}
.project-job-controls button {
  display: flex;
  height: 25px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(13,15,20,.82);
  color: #aeb4bd;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
@media (hover: hover) and (pointer: fine) {
  .project-job-controls button:hover {
    border-color: rgba(255,255,255,.24);
    color: #fff;
  }
}
.project-job-controls button.retry {
  border-color: rgba(164,145,255,.3);
  color: #c5baff;
}
.project-job-controls button:disabled {
  cursor: wait;
  opacity: .65;
}
.project-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 13px;
  background: #13161a;
  color: inherit;
  text-align: left;
  text-decoration: none;
  isolation: isolate;
}
.project-card > img {
  z-index: -3;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .project-card:hover > img {
    filter: saturate(1.08);
    transform: scale(1.035);
  }
}
.slide-preview-surface {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050608;
  container-type: inline-size;
  isolation: isolate;
}
.slide-preview-layer {
  position: absolute;
  display: block;
  transform-origin: center;
}
.slide-preview-surface .image-transform {
  transition: none;
}
.dashboard-slide-cover {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.template-workspace {
  display: grid;
  gap: 38px;
}
.base-template-section, .personal-template-section {
  display: grid;
  gap: 14px;
}
.template-section-heading {
  display: flex;
  min-height: 48px;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.template-section-heading > div {
  display: grid;
  gap: 5px;
}
.template-section-heading span {
  color: #77708e;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.template-section-heading h2 {
  margin: 0;
  color: #eceef1;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -.022em;
}
.template-section-heading p {
  max-width: 410px;
  margin: 0 0 2px;
  color: #676e78;
  font-size: 9px;
  line-height: 1.5;
  text-align: right;
}
.template-section-heading.compact {
  min-height: 40px;
}
.base-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.base-template-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: #101318;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .base-template-card:hover {
    border-color: var(--template-accent, #a99aff);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--template-accent, #a99aff) 34%, transparent);
    }
    box-shadow: 0 15px 38px rgba(0,0,0,.18);
    transform: translateY(-2px);
  }
}
.base-template-preview {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #080a0d;
}
.base-template-preview::after {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(5,7,9,.42));
  content: "";
  pointer-events: none;
}
.base-template-badge {
  position: absolute;
  z-index: 5;
  top: 9px;
  left: 9px;
  display: flex;
  height: 23px;
  padding: 0 8px;
  align-items: center;
  border: 1px solid var(--template-accent, #a99aff);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--template-accent, #a99aff) 28%, transparent);
  }
  border-radius: 999px;
  background: rgba(8,10,13,.74);
  color: var(--template-accent, #a99aff);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--template-accent, #a99aff) 76%, white);
  }
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.base-template-copy {
  display: grid;
  min-height: 112px;
  padding: 10px;
  align-content: space-between;
  gap: 9px;
}
.base-template-copy > span {
  display: grid;
  min-width: 0;
  gap: 5px;
}
.base-template-copy strong {
  overflow: hidden;
  color: #e3e5e8;
  font-size: 10px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.base-template-copy small {
  display: -webkit-box;
  min-height: 29px;
  overflow: hidden;
  color: #656c75;
  font-size: 7px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.base-template-copy button {
  display: flex;
  width: 100%;
  height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--template-accent, #a99aff);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--template-accent, #a99aff) 24%, rgba(255,255,255,.05));
  }
  border-radius: 7px;
  background: var(--template-accent, #a99aff);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--template-accent, #a99aff) 10%, #111419);
  }
  color: var(--template-accent, #a99aff);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--template-accent, #a99aff) 68%, white);
  }
  font-size: 7px;
  font-weight: 750;
}
@media (hover: hover) and (pointer: fine) {
  .base-template-copy button:hover:not(:disabled) {
    border-color: var(--template-accent, #a99aff);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--template-accent, #a99aff) 48%, transparent);
    }
    background: var(--template-accent, #a99aff);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--template-accent, #a99aff) 16%, #111419);
    }
  }
}
.base-template-copy button:disabled {
  cursor: wait;
  opacity: .55;
}
.template-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.template-library-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: #101318;
  transition: border-color 180ms ease, transform 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .template-library-card:hover {
    border-color: rgba(169,154,255,.26);
    transform: translateY(-2px);
  }
}
.template-library-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 0;
  background: #080a0d;
}
.template-library-preview::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(180deg, transparent 65%, rgba(4,5,7,.76));
  content: "";
  opacity: 0;
  transition: opacity 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .template-library-card:hover .template-library-preview::after {
    opacity: 1;
  }
}
.template-library-preview-badge {
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 10px;
  display: flex;
  height: 28px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(10,12,15,.86);
  color: #f1f2f4;
  font-size: 8px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 160ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .template-library-card:hover .template-library-preview-badge {
    opacity: 1;
    transform: translateY(0);
  }
}
.template-library-card-copy {
  display: grid;
  min-height: 61px;
  padding: 8px 8px 8px 11px;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
}
.template-library-card-copy > :first-child {
  display: grid;
  min-width: 0;
  padding: 0;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #e3e5e8;
  text-align: left;
  text-decoration: none;
}
.template-library-card-copy strong, .template-library-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-library-card-copy strong {
  font-size: 10px;
  font-weight: 650;
}
.template-library-card-copy small {
  color: #656c75;
  font-size: 7px;
}
.template-library-delete {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  color: #676e77;
}
@media (hover: hover) and (pointer: fine) {
  .template-library-delete:hover {
    background: rgba(255,100,115,.08);
    color: #ff8d98;
  }
}
.new-template-card {
  display: grid;
  min-height: 0;
  aspect-ratio: 4 / 5;
  padding: 20px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-style: dashed;
  color: #818892;
}
.new-template-card > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(169,154,255,.19);
  border-radius: 14px;
  background: rgba(119,92,235,.08);
  color: #b8acf7;
}
.new-template-card strong {
  color: #d8dbe0;
  font-size: 11px;
}
.new-template-card small {
  max-width: 145px;
  color: #646b74;
  font-size: 8px;
  line-height: 1.4;
  text-align: center;
}
.template-library-loading {
  display: flex;
  min-height: 180px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #777e87;
  font-size: 10px;
}
.trash-template-section {
  display: grid;
  margin-top: 24px;
  gap: 12px;
}
.trash-template-card .template-library-preview {
  pointer-events: none;
}
.trash-template-deadline {
  position: absolute;
  z-index: 6;
  right: 9px;
  bottom: 9px;
  left: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  background: rgba(7,9,12,.88);
  color: #c0c4ca;
  font-size: 9px;
  font-weight: 650;
  text-align: center;
}
.trash-template-actions > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.trash-template-actions > span strong, .trash-template-actions > span small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-template-actions > div {
  display: flex;
  gap: 5px;
}
.trash-template-actions button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  color: #aeb4bc;
}
.trash-template-actions button.danger {
  color: #ff8d98;
}
.trash-template-actions button:disabled {
  opacity: .45;
}
@media (max-width: 700px) {
  .workspace-view-switch {
    gap: 2px;
  }
  .workspace-view-switch button {
    height: 44px;
    padding: 0 8px;
  }
  .workspace-view-switch button small {
    min-width: 18px;
    height: 18px;
  }
  .template-workspace {
    gap: 31px;
  }
  .base-template-section, .personal-template-section {
    gap: 10px;
  }
  .template-section-heading {
    display: grid;
    min-height: 0;
    gap: 7px;
  }
  .template-section-heading h2 {
    font-size: 16px;
  }
  .template-section-heading p {
    max-width: none;
    margin: 0;
    font-size: 8px;
    text-align: left;
  }
  .base-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .base-template-card {
    border-radius: 5px;
  }
  .base-template-badge {
    top: 6px;
    left: 6px;
    height: 20px;
    padding: 0 6px;
  }
  .base-template-copy {
    min-height: 104px;
    padding: 8px;
  }
  .base-template-copy strong {
    font-size: 9px;
  }
  .base-template-copy small {
    min-height: 27px;
    font-size: 6px;
  }
  .template-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .template-library-card {
    border-radius: 3px;
  }
  .template-library-preview-badge {
    display: none;
  }
  .template-library-card-copy {
    min-height: 52px;
    padding: 7px;
  }
  .template-library-card-copy strong {
    font-size: 9px;
  }
  .template-library-delete {
    width: 27px;
    height: 27px;
  }
  .trash-template-actions button {
    width: 44px;
    height: 44px;
  }
  .new-template-card {
    min-height: 0;
    padding: 12px;
  }
}
.project-card-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 4, 5, 0.06), rgba(3, 4, 5, 0.12) 35%, rgba(3, 4, 5, 0.94) 100%);
}
.project-card-brand {
  position: absolute;
  top: 6.5%;
  left: 7%;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.project-card > strong {
  position: absolute;
  right: 7%;
  bottom: 14%;
  left: 7%;
  font-family: var(--font-condensed), sans-serif;
  font-size: clamp(22px, 3.1vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-transform: uppercase;
}
.project-card-meta {
  position: absolute;
  right: 7%;
  bottom: 6%;
  left: 7%;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #c4c7cb;
  font-size: 9px;
}
.new-project-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.018);
  color: #777c84;
  text-align: center;
}
.new-project-card > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
}
.new-project-card > strong {
  position: static;
  font-family: inherit;
  color: #b4b7bc;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.new-project-card small {
  color: #5d6269;
  font-size: 9px;
}
.mobile-close {
  color: inherit;
  text-decoration: none;
}
.project-card-loading {
  background: radial-gradient(circle at 50% 38%, #20242c, #0c0e12 68%);
}
.project-card-recovery {
  position: absolute;
  z-index: 8;
  right: 7%;
  bottom: 7%;
  left: 7%;
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: rgba(8,10,14,.82);
  color: #f1f2f4;
  backdrop-filter: blur(12px);
}
.project-card-recovery strong {
  overflow: hidden;
  font-family: var(--font-condensed), sans-serif;
  font-size: clamp(15px, 2vw, 24px);
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.project-card-recovery small {
  color: #aaa2d3;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .02em;
}
.project-loading-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.project-loading-visual::before {
  content: "";
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(173, 157, 255, .2);
  border-radius: 50%;
  animation: generation-orbit 3s linear infinite;
}
.project-loading-visual i, .project-loading-visual b, .project-loading-visual em {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #aa98ff;
  box-shadow: 0 0 13px rgba(170, 152, 255, .75);
  animation: project-loading-drift 2.2s ease-in-out infinite alternate;
}
.project-loading-visual i {
  top: 28%;
  left: 38%;
}
.project-loading-visual b {
  top: 43%;
  right: 32%;
  background: #72b8ff;
  animation-delay: -.7s;
}
.project-loading-visual em {
  top: 53%;
  left: 32%;
  background: #b9f06b;
  animation-delay: -1.4s;
}
@keyframes project-loading-drift {
  to {
    transform: translate3d(8px, -7px, 0) scale(1.2);
  }
}
.generation-console {
  position: relative;
  z-index: 70;
  width: 100%;
  height: var(--generation-status-height);
  margin: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: rgba(19, 22, 27, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
  transition: opacity 180ms ease;
}
.generation-console.error {
  border-color: rgba(255, 104, 122, 0.3);
}
.visual-recovery-status {
  position: absolute;
  z-index: 2050;
  top: 10px;
  left: 50%;
  display: flex;
  width: min(420px, calc(100% - 28px));
  min-height: 42px;
  padding: 8px 12px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(114, 184, 255, .24);
  border-radius: 12px;
  background: rgba(11, 14, 19, .88);
  color: #8fc8ff;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}
.visual-recovery-status.needs-review {
  border-color: rgba(255, 209, 92, .24);
  color: #ffd15c;
}
.visual-recovery-status > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.visual-recovery-status strong {
  color: #e7e9ec;
  font-size: 9px;
  font-weight: 700;
}
.visual-recovery-status small {
  color: #767e89;
  font-size: 7px;
  line-height: 1.35;
}
.visual-recovery-status > button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid rgba(255, 209, 92, .28);
  border-radius: 9px;
  background: rgba(255, 209, 92, .1);
  color: #ffe295;
  font-size: 8px;
  font-weight: 750;
}
@media (pointer: coarse) {
  .visual-recovery-status > button {
    min-height: 44px;
  }
}
.generation-console-summary {
  display: grid;
  width: min(720px, calc(100% - 32px));
  min-height: 43px;
  margin: 0 auto;
  padding: 5px 4px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}
.generation-summary-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.generation-summary-copy strong {
  overflow: hidden;
  color: #f0f2f4;
  font-size: 10px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generation-summary-copy small {
  overflow: hidden;
  color: #858c96;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generation-percent {
  color: #aaa0e8;
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
}
.generation-console-actions {
  display: flex !important;
  grid-auto-flow: column;
  align-items: center;
  justify-content: end;
  gap: 8px !important;
}
.generation-console-actions button {
  display: inline-flex;
  min-height: 32px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: #aeb3ba;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .generation-console-actions button:hover {
    border-color: rgba(183, 169, 255, .35);
    background: rgba(183, 169, 255, .1);
    color: #f1efff;
  }
}
.generation-details-toggle svg {
  transition: transform 180ms ease;
}
.generation-console.details-open .generation-details-toggle svg {
  transform: rotate(180deg);
}
.generation-console-actions .generation-retry {
  color: #ffb6bf;
}
.generation-orbit {
  position: relative;
  display: block;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(181, 166, 255, 0.22);
  border-radius: 50%;
  animation: generation-orbit 2.4s linear infinite;
}
.generation-orbit i, .generation-orbit b, .generation-orbit em {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b7a9ff;
  box-shadow: 0 0 10px rgba(183, 169, 255, 0.8);
}
.generation-orbit i {
  top: -2px;
  left: 10px;
}
.generation-orbit b {
  right: -1px;
  bottom: 4px;
  background: #72b8ff;
}
.generation-orbit em {
  bottom: 2px;
  left: 1px;
  background: #b9f06b;
}
@keyframes generation-orbit {
  to {
    transform: rotate(360deg);
  }
}
.generation-progress-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.generation-progress-track i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8d79ff, #72b8ff, #b9f06b);
  box-shadow: 0 0 12px rgba(114, 184, 255, 0.5);
  transition: width 420ms cubic-bezier(.22, 1, .36, 1);
}
.generation-progress-track.indeterminate i {
  width: 34%;
  animation: generation-research-progress 1.35s cubic-bezier(.45,0,.55,1) infinite;
}
.generation-percent.researching {
  min-width: 68px;
  color: #aaa0e8;
  text-align: right;
}
@keyframes generation-research-progress {
  0% {
    transform: translateX(-115%);
  }
  100% {
    transform: translateX(335%);
  }
}
.generation-details-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  width: min(640px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - 118px));
  overflow: hidden auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(19,22,27,.985);
  box-shadow: 0 24px 68px rgba(0,0,0,.42);
  transform: translateX(-50%);
  animation: generation-details-in 160ms cubic-bezier(.22,1,.36,1) both;
}
.generation-details-panel > header {
  display: flex;
  min-height: 54px;
  padding: 9px 11px 9px 13px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.generation-details-panel > header > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.generation-details-panel > header small {
  color: #8f86c8;
  font-size: 8px;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.generation-details-panel > header strong {
  overflow: hidden;
  color: #f0f2f4;
  font-size: 11px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generation-details-panel > header button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9198a2;
}
.generation-details-panel > footer {
  display: flex;
  min-height: 48px;
  padding: 8px 11px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.generation-details-panel > footer span {
  color: #767e89;
  font-size: 9px;
}
.generation-details-panel > footer button {
  display: inline-flex;
  min-height: 32px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #b8bec6;
  font: inherit;
  font-size: 9px;
}
@keyframes generation-details-in {
  from {
    opacity: 0;
    transform: translate(-50%,-6px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate(-50%,0) scale(1);
  }
}
.generation-phase-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 9px 12px;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  list-style: none;
}
.generation-phase-rail li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: #555d67;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .02em;
}
.generation-phase-rail li > i {
  display: grid;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: #666e79;
  font-family: var(--font-geist-mono), monospace;
  font-size: 6px;
  font-style: normal;
}
.generation-phase-rail li::after {
  width: 100%;
  height: 1px;
  margin-left: 2px;
  background: rgba(255,255,255,.06);
  content: "";
}
.generation-phase-rail li:last-child::after {
  display: none;
}
.generation-phase-rail li.done {
  color: #7fae94;
}
.generation-phase-rail li.done > i {
  border-color: rgba(143,211,173,.25);
  background: rgba(143,211,173,.08);
  color: #8fd3ad;
}
.generation-phase-rail li.active {
  color: #c4baff;
}
.generation-phase-rail li.active > i {
  border-color: rgba(183,169,255,.42);
  background: rgba(183,169,255,.12);
  color: #d5ceff;
  box-shadow: 0 0 12px rgba(159,140,255,.18);
}
.generation-console-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
  min-height: 76px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.generation-live-copy {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.055);
}
.generation-live-copy > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8f86c8;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.generation-live-copy > div {
  display: -webkit-box;
  min-height: 32px;
  max-height: 44px;
  margin-top: 5px;
  overflow: hidden;
  color: #dfe2e6;
  font-size: 10px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.generation-live-copy p {
  display: inline;
  margin: 0;
}
.generation-wait-note {
  display: block;
  margin-top: 7px;
  color: #626a75;
  font-size: 7px;
  line-height: 1.35;
}
.generation-events {
  display: grid;
  margin: 0;
  padding: 8px 10px;
  align-content: center;
  gap: 6px;
  list-style: none;
}
.generation-events li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  opacity: .62;
}
.generation-events li.active {
  opacity: 1;
}
.generation-events li > i {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  color: #a99aff;
}
.generation-events li.done > i {
  color: #8fd3ad;
}
.generation-events li > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.generation-events strong {
  overflow: hidden;
  color: #bcc1c8;
  font-size: 8px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generation-events small {
  overflow: hidden;
  color: #656c75;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generation-slide-chip {
  position: absolute;
  z-index: 1900;
  top: 8px;
  right: 8px;
  display: flex;
  height: 22px;
  padding: 0 7px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(10, 12, 15, .76);
  color: #d5d8dc;
  font-size: 7px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.generation-slide-chip i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9f8cff;
  box-shadow: 0 0 0 0 rgba(159, 140, 255, .5);
  animation: generation-pulse 1.3s ease-out infinite;
}
.generation-slide-chip.imaging i {
  background: #72b8ff;
  box-shadow: 0 0 0 0 rgba(114, 184, 255, .5);
}
.slide-surface.compact .generation-slide-chip {
  top: 3px;
  right: 3px;
  height: 13px;
  padding: 0 4px;
  font-size: 4px;
}
@keyframes generation-pulse {
  60% {
    box-shadow: 0 0 0 5px rgba(159, 140, 255, 0);
  }
}
.slide-surface.is-streaming, .editor-canvas.is-streaming {
  box-shadow: inset 0 0 0 1px rgba(159, 140, 255, .3);
}
.slide-surface.is-streaming .kind-text, .editor-canvas.is-streaming .kind-text {
  animation: streamed-layer-in 280ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes streamed-layer-in {
  from {
    opacity: 0;
    transform: translateY(1.6%) scale(.992);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.text-layer.typing::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: .86em;
  margin-left: .08em;
  vertical-align: -.06em;
  background: currentColor;
  animation: typing-caret .72s steps(1) infinite;
}
.image-layer-empty {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #080a0d;
}
.is-streaming .image-layer-empty i, .is-placeholder .image-layer-empty i {
  display: block;
  width: 55%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035), transparent);
  transform: translateX(-140%) rotate(12deg);
  animation: image-empty-scan 2.2s ease-in-out infinite;
}
@keyframes typing-caret {
  50% {
    opacity: 0;
  }
}
@keyframes image-empty-scan {
  55%, 100% {
    transform: translateX(250%) rotate(12deg);
  }
}
.inline-text-toolbar {
  position: absolute;
  z-index: 2500;
  display: flex;
  height: 31px;
  padding: 3px;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(18, 21, 26, .97);
  box-shadow: 0 9px 30px rgba(0, 0, 0, .48);
  transform: translate(-50%, -100%);
  backdrop-filter: blur(15px);
}
.inline-text-toolbar select, .inline-text-toolbar input[type="number"] {
  height: 23px;
  border: 0;
  outline: 0;
  border-radius: 5px;
  background: #292e35;
  color: #e5e7ea;
  font-size: 7px;
}
.inline-text-toolbar select {
  width: 75px;
  padding: 0 5px;
}
.inline-text-toolbar input[type="number"] {
  width: 35px;
  padding: 0 4px;
  font-family: var(--font-geist-mono), monospace;
}
.inline-text-toolbar input[type="color"] {
  width: 24px;
  height: 23px;
  padding: 2px;
  border: 0;
  border-radius: 5px;
  background: #292e35;
}
.inline-text-toolbar button {
  display: grid;
  height: 23px;
  padding: 0 6px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: #292e35;
  color: #e8eaed;
  font-size: 7px;
}
.inline-text-toolbar button.clear {
  color: #9198a2;
}
.inline-color-presets {
  display: flex;
  gap: 2px;
}
.inline-text-toolbar .inline-color-swatch {
  width: 17px;
  min-width: 17px;
  padding: 0;
  border: 2px solid #292e35;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.dashboard-back,
.share-button {
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  color: #c8ccd1;
}
.dashboard-back {
  width: 32px;
  flex: 0 0 auto;
}
@media (hover: hover) and (pointer: fine) {
  .dashboard-back:hover,
.share-button:hover {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .07);
    color: #fff;
  }
}
.share-button {
  padding: 0 10px;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
}
.share-button:disabled {
  opacity: .55;
}
.share-modal {
  width: min(520px, calc(100vw - 28px));
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  background: #13161a;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
}
.share-modal > p {
  margin: 16px 0;
  color: #7d848d;
  font-size: 10px;
  line-height: 1.55;
}
.share-access-picker {
  display: grid;
  margin: 17px 0 10px;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
}
.share-access-picker label {
  display: grid;
  min-width: 150px;
  height: 54px;
  padding: 7px 9px;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: #0d1014;
}
.share-access-picker label > span {
  grid-column: 1 / -1;
  color: #676e78;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}
.share-access-picker select {
  min-width: 94px;
  height: 27px;
  padding: 0 27px 0 8px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: #22272e;
  color: #f0f1f3;
  font-size: 9px;
  font-weight: 750;
}
.share-access-picker p {
  margin: 0;
  color: #737a84;
  font-size: 8px;
  line-height: 1.45;
}
.share-access-picker p.error {
  color: #ff929d;
}
.share-link-row {
  display: grid;
  padding: 6px 6px 6px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 9px;
  background: #0c0f12;
}
.share-link-row > span {
  overflow: hidden;
  color: #9da3ab;
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-link-row button {
  display: flex;
  height: 30px;
  padding: 0 10px;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 6px;
  background: #f4f4f5;
  color: #101114;
  font-size: 8px;
  font-weight: 750;
}
.share-link-row button:disabled {
  opacity: .4;
}
.share-link-row.is-loading > span {
  color: #676e77;
}
.share-live-note {
  display: flex;
  margin-top: 12px;
  padding: 10px;
  align-items: center;
  gap: 9px;
  border-radius: 9px;
  background: rgba(143, 211, 173, .055);
}
.share-live-note > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8fd3ad;
  box-shadow: 0 0 0 4px rgba(143, 211, 173, .09);
}
.share-live-note > span {
  display: grid;
  gap: 2px;
}
.share-live-note strong {
  color: #b9c8c0;
  font-size: 8px;
}
.share-live-note small {
  color: #63716a;
  font-size: 7px;
}
.share-live-note.edit-access {
  background: rgba(157,140,255,.06);
}
.share-live-note.edit-access > i {
  background: #a99aff;
  box-shadow: 0 0 0 4px rgba(157,140,255,.09);
}
.share-live-note.edit-access strong {
  color: #d4ceff;
}
.share-live-note.edit-access small {
  color: #746e91;
}
.collaboration-share {
  display: grid;
  margin-top: 12px;
  padding: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 12px;
  border: 1px solid rgba(157, 140, 255, .14);
  border-radius: 10px;
  background: rgba(157, 140, 255, .045);
}
.collaboration-share > div {
  display: grid;
  gap: 3px;
}
.collaboration-share strong {
  color: #d7d2ff;
  font-size: 9px;
}
.collaboration-share span {
  color: #747b85;
  font-size: 7px;
  line-height: 1.4;
}
.collaboration-share > button {
  margin: 0;
  white-space: nowrap;
}
.collaboration-share > small {
  grid-column: 1 / -1;
  color: #636a74;
  font-size: 7px;
}
.collaboration-share > small button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #aaa0ef;
  font-size: inherit;
}
.collaborator-avatars {
  display: flex;
  padding-left: 6px;
}
.collaborator-avatars span {
  display: grid;
  width: 24px;
  height: 24px;
  margin-left: -6px;
  place-items: center;
  border: 2px solid #0f1114;
  border-radius: 50%;
  color: #111318;
  font-size: 8px;
  font-weight: 900;
}
.share-modal .modal-footer a {
  text-decoration: none;
}
.image-option-area {
  display: grid;
  gap: 9px;
}
.image-option-area.compact {
  max-height: none;
  overflow: visible;
}
.image-option-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: #101317;
}
.image-option-tabs button {
  display: flex;
  min-height: 30px;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #656c75;
  font-size: 7px;
  font-weight: 700;
}
.image-option-tabs button.active {
  background: #242930;
  color: #eceef1;
}
.media-upload-action {
  display: flex;
  width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #cdd1d6;
  text-align: left;
}
.media-upload-action > svg {
  flex: 0 0 auto;
  color: #ff78ad;
}
.media-upload-action > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.media-upload-action strong {
  font-size: 9px;
}
.media-upload-action small {
  color: #737b85;
  font-size: 8px;
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  .media-upload-action:hover {
    border-color: rgba(255,122,177,.25);
    background: rgba(255,122,177,.065);
  }
}
.media-search-box {
  display: grid;
  width: 100%;
  min-height: 44px;
  padding: 4px 4px 4px 11px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  background: #101317;
  color: #747c87;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.media-search-box:focus-within {
  border-color: rgba(168,145,255,.48);
  background: #11151a;
  box-shadow: 0 0 0 3px rgba(128,96,238,.1);
  color: #aaa0e8;
}
.media-search-box input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef0f3;
  font-size: 11px;
  line-height: 1.35;
}
.media-search-box input::placeholder {
  color: #686f79;
  opacity: 1;
}
.media-search-box button {
  min-width: 70px;
  height: 34px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: #2a3038;
  color: #f1f2f4;
  font-size: 11px;
  font-weight: 750;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.media-search-box button:disabled {
  color: #9ba0a8;
  opacity: .62;
  cursor: wait;
}
.media-search-feedback {
  padding: 8px 10px;
  border: 1px solid rgba(151,136,230,.13);
  border-radius: 9px;
  background: rgba(151,136,230,.055);
  color: #aaa1d6;
  font-size: 10px;
  line-height: 1.4;
}
.media-search-feedback.is-error {
  border-color: rgba(235,129,148,.2);
  background: rgba(128,38,55,.1);
  color: #e7a5b1;
}
.more-image-results {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  background: rgba(255, 255, 255, .025);
  color: #a5abb3;
  font-size: 10px;
  font-weight: 700;
}
.image-generator {
  display: grid;
  gap: 9px;
}
.image-generator > label {
  display: grid;
  gap: 5px;
  color: #8f969f;
  font-size: 8px;
  font-weight: 700;
}
.image-generator textarea {
  min-height: 92px;
  padding: 9px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, .08);
  outline: 0;
  border-radius: 8px;
  background: #101317;
  color: #e7e9ec;
  font-size: 9px;
  line-height: 1.45;
}
.generation-reference-row {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.generation-reference-row > small {
  color: #626a73;
  font-size: 7px;
  line-height: 1.4;
}
.generation-reference-row > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: #aeb3ba;
  font-size: 7px;
}
.generation-reference-row img {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  object-fit: cover;
}
.generation-reference-row button {
  display: flex;
  min-height: 28px;
  padding: 0 8px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  background: #1c2127;
  color: #aeb3ba;
  font-size: 7px;
  white-space: nowrap;
}
.generation-reference-row > span button {
  width: 22px;
  min-height: 22px;
  padding: 0;
  justify-content: center;
}
.generate-image-button {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #f0eef9, #bfb8ee);
  color: #111218;
  font-size: 8px;
  font-weight: 800;
}
.generate-image-button:disabled {
  opacity: .5;
}
.image-generation-error {
  margin: 0;
  color: #e88989;
  font-size: 7px;
  line-height: 1.4;
}
html[data-theme] .shared-preview-root {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--df-surface-canvas);
  color: var(--df-text-primary);
}
html[data-theme] .shared-preview-header {
  position: relative;
  z-index: 4;
  min-height: 64px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.35fr) minmax(260px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid var(--df-border-subtle);
  background: var(--df-surface-overlay);
}
html[data-theme] .shared-preview-brand {
  --donefeed-wordmark-size: var(--df-type-panel-title-size);
  width: max-content;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--df-text-primary);
  text-decoration: none;
}
html[data-theme] .shared-preview-brand > :first-child {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
html[data-theme] .shared-preview-wordmark {
  width: auto;
  height: 15px;
  color: var(--df-text-primary);
}
html[data-theme] .shared-preview-brand > span:last-child {
  display: grid;
  gap: 1px;
}
html[data-theme] .shared-preview-brand small,
html[data-theme] .shared-preview-title > span,
html[data-theme] .shared-stage-meta small {
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .shared-preview-title {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
}
html[data-theme] .shared-preview-title > strong {
  width: 100%;
  overflow: hidden;
  color: var(--df-text-primary);
  font-size: var(--df-type-body-size);
  font-weight: var(--df-type-weight-semibold);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .shared-preview-title > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
html[data-theme] .shared-preview-title i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--df-status-success);
  box-shadow: 0 0 0 3px var(--df-status-success-surface);
}
html[data-theme] .shared-preview-actions {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
html[data-theme] .shared-preview-actions > button,
html[data-theme] .shared-edit-access-banner > button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  padding: 0 13px;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  font: inherit;
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-quiet-control);
  white-space: nowrap;
}
html[data-theme] .shared-preview-actions > button:not(.shared-copy-action),
html[data-theme] .shared-edit-access-banner > button {
  border-color: var(--df-border-strong);
  background: var(--df-surface-subtle);
}
html[data-theme] .shared-preview-actions > button:disabled {
  color: var(--df-text-disabled);
}
html[data-theme] .shared-preview-actions > button.requested {
  border-color: var(--df-status-success);
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .shared-preview-actions > button.login-to-edit {
  border-color: var(--df-category-ai);
  background: var(--df-category-ai-surface);
}
html[data-theme] .shared-preview-actions > button.edit-ready {
  border-color: var(--df-action-primary-border);
  background: var(--df-surface-raised);
  color: var(--df-action-primary);
}
html[data-theme] .shared-edit-access-banner.ready > button {
  border-color: var(--df-action-primary-border);
  background: var(--df-action-primary);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .shared-edit-access-banner {
  width: min(720px, calc(100% - 32px));
  min-height: 58px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 12px auto 0;
  border: 1px solid var(--df-category-ai);
  border-radius: 12px;
  padding: 9px 10px;
  background: var(--df-category-ai-surface);
  box-shadow: var(--df-shadow-raised);
}
html[data-theme] .shared-edit-access-banner > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--df-surface-raised);
  color: var(--df-category-ai);
}
html[data-theme] .shared-edit-access-banner > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
html[data-theme] .shared-edit-access-banner strong {
  color: var(--df-text-primary);
  font-size: var(--df-type-control-size);
}
html[data-theme] .shared-edit-access-banner small {
  overflow: hidden;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .shared-edit-access-banner.ready {
  border-color: var(--df-status-success);
  background: var(--df-status-success-surface);
}
html[data-theme] .shared-edit-access-banner.ready > span {
  color: var(--df-status-success);
}
html[data-theme] .shared-edit-access-banner.error {
  border-color: var(--df-status-danger);
  background: var(--df-status-danger-surface);
}
html[data-theme] .shared-edit-access-banner.error > span {
  color: var(--df-status-danger);
}
html[data-theme] .shared-preview-workspace {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 12px 24px;
  background: var(--df-surface-canvas);
}
html[data-theme] .shared-preview-stage {
  width: min(100%, 860px);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  gap: 6px;
}
html[data-theme] .shared-stage-meta {
  width: min(520px, calc((100dvh - 220px) * .8));
  max-width: calc(100vw - 180px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: auto;
}
html[data-theme] .edit-link .shared-stage-meta {
  width: min(520px, calc((100dvh - 292px) * .8));
}
html[data-theme] .shared-stage-meta > span {
  color: var(--df-text-primary);
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-heavy-label);
  letter-spacing: var(--df-type-tracking-label);
  text-transform: uppercase;
}
html[data-theme] .shared-canvas-wrap {
  min-height: 0;
  display: grid;
  grid-template-columns: 48px auto 48px;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
html[data-theme] .shared-artifact-column {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
}
html[data-theme] .shared-swipe-frame {
  position: relative;
  z-index: 1;
  width: min(520px, calc((100dvh - 220px) * .8), calc(100vw - 180px));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--df-border-strong);
  border-radius: 14px;
  background: var(--df-surface-composer);
  box-shadow: var(--df-shadow-overlay);
  touch-action: pan-y;
}
html[data-theme] .edit-link .shared-swipe-frame {
  width: min(520px, calc((100dvh - 292px) * .8), calc(100vw - 180px));
}
html[data-theme] .shared-slide-surface {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
}
html[data-theme] .shared-strip-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
}
html[data-theme] .shared-nav {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--df-border-subtle);
  border-radius: 50%;
  padding: 0;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  box-shadow: var(--df-shadow-raised);
}
html[data-theme] .shared-nav:disabled {
  color: var(--df-text-disabled);
  box-shadow: none;
}
html[data-theme] .shared-tap-zone,
html[data-theme] .shared-compact-dots {
  display: none;
}
html[data-theme] .shared-preview-footer {
  min-height: 98px;
  flex: 0 0 auto;
  display: grid;
  align-items: center;
  border-top: 1px solid var(--df-border-subtle);
  padding: 9px 18px;
  background: var(--df-surface-raised);
}
html[data-theme] .shared-slide-strip {
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 8px;
  overflow-x: auto;
  padding: 3px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
html[data-theme] .shared-slide-strip > button {
  position: relative;
  width: 54px;
  height: auto;
  aspect-ratio: 4 / 5;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: var(--df-surface-composer);
  box-shadow: inset 0 0 0 1px var(--df-border-subtle);
}
html[data-theme] .shared-slide-strip > button.active {
  box-shadow: inset 0 0 0 2px var(--df-action-primary), 0 0 0 2px var(--df-focus-ring);
}
html[data-theme] .shared-slide-strip .shared-slide-index {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 3;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--df-media-overlay-border);
  border-radius: 99px;
  padding: 0 4px;
  background: var(--df-media-overlay);
  color: var(--df-media-overlay-text);
  font-family: var(--font-geist-mono), monospace;
  font-size: var(--df-type-micro-size);
}
html[data-theme] .shared-request-toast {
  position: fixed;
  z-index: 10;
  right: 18px;
  bottom: 112px;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--df-status-success);
  border-radius: 9px;
  padding: 9px 12px;
  background: var(--df-surface-overlay);
  color: var(--df-text-primary);
  font-size: var(--df-type-action-size);
  box-shadow: var(--df-shadow-overlay);
}
html[data-theme] .shared-preview-state {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  background: var(--df-surface-canvas);
  color: var(--df-text-primary);
}
html[data-theme] .shared-preview-state span {
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
}
html[data-theme] .shared-preview-root :is(button, a):focus-visible,
html[data-theme] .shared-preview-state :is(button, a):focus-visible {
  outline: 3px solid var(--df-focus-ring);
  outline-offset: 3px;
}
.dashboard-template-picker {
  width: min(760px, 100%);
  margin-top: 12px;
  padding: 8px 11px 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(20, 22, 26, .72);
  text-align: left;
}
.template-picker-heading {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.template-picker-heading > span {
  color: #a7abb2;
  font-size: 9px;
  font-weight: 700;
}
.template-picker-heading > small {
  overflow: hidden;
  max-width: 72%;
  color: #60666e;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-template-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.dashboard-template-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 78px;
  padding: 6px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  background: rgba(255, 255, 255, .018);
  color: #7f858d;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .dashboard-template-card:hover {
    background: rgba(255, 255, 255, .04);
    transform: translateY(-1px);
  }
}
.dashboard-template-card.active {
  border-color: var(--template-accent, #a99aff);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--template-accent, #a99aff) 45%, transparent);
  }
  background: rgba(255, 255, 255, .055);
  color: #eef0f2;
}
.dashboard-template-card > svg {
  position: absolute;
  top: 5px;
  right: 5px;
  color: var(--template-accent, #a99aff);
}
.dashboard-template-card > span:last-of-type {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.dashboard-template-card strong {
  overflow: hidden;
  font-size: 7px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-template-card small {
  overflow: hidden;
  color: #5f666f;
  font-size: 5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-miniature {
  position: relative;
  display: block;
  width: 44px;
  height: 55px;
  overflow: hidden;
  border-radius: 4px;
  background: #090b0e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.custom-template-miniature {
  background: #090b0e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.template-saved {
  --template-accent: #d6ad5b;
}
.template-saved small {
  color: #8e805f;
}
.editor-template-browser {
  display: grid;
  gap: 7px;
}
.editor-template-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.editor-template-grid button {
  display: grid;
  min-width: 0;
  padding: 5px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 7px;
  background: #161a1f;
  color: #777e87;
}
.editor-template-grid button.active {
  border-color: rgba(169, 154, 255, .4);
  background: rgba(113, 91, 216, .12);
  color: #e6e2ff;
}
.editor-template-grid button > span {
  position: relative;
  display: block;
  height: 30px;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(145deg, #3a414b, #0a0c0f 70%);
}
.editor-template-grid button i {
  position: absolute;
  top: 4px;
  right: 4px;
  left: 4px;
  height: 11px;
  background: rgba(255, 255, 255, .16);
}
.editor-template-grid button b {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  height: 3px;
  background: var(--template-accent, #a99aff);
}
.editor-template-grid button strong {
  overflow: hidden;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-template-switcher {
  display: grid;
  margin-bottom: 10px;
  padding: 8px;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: rgba(255, 255, 255, .018);
}
.applied-template-card {
  display: grid;
  margin-bottom: 10px;
  padding: 9px;
  grid-template-columns: 32px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(169,154,255,.2);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(119,92,235,.105), rgba(255,255,255,.018));
}
.applied-template-card.is-editing {
  border-color: rgba(169,154,255,.42);
  box-shadow: inset 0 0 0 1px rgba(169,154,255,.06);
}
.applied-template-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: rgba(169,154,255,.12);
  color: #bcb1f7;
}
.applied-template-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.applied-template-copy small {
  color: #7d749d;
  font-size: 6px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.applied-template-copy strong, .applied-template-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.applied-template-copy strong {
  color: #e8e4ff;
  font-size: 8px;
}
.applied-template-copy em {
  color: #6c6680;
  font-size: 6px;
  font-style: normal;
}
.applied-template-card > button {
  display: flex;
  height: 29px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(169,154,255,.22);
  border-radius: 6px;
  background: rgba(119,92,235,.14);
  color: #dbd5ff;
  font-size: 7px;
  font-weight: 700;
  white-space: nowrap;
}
.applied-template-card > button.active {
  background: #a99aff;
  color: #111016;
}
.layer-template-switcher .section-title {
  margin: 0;
}
.layer-template-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.layer-template-options > button {
  display: grid;
  min-width: 0;
  padding: 4px;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #111419;
  color: #686f79;
}
.layer-template-options > button.active {
  border-color: rgba(169, 154, 255, .38);
  background: rgba(119, 92, 235, .12);
  color: #e6e2ff;
}
.layer-template-options > button > span {
  position: relative;
  display: block;
  height: 24px;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(145deg, #343b45, #090b0e 72%);
}
.layer-template-options > button i {
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
  height: 9px;
  background: rgba(255, 255, 255, .14);
}
.layer-template-options > button b {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  height: 2px;
  background: var(--template-accent, #a99aff);
}
.layer-template-options > button strong {
  overflow: hidden;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-template-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}
.layer-template-actions > span {
  color: #606872;
  font-size: 6px;
  line-height: 1.3;
}
.layer-template-actions button {
  height: 29px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  background: #171b20;
  color: #858c96;
  font-size: 8px;
  font-weight: 650;
}
.layer-template-actions button.primary {
  border-color: rgba(169, 154, 255, .24);
  background: rgba(119, 92, 235, .14);
  color: #d9d2ff;
}
.saved-template-manager {
  display: grid;
  margin-bottom: 10px;
  padding: 8px;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.018);
}
.saved-template-head {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.saved-template-head > div {
  display: grid;
  gap: 2px;
}
.saved-template-head span {
  color: #d8dbe0;
  font-size: 8px;
  font-weight: 750;
}
.saved-template-head small {
  color: #5f6670;
  font-size: 6px;
}
.saved-template-head-actions {
  display: flex;
  gap: 4px;
}
.saved-template-head-actions button, .saved-template-head-actions a, .save-post-template {
  display: flex;
  height: 27px;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(167,145,255,.2);
  border-radius: 6px;
  background: rgba(119,92,235,.11);
  color: #d7d0ff;
  font-size: 7px;
  font-weight: 700;
  text-decoration: none;
}
.saved-template-head-actions > :first-child {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  color: #828994;
}
.saved-template-list {
  display: grid;
  max-height: 245px;
  gap: 5px;
  overflow-y: auto;
}
.saved-template-list article {
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
  background: #111419;
}
.saved-template-list article.active {
  border-color: rgba(169,154,255,.32);
  background: rgba(119,92,235,.08);
}
.saved-template-main {
  display: grid;
  min-width: 0;
  min-height: 46px;
  padding: 5px 4px 5px 6px;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #c7cbd1;
  text-align: left;
}
.saved-template-main > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.saved-template-main strong, .saved-template-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-template-main strong {
  font-size: 7px;
}
.saved-template-main small {
  color: #646b74;
  font-size: 6px;
}
.saved-template-mini {
  position: relative;
  display: block;
  width: 25px;
  height: 34px;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(145deg,#353b44,#080a0d 72%);
}
.saved-template-mini i {
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
  height: 14px;
  border-radius: 2px;
  background: rgba(255,255,255,.13);
}
.saved-template-mini b, .saved-template-mini em {
  position: absolute;
  right: 4px;
  bottom: 8px;
  left: 4px;
  height: 2px;
  background: #a99aff;
}
.saved-template-mini em {
  right: 10px;
  bottom: 4px;
  background: rgba(255,255,255,.55);
}
.saved-template-actions {
  display: flex;
  padding-right: 4px;
  align-items: center;
  gap: 3px;
}
.saved-template-actions button {
  display: grid;
  min-width: 26px;
  height: 25px;
  padding: 0 5px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
  color: #7b828c;
  font-size: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .saved-template-actions button:hover {
    background: rgba(255,255,255,.06);
    color: #dfe1e5;
  }
}
@media (hover: hover) and (pointer: fine) {
  .saved-template-actions button.danger:hover {
    color: #ff8490;
  }
}
.saved-template-empty {
  display: flex;
  min-height: 42px;
  padding: 8px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed rgba(255,255,255,.07);
  border-radius: 7px;
  color: #636a73;
  font-size: 6px;
  line-height: 1.45;
  text-align: center;
}
.save-post-template {
  width: 100%;
  border-color: rgba(255,255,255,.07);
  background: #12151a;
  color: #7e858e;
}
.template-editing-banner {
  display: grid;
  padding: 7px;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(169,154,255,.22);
  border-radius: 7px;
  background: rgba(119,92,235,.08);
}
.template-editing-banner > span {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 2px 5px;
  color: #b8acf7;
}
.template-editing-banner strong {
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-editing-banner small {
  grid-column: 2;
  color: #6f688f;
  font-size: 6px;
}
.template-mode-actions {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 4px !important;
}
.template-mode-actions button {
  display: flex;
  height: 27px;
  padding: 0 7px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(169,154,255,.22);
  border-radius: 6px;
  background: rgba(119,92,235,.14);
  color: #d9d2ff;
  font-size: 7px;
  font-weight: 700;
}
.template-mode-actions button:disabled {
  cursor: default;
  opacity: .62;
}
.template-mode-actions button:last-child {
  width: 27px;
  padding: 0;
  justify-content: center;
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  color: #777e87;
}
.template-ai-rules {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
}
.template-ai-rules > span {
  color: #77718e;
  font-size: 6px;
  font-weight: 750;
}
.template-ai-rules textarea {
  min-height: 62px;
  padding: 7px 8px;
  resize: vertical;
  border: 1px solid rgba(169,154,255,.15);
  border-radius: 6px;
  outline: 0;
  background: rgba(8,9,13,.65);
  color: #b8b3ca;
  font-size: 6px;
  line-height: 1.45;
}
.template-ai-rules textarea:focus {
  border-color: rgba(169,154,255,.36);
}
.template-setup-panel {
  display: grid;
  gap: 12px;
  padding-bottom: 18px;
}
.template-setup-intro {
  display: grid;
  padding: 12px;
  grid-template-columns: 32px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(167,149,255,.22);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(132,103,255,.13), rgba(255,255,255,.025));
}
.template-setup-intro > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: rgba(154,130,255,.14);
  color: #c6b9ff;
}
.template-setup-intro > div {
  display: grid;
  gap: 3px;
}
.template-setup-intro strong {
  color: #f3f1fb;
  font-size: 10px;
}
.template-setup-intro small {
  color: #8e899d;
  font-size: 7px;
  line-height: 1.45;
}
.template-rule-card,
.template-layer-map {
  display: grid;
  padding: 12px;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  background: rgba(8,10,13,.38);
}
.template-rule-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.template-rule-heading > span {
  color: #e7e9ec;
  font-size: 9px;
  font-weight: 760;
}
.template-rule-heading > small {
  color: #646b75;
  font-size: 6px;
  text-align: right;
}
.template-rule-card > textarea,
.template-slide-instructions textarea {
  width: 100%;
  min-height: 98px;
  padding: 10px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  outline: 0;
  background: #0c0f13;
  color: #d8dbe0;
  font: inherit;
  font-size: 8px;
  line-height: 1.55;
}
.template-rule-card > textarea:focus,
.template-slide-instructions textarea:focus,
.template-slide-fields input:focus,
.template-slide-fields select:focus,
.template-layer-fields input:focus,
.template-layer-fields select:focus {
  border-color: rgba(170,150,255,.48);
  box-shadow: 0 0 0 2px rgba(139,112,255,.08);
}
.template-slide-fields {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: 8px;
}
.template-slide-fields label,
.template-slide-instructions,
.template-layer-fields label {
  display: grid;
  gap: 5px;
}
.template-slide-fields label > span,
.template-slide-instructions > span,
.template-layer-fields label > span {
  color: #777e88;
  font-size: 6px;
  font-weight: 720;
  letter-spacing: .025em;
}
.template-slide-fields input,
.template-slide-fields select,
.template-layer-fields input,
.template-layer-fields select {
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  outline: 0;
  background: #0c0f13;
  color: #dfe1e5;
  font: inherit;
  font-size: 8px;
}
.template-slide-instructions textarea {
  min-height: 80px;
}
.template-preserve-copy {
  display: flex;
  padding: 9px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}
.template-preserve-copy input,
.template-layer-toggles input {
  accent-color: #9d87ff;
}
.template-preserve-copy > span {
  display: grid;
  gap: 2px;
}
.template-preserve-copy strong {
  color: #cfd2d8;
  font-size: 7px;
}
.template-preserve-copy small {
  color: #686f79;
  font-size: 6px;
  line-height: 1.35;
}
.template-layer-add {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
}
.template-layer-add button {
  display: flex;
  height: 31px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 8px;
  background: #111419;
  color: #9ca2aa;
  font-size: 7px;
  font-weight: 680;
}
@media (hover: hover) and (pointer: fine) {
  .template-layer-add button:hover {
    border-color: rgba(255,255,255,.18);
    color: #f0f1f3;
  }
}
.template-layer-list {
  display: grid;
  gap: 7px;
}
.template-layer-list article {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 9px;
  background: rgba(255,255,255,.018);
}
.template-layer-list article.active {
  border-color: rgba(167,148,255,.38);
  background: rgba(132,105,255,.07);
}
.template-layer-open {
  display: grid;
  min-width: 0;
  padding: 0;
  grid-template-columns: 27px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  text-align: left;
}
.template-layer-open > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.template-layer-open strong {
  overflow: hidden;
  color: #e0e3e6;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-layer-open small {
  color: #686f78;
  font-size: 6px;
}
.template-layer-open > svg {
  color: #59606a;
}
.template-layer-fields {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 7px;
}
.template-layer-fields input,
.template-layer-fields select {
  height: 31px;
  font-size: 7px;
}
.template-layer-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
}
.template-layer-toggles label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #858c95;
  font-size: 6px;
  cursor: pointer;
}
.slide-composition-switcher {
  display: grid;
  margin-bottom: 10px;
  padding: 8px;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: rgba(255, 255, 255, .018);
}
.slide-composition-switcher .section-title {
  margin: 0;
}
.slide-composition-switcher > p {
  margin: 0;
  color: #606872;
  font-size: 6px;
  line-height: 1.35;
}
.composition-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.composition-options > button {
  display: grid;
  min-width: 0;
  padding: 4px;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #111419;
  color: #686f79;
}
.composition-options > button.active {
  border-color: rgba(169, 154, 255, .42);
  background: rgba(119, 92, 235, .13);
  color: #eeeaff;
  box-shadow: inset 0 0 0 1px rgba(169, 154, 255, .06);
}
.composition-options > button strong {
  overflow: hidden;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composition-icon {
  position: relative;
  display: block;
  height: 34px;
  overflow: hidden;
  border-radius: 3px;
  background: #050608;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.composition-icon i,
.composition-icon b,
.composition-icon em {
  position: absolute;
  display: block;
  right: 4px;
  left: 4px;
  border-radius: 1px;
  content: "";
}
.composition-icon i {
  top: 3px;
  height: 17px;
  background: linear-gradient(145deg, #424b56, #1a1e24);
}
.composition-icon b {
  top: 21px;
  height: 3px;
  background: #e9e7e2;
}
.composition-icon em {
  top: 26px;
  height: 4px;
  border-top: 1px solid #777e87;
  border-bottom: 1px solid #4d535b;
}
.composition-icon.format-figure i {
  height: 18px;
}
.composition-icon.format-figure b {
  top: 20px;
  height: 7px;
  background: #f2efe8;
}
.composition-icon.format-figure em {
  top: 29px;
  height: 1px;
  border: 0;
  background: #696f77;
}
.composition-icon.format-short-answer b {
  top: 20px;
  right: 8px;
  left: 8px;
  height: 8px;
}
.composition-icon.format-short-answer em {
  display: none;
}
.composition-icon.format-statement i {
  height: 19px;
}
.composition-icon.format-statement b {
  top: 22px;
  height: 5px;
}
.composition-icon.format-bullets i {
  height: 16px;
}
.composition-icon.format-bullets b {
  top: 20px;
}
.composition-icon.format-bullets em {
  top: 25px;
  height: 7px;
  border: 0;
  background: repeating-linear-gradient(180deg, #707780 0 1px, transparent 1px 3px);
}
.composition-icon.format-paragraph i {
  height: 14px;
}
.composition-icon.format-paragraph b {
  top: 18px;
}
.composition-icon.format-paragraph em {
  top: 23px;
  height: 9px;
  border: 0;
  background: repeating-linear-gradient(180deg, #6b727b 0 1px, transparent 1px 3px);
}
.composition-icon.format-comparison i {
  height: 18px;
  background: linear-gradient(90deg, #3b444f 0 48%, #050608 48% 52%, #59636d 52% 100%);
}
.composition-icon.format-comparison b {
  top: 22px;
}
.composition-icon.format-comparison em {
  top: 27px;
}
.composition-icon.format-comparison-question i {
  height: 20px;
  background: linear-gradient(90deg, #3b444f 0 48%, #050608 48% 52%, #59636d 52% 100%);
}
.composition-icon.format-comparison-question b {
  top: 24px;
}
.composition-icon.format-comparison-question em {
  top: 29px;
}
.composition-icon.format-comparison-answer i {
  height: 22px;
  background: linear-gradient(145deg, #4e5965, #171b20);
}
.composition-icon.format-comparison-answer i::after {
  position: absolute;
  right: 2px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #697581;
  content: "";
}
.composition-icon.format-comparison-answer b {
  top: 27px;
}
.composition-icon.format-comparison-answer em {
  display: none;
}
.composition-icon.format-visual i {
  inset: 3px;
  height: auto;
  background: linear-gradient(145deg, #576472, #20262d 65%, #080a0d);
}
.composition-icon.format-visual b,
.composition-icon.format-visual em {
  display: none;
}
.composition-fidelity {
  display: grid;
  margin-bottom: 10px;
  padding: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: rgba(255, 255, 255, .018);
}
.composition-fidelity > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.composition-fidelity > span:nth-child(2) strong {
  color: #d9dce1;
  font-size: 8px;
}
.composition-fidelity > span:nth-child(2) small {
  overflow: hidden;
  color: #646b74;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vertical-text-align {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 4px;
}
.vertical-text-align > button {
  display: grid;
  min-height: 48px;
  padding: 5px;
  place-items: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: #12151a;
  color: #737b85;
  font-size: 7px;
}
.vertical-text-align > button.active {
  border-color: rgba(156,193,255,.34);
  background: rgba(91,134,185,.11);
  color: #dce8f6;
}
.vertical-align-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 19px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 3px;
}
.vertical-align-icon i, .vertical-align-icon b {
  position: absolute;
  right: 4px;
  left: 4px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.vertical-align-icon.top i {
  top: 4px;
}
.vertical-align-icon.top b {
  top: 8px;
}
.vertical-align-icon.center i {
  top: 7px;
}
.vertical-align-icon.center b {
  top: 11px;
}
.vertical-align-icon.bottom i {
  bottom: 8px;
}
.vertical-align-icon.bottom b {
  bottom: 4px;
}
.clip-text-toggle {
  position: relative;
  display: grid;
  min-height: 48px;
  padding: 8px 43px 8px 9px;
  grid-template-columns: minmax(0,1fr);
  align-items: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: #12151a;
  cursor: pointer;
}
.clip-text-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.clip-text-toggle > span {
  display: grid;
  gap: 3px;
}
.clip-text-toggle strong {
  color: #b6bbc2;
  font-size: 7px;
}
.clip-text-toggle small {
  color: #626a74;
  font-size: 6px;
  line-height: 1.35;
}
.clip-text-toggle > i {
  position: absolute;
  right: 9px;
  width: 27px;
  height: 15px;
  border-radius: 999px;
  background: #2a2f36;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: background 150ms ease;
}
.clip-text-toggle > i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #8b929b;
  transition: transform 150ms ease, background 150ms ease;
}
.clip-text-toggle:has(input:checked) > i {
  background: #745fe0;
}
.clip-text-toggle:has(input:checked) > i::after {
  background: #fff;
  transform: translateX(12px);
}
.clip-text-toggle:has(input:disabled) {
  cursor: default;
  opacity: .62;
}
.template-save-modal {
  width: min(520px,calc(100vw - 28px));
  padding: 20px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  background: #15181d;
  box-shadow: 0 30px 100px rgba(0,0,0,.62);
}
.template-save-modal .modal-head p {
  max-width: 410px;
  margin: 7px 0 0;
  color: #747b84;
  font-size: 8px;
  line-height: 1.5;
}
.template-name-field {
  display: grid;
  margin-top: 18px;
  gap: 6px;
}
.template-name-field > span {
  color: #7c838d;
  font-size: 7px;
  font-weight: 700;
}
.template-name-field input {
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: 0;
  background: #0f1216;
  color: #eef0f2;
  font-size: 10px;
}
.template-name-field input:focus {
  border-color: rgba(169,154,255,.46);
  box-shadow: 0 0 0 3px rgba(119,92,235,.09);
}
.template-scope-picker {
  display: grid;
  margin-top: 10px;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.template-scope-picker > button {
  display: grid;
  min-height: 76px;
  padding: 11px;
  align-content: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  background: #101318;
  color: #7c838c;
  text-align: left;
}
.template-scope-picker > button.active {
  border-color: rgba(169,154,255,.38);
  background: rgba(119,92,235,.1);
  color: #e2ddff;
}
.template-scope-picker > button span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.template-scope-picker strong {
  font-size: 9px;
}
.template-scope-picker small {
  color: #666d76;
  font-size: 7px;
}
.template-reference-source-option {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  gap: 9px;
  align-items: start;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(241,255,99,.17);
  border-radius: 9px;
  background: rgba(241,255,99,.045);
  cursor: pointer;
}
.template-reference-source-option input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: #f1ff63;
}
.template-reference-source-option > span {
  display: grid;
  gap: 4px;
  color: #dfe3e7;
}
.template-reference-source-option strong {
  font-size: 8px;
}
.template-reference-source-option small {
  color: #7f8790;
  font-size: 7px;
  line-height: 1.45;
}
.template-instructions-field {
  display: grid;
  margin-top: 11px;
  gap: 6px;
}
.template-instructions-field > span {
  color: #7c838d;
  font-size: 7px;
  font-weight: 700;
}
.template-instructions-field textarea {
  min-height: 84px;
  padding: 9px 10px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  outline: 0;
  background: #0f1216;
  color: #cfd2d7;
  font-size: 8px;
  line-height: 1.5;
}
.template-instructions-field textarea:focus {
  border-color: rgba(169,154,255,.42);
}
.template-instructions-field small {
  color: #616871;
  font-size: 6px;
  line-height: 1.45;
}
.template-save-actions {
  display: flex;
  margin-top: 18px;
  justify-content: flex-end;
  gap: 7px;
}
.template-save-actions > button {
  display: flex;
  height: 35px;
  padding: 0 12px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  color: #9aa1aa;
  font-size: 8px;
  font-weight: 700;
}
.template-save-actions > button.primary {
  border-color: rgba(169,154,255,.25);
  background: #745fe0;
  color: #fff;
}
.template-save-actions > button:disabled {
  opacity: .45;
}
.fidelity-score {
  display: grid;
  min-width: 43px;
  height: 39px;
  place-items: center;
  align-content: center;
  gap: 1px;
  border-radius: 7px;
  background: #111419;
  color: #a99aff;
}
.fidelity-score strong {
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
}
.composition-fidelity > button {
  height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(169, 154, 255, .24);
  border-radius: 6px;
  background: rgba(119, 92, 235, .12);
  color: #d9d2ff;
  font-size: 7px;
  font-weight: 700;
}
.composition-fidelity.fidelity-ready .fidelity-score {
  color: #8fd3ad;
}
.composition-fidelity.fidelity-repair {
  border-color: rgba(255, 185, 107, .15);
}
.composition-fidelity.fidelity-repair .fidelity-score {
  color: #ffbd73;
}
.reuse-indicator {
  display: flex;
  min-height: 31px;
  padding: 6px 8px;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 7px;
  background: #111419;
}
.reuse-indicator span {
  color: #8fd3ad;
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
  font-weight: 700;
}
.reuse-indicator small {
  color: #616873;
  font-size: 6px;
  text-align: right;
}
.reuse-indicator.fresh span {
  color: #a99aff;
}
.media-reuse-count {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 4;
  display: grid;
  min-width: 22px;
  height: 17px;
  padding: 0 5px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 99px;
  background: rgba(8, 10, 13, .86);
  color: #f2f3f4;
  font-family: var(--font-geist-mono), monospace;
  font-size: 6px;
  font-weight: 800;
  backdrop-filter: blur(6px);
}
.automation-root {
  min-height: 100dvh;
  background: #090b0e;
  color: #eef0f2;
}
.automation-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  height: 62px;
  padding: 0 24px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  background: rgba(9, 11, 14, .9);
  backdrop-filter: blur(18px);
}
.automation-back, .automation-actions button {
  display: flex;
  width: max-content;
  height: 32px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 7px;
  background: #12151a;
  color: #8d949e;
  font-size: 8px;
  font-weight: 700;
}
.automation-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  letter-spacing: .14em;
}
.automation-title .donefeed-logo-mark {
  width: 25px;
  height: 25px;
}
.automation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.automation-actions button.primary, .automation-card-heading button.primary {
  border-color: rgba(169, 154, 255, .25);
  background: #ebe9ff;
  color: #161221;
}
.automation-actions button:disabled, .automation-card-heading button:disabled {
  opacity: .45;
}
.automation-shell {
  display: grid;
  min-height: calc(100dvh - 62px);
  grid-template-columns: 205px minmax(0, 1fr);
}
.automation-sidebar {
  position: sticky;
  top: 62px;
  display: flex;
  height: calc(100dvh - 62px);
  padding: 20px 12px;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid rgba(255, 255, 255, .05);
  background: #0c0e12;
}
.automation-profile-heading {
  display: flex;
  margin: 0 6px 8px;
  align-items: center;
  justify-content: space-between;
}
.automation-profile-heading span {
  color: #d8dbe0;
  font-size: 8px;
  font-weight: 750;
}
.automation-profile-heading small {
  color: #515861;
  font-size: 6px;
}
.automation-sidebar > button {
  display: grid;
  min-height: 48px;
  padding: 7px;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #717984;
  text-align: left;
}
.automation-sidebar > button.active {
  border-color: rgba(169, 154, 255, .15);
  background: rgba(126, 101, 222, .09);
  color: #e8e5fa;
}
.automation-sidebar > button > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #2b3038, #13161b);
  color: #c9cdd3;
  font-size: 9px;
  font-weight: 800;
}
.automation-sidebar > button > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.automation-sidebar > button strong {
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-sidebar > button small {
  overflow: hidden;
  color: #59616b;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-sidebar > button em {
  color: #787f89;
  font-family: var(--font-geist-mono), monospace;
  font-size: 6px;
  font-style: normal;
}
.automation-sidebar > button.add-profile {
  min-height: 35px;
  margin-top: 4px;
  grid-template-columns: 1fr;
  place-items: center;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .07);
  color: #555d67;
  text-align: center;
}
.automation-main {
  min-width: 0;
  padding: 32px clamp(20px, 3.5vw, 56px) 70px;
}
.automation-hero {
  display: flex;
  max-width: 1220px;
  margin: 0 auto 22px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}
.automation-hero > div:first-child {
  max-width: 650px;
}
.automation-eyebrow {
  display: flex;
  margin-bottom: 9px;
  align-items: center;
  gap: 5px;
  color: #a99aff;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.automation-hero h1 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 45px);
  letter-spacing: -.05em;
  line-height: 1;
}
.automation-hero p {
  max-width: 610px;
  margin: 12px 0 0;
  color: #727984;
  font-size: 10px;
  line-height: 1.55;
}
.automation-date {
  display: flex;
  min-width: 188px;
  height: 48px;
  padding: 0 12px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 9px;
  background: #111419;
  color: #777f89;
}
.automation-date label {
  display: grid;
  flex: 1;
  gap: 2px;
}
.automation-date label span {
  color: #555d67;
  font-size: 6px;
}
.automation-date input {
  padding: 0;
  border: 0;
  background: transparent;
  color: #d9dce1;
  font-size: 8px;
  outline: 0;
  color-scheme: dark;
}
.automation-metrics {
  display: grid;
  max-width: 1220px;
  margin: 0 auto 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.automation-metrics article {
  display: grid;
  min-height: 92px;
  padding: 13px;
  align-content: space-between;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  background: #101318;
}
.automation-metrics article > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6f7781;
  font-size: 7px;
}
.automation-metrics article > strong {
  color: #f0f1f2;
  font-family: var(--font-geist-mono), monospace;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -.05em;
}
.automation-metrics article > strong small {
  color: #7b828b;
  font-size: 8px;
  font-weight: 500;
}
.automation-metrics article > em {
  color: #565e68;
  font-size: 6px;
  font-style: normal;
}
.automation-message {
  display: flex;
  max-width: 1220px;
  min-height: 34px;
  margin: 0 auto 12px;
  padding: 0 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(169, 154, 255, .14);
  border-radius: 8px;
  background: rgba(126, 101, 222, .07);
  color: #bcb4e8;
  font-size: 7px;
}
.automation-message button {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #69617e;
}
.automation-grid {
  display: grid;
  max-width: 1220px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start;
  gap: 10px;
}
.automation-queue-card, .automation-controls-card, .trend-strip {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 11px;
  background: #101318;
}
.automation-card-heading {
  display: flex;
  min-height: 66px;
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.automation-card-heading > div:first-child {
  display: grid;
  gap: 4px;
}
.automation-card-heading span {
  color: #5d6570;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.automation-card-heading h2 {
  margin: 0;
  color: #dfe2e6;
  font-size: 12px;
}
.automation-card-heading > div:last-child {
  display: flex;
  gap: 5px;
}
.automation-card-heading button {
  display: flex;
  height: 29px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px;
  background: #15191e;
  color: #747c86;
  font-size: 7px;
  font-weight: 700;
}
.automation-queue {
  min-height: 420px;
}
.automation-queue > article {
  position: relative;
  display: grid;
  min-height: 72px;
  padding: 8px 11px;
  grid-template-columns: 7px 50px minmax(190px, 1fr) 70px 72px 52px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.automation-queue > article > em {
  position: absolute;
  right: 6px;
  bottom: 3px;
  color: #252a31;
  font-family: var(--font-geist-mono), monospace;
  font-size: 6px;
  font-style: normal;
}
.pillar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #818892;
  box-shadow: 0 0 0 3px rgba(129, 136, 146, .07);
}
.pillar-dot.hero {
  background: #ff9b75;
  box-shadow: 0 0 0 3px rgba(255, 155, 117, .08);
}
.pillar-dot.hub {
  background: #a99aff;
  box-shadow: 0 0 0 3px rgba(169, 154, 255, .08);
}
.pillar-dot.hygiene {
  background: #75c9a1;
  box-shadow: 0 0 0 3px rgba(117, 201, 161, .08);
}
.automation-queue time {
  color: #737b85;
  font-family: var(--font-geist-mono), monospace;
  font-size: 6px;
}
.queue-topic {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.queue-topic > span {
  color: #8e84c4;
  font-size: 5px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.queue-topic > strong {
  overflow: hidden;
  color: #dce0e4;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-topic > small, .queue-cost > small {
  color: #4f5761;
  font-size: 6px;
}
.queue-cost {
  display: grid;
  gap: 2px;
}
.queue-cost > span {
  color: #555d67;
  font-size: 5px;
  text-transform: uppercase;
}
.queue-cost > strong {
  color: #b9bec5;
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
}
.queue-status {
  display: flex;
  width: max-content;
  max-width: 70px;
  min-height: 21px;
  padding: 0 7px;
  align-items: center;
  gap: 4px;
  border-radius: 99px;
  background: #171b20;
  color: #747b84;
  font-size: 5px;
  font-weight: 750;
  text-transform: uppercase;
}
.queue-status.status-ready {
  background: rgba(117, 201, 161, .09);
  color: #82c4a4;
}
.queue-status.status-generating {
  background: rgba(169, 154, 255, .09);
  color: #a99aff;
}
.queue-status.status-failed {
  background: rgba(255, 117, 134, .08);
  color: #d7818d;
}
.queue-open {
  display: flex;
  height: 27px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px;
  background: #15191e;
  color: #9097a0;
  font-size: 6px;
  font-weight: 700;
}
.automation-empty {
  display: grid;
  min-height: 420px;
  padding: 50px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #4f5761;
  text-align: center;
}
.automation-empty strong {
  color: #9aa1aa;
  font-size: 10px;
}
.automation-empty span {
  max-width: 300px;
  color: #59616b;
  font-size: 7px;
  line-height: 1.45;
}
.automation-empty button {
  height: 30px;
  margin-top: 5px;
  padding: 0 11px;
  border: 1px solid rgba(169, 154, 255, .2);
  border-radius: 6px;
  background: rgba(126, 101, 222, .1);
  color: #bdb5eb;
  font-size: 7px;
  font-weight: 700;
}
.automation-controls-card {
  position: sticky;
  top: 74px;
}
.automation-form {
  display: grid;
  padding: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.automation-form label {
  display: grid;
  gap: 5px;
}
.automation-form label > span {
  color: #626a74;
  font-size: 6px;
  font-weight: 650;
}
.automation-form input, .automation-form select {
  width: 100%;
  height: 31px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px;
  background: #15191e;
  color: #bec3ca;
  font-size: 7px;
  outline: 0;
  color-scheme: dark;
}
.automation-form label.wide, .pillar-weights, .automation-form > button {
  grid-column: 1 / -1;
}
.pillar-weights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.automation-form > button {
  display: flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 7px;
  background: #171b20;
  color: #8b929c;
  font-size: 7px;
  font-weight: 750;
}
.automation-form > button.save-automation {
  border-color: rgba(169, 154, 255, .18);
  background: rgba(126, 101, 222, .09);
  color: #bdb5eb;
}
.automation-form > button.automation-enable {
  height: auto;
  min-height: 47px;
  padding: 8px 9px;
  justify-content: space-between;
  background: #13171c;
  text-align: left;
}
.automation-enable > span {
  display: grid;
  gap: 3px;
}
.automation-enable > span strong {
  color: #9299a2;
  font-size: 7px;
}
.automation-enable > span small {
  color: #555d67;
  font-size: 6px;
  font-weight: 500;
}
.automation-enable > em {
  display: grid;
  min-width: 29px;
  height: 21px;
  place-items: center;
  border-radius: 99px;
  background: #1d2229;
  color: #6c747e;
  font-size: 6px;
  font-style: normal;
}
.automation-form > button.automation-enable.active {
  border-color: rgba(117, 201, 161, .18);
  background: rgba(117, 201, 161, .055);
}
.automation-enable.active > span strong {
  color: #91c5aa;
}
.automation-enable.active > em {
  background: rgba(117, 201, 161, .12);
  color: #8fd3ad;
}
.cost-forecast-detail {
  display: grid;
  padding: 12px;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.cost-forecast-detail > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.cost-forecast-detail strong {
  color: #8e949d;
  font-size: 6px;
}
.cost-forecast-detail span {
  max-width: 160px;
  color: #686f78;
  font-size: 6px;
  line-height: 1.35;
  text-align: right;
}
.cost-forecast-detail p {
  margin: 2px 0 0;
  padding: 8px;
  border-radius: 6px;
  background: rgba(117, 201, 161, .05);
  color: #687b71;
  font-size: 6px;
  line-height: 1.45;
}
.trend-strip {
  display: grid;
  max-width: 1220px;
  margin: 10px auto 0;
  grid-template-columns: 170px minmax(0, 1fr);
}
.trend-strip > div:first-child {
  display: grid;
  padding: 13px;
  align-content: center;
  gap: 5px;
  border-right: 1px solid rgba(255, 255, 255, .05);
}
.trend-strip > div:first-child > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d4d7db;
  font-size: 8px;
  font-weight: 700;
}
.trend-strip > div:first-child small {
  color: #565e68;
  font-size: 6px;
}
.trend-strip > div:last-child {
  display: flex;
  padding: 9px;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.trend-strip article {
  display: flex;
  min-width: 205px;
  padding: 8px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 7px;
  background: #13171c;
}
.trend-strip article em {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 155, 117, .08);
  color: #dd987e;
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
  font-style: normal;
}
.trend-strip article > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.trend-strip article strong {
  overflow: hidden;
  max-width: 150px;
  color: #aeb3ba;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trend-strip article small {
  color: #4f5761;
  font-size: 5px;
}
.automation-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(2, 3, 5, .78);
  backdrop-filter: blur(12px);
}
.automation-modal > div {
  display: grid;
  width: min(720px, 95vw);
  height: min(780px, 88dvh);
  overflow: hidden;
  grid-template-rows: 48px minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: #0e1115;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .55);
}
.automation-modal header {
  display: flex;
  padding: 0 13px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.automation-modal header span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c9cdd2;
  font-size: 8px;
  font-weight: 700;
}
.automation-modal header button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #777f89;
}
.automation-modal iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #090a0c;
}
.automation-modal.profile-modal > div {
  width: min(430px, 94vw);
  height: auto;
  min-height: 370px;
}
.profile-modal section {
  display: grid;
  padding: 20px;
  gap: 12px;
}
.profile-modal section p {
  margin: 0 0 4px;
  color: #6d7580;
  font-size: 8px;
  line-height: 1.5;
}
.profile-modal section label {
  display: grid;
  gap: 5px;
}
.profile-modal section label span {
  color: #727a85;
  font-size: 7px;
  font-weight: 700;
}
.profile-modal section input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  background: #15191e;
  color: #d8dbe0;
  font-size: 9px;
  outline: 0;
}
.profile-modal section > button {
  display: flex;
  height: 37px;
  margin-top: 4px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(169, 154, 255, .22);
  border-radius: 7px;
  background: #ebe9ff;
  color: #161221;
  font-size: 8px;
  font-weight: 800;
}
@media (max-width: 900px) {
  .automation-shell {
    grid-template-columns: 1fr;
  }
  .automation-sidebar {
    position: static;
    height: auto;
    padding: 9px 12px;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
  }
  .automation-profile-heading {
    display: none;
  }
  .automation-sidebar > button {
    flex: 0 0 170px;
  }
  .automation-sidebar > button.add-profile {
    flex-basis: 90px;
  }
  .automation-grid {
    grid-template-columns: 1fr;
  }
  .automation-controls-card {
    position: static;
  }
}
@media (max-width: 700px) {
  .automation-topbar {
    height: 58px;
    padding: 0 12px;
    grid-template-columns: auto 1fr auto;
  }
  .automation-title {
    justify-self: center;
  }
  .automation-title strong, .automation-back {
    font-size: 0;
  }
  .automation-back {
    width: 31px;
    padding: 0;
  }
  .automation-back svg {
    width: 16px;
  }
  .automation-actions button:first-child {
    display: none;
  }
  .automation-actions button.primary {
    width: 34px;
    padding: 0;
    font-size: 0;
  }
  .automation-main {
    padding: 24px 12px 60px;
  }
  .automation-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .automation-hero h1 {
    font-size: 32px;
  }
  .automation-date {
    width: 100%;
  }
  .automation-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .automation-metrics article {
    min-height: 82px;
  }
  .automation-card-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .automation-card-heading > div:last-child {
    width: 100%;
  }
  .automation-card-heading button {
    flex: 1;
  }
  .automation-queue > article {
    min-height: 92px;
    grid-template-columns: 7px 45px minmax(0, 1fr) 54px;
    grid-template-rows: 1fr auto;
  }
  .queue-topic {
    grid-column: 3 / 5;
  }
  .queue-cost {
    grid-column: 3;
  }
  .queue-status {
    grid-column: 4;
    grid-row: 2;
  }
  .queue-open {
    display: none;
  }
  .trend-strip {
    grid-template-columns: 1fr;
  }
  .trend-strip > div:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
  }
  .automation-modal {
    padding: 8px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.landing-root, .pricing-page {
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #08090b;
  color: #f5f6f7;
}
.landing-root {
  scroll-behavior: smooth;
}
.landing-nav {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  height: 66px;
  padding: 0 max(22px, calc((100vw - 1240px) / 2));
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(8,9,11,.86);
  backdrop-filter: blur(22px);
}
.landing-logo {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  color: #f5f6f7;
  text-decoration: none;
}
.landing-logo strong {
  font-family: var(--font-condensed), sans-serif;
  font-size: 17px;
  letter-spacing: .12em;
}
.landing-nav nav {
  display: flex;
  align-items: center;
  gap: 27px;
}
.landing-nav nav a {
  color: #8d939b;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .landing-nav nav a:hover {
    color: #fff;
  }
}
.landing-nav > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.landing-nav button {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}
.landing-login {
  border: 0;
  background: transparent;
  color: #a5aab1;
}
.landing-cta {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #f5f5f6;
  background: #f5f5f6;
  color: #111317;
}
.landing-hero {
  position: relative;
  display: grid;
  min-height: 720px;
  padding: 84px max(24px, calc((100vw - 1240px) / 2)) 96px;
  grid-template-columns: minmax(0, .9fr) minmax(540px, 1.1fr);
  align-items: center;
  gap: 70px;
  overflow: hidden;
}
.landing-hero::before {
  position: absolute;
  z-index: 0;
  top: -330px;
  left: 31%;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,99,255,.17), rgba(41,54,78,.08) 43%, transparent 70%);
  content: "";
  pointer-events: none;
}
.landing-hero-copy, .landing-product-stage {
  position: relative;
  z-index: 1;
}
.landing-pill {
  display: inline-flex;
  height: 29px;
  padding: 0 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #9ba1aa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.landing-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9f8cff;
  box-shadow: 0 0 0 4px rgba(159,140,255,.1);
}
.landing-hero h1 {
  margin: 24px 0 20px;
  font-size: clamp(56px, 5.5vw, 82px);
  font-weight: 640;
  letter-spacing: -.065em;
  line-height: .93;
}
.landing-hero h1 em {
  color: #9585ff;
  font-style: normal;
}
.landing-hero-copy > p {
  max-width: 590px;
  margin: 0;
  color: #90969f;
  font-size: 15px;
  line-height: 1.65;
}
.landing-prompt-card {
  width: min(610px, 100%);
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 17px;
  background: #15181d;
  box-shadow: 0 22px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(145,127,255,.03);
}
.landing-prompt-card:focus-within {
  border-color: rgba(174,161,255,.48);
  box-shadow: 0 22px 70px rgba(0,0,0,.4), 0 0 0 3px rgba(145,127,255,.08);
}
.landing-prompt-card textarea {
  display: block;
  width: 100%;
  height: 105px;
  padding: 19px 20px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f1f2f4;
  font-size: 14px;
  line-height: 1.45;
}
.landing-prompt-card > div {
  display: flex;
  min-height: 50px;
  padding: 7px 8px 7px 14px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.landing-prompt-card > div > span {
  display: flex;
  height: 29px;
  padding: 0 9px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 8px;
  color: #9299a2;
  font-size: 9px;
}
.landing-prompt-card > div > button {
  display: grid;
  width: 35px;
  height: 35px;
  margin-left: auto;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: #f2f2f3;
  color: #111317;
}
.landing-prompt-card > div > button:disabled {
  opacity: .32;
}
.landing-examples {
  display: flex;
  width: min(610px,100%);
  margin-top: 11px;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.landing-examples > span {
  color: #5c626b;
  font-size: 9px;
}
.landing-examples button {
  max-width: 190px;
  height: 27px;
  padding: 0 9px;
  overflow: hidden;
  flex: 0 1 auto;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: #6f757e;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-proof-line {
  display: flex;
  margin-top: 21px;
  flex-wrap: wrap;
  gap: 18px;
  color: #777e87;
  font-size: 9px;
}
.landing-proof-line span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.landing-proof-line svg {
  color: #79cca0;
}
.landing-inline-error {
  margin-top: 12px !important;
  color: #ff939f !important;
  font-size: 11px !important;
}
.landing-product-stage {
  min-width: 0;
  perspective: 1600px;
}
.landing-editor-window {
  width: 680px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: #101216;
  box-shadow: 0 45px 120px rgba(0,0,0,.65);
  transform: rotateY(-4deg) rotateX(1.5deg);
  transform-origin: center;
}
.landing-window-bar {
  display: grid;
  height: 43px;
  padding: 0 10px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #aeb3ba;
  font-size: 7px;
}
.landing-window-bar > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  letter-spacing: .09em;
}
.landing-window-bar > span i {
  width: 13px;
  height: 13px;
  border: 1px solid #d5d7da;
  border-radius: 4px;
}
.landing-window-bar > div {
  display: flex;
  padding: 3px;
  gap: 2px;
  border-radius: 7px;
  background: #1a1d22;
}
.landing-window-bar b,.landing-window-bar em {
  padding: 5px 8px;
  border-radius: 5px;
  font-style: normal;
}
.landing-window-bar b {
  background: #eff0f1;
  color: #15171b;
}
.landing-window-bar em {
  color: #626972;
}
.landing-window-bar button {
  display: flex;
  width: max-content;
  height: 25px;
  margin-left: auto;
  padding: 0 9px;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 6px;
  background: #f3f3f4;
  color: #111317;
  font-size: 7px;
  font-weight: 800;
}
.landing-editor-body {
  display: grid;
  height: 470px;
  grid-template-columns: minmax(0,1fr) 185px;
}
.landing-canvas-column {
  display: grid;
  min-width: 0;
  padding: 17px 25px 12px;
  grid-template-rows: minmax(0,1fr) 52px;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, #181c23, #0c0e11 65%);
}
.landing-slide-demo {
  position: relative;
  width: 270px;
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  background: #030405;
  box-shadow: 0 20px 55px rgba(0,0,0,.55);
}
.landing-demo-image {
  position: absolute;
  inset: 0 0 38%;
  background: linear-gradient(180deg, transparent 53%, #030405 98%), url("https://images.unsplash.com/photo-1530137073520-4ea6e2f10a48?auto=format&fit=crop&w=900&q=86") center/cover;
}
.landing-slide-demo > span {
  position: absolute;
  top: 6%;
  left: 7%;
  font-family: var(--font-serif),serif;
  font-size: 7px;
  letter-spacing: .08em;
}
.landing-slide-demo > div:not(.landing-demo-image) {
  position: absolute;
  right: 7%;
  bottom: 17%;
  left: 7%;
}
.landing-slide-demo small {
  font-size: 6px;
}
.landing-slide-demo h2 {
  margin: 8px 0;
  font-family: var(--font-serif),serif;
  font-size: 21px;
  line-height: .94;
  text-align: center;
}
.landing-slide-demo p {
  margin: 0;
  color: #c6c8cb;
  font-family: var(--font-serif),serif;
  font-size: 7px;
  line-height: 1.35;
  text-align: center;
}
.landing-slide-demo footer {
  position: absolute;
  right: 7%;
  bottom: 6%;
  left: 7%;
  display: flex;
  justify-content: space-between;
  font-size: 6px;
}
.landing-slide-demo footer b {
  font-weight: 500;
}
.landing-cursor {
  position: absolute;
  z-index: 3;
  top: 28%;
  right: 12%;
  display: flex;
  padding: 3px 5px 3px 3px;
  align-items: center;
  gap: 2px;
  border-radius: 5px;
  background: #9d8cff;
  color: #fff;
  font-size: 6px;
  font-style: normal;
  box-shadow: 0 5px 15px rgba(0,0,0,.35);
}
.landing-slide-strip {
  display: flex;
  align-items: end;
  gap: 6px;
}
.landing-slide-strip > span {
  position: relative;
  display: block;
  width: 31px;
  height: 39px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: linear-gradient(#4d6177 0 50%, #050608 65%);
  opacity: .55;
}
.landing-slide-strip > span.active {
  border-color: #fff;
  opacity: 1;
}
.landing-slide-strip b {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 5px;
}
.landing-layer-demo {
  padding: 15px 13px;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.07);
  background: #14171b;
}
.landing-layer-demo > div:first-child {
  display: grid;
  gap: 2px;
}
.landing-layer-demo small {
  color: #666d76;
  font-size: 6px;
  letter-spacing: .08em;
}
.landing-layer-demo strong {
  font-size: 9px;
}
.landing-layer-demo nav {
  display: grid;
  margin: 12px 0;
  padding: 3px;
  grid-template-columns: repeat(3,1fr);
  border-radius: 6px;
  background: #0e1013;
  color: #6e757e;
  font-size: 6px;
  text-align: center;
}
.landing-layer-demo nav > * {
  padding: 6px;
}
.landing-layer-demo nav b {
  border-radius: 4px;
  background: #262b31;
  color: #f2f3f4;
}
.landing-layer-demo label {
  display: grid;
  gap: 4px;
  color: #7b828c;
  font-size: 6px;
}
.landing-layer-demo textarea {
  height: 55px;
  padding: 7px;
  resize: none;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: #0f1215;
  color: #d9dcdf;
  font-size: 7px;
}
.landing-demo-control {
  display: flex;
  min-height: 32px;
  margin-top: 6px;
  padding: 6px 7px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  color: #777e87;
  font-size: 6px;
}
.landing-demo-control strong {
  color: #c9cdd1;
  font-size: 6px;
}
.landing-demo-control i {
  width: 70px;
  height: 2px;
  border-radius: 9px;
  background: linear-gradient(90deg,#9d8cff 68%,#333841 68%);
}
.landing-demo-images {
  display: grid;
  height: 50px;
  margin-top: 10px;
  grid-template-columns: repeat(3,1fr);
  gap: 4px;
}
.landing-demo-images span {
  border-radius: 5px;
  background: center/cover url("https://images.unsplash.com/photo-1566577739112-5180d4bf9390?auto=format&fit=crop&w=180&q=74");
}
.landing-demo-images span:nth-child(2) {
  background-image: url("https://images.unsplash.com/photo-1579952363873-27f3bade9f55?auto=format&fit=crop&w=180&q=74");
}
.landing-demo-images span:nth-child(3) {
  background-image: url("https://images.unsplash.com/photo-1461896836934-ffe607ba8211?auto=format&fit=crop&w=180&q=74");
}
.landing-layer-demo > button {
  display: flex;
  width: 100%;
  height: 30px;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 6px;
  background: #e8e6f3;
  color: #14151a;
  font-size: 7px;
  font-weight: 800;
}
.landing-floating-status {
  position: absolute;
  right: -17px;
  bottom: -27px;
  display: grid;
  width: 270px;
  min-height: 58px;
  padding: 10px 12px;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(21,24,29,.96);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(20px);
}
.landing-floating-status > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9d8cff;
  box-shadow: 0 0 0 5px rgba(157,140,255,.1);
  animation: generation-pulse 1.4s infinite;
}
.landing-floating-status span {
  display: grid;
  gap: 2px;
}
.landing-floating-status strong {
  font-size: 8px;
}
.landing-floating-status small {
  color: #6f7680;
  font-size: 6px;
}
.landing-floating-status b {
  color: #a99cff;
  font-family: var(--font-geist-mono),monospace;
  font-size: 8px;
}
.landing-output,.landing-feature-section,.landing-workflow,.landing-pricing {
  width: min(1180px,calc(100% - 48px));
  margin: 0 auto;
  padding: 110px 0;
}
.landing-output {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(600px,1.2fr);
  align-items: center;
  gap: 80px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.landing-output > div:first-child > span,.landing-section-heading > span,.pricing-page-hero > span {
  color: #8d7eff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.landing-output h2,.landing-section-heading h2,.pricing-page-hero h1 {
  margin: 13px 0 14px;
  font-size: clamp(34px,4.2vw,56px);
  letter-spacing: -.045em;
  line-height: 1;
}
.landing-output p,.landing-section-heading p,.pricing-page-hero p {
  margin: 0;
  color: #858b94;
  font-size: 13px;
  line-height: 1.65;
}
.landing-cadence-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.landing-cadence-grid article {
  display: grid;
  min-height: 175px;
  padding: 21px;
  align-content: space-between;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: #101216;
}
.landing-cadence-grid article.featured {
  border-color: rgba(157,140,255,.35);
  background: linear-gradient(155deg,rgba(157,140,255,.14),#111318 62%);
}
.landing-cadence-grid small {
  color: #70767f;
  font-size: 8px;
  text-transform: uppercase;
}
.landing-cadence-grid strong {
  font-size: 40px;
  letter-spacing: -.05em;
}
.landing-cadence-grid span {
  color: #858b94;
  font-size: 8px;
  line-height: 1.4;
}
.landing-section-heading {
  max-width: 740px;
  margin-bottom: 48px;
}
.landing-feature-section {
  border-top: 1px solid rgba(255,255,255,.08);
}
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.landing-feature-grid article {
  min-height: 220px;
  padding: 25px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.012));
}
.landing-feature-grid article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(157,140,255,.18);
  border-radius: 10px;
  background: rgba(157,140,255,.07);
  color: #aa9fff;
}
.landing-feature-grid svg {
  width: 18px;
}
.landing-feature-grid h3 {
  margin: 34px 0 10px;
  font-size: 17px;
}
.landing-feature-grid p {
  margin: 0;
  color: #7d848e;
  font-size: 10px;
  line-height: 1.65;
}
.landing-workflow {
  border-top: 1px solid rgba(255,255,255,.08);
}
.landing-workflow-steps {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items: center;
}
.landing-workflow-steps > article {
  position: relative;
  min-height: 230px;
  padding: 25px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: #101216;
}
.landing-workflow-steps > article > b {
  position: absolute;
  top: 18px;
  right: 18px;
  color: #3d424a;
  font-family: var(--font-geist-mono),monospace;
  font-size: 10px;
}
.landing-workflow-steps > article > span {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 10px;
  background: #22262d;
  color: #aaa0ef;
}
.landing-workflow-steps h3 {
  margin: 42px 0 10px;
  font-size: 17px;
}
.landing-workflow-steps p {
  margin: 0;
  color: #7c838d;
  font-size: 10px;
  line-height: 1.6;
}
.landing-workflow-steps > i {
  color: #454b54;
  text-align: center;
}
.landing-pricing {
  border-top: 1px solid rgba(255,255,255,.08);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.pricing-grid article {
  position: relative;
  min-height: 455px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: #111318;
}
.pricing-grid article.popular {
  border-color: rgba(157,140,255,.46);
  background: linear-gradient(160deg,rgba(157,140,255,.13),#111318 45%);
  box-shadow: 0 25px 80px rgba(37,27,95,.18);
}
.pricing-grid article > em {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(157,140,255,.14);
  color: #b7adff;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}
.pricing-grid article > span {
  color: #c9cbd0;
  font-size: 11px;
  font-weight: 750;
}
.pricing-grid h3 {
  margin: 24px 0 10px;
  font-size: 43px;
  letter-spacing: -.05em;
}
.pricing-grid h3 small {
  color: #747b84;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}
.pricing-grid article > p {
  min-height: 49px;
  margin: 0 0 25px;
  color: #7e858e;
  font-size: 10px;
  line-height: 1.55;
}
.pricing-grid article > button {
  display: flex;
  width: 100%;
  height: 41px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  background: #f2f2f3;
  color: #111317;
  font-size: 10px;
  font-weight: 800;
}
.pricing-grid article > button:disabled {
  opacity: .55;
}
.pricing-grid ul {
  display: grid;
  margin: 26px 0 0;
  padding: 0;
  gap: 13px;
  list-style: none;
}
.pricing-grid li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a1a6ad;
  font-size: 9px;
}
.pricing-grid li svg {
  color: #83d0a7;
}
.pricing-note {
  display: flex;
  margin: 19px auto 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #656c75;
  font-size: 8px;
}
.landing-final-cta {
  width: min(1180px,calc(100% - 48px));
  margin: 0 auto 100px;
  padding: 80px 30px;
  border: 1px solid rgba(157,140,255,.25);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 0,rgba(157,140,255,.18),transparent 65%),#101216;
  text-align: center;
}
.landing-final-cta > span {
  display: grid;
  width: 43px;
  height: 43px;
  margin: auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(157,140,255,.13);
  color: #aa9fff;
}
.landing-final-cta h2 {
  max-width: 700px;
  margin: 24px auto 13px;
  font-size: clamp(34px,4vw,52px);
  letter-spacing: -.045em;
  line-height: 1;
}
.landing-final-cta p {
  color: #858b94;
  font-size: 12px;
}
.landing-final-cta button {
  display: inline-flex;
  height: 42px;
  margin-top: 15px;
  padding: 0 17px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  background: #f4f4f5;
  color: #111317;
  font-size: 10px;
  font-weight: 800;
}
.landing-footer {
  display: grid;
  width: min(1180px,calc(100% - 48px));
  min-height: 100px;
  margin: auto;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.08);
}
.landing-footer > p {
  color: #656b74;
  font-size: 9px;
}
.landing-footer > div {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.landing-footer a,.landing-footer button {
  border: 0;
  background: transparent;
  color: #7f858e;
  font-size: 9px;
  text-decoration: none;
}
.auth-terms a,.pricing-note a {
  color: #a9a0d4;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .auth-terms a:hover,
.pricing-note a:hover {
    color: #e4e0ff;
  }
}
.legal-page {
  min-height: 100dvh;
  background: radial-gradient(circle at 72% -10%,rgba(190,55,133,.12),transparent 31%),#090b0e;
  color: #e9eaed;
}
.legal-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  width: min(980px,calc(100% - 40px));
  height: 68px;
  margin: auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(9,11,14,.82);
  backdrop-filter: blur(18px);
}
.legal-nav nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.legal-nav nav a {
  color: #8d929a;
  font-size: 12px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .legal-nav nav a:hover {
    color: #f1f2f4;
  }
}
.legal-document {
  width: min(760px,calc(100% - 40px));
  margin: 0 auto;
  padding: 84px 0 100px;
}
.legal-document > span {
  color: #cf78ad;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
}
.legal-document h1 {
  max-width: 680px;
  margin: 14px 0 20px;
  font-size: clamp(38px,7vw,68px);
  line-height: .98;
  letter-spacing: -.055em;
}
.legal-intro {
  max-width: 660px;
  margin: 0;
  color: #a4a9b0;
  font-size: 18px;
  line-height: 1.55;
}
.legal-updated {
  margin: 24px 0 62px;
  color: #5f6670;
  font-size: 12px;
}
.legal-document section {
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.legal-document section h2 {
  margin: 0 0 13px;
  font-size: 20px;
  letter-spacing: -.025em;
}
.legal-document section p {
  margin: 0 0 11px;
  color: #989ea6;
  font-size: 14px;
  line-height: 1.72;
}
.legal-document section p:last-child {
  margin-bottom: 0;
}
.legal-document > footer {
  display: flex;
  margin-top: 26px;
  padding-top: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #777e87;
  font-size: 12px;
}
.legal-document > footer p {
  margin: 0;
}
.legal-document > footer a {
  color: #b8abd9;
  text-decoration: none;
}
@media (max-width: 620px) {
  .legal-nav {
    width: calc(100% - 28px);
    height: 58px;
  }
  .legal-nav nav {
    gap: 12px;
  }
  .legal-nav nav a {
    font-size: 11px;
  }
  .legal-nav nav a:last-child {
    display: none;
  }
  .legal-document {
    width: calc(100% - 32px);
    padding: 56px 0 76px;
  }
  .legal-document h1 {
    font-size: 42px;
  }
  .legal-intro {
    font-size: 16px;
  }
  .legal-updated {
    margin-bottom: 44px;
  }
  .legal-document section p {
    font-size: 13px;
  }
  .legal-document > footer {
    align-items: flex-start;
    flex-direction: column;
  }
}
.auth-backdrop {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(3,4,6,.78);
  backdrop-filter: blur(15px);
}
.auth-modal {
  position: relative;
  width: min(430px,100%);
  padding: 32px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: #15181d;
  box-shadow: 0 40px 120px rgba(0,0,0,.65);
}
.auth-close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #777e87;
}
@media (hover: hover) and (pointer: fine) {
  .auth-close:hover {
    background: rgba(255,255,255,.05);
    color: #fff;
  }
}
.auth-brand {
  --donefeed-wordmark-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-brand .donefeed-logo-mark {
  width: 25px;
  height: 25px;
}
.auth-modal h2 {
  margin: 27px 0 8px;
  font-size: 27px;
  letter-spacing: -.035em;
}
.auth-modal > p {
  margin: 0 0 22px;
  color: #858c95;
  font-size: 11px;
  line-height: 1.5;
}
.auth-provider-stack {
  display: grid;
  margin-top: 9px;
  gap: 8px;
}
.auth-provider-button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 46px;
  padding: 0 44px;
  grid-template-columns: 1fr;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: #f7f7f8;
  color: #15171a;
  font-size: 13px !important;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .auth-provider-button:hover {
    transform: translateY(-1px);
    background: #fff;
    border-color: rgba(255,255,255,.32);
  }
}
.auth-provider-button:active {
  transform: translateY(0);
}
.auth-provider-button:disabled,.auth-provider-button[aria-disabled="true"] {
  opacity: .38;
  pointer-events: none;
  cursor: default;
}
.auth-provider-button .provider-icon {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
}
.provider-google .provider-icon {
  color: #4285f4;
}
.provider-meta .provider-icon {
  color: #0866ff;
}
.provider-apple {
  background: #000;
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .provider-apple:hover {
    background: #111;
  }
}
.provider-apple .provider-icon {
  width: 19px;
  height: 19px;
  color: #fff;
}
.auth-divider {
  display: flex;
  margin: 20px 0;
  align-items: center;
  gap: 10px;
  color: #626871;
  font-size: 7px;
  text-transform: uppercase;
}
.auth-divider::before,.auth-divider::after {
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.075);
  content: "";
}
.auth-field {
  display: grid;
  height: 44px;
  padding: 0 12px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
  background: #0f1115;
  color: #676e77;
}
.auth-field:focus-within {
  border-color: rgba(157,140,255,.48);
}
.auth-field input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f2f3f4;
  font-size: 11px;
}
.auth-submit {
  display: flex;
  width: 100%;
  height: 43px;
  margin-top: 9px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 9px;
  background: #f2f2f3;
  color: #111317;
  font-size: 10px;
  font-weight: 800;
}
.auth-submit:disabled {
  opacity: .38;
}
.auth-email {
  margin-top: 9px;
}
.auth-provider-loading {
  display: flex;
  min-height: 54px;
  margin-top: 9px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8d949d;
  font-size: 12px;
}
.auth-provider-recovery {
  display: grid;
  margin-top: 9px;
  padding: 13px;
  gap: 11px;
  border: 1px solid rgba(255,146,158,.22);
  border-radius: 10px;
  background: rgba(255,98,116,.08);
  color: #ffb0b9;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.auth-provider-recovery button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.auth-code input {
  display: block;
  width: 100%;
  height: 70px;
  border: 1px solid rgba(255,255,255,.13);
  outline: 0;
  border-radius: 11px;
  background: #0e1013;
  color: #fff;
  font-family: var(--font-geist-mono),monospace;
  font-size: 31px;
  letter-spacing: .24em;
  text-align: center;
}
.auth-code input:focus {
  border-color: rgba(157,140,255,.55);
}
.auth-back {
  display: block;
  min-height: 36px;
  margin: 10px auto 0;
  border: 0;
  background: transparent;
  color: #9299a2;
  font-size: 12px;
}
.auth-error {
  margin-top: 12px;
  padding: 10px 11px;
  border-radius: 8px;
  background: rgba(255,98,116,.08);
  color: #ff929e;
  font-size: 12px;
  line-height: 1.45;
}
.auth-terms {
  display: block;
  margin-top: 18px;
  color: #777e87;
  font-size: 11px;
  text-align: center;
}
.dashboard-account-wrap {
  position: relative;
}
.dashboard-account-menu {
  position: absolute;
  z-index: 200;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  width: 230px;
  padding: 6px;
  border: 1px solid var(--menu-border);
  border-radius: var(--menu-radius);
  background: var(--menu-surface);
  box-shadow: var(--menu-shadow);
  backdrop-filter: blur(18px) saturate(135%);
}
.dashboard-account-menu > div {
  display: grid;
  padding: 10px;
  gap: 3px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.dashboard-account-menu strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
}
.dashboard-account-menu span {
  overflow: hidden;
  color: #747b84;
  font-size: 8px;
  text-overflow: ellipsis;
}
.dashboard-account-menu button, .dashboard-account-menu > a {
  display: flex;
  min-height: var(--menu-item-height);
  padding: 0 10px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: var(--menu-item-radius);
  background: transparent;
  color: #cdd1d7;
  font-size: var(--menu-item-font);
  text-align: left;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .dashboard-account-menu button:hover,
.dashboard-account-menu > a:hover {
    background: rgba(255,255,255,.075);
    color: #fff;
  }
}
.dashboard-account-menu button:focus-visible, .dashboard-account-menu > a:focus-visible {
  background: rgba(255,255,255,.075);
  color: #fff;
}
.pricing-page {
  padding-bottom: 80px;
}
.pricing-page > header {
  display: grid;
  height: 66px;
  padding: 0 max(22px,calc((100vw - 1180px)/2));
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pricing-page > header > a,.pricing-page > header > button {
  display: flex;
  width: max-content;
  height: 34px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #b3b8bf;
  font-size: 9px;
  text-decoration: none;
}
.pricing-page > header > button {
  margin-left: auto;
}
.pricing-page-hero {
  max-width: 740px;
  margin: 90px auto 60px;
  padding: 0 24px;
  text-align: center;
}
.pricing-page-grid {
  width: min(1180px,calc(100% - 48px));
  margin: auto;
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.pricing-page-error {
  width: min(600px,calc(100% - 48px));
  margin: 18px auto;
  padding: 11px;
  border-radius: 8px;
  background: rgba(255,98,116,.08);
  color: #ff929e;
  font-size: 9px;
  text-align: center;
}
.pricing-alpha-access {
  display: flex;
  width: min(1180px,calc(100% - 48px));
  margin: -30px auto 22px;
  padding: 13px 16px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(111,213,159,.24);
  border-radius: 12px;
  background: rgba(62,175,119,.08);
  color: #8ce2b3;
}
.pricing-alpha-access > span {
  display: grid;
  gap: 2px;
}
.pricing-alpha-access strong {
  font-size: 10px;
}
.pricing-alpha-access small {
  color: #789d89;
  font-size: 8px;
}
.pricing-usage-addons {
  width: min(900px,calc(100% - 48px));
  margin: 44px auto 0;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(132,104,255,.1),rgba(255,255,255,.025));
  text-align: center;
}
.pricing-usage-dashboard {
  width: min(900px,calc(100% - 48px));
  margin: 0 auto 34px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(255,47,146,.08),rgba(139,92,246,.08) 48%,rgba(255,255,255,.025));
}
.pricing-usage-dashboard > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.pricing-usage-dashboard > header span {
  color: #ff83ba;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.pricing-usage-dashboard h2 {
  margin: 6px 0 0;
  font-size: 27px;
}
.pricing-usage-dashboard > header > strong {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 12px;
}
.pricing-usage-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}
.pricing-usage-bars article {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(8,9,12,.5);
}
.pricing-usage-bars article > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #d7d9df;
  font-size: 13px;
}
.pricing-usage-bars article > span em {
  color: #a99eff;
  font-style: normal;
  font-weight: 800;
}
.pricing-usage-bars article > i {
  display: block;
  height: 6px;
  margin: 11px 0 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.pricing-usage-bars article > i b {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg,#ff3b98,#8c6fff);
}
.pricing-usage-bars small {
  color: #8c929c;
  font-size: 11px;
}
.pricing-usage-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}
.pricing-usage-breakdown span {
  display: flex;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  color: #a9aeb8;
  font-size: 11px;
}
.pricing-usage-breakdown em {
  color: #f2f3f5;
  font-style: normal;
}
.pricing-usage-dashboard > p {
  margin: 14px 0 0;
  color: #8c929c;
  font-size: 12px;
}
.pricing-usage-addons > span {
  color: #a69aff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.pricing-usage-addons h2 {
  margin: 9px 0 7px;
  font-size: 28px;
}
.pricing-usage-addons p {
  margin: 0;
  color: #8e949c;
  font-size: 13px;
}
.pricing-usage-addons > div {
  display: grid;
  margin-top: 20px;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
}
.pricing-usage-addons button {
  display: flex;
  min-height: 52px;
  padding: 9px 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: #111318;
  color: #f4f5f7;
}
.pricing-usage-addons button span {
  color: #a69aff;
  font-weight: 800;
}
@media (min-width: 961px) {
  .studio-layout {
    grid-template-columns: minmax(0,1fr) 400px;
  }
  .editor-panel {
    font-size: 11px;
  }
  .panel-content {
    padding-inline: 17px;
  }
  .panel-header strong {
    font-size: 13px;
  }
  .section-title > span,.control-section > strong {
    font-size: 10px;
  }
  .layer-name strong {
    font-size: 9px;
  }
  .layer-name small {
    font-size: 7px;
  }
}
@media (max-width: 980px) {
  .landing-nav {
    grid-template-columns: 1fr auto;
  }
  .landing-nav nav {
    display: none;
  }
  .landing-hero {
    padding-top: 65px;
    grid-template-columns: 1fr;
  }
  .landing-hero-copy {
    max-width: 700px;
  }
  .landing-product-stage {
    width: min(760px,100%);
    margin: auto;
  }
  .landing-output {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .landing-feature-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .pricing-page-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 700px) {
  .landing-nav {
    height: 57px;
    padding: 0 14px;
  }
  .landing-nav .landing-login {
    display: none;
  }
  .landing-nav .landing-cta {
    height: 33px;
    padding: 0 10px;
    font-size: 9px;
  }
  .landing-hero {
    min-height: auto;
    padding: 54px 16px 72px;
    gap: 58px;
  }
  .landing-hero-copy {
    width: 100%;
    min-width: 0;
  }
  .landing-hero h1 {
    width: 100%;
    margin-top: 19px;
    font-size: 51px;
    overflow-wrap: normal;
  }
  .landing-hero h1 em {
    display: block;
    max-width: 100%;
  }
  .landing-hero-copy > p {
    font-size: 12px;
  }
  .landing-prompt-card {
    margin-top: 25px;
  }
  .landing-prompt-card textarea {
    height: 94px;
  }
  .landing-prompt-card > div > span:first-child {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .landing-examples button {
    min-width: 176px;
  }
  .landing-proof-line {
    gap: 10px;
  }
  .landing-editor-window {
    width: 620px;
    transform: translateX(-6%) scale(.92);
    transform-origin: left center;
  }
  .landing-product-stage {
    width: 100%;
  }
  .landing-floating-status {
    right: -5px;
    bottom: -16px;
  }
  .landing-output,.landing-feature-section,.landing-workflow,.landing-pricing {
    width: calc(100% - 30px);
    padding: 76px 0;
  }
  .landing-output h2,.landing-section-heading h2 {
    font-size: 36px;
  }
  .landing-cadence-grid {
    grid-template-columns: 1fr;
  }
  .landing-cadence-grid article {
    min-height: 130px;
  }
  .landing-feature-grid {
    grid-template-columns: 1fr;
  }
  .landing-feature-grid article {
    min-height: 195px;
  }
  .landing-workflow-steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .landing-workflow-steps > i {
    display: none;
  }
  .landing-workflow-steps > article {
    min-height: 190px;
  }
  .landing-workflow-steps h3 {
    margin-top: 30px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-grid article {
    min-height: 420px;
  }
  .landing-final-cta {
    width: calc(100% - 30px);
    margin-bottom: 60px;
    padding: 60px 18px;
  }
  .landing-footer {
    width: calc(100% - 30px);
    grid-template-columns: 1fr auto;
  }
  .landing-footer > p {
    display: none;
  }
  .auth-backdrop {
    padding: 0;
    align-items: end;
  }
  .auth-modal {
    width: 100%;
    padding: 27px 20px max(24px,env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }
  .pricing-page > header {
    padding: 0 12px;
  }
  .pricing-page > header .landing-logo strong {
    display: none;
  }
  .pricing-page-hero {
    margin: 60px auto 40px;
  }
  .pricing-page-hero h1 {
    font-size: 38px;
  }
  .pricing-page-grid {
    width: calc(100% - 30px);
    grid-template-columns: 1fr;
  }
  .pricing-usage-addons {
    width: calc(100% - 30px);
    padding: 20px 14px;
  }
  .pricing-usage-addons > div {
    grid-template-columns: 1fr 1fr;
  }
  .pricing-usage-dashboard {
    width: calc(100% - 30px);
    padding: 18px 14px;
  }
  .pricing-usage-bars {
    grid-template-columns: 1fr;
  }
  .pricing-usage-dashboard h2 {
    font-size: 23px;
  }
  .editor-panel {
    height: min(52dvh,470px);
    border-radius: 19px 19px 0 0;
  }
  .panel-header {
    min-height: 39px;
  }
  .panel-tabs {
    padding-top: 2px;
  }
  .panel-tabs button {
    height: 32px;
  }
  .panel-content {
    padding-top: 9px;
  }
  .sheet-handle {
    height: 20px;
  }
  .studio-root:has(.editor-panel.mobile-open) .canvas-stage {
    padding-bottom: 0;
    overflow-y: hidden;
  }
  .studio-root:has(.editor-panel.mobile-open) .focus-preview-stack {
    justify-content: flex-start;
    padding-top: 7px;
  }
  .studio-root:has(.editor-panel.mobile-open) .focus-header,
  .studio-root:has(.editor-panel.mobile-open) .carousel-workspace {
    width: min(64vw, calc((48dvh - 106px) * .8));
  }
  .studio-root:has(.editor-panel.mobile-open) .slide-picker {
    opacity: 0;
    pointer-events: none;
  }
  .dashboard-account-menu {
    position: fixed;
    top: 58px;
    right: 10px;
  }
  .selection-quick-actions {
    top: calc(100% + 10px);
    padding: 4px;
    border-radius: 11px;
  }
  .selection-quick-actions button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }
  .remote-cursor span {
    font-size: 8px;
  }
  .collaborator-avatars {
    display: none;
  }
  .collaboration-share {
    grid-template-columns: 1fr;
  }
  .collaboration-share > small {
    grid-column: 1;
  }
  .share-access-picker {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .share-access-picker label {
    min-width: 0;
  }
}
.media-empty {
  display: grid;
  min-height: 120px;
  padding: 20px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px dashed rgba(255, 255, 255, .09);
  border-radius: 10px;
  color: #555d67;
  text-align: center;
}
.media-empty strong {
  color: #9097a0;
  font-size: 10px;
}
.media-empty span {
  max-width: 230px;
  color: #5f6670;
  font-size: 8px;
  line-height: 1.45;
}
.ranked-media-grid article > div strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ranked-media-grid article > div strong em {
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(143, 211, 173, .1);
  color: #8fd3ad;
  font-family: var(--font-geist-mono), monospace;
  font-size: 6px;
  font-style: normal;
}
.ranked-media-grid article > div p {
  display: -webkit-box;
  margin: 2px 0 3px;
  overflow: hidden;
  color: #737b85;
  font-size: 7px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ai-messages > div > div {
  max-width: 88%;
  padding: 9px 10px;
  border-radius: 10px 10px 10px 3px;
  background: #232830;
  color: #c9cdd2;
  font-size: 9px;
  line-height: 1.45;
}
.ai-messages > div.user > div {
  margin-left: auto;
  border-radius: 10px 10px 3px;
  background: #e9ebed;
  color: #191b1f;
}
.ai-messages > div > div p {
  margin: 0;
}
@media (max-width: 900px) {
  html[data-theme] .shared-canvas-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  html[data-theme] .shared-artifact-column {
    max-width: 100%;
  }
  html[data-theme] .shared-nav {
    display: none;
  }
  html[data-theme] .shared-tap-zone {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    display: block;
    width: 42%;
    border: 0;
    padding: 0;
    background: transparent;
  }
  html[data-theme] .shared-tap-zone.previous {
    left: 0;
  }
  html[data-theme] .shared-tap-zone.next {
    right: 0;
  }
  html[data-theme] .shared-tap-zone:disabled {
    display: none;
  }
  html[data-theme] .shared-compact-dots {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: safe center;
    gap: 1px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html[data-theme] .shared-compact-dots::-webkit-scrollbar {
    display: none;
  }
  html[data-theme] .shared-compact-dots > button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
  }
  html[data-theme] .shared-compact-dots i {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--df-border-strong);
    transition: width 160ms ease, background-color 160ms ease;
  }
  html[data-theme] .shared-compact-dots > button.active i {
    width: 16px;
    background: var(--df-action-primary);
  }
}
@media (max-width: 700px) {
  .dashboard-topbar {
    height: 58px;
    padding: 0 14px;
  }
  .dashboard-header-actions {
    gap: 2px;
  }
  .dashboard-hero {
    min-height: 500px;
    padding: 70px 16px 48px;
  }
  .dashboard-hero h1 {
    font-size: 38px;
  }
  .dashboard-hero > p {
    max-width: 320px;
    margin: 13px 0 24px;
    font-size: 13px;
    line-height: 1.45;
  }
  .dashboard-prompt {
    min-height: 158px;
    border-radius: 19px;
  }
  .dashboard-prompt textarea {
    height: 100px;
    padding: 20px 18px 10px;
    font-size: 16px;
  }
  .prompt-footer {
    height: 58px;
    padding: 7px 8px 8px 10px;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .prompt-options {
    gap: 7px;
    overflow: hidden;
  }
  .prompt-shortcut {
    display: none;
  }
  .reference-attach {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .reference-attach span {
    display: none;
  }
  .slide-count-control {
    min-width: 0;
    flex: 0 1 auto;
  }
  .slide-count-control .menu-select-trigger {
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
  }
  .slide-count-control .menu-select-value {
    max-width: 132px;
  }
  .template-select-control {
    display: none;
  }
  .prompt-submit {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }
  .dashboard-template-picker {
    padding-inline: 9px;
  }
  .template-picker-heading > small {
    display: none;
  }
  .dashboard-template-strip {
    display: flex;
    margin-right: -9px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dashboard-template-card {
    flex: 0 0 104px;
  }
  .topic-desk {
    width: calc(100% + 2px);
    margin-top: 24px;
    padding: 12px;
    border-radius: 15px;
  }
  .topic-desk-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 11px;
  }
  .topic-desk-collapse > strong {
    font-size: 17px;
  }
  .topic-desk-heading form {
    width: 100%;
  }
  .topic-desk.collapsed .topic-desk-heading {
    flex-direction: row;
  }
  .topic-desk-meta small {
    display: none;
  }
  .topic-card-grid {
    display: flex;
    margin-right: -12px;
    padding-right: 12px;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .topic-card-grid::-webkit-scrollbar {
    display: none;
  }
  .topic-card {
    flex: 0 0 min(82vw,330px);
    min-height: 158px;
    scroll-snap-align: start;
  }
  .topic-card-actions button {
    min-width: 30px;
    padding-inline: 7px;
  }
  .topic-card-actions button:not(.topic-create) {
    font-size: 0;
  }
  .topic-card-actions button:not(.topic-create) svg {
    width: 14px;
    height: 14px;
  }
  .topic-load-more {
    height: 34px;
  }
  .project-progress-chip {
    top: 5px;
    right: 5px;
    height: 20px;
    padding-inline: 5px;
    font-size: 5px;
  }
  .project-job-controls {
    top: 5px;
    left: 5px;
  }
  .project-job-controls button {
    height: 20px;
    padding-inline: 6px;
    font-size: 5px;
  }
  .background-generation-status {
    right: 10px;
    bottom: max(10px,env(safe-area-inset-bottom));
    left: 10px;
    justify-content: center;
  }
  .global-generation-toast {
    right: 10px;
    bottom: max(58px,calc(env(safe-area-inset-bottom) + 52px));
    left: 10px;
    width: auto;
  }
  .generation-console-summary {
    width: calc(100% - 12px);
  }
  .generation-percent {
    font-size: 8px;
  }
  .generation-console-body {
    grid-template-columns: 1fr;
  }
  .generation-live-copy {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
  }
  .generation-events {
    display: flex;
    overflow-x: auto;
  }
  .generation-events li {
    flex: 0 0 145px;
  }
  .inline-text-toolbar {
    position: fixed;
    top: auto !important;
    bottom: 72px;
    left: 50% !important;
    transform: translateX(-50%);
  }
  .prompt-examples {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .prompt-examples > span {
    flex: 0 0 auto;
  }
  .prompt-examples button {
    flex: 0 0 190px;
  }
  .projects-section {
    width: 100%;
    padding: 23px 0 70px;
  }
  .projects-header {
    margin-right: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
  }
  .workspace-content-switcher {
    width: 100%;
    height: 52px;
    overflow: visible;
    order: -1;
  }
  .workspace-search-control, .workspace-search-trigger, .workspace-search-control input {
    height: 44px;
  }
  .workspace-search-control > button:not(.workspace-search-trigger) {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .workspace-content-switcher.searching {
    height: 52px;
    padding: 4px;
    overflow: hidden;
  }
  .workspace-content-switcher.searching .workspace-search-control {
    width: auto;
    height: 44px;
    flex: 1;
  }
  .projects-header .workspace-search-label {
    height: 44px;
    padding-inline: 10px;
    border-radius: 11px;
    font-size: 12px;
  }
  .workspace-search-control input {
    padding-inline: 9px 5px;
    font-size: 16px;
  }
  .workspace-view-switch {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .workspace-view-switch::-webkit-scrollbar {
    display: none;
  }
  .workspace-view-switch button {
    flex: 0 0 auto;
    height: 44px;
    padding-inline: 7px;
  }
  .workspace-theme-filter {
    flex: 0 1 180px;
  }
  .workspace-theme-filter .menu-select-trigger {
    height: 44px;
    border-radius: 12px;
  }
  .projects-header-actions {
    margin-left: auto;
    flex: 0 0 auto;
    gap: 4px !important;
  }
  .projects-header-actions > button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    flex: 0 0 44px;
    justify-content: center;
    gap: 0;
    border-radius: 12px;
    font-size: 0 !important;
  }
  .projects-header-actions > button svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
  }
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
  }
  .project-card {
    border-radius: 2px;
  }
  .project-card-shell.selected::after {
    border-radius: 2px;
  }
  .project-selection-check {
    top: 6px;
    left: 6px;
    width: 25px;
    height: 25px;
  }
  .trash-project-overlay {
    right: 7px;
    bottom: 7px;
    left: 7px;
    gap: 2px;
  }
  .trash-project-overlay strong {
    font-size: 8px;
  }
  .trash-project-overlay small {
    font-size: 8px;
  }
  .project-bulk-bar {
    right: 8px;
    bottom: max(8px,env(safe-area-inset-bottom));
    left: 8px;
    min-height: 52px;
    overflow-x: auto;
    transform: none;
  }
  .project-bulk-bar > span {
    margin-right: auto;
  }
  .project-bulk-bar button {
    min-height: 40px;
  }
  .project-trash-toast {
    right: 9px;
    bottom: max(9px,env(safe-area-inset-bottom));
    left: 9px;
  }
  .project-card-brand {
    top: 6%;
    left: 6%;
    font-size: 5px;
  }
  .project-card > strong {
    right: 6%;
    bottom: 16%;
    left: 6%;
    font-size: clamp(12px, 4vw, 17px);
    line-height: 0.98;
  }
  .project-card-meta {
    right: 6%;
    bottom: 6%;
    left: 6%;
    font-size: 7px;
  }
  .project-card-meta svg {
    width: 10px;
  }
  .new-project-card {
    gap: 5px;
  }
  .new-project-card > span {
    width: 34px;
    height: 34px;
  }
  .new-project-card > strong {
    font-size: 8px;
  }
  .new-project-card small {
    display: none;
  }
  .dashboard-back {
    display: none;
  }
  .share-button {
    display: none;
  }
  .share-button span {
    display: none;
  }
  html[data-theme] .shared-preview-header {
    min-height: 58px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 0 8px 0 10px;
  }
  html[data-theme] .shared-preview-brand > span:last-child,
  html[data-theme] .shared-preview-title {
    display: none;
  }
  html[data-theme] .shared-preview-brand > :first-child {
    display: grid !important;
    width: 30px;
    height: 30px;
  }
  html[data-theme] .shared-preview-actions {
    gap: 6px;
  }
  html[data-theme] .shared-preview-actions > button {
    min-height: 44px;
    padding: 0 10px;
  }
  html[data-theme] .shared-preview-actions > button.shared-copy-action {
    width: 44px;
    gap: 0;
    padding: 0;
  }
  html[data-theme] .shared-preview-actions > button.shared-copy-action > span {
    display: none;
  }
  html[data-theme] .shared-edit-access-banner {
    width: calc(100% - 20px);
    min-height: 58px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 8px;
  }
  html[data-theme] .shared-edit-access-banner > span {
    width: 34px;
    height: 34px;
  }
  html[data-theme] .shared-edit-access-banner small {
    max-width: 48vw;
  }
  html[data-theme] .shared-edit-access-banner > button {
    min-height: 44px;
    padding-inline: 10px;
  }
  html[data-theme] .shared-preview-workspace {
    padding: 7px 8px;
  }
  html[data-theme] .shared-preview-stage {
    grid-template-rows: 25px minmax(0, 1fr);
    gap: 4px;
  }
  html[data-theme] .shared-stage-meta,
  html[data-theme] .edit-link .shared-stage-meta {
    width: min(calc(100vw - 24px), calc((100dvh - 190px) * .8));
    max-width: none;
  }
  html[data-theme] .edit-link .shared-stage-meta {
    width: min(calc(100vw - 24px), calc((100dvh - 256px) * .8));
  }
  html[data-theme] .shared-stage-meta small {
    display: none;
  }
  html[data-theme] .shared-canvas-wrap {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  html[data-theme] .shared-swipe-frame,
  html[data-theme] .edit-link .shared-swipe-frame {
    width: min(calc(100vw - 24px), calc((100dvh - 190px) * .8));
    max-width: none;
    margin: auto;
    border-radius: 12px;
  }
  html[data-theme] .edit-link .shared-swipe-frame {
    width: min(calc(100vw - 24px), calc((100dvh - 256px) * .8));
  }
  html[data-theme] .shared-preview-footer {
    min-height: 88px;
    padding: 8px 7px;
  }
  html[data-theme] .shared-slide-strip {
    justify-content: flex-start;
    gap: 7px;
  }
  html[data-theme] .shared-slide-strip > button {
    width: 50px;
  }
  html[data-theme] .shared-request-toast {
    right: 10px;
    bottom: 98px;
    left: 10px;
    justify-content: center;
  }
}
.landing-root,
.pricing-page {
  height: 100dvh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: #050506;
  color: #fafafa;
  scrollbar-gutter: stable;
}
.landing-root {
  --ig-pink: #ff2f92;
  --ig-orange: #ff8a22;
  --ig-purple: #8b5cf6;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  isolation: isolate;
}
.landing-nav {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  height: 68px;
  padding: 0 max(24px, calc((100vw - 1320px) / 2));
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(5, 5, 6, .78);
  backdrop-filter: blur(24px) saturate(145%);
}
.landing-logo {
  gap: 10px;
}
.landing-logo strong {
  font-size: 17px;
  letter-spacing: .14em;
}
.landing-nav nav {
  gap: 29px;
}
.landing-nav nav a {
  position: relative;
  color: #999ba1;
  font-size: 11px;
  font-weight: 620;
}
.landing-nav nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ig-orange), var(--ig-pink), var(--ig-purple));
  content: "";
  opacity: 0;
  transform: scaleX(.4);
  transition: .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-nav nav a:hover {
    color: #fff;
  }
}
@media (hover: hover) and (pointer: fine) {
  .landing-nav nav a:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }
}
.landing-nav > div {
  gap: 7px;
}
.landing-nav button {
  height: 38px;
  padding: 0 15px;
  border-radius: 10px;
  font-size: 11px;
}
.landing-cta {
  border: 0;
  box-shadow: 0 8px 28px rgba(255, 255, 255, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 32px rgba(255, 255, 255, .13);
  }
}
.landing-hero {
  position: relative;
  display: grid;
  min-height: 850px;
  padding: 92px max(24px, calc((100vw - 1320px) / 2)) 120px;
  grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr);
  align-items: center;
  gap: clamp(58px, 6vw, 108px);
  overflow: hidden;
  isolation: isolate;
}
.landing-three-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  opacity: .58;
  pointer-events: none;
  mix-blend-mode: screen;
}
.landing-aurora {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.landing-aurora i {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .22;
}
.landing-aurora i:first-child {
  top: -330px;
  left: 33%;
  background: radial-gradient(circle, rgba(139, 92, 246, .78), rgba(255, 47, 146, .18) 46%, transparent 72%);
}
.landing-aurora i:last-child {
  right: -320px;
  bottom: -360px;
  background: radial-gradient(circle, rgba(255, 138, 34, .42), rgba(255, 47, 146, .12) 44%, transparent 72%);
}
.landing-hero-copy,
.landing-product-stage {
  position: relative;
  z-index: 1;
}
.landing-pill {
  height: 31px;
  padding: 0 11px;
  border-color: rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .04);
  color: #b1b2b7;
  font-size: 9px;
  letter-spacing: .07em;
}
.landing-pill i {
  background: linear-gradient(135deg, var(--ig-orange), var(--ig-pink), var(--ig-purple));
  box-shadow: 0 0 0 4px rgba(255, 47, 146, .1);
}
.landing-hero h1 {
  margin: 27px 0 23px;
  font-size: clamp(62px, 6.25vw, 94px);
  font-weight: 650;
  letter-spacing: -.07em;
  line-height: .89;
}
.landing-hero h1 span {
  display: inline-block;
}
.landing-hero h1 em {
  background: none;
  color: #ff8068;
  font-style: normal;
}
.landing-hero-copy > p {
  max-width: 620px;
  color: #a4a5aa;
  font-size: 16px;
  line-height: 1.65;
}
.landing-prompt-card {
  width: min(650px, 100%);
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  background: rgba(20, 20, 23, .94);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 47, 146, .025);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.landing-prompt-card:focus-within {
  border-color: rgba(255, 71, 151, .48);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 47, 146, .07);
  transform: translateY(-2px);
}
.landing-prompt-head {
  display: flex;
  padding: 15px 18px 0;
  align-items: center;
  gap: 11px;
}
.landing-prompt-card > .landing-prompt-head {
  min-height: auto;
  border-top: 0;
}
.landing-prompt-card > .landing-prompt-head > .landing-story-ring {
  width: 43px;
  height: 43px;
  padding: 2px;
  border: 0;
}
.landing-prompt-head > div {
  display: grid;
  gap: 2px;
}
.landing-prompt-head strong {
  font-size: 11px;
}
.landing-prompt-head small {
  color: #6e7077;
  font-size: 8px;
}
.landing-story-ring {
  display: grid;
  width: 43px;
  height: 43px;
  padding: 2px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #ffd65a, var(--ig-orange), var(--ig-pink), var(--ig-purple), #ffd65a);
}
.landing-story-ring > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 2px solid #111216;
  border-radius: inherit;
  background: #111216;
}
.landing-story-ring .donefeed-logo-mark {
  width: 33px;
  height: 33px;
}
.landing-story-ring.small {
  width: 38px;
  height: 38px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.landing-prompt-card textarea {
  height: 90px;
  padding: 17px 20px 14px;
  font-size: 15px;
}
.landing-prompt-footer {
  min-height: 56px !important;
  padding: 8px 9px 8px 15px !important;
}
.landing-prompt-footer > span {
  height: 31px !important;
  border-radius: 999px !important;
}
.landing-prompt-footer > button {
  display: flex !important;
  width: auto !important;
  min-width: 122px;
  height: 39px !important;
  padding: 0 13px;
  justify-content: center;
  gap: 7px;
  border-radius: 11px !important;
  background: #f7f7f8 !important;
  font-size: 9px;
  font-weight: 800;
}
.landing-examples {
  width: min(650px, 100%);
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.landing-examples::-webkit-scrollbar {
  display: none;
}
.landing-examples > span {
  flex: 0 0 auto;
  color: #6b6d73;
}
.landing-examples button {
  max-width: 210px;
  flex: 0 0 auto;
  color: #82848b;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-examples button:hover {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    color: #d7d7da;
  }
}
.landing-proof-line {
  margin-top: 22px;
  gap: 16px;
  color: #85878d;
}
.landing-proof-line svg {
  color: #73d29c;
}
.landing-product-stage {
  width: min(610px, 100%);
  min-width: 0;
  margin-left: auto;
  perspective: 1400px;
}
.landing-instagram-frame {
  width: min(520px, calc(100% - 28px));
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: rgba(13, 13, 15, .94);
  box-shadow: 0 42px 130px rgba(0, 0, 0, .62);
  transform: rotateY(-2.5deg);
  backdrop-filter: blur(18px);
}
.landing-instagram-bar {
  display: grid;
  min-height: 67px;
  padding: 10px 14px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.landing-instagram-bar > div {
  display: grid;
  gap: 2px;
}
.landing-instagram-bar strong {
  font-size: 10px;
}
.landing-instagram-bar small {
  color: #74767d;
  font-size: 7px;
}
.landing-post-stack {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #27252d, #0c0c0e 70%);
}
.landing-post-stack::after {
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(transparent, rgba(4, 4, 5, .64));
  content: "";
  pointer-events: none;
}
.landing-post-card {
  position: absolute;
  top: 29px;
  left: 50%;
  overflow: hidden;
  width: 67%;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 13px;
  background: #111;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .55);
  transform-origin: center;
}
.landing-post-card img {
  object-fit: cover;
}
.landing-post-card.post-1 {
  z-index: 1;
  left: -13%;
  opacity: .48;
  transform: rotate(-6deg) scale(.9);
}
.landing-post-card.post-2 {
  z-index: 3;
  transform: translateX(-50%);
}
.landing-post-card.post-3 {
  z-index: 2;
  left: 48%;
  opacity: .55;
  transform: rotate(6deg) scale(.9);
}
.landing-carousel-count {
  position: absolute;
  z-index: 5;
  top: 13px;
  right: 13px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.landing-instagram-actions {
  display: grid;
  min-height: 48px;
  padding: 0 14px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.landing-instagram-actions > span:first-child {
  display: flex;
  gap: 14px;
}
.landing-instagram-actions > svg {
  margin-left: auto;
}
.landing-instagram-actions svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.7;
}
.landing-carousel-dots {
  display: flex;
  gap: 4px;
}
.landing-carousel-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #44464d;
}
.landing-carousel-dots i.active {
  background: #4ca8ff;
}
.landing-instagram-caption {
  min-height: 52px;
  padding: 0 14px 14px;
  color: #d9dade;
  font-size: 8px;
  line-height: 1.55;
}
.landing-instagram-caption strong {
  margin-right: 4px;
}
.landing-instagram-caption span {
  color: #777980;
}
.landing-floating-status {
  right: -5px;
  bottom: 52px;
  width: 292px;
  min-height: 66px;
  border-radius: 16px;
  background: rgba(22, 22, 25, .94);
}
.landing-floating-status > i {
  background: linear-gradient(135deg, var(--ig-orange), var(--ig-pink), var(--ig-purple));
  box-shadow: 0 0 0 5px rgba(255, 47, 146, .1);
}
.landing-floating-status strong {
  font-size: 9px;
}
.landing-floating-status small {
  font-size: 7px;
}
.landing-floating-status b {
  color: #ee73ae;
  font-size: 7px;
  letter-spacing: .05em;
}
.landing-output,
.landing-feature-section,
.landing-workflow,
.landing-pricing {
  width: min(1220px, calc(100% - 48px));
  padding: 110px 0;
}
.landing-output,
.landing-feature-section,
.landing-workflow,
.landing-pricing {
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.landing-section-heading {
  max-width: 850px;
  margin-bottom: 52px;
}
.landing-section-heading > span,
.landing-output > .landing-section-heading > span {
  background: none;
  color: #ff8068;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
}
.landing-section-heading h2 {
  margin: 15px 0 16px;
  font-size: clamp(42px, 5.2vw, 70px);
  font-weight: 620;
  letter-spacing: -.057em;
  line-height: .96;
}
.landing-section-heading p {
  max-width: 760px;
  color: #92949a;
  font-size: 15px;
  line-height: 1.68;
}
.landing-output {
  display: block;
}
.landing-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.landing-outcome-grid article {
  display: grid;
  min-height: 245px;
  padding: 29px;
  grid-template-columns: 1fr;
  align-content: space-between;
  gap: 30px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-outcome-grid article:hover {
    border-color: rgba(255, 77, 155, .28);
    background: linear-gradient(145deg, rgba(255, 47, 146, .065), rgba(139, 92, 246, .025));
    transform: translateY(-4px);
  }
}
.landing-outcome-grid article > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 138, 34, .14), rgba(139, 92, 246, .13));
  color: #ff80b7;
}
.landing-outcome-grid article svg {
  width: 20px;
}
.landing-outcome-grid article > div {
  display: grid;
  gap: 9px;
}
.landing-outcome-grid strong {
  font-size: 22px;
  letter-spacing: -.025em;
}
.landing-outcome-grid p {
  margin: 0;
  color: #85878d;
  font-size: 12px;
  line-height: 1.6;
}
.landing-transformation {
  display: grid;
  margin-top: 66px;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
}
.landing-transformation > article {
  min-height: 250px;
  padding: 31px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 21px;
  background: #0e0e10;
}
.landing-transformation > article.after {
  border-color: rgba(255, 70, 153, .28);
  background: radial-gradient(circle at 100% 0, rgba(139, 92, 246, .15), transparent 48%), linear-gradient(145deg, rgba(255, 47, 146, .07), #0e0e10 65%);
}
.landing-transformation small {
  color: #6f7177;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.landing-transformation .after small {
  color: #e170ac;
}
.landing-transformation h3 {
  margin: 38px 0 13px;
  font-size: clamp(23px, 2.6vw, 35px);
  letter-spacing: -.04em;
  line-height: 1.08;
}
.landing-transformation p {
  margin: 0;
  color: #83858b;
  font-size: 11px;
  line-height: 1.62;
}
.landing-transformation > i {
  color: #54565d;
  text-align: center;
}
.landing-output-math {
  display: grid;
  margin-top: 10px;
  padding: 27px 30px;
  grid-template-columns: auto 50px auto 50px auto 1fr;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .022);
}
.landing-output-math > span {
  display: grid;
  min-width: 94px;
  gap: 3px;
}
.landing-output-math strong {
  font-size: 37px;
  letter-spacing: -.05em;
}
.landing-output-math small {
  color: #797b81;
  font-size: 8px;
}
.landing-output-math > i {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 138, 34, .2), rgba(255, 47, 146, .7), rgba(139, 92, 246, .2));
}
.landing-output-math p {
  margin: 0 0 0 14px;
  color: #777980;
  font-size: 9px;
  line-height: 1.55;
}
.landing-editor-window {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto 24px;
  border-radius: 22px;
  transform: none;
}
.landing-window-bar {
  height: 51px;
  padding: 0 14px;
  font-size: 8px;
}
.landing-window-bar > span i {
  border-radius: 5px;
}
.landing-window-bar button {
  height: 29px;
  padding-inline: 11px;
  font-size: 8px;
}
.landing-editor-body {
  height: 610px;
  grid-template-columns: minmax(0, 1fr) 275px;
}
.landing-canvas-column {
  padding: 26px 40px 18px;
  grid-template-rows: minmax(0, 1fr) 62px;
  background: radial-gradient(circle at 50% 40%, #22242b, #0c0d10 67%);
}
.landing-slide-demo {
  width: 350px;
  border-radius: 11px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .62);
}
.landing-slide-demo > img {
  object-fit: cover;
}
.landing-selection-outline {
  position: absolute;
  z-index: 3;
  inset: 5.5%;
  border: 1px solid rgba(117, 180, 255, .9);
  pointer-events: none;
}
.landing-selection-outline::before,
.landing-selection-outline::after {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid #1d2630;
  background: #fff;
  content: "";
}
.landing-selection-outline::before {
  top: -3px;
  left: -3px;
}
.landing-selection-outline::after {
  right: -3px;
  bottom: -3px;
}
.landing-cursor {
  top: 21%;
  right: 7%;
  background: linear-gradient(135deg, var(--ig-pink), var(--ig-purple));
  font-size: 7px;
}
.landing-slide-strip > span {
  width: 38px;
  height: 48px;
  background: linear-gradient(#52657a 0 55%, #07080a 72%);
}
.landing-layer-demo {
  padding: 20px 17px;
}
.landing-layer-demo small {
  font-size: 7px;
}
.landing-layer-demo strong {
  font-size: 10px;
}
.landing-layer-demo nav {
  margin: 15px 0;
  font-size: 7px;
}
.landing-layer-demo label {
  color: #777981;
  font-size: 7px;
}
.landing-layer-demo input {
  height: 38px;
  margin-top: 5px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  outline: 0;
  background: #0f1013;
  color: #d7d8dc;
  font-size: 8px;
}
.landing-demo-control {
  min-height: 39px;
  margin-top: 8px;
  padding: 8px 9px;
  font-size: 7px;
}
.landing-demo-control strong {
  font-size: 7px;
}
.landing-demo-control i {
  width: 92px;
  background: linear-gradient(90deg, #ff4e98 68%, #333841 68%);
}
.landing-demo-images {
  height: 74px;
  margin-top: 12px;
}
.landing-demo-images span {
  background-image: url("/reference-posts/recent-01.jpg");
  background-position: center;
}
.landing-demo-images span:nth-child(2) {
  background-image: url("/reference-posts/recent-03.jpg");
}
.landing-demo-images span:nth-child(3) {
  background-image: url("/reference-posts/recent-04.jpg");
}
.landing-layer-demo > button {
  height: 36px;
  margin-top: 12px;
  border-radius: 8px;
  font-size: 8px;
}
.landing-editor-generation {
  position: absolute;
  z-index: 5;
  right: 292px;
  bottom: 18px;
  display: grid;
  width: 294px;
  min-height: 61px;
  padding: 10px 12px;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 15px;
  background: rgba(22, 22, 25, .95);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .48);
  backdrop-filter: blur(18px);
}
.landing-editor-generation > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ig-orange), var(--ig-pink), var(--ig-purple));
  animation: generation-pulse 1.4s infinite;
}
.landing-editor-generation span {
  display: grid;
  gap: 2px;
}
.landing-editor-generation strong {
  font-size: 8px;
}
.landing-editor-generation small {
  color: #6f7178;
  font-size: 6px;
}
.landing-editor-generation b {
  color: #ed76ae;
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
}
.landing-feature-grid {
  margin-top: 14px;
  gap: 10px;
}
.landing-feature-grid article {
  min-height: 230px;
  padding: 26px;
  border-radius: 18px;
  transition: transform .25s ease, border-color .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-feature-grid article:hover {
    border-color: rgba(255, 255, 255, .17);
    transform: translateY(-4px);
  }
}
.landing-feature-grid article > span {
  border-color: rgba(255, 71, 153, .18);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 138, 34, .1), rgba(139, 92, 246, .1));
  color: #ff7caf;
}
.landing-feature-grid h3 {
  margin-top: 38px;
  font-size: 18px;
}
.landing-feature-grid p {
  color: #85878d;
  font-size: 12px;
}
.landing-workflow-steps {
  gap: 0;
}
.landing-workflow-steps > article {
  min-height: 245px;
  padding: 27px;
  border-radius: 18px;
}
.landing-workflow-steps > article > span {
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 138, 34, .11), rgba(139, 92, 246, .12));
  color: #ff80b7;
}
.landing-workflow-steps h3 {
  font-size: 18px;
}
.landing-workflow-steps p {
  font-size: 12px;
}
.pricing-grid {
  gap: 11px;
}
.pricing-grid article {
  border-radius: 19px;
}
.pricing-grid article.popular {
  border-color: rgba(255, 67, 151, .38);
  background: radial-gradient(circle at 100% 0, rgba(139, 92, 246, .16), transparent 47%), linear-gradient(160deg, rgba(255, 47, 146, .075), #111318 52%);
}
.pricing-grid article > em {
  background: rgba(255, 47, 146, .12);
  color: #ff8abd;
}
.landing-final-cta {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 77, 157, .28);
  background: radial-gradient(circle at 50% 0, rgba(255, 47, 146, .16), transparent 45%), radial-gradient(circle at 85% 80%, rgba(139, 92, 246, .16), transparent 40%), #0e0e10;
}
.landing-final-cta > .landing-story-ring {
  display: grid;
  width: 50px;
  height: 50px;
  padding: 2px;
  margin: auto;
  background: conic-gradient(from 210deg, #ffd65a, var(--ig-orange), var(--ig-pink), var(--ig-purple), #ffd65a);
}
.landing-final-cta h2 {
  max-width: 760px;
  font-size: clamp(40px, 5vw, 62px);
}
.landing-final-cta p {
  color: #92949a;
}
.landing-final-cta button {
  border-radius: 11px;
  transition: transform .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-final-cta button:hover {
    transform: translateY(-2px);
  }
}
.landing-footer {
  min-height: 110px;
}
.landing-footer > p {
  font-size: 9px;
}
@media (max-width: 1080px) {
  .landing-nav {
    grid-template-columns: 1fr auto;
  }
  .landing-nav nav {
    display: none;
  }
  .landing-hero {
    padding-top: 72px;
    grid-template-columns: 1fr;
    gap: 72px;
  }
  .landing-hero-copy {
    max-width: 820px;
  }
  .landing-product-stage {
    width: min(680px, 100%);
    margin: auto;
  }
  .landing-outcome-grid {
    grid-template-columns: 1fr;
  }
  .landing-output-math {
    grid-template-columns: auto 36px auto 36px auto;
  }
  .landing-output-math p {
    grid-column: 1 / -1;
    margin: 4px 0 0;
  }
  .landing-editor-body {
    grid-template-columns: minmax(0, 1fr) 245px;
  }
  .landing-editor-generation {
    right: 260px;
  }
}
@media (max-width: 700px) {
  .landing-root {
    scrollbar-gutter: auto;
  }
  .landing-nav {
    height: 58px;
    padding: 0 14px;
  }
  .landing-logo strong {
    font-size: 15px;
  }
  .landing-nav > div {
    justify-content: flex-end;
  }
  .landing-nav .landing-login {
    display: inline-flex;
    height: 34px;
    padding: 0 7px;
    font-size: 9px;
  }
  .landing-nav .landing-cta {
    height: 34px;
    padding: 0 10px;
    font-size: 9px;
  }
  .landing-hero {
    min-height: auto;
    padding: 58px 16px 78px;
    gap: 56px;
  }
  .landing-aurora i {
    width: 420px;
    height: 420px;
  }
  .landing-aurora i:first-child {
    top: -190px;
    left: 12%;
  }
  .landing-pill {
    max-width: 100%;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .landing-hero h1 {
    margin-top: 22px;
    font-size: clamp(48px, 15vw, 62px);
    line-height: .91;
  }
  .landing-hero-copy > p {
    font-size: 14px;
    line-height: 1.6;
  }
  .landing-prompt-card {
    margin-top: 28px;
    border-radius: 18px;
  }
  .landing-prompt-head {
    padding: 13px 14px 0;
  }
  .landing-prompt-card textarea {
    height: 86px;
    padding: 15px 15px 12px;
    font-size: 14px;
  }
  .landing-prompt-footer {
    padding-left: 9px !important;
    gap: 5px !important;
  }
  .landing-prompt-footer > span:nth-of-type(2) {
    display: none;
  }
  .landing-prompt-footer > span {
    max-width: 138px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .landing-prompt-footer > button {
    min-width: 112px;
    margin-left: auto;
    padding-inline: 10px;
  }
  .landing-examples {
    margin-right: -16px;
    width: calc(100% + 16px);
  }
  .landing-examples button {
    min-width: 180px;
  }
  .landing-proof-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .landing-product-stage {
    width: 100%;
  }
  .landing-instagram-frame {
    width: 100%;
    border-radius: 20px;
    transform: none;
  }
  .landing-post-stack {
    height: min(435px, 112vw);
  }
  .landing-post-card {
    top: 25px;
    width: 70%;
  }
  .landing-floating-status {
    right: -5px;
    bottom: 45px;
    width: min(282px, 86vw);
  }
  .landing-output,
  .landing-feature-section,
  .landing-workflow,
  .landing-pricing {
    width: calc(100% - 30px);
    padding: 76px 0;
  }
  .landing-section-heading {
    margin-bottom: 34px;
  }
  .landing-section-heading h2 {
    font-size: clamp(36px, 10.8vw, 40px);
  }
  .landing-section-heading p {
    font-size: 13px;
  }
  .landing-outcome-grid article {
    min-height: 164px;
    padding: 21px;
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .landing-outcome-grid article > span {
    width: 43px;
    height: 43px;
  }
  .landing-outcome-grid p {
    font-size: 12px;
  }
  .landing-transformation {
    margin-top: 42px;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .landing-transformation > i {
    transform: rotate(90deg);
  }
  .landing-transformation > article {
    min-height: 204px;
    padding: 24px;
  }
  .landing-transformation h3 {
    margin-top: 28px;
    font-size: 25px;
  }
  .landing-output-math {
    padding: 22px 17px;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 10px;
  }
  .landing-output-math > span {
    min-width: 0;
  }
  .landing-output-math strong {
    font-size: 30px;
  }
  .landing-output-math small {
    font-size: 9px;
  }
  .landing-output-math > i {
    width: 18px;
  }
  .landing-output-math p {
    font-size: 11px;
  }
  .landing-editor-window {
    width: 100%;
    border-radius: 16px;
  }
  .landing-window-bar {
    grid-template-columns: 1fr auto;
  }
  .landing-window-bar > div {
    display: none;
  }
  .landing-editor-body {
    height: 500px;
    grid-template-columns: 1fr;
  }
  .landing-canvas-column {
    padding: 20px 12px 13px;
  }
  .landing-slide-demo {
    width: min(310px, 76vw);
  }
  .landing-layer-demo {
    display: none;
  }
  .landing-editor-generation {
    right: 9px;
    bottom: 13px;
    width: min(280px, calc(100% - 18px));
  }
  .landing-feature-grid {
    grid-template-columns: 1fr;
  }
  .landing-feature-grid article {
    min-height: 188px;
  }
  .landing-feature-grid p {
    font-size: 12px;
  }
  .landing-workflow-steps {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .landing-workflow-steps > i {
    display: none;
  }
  .landing-workflow-steps > article {
    min-height: 190px;
  }
  .landing-workflow-steps p {
    font-size: 12px;
  }
  .pricing-grid {
    display: flex;
    width: calc(100% + 30px);
    margin-left: -15px;
    padding: 9px 15px 18px;
    gap: 10px;
    overflow-x: auto;
    scroll-padding-inline: 15px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pricing-grid::-webkit-scrollbar {
    display: none;
  }
  .pricing-grid article {
    min-height: 455px;
    flex: 0 0 min(315px, calc(100vw - 46px));
    scroll-snap-align: center;
  }
  .pricing-note {
    max-width: 310px;
    line-height: 1.5;
    text-align: center;
  }
  .landing-final-cta {
    width: calc(100% - 30px);
    margin-bottom: 60px;
    padding: 56px 18px;
  }
  .landing-final-cta h2 {
    font-size: clamp(36px, 10.5vw, 39px);
  }
  .landing-final-cta p {
    font-size: 13px;
    line-height: 1.55;
  }
  .landing-footer {
    width: calc(100% - 30px);
    grid-template-columns: 1fr auto;
  }
  .landing-footer > p,
  .landing-footer > div a:first-child {
    display: none;
  }
}
@media (max-width: 360px) {
  .landing-nav {
    padding-inline: 11px;
  }
  .landing-logo {
    gap: 7px;
  }
  .landing-logo strong {
    font-size: 13px;
  }
  .landing-nav .landing-login {
    padding-inline: 5px;
    font-size: 8px;
  }
  .landing-nav .landing-cta {
    padding-inline: 8px;
    font-size: 8px;
  }
  .landing-prompt-footer > span {
    max-width: 112px;
  }
  .landing-prompt-footer > button {
    min-width: 104px;
  }
}
@keyframes landing-gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes landing-light-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(5%, -4%, 0) scale(1.08);
  }
}
.landing-root {
  background: radial-gradient(circle at 78% 12%, rgba(73, 43, 118, .14), transparent 25%),
    linear-gradient(180deg, #060609 0%, #08070b 31%, #06070a 63%, #080609 100%);
}
.landing-root > .landing-hero,
.landing-root > .landing-output,
.landing-root > .landing-feature-section,
.landing-root > .landing-workflow,
.landing-root > .landing-pricing,
.landing-root > .landing-final-cta,
.landing-root > .landing-footer {
  position: relative;
  z-index: 1;
}
.landing-nav {
  box-shadow: 0 12px 45px rgba(0, 0, 0, .24);
}
.landing-scroll-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ig-orange), var(--ig-pink), var(--ig-purple));
  box-shadow: 0 0 18px rgba(255, 47, 146, .45);
  transform: scaleX(var(--landing-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}
.landing-nav nav a.active {
  color: #fff;
}
.landing-nav nav a.active::after {
  opacity: 1;
  transform: scaleX(1);
}
.landing-cta,
.landing-prompt-footer > button,
.pricing-grid article.popular > button,
.landing-final-cta button {
  overflow: hidden;
  border: 0 !important;
  background: linear-gradient(105deg, var(--ig-orange), var(--ig-pink) 46%, var(--ig-purple)) !important;
  background-size: 180% 180% !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(255, 47, 146, .2), inset 0 1px rgba(255, 255, 255, .24) !important;
  animation: landing-gradient-shift 8s ease infinite;
}
@media (hover: hover) and (pointer: fine) {
  .landing-cta:hover,
.landing-prompt-footer > button:hover,
.pricing-grid article.popular > button:hover,
.landing-final-cta button:hover {
    box-shadow: 0 14px 38px rgba(255, 47, 146, .34), inset 0 1px rgba(255, 255, 255, .3) !important;
    transform: translateY(-2px);
  }
}
.landing-cta:focus-visible,
.landing-prompt-footer > button:focus-visible,
.pricing-grid button:focus-visible,
.landing-final-cta button:focus-visible,
.landing-examples button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.landing-hero::after {
  position: absolute;
  z-index: 0;
  right: 5%;
  bottom: -26%;
  width: min(62vw, 920px);
  height: min(35vw, 520px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 47, 146, .13), rgba(139, 92, 246, .07) 42%, transparent 72%);
  filter: blur(34px);
  content: "";
  pointer-events: none;
}
.landing-three-canvas {
  opacity: .68;
}
.landing-aurora i {
  opacity: .28;
}
.landing-pill {
  border-color: rgba(255, 94, 166, .2);
  background: linear-gradient(90deg, rgba(255, 138, 34, .055), rgba(255, 47, 146, .075), rgba(139, 92, 246, .06));
}
.landing-prompt-card {
  position: relative;
  isolation: isolate;
  border-color: rgba(255, 83, 158, .23);
  background: radial-gradient(circle at 9% 0, rgba(255, 75, 151, .09), transparent 30%),
    linear-gradient(145deg, rgba(24, 22, 28, .98), rgba(16, 17, 22, .98));
  box-shadow: 0 30px 95px rgba(0, 0, 0, .48), 0 0 60px rgba(133, 72, 215, .07);
}
.landing-prompt-card::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 35%, rgba(255, 47, 146, .17), transparent 45%), radial-gradient(circle at 82% 75%, rgba(139, 92, 246, .13), transparent 42%);
  content: "";
  opacity: .22;
  transition: opacity .3s ease;
  pointer-events: none;
}
.landing-prompt-card > * {
  position: relative;
  z-index: 1;
}
.landing-prompt-card:focus-within::before {
  opacity: .55;
}
.landing-prompt-card:focus-within {
  border-color: rgba(255, 91, 166, .62);
  box-shadow: 0 32px 105px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 47, 146, .08), 0 0 70px rgba(139, 92, 246, .1);
}
.landing-prompt-footer {
  background: rgba(255, 255, 255, .018);
}
.landing-prompt-footer > button {
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.landing-prompt-footer > button:disabled {
  background: #32323a !important;
  color: #777982 !important;
  box-shadow: none !important;
  animation: none;
  opacity: .62;
}
@media (hover: hover) and (pointer: fine) {
  .landing-examples button:hover {
    border-color: rgba(255, 91, 166, .3);
    background: rgba(255, 47, 146, .065);
    color: #f0dce7;
  }
}
.landing-instagram-frame {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 45px 140px rgba(0, 0, 0, .64), 0 0 75px rgba(103, 71, 194, .1);
}
.landing-floating-status {
  border-color: rgba(255, 78, 157, .22);
  box-shadow: 0 20px 65px rgba(0, 0, 0, .48), 0 0 36px rgba(255, 47, 146, .1);
}
.landing-output,
.landing-feature-section,
.landing-workflow,
.landing-pricing {
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.landing-output::before,
.landing-feature-section::before,
.landing-workflow::before,
.landing-pricing::before {
  position: absolute;
  z-index: -1;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  filter: blur(34px);
  content: "";
  opacity: .16;
  animation: landing-light-drift 14s ease-in-out infinite;
  pointer-events: none;
}
.landing-output::before {
  top: 0;
  right: -26%;
  background: radial-gradient(circle, rgba(255, 102, 43, .8), rgba(255, 47, 146, .24) 42%, transparent 71%);
}
.landing-feature-section::before {
  top: 20%;
  left: -31%;
  background: radial-gradient(circle, rgba(73, 159, 255, .7), rgba(139, 92, 246, .3) 45%, transparent 72%);
  animation-delay: -4s;
}
.landing-workflow::before {
  top: 2%;
  right: -28%;
  background: radial-gradient(circle, rgba(255, 47, 146, .7), rgba(139, 92, 246, .27) 44%, transparent 72%);
  animation-delay: -7s;
}
.landing-pricing::before {
  top: 15%;
  left: 18%;
  background: radial-gradient(circle, rgba(139, 92, 246, .65), rgba(255, 47, 146, .18) 45%, transparent 72%);
  animation-delay: -10s;
}
.landing-section-heading p,
.landing-outcome-grid p,
.landing-transformation p,
.landing-feature-grid p,
.landing-workflow-steps p,
.pricing-grid article > p {
  color: #9a9ca4;
}
.landing-outcome-grid article,
.landing-feature-grid article,
.landing-workflow-steps > article,
.pricing-grid article {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(21, 21, 27, .96), rgba(11, 12, 16, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .028), 0 18px 55px rgba(0, 0, 0, .16);
}
.landing-outcome-grid article::before,
.landing-feature-grid article::before,
.landing-workflow-steps > article::before,
.pricing-grid article::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(340px circle at var(--spot-x, 18%) var(--spot-y, 0%), rgba(255, 91, 166, var(--spot-alpha, 0)), transparent 62%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent) top center / 74% 1px no-repeat;
  content: "";
  opacity: 1;
  transition: opacity .25s ease;
  pointer-events: none;
}
.landing-outcome-grid article > *,
.landing-feature-grid article > *,
.landing-workflow-steps > article > *,
.pricing-grid article > * {
  position: relative;
  z-index: 1;
}
.landing-outcome-grid article:nth-child(1) {
  background: radial-gradient(circle at 10% 0, rgba(255, 128, 35, .12), transparent 40%), linear-gradient(145deg, #151318, #0c0d11);
}
.landing-outcome-grid article:nth-child(2) {
  background: radial-gradient(circle at 10% 0, rgba(255, 47, 146, .13), transparent 40%), linear-gradient(145deg, #161117, #0c0d11);
}
.landing-outcome-grid article:nth-child(3) {
  background: radial-gradient(circle at 10% 0, rgba(139, 92, 246, .16), transparent 40%), linear-gradient(145deg, #14121a, #0c0d11);
}
.landing-outcome-grid article:nth-child(1) > span {
  color: #ffad50;
}
.landing-outcome-grid article:nth-child(2) > span {
  color: #ff6ba9;
}
.landing-outcome-grid article:nth-child(3) > span {
  color: #b99aff;
}
@media (hover: hover) and (pointer: fine) {
  .landing-outcome-grid article:hover {
    border-color: rgba(255, 98, 165, .34);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .25), 0 0 40px rgba(255, 47, 146, .06);
  }
}
.landing-transformation {
  position: relative;
}
.landing-transformation > i {
  color: #ff5ca4;
  filter: drop-shadow(0 0 12px rgba(255, 47, 146, .42));
}
.landing-transformation > article.after {
  border-color: rgba(255, 73, 156, .42);
  background: radial-gradient(circle at 90% 0, rgba(139, 92, 246, .24), transparent 50%), linear-gradient(145deg, rgba(255, 47, 146, .12), #101016 70%);
  box-shadow: 0 24px 80px rgba(64, 23, 92, .18);
}
.landing-output-math {
  border-color: rgba(255, 90, 162, .15);
  background: linear-gradient(90deg, rgba(255, 138, 34, .035), rgba(255, 47, 146, .04), rgba(139, 92, 246, .04));
}
.landing-output-math strong {
  background: none;
  color: #ff8068;
}
.landing-editor-window {
  border: 1px solid rgba(131, 111, 255, .19);
  box-shadow: 0 45px 125px rgba(0, 0, 0, .45), 0 0 85px rgba(76, 112, 255, .08), 0 0 60px rgba(255, 47, 146, .06);
}
.landing-canvas-column {
  background: radial-gradient(circle at 50% 34%, #2b3040, #11131a 46%, #090a0d 76%);
}
.landing-editor-generation {
  border-color: rgba(255, 83, 160, .24);
}
.landing-feature-grid article::after {
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(255, 255, 255, .055);
  font-size: 42px;
  font-weight: 750;
  letter-spacing: -.08em;
}
.landing-feature-grid article:nth-child(1)::after {
  content: "01";
}
.landing-feature-grid article:nth-child(2)::after {
  content: "02";
}
.landing-feature-grid article:nth-child(3)::after {
  content: "03";
}
.landing-feature-grid article:nth-child(1) {
  background: radial-gradient(circle at 0 0, rgba(255, 47, 146, .13), transparent 43%), linear-gradient(145deg, #151218, #0c0d11);
}
.landing-feature-grid article:nth-child(2) {
  background: radial-gradient(circle at 0 0, rgba(62, 146, 255, .14), transparent 43%), linear-gradient(145deg, #11151b, #0c0d11);
}
.landing-feature-grid article:nth-child(3) {
  background: radial-gradient(circle at 0 0, rgba(139, 92, 246, .16), transparent 43%), linear-gradient(145deg, #14121a, #0c0d11);
}
.landing-feature-grid article:nth-child(1) > span {
  color: #ff6da9;
}
.landing-feature-grid article:nth-child(2) > span {
  color: #72b6ff;
}
.landing-feature-grid article:nth-child(3) > span {
  color: #b99aff;
}
@media (hover: hover) and (pointer: fine) {
  .landing-feature-grid article:hover {
    border-color: rgba(255, 255, 255, .2);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .25), 0 0 40px rgba(111, 97, 255, .07);
  }
}
.landing-workflow-steps > article:nth-of-type(1) {
  background: radial-gradient(circle at 10% 0, rgba(255, 138, 34, .12), transparent 38%), linear-gradient(145deg, #151318, #0d0e12);
}
.landing-workflow-steps > article:nth-of-type(2) {
  background: radial-gradient(circle at 10% 0, rgba(255, 47, 146, .13), transparent 38%), linear-gradient(145deg, #151217, #0d0e12);
}
.landing-workflow-steps > article:nth-of-type(3) {
  background: radial-gradient(circle at 10% 0, rgba(139, 92, 246, .15), transparent 38%), linear-gradient(145deg, #14121a, #0d0e12);
}
.landing-workflow-steps > article > b {
  color: rgba(255, 255, 255, .18);
}
.landing-workflow-steps > i {
  color: #ff5ea5;
  filter: drop-shadow(0 0 10px rgba(255, 47, 146, .35));
}
.pricing-grid article {
  border-color: rgba(255, 255, 255, .1);
  background: linear-gradient(155deg, #15161c, #0f1014 62%);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pricing-grid article:hover {
    border-color: rgba(255, 255, 255, .18);
    transform: translateY(-5px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
  }
}
.pricing-grid article.popular {
  border-color: rgba(255, 69, 154, .52);
  background: radial-gradient(circle at 85% 0, rgba(139, 92, 246, .27), transparent 46%), radial-gradient(circle at 0 22%, rgba(255, 47, 146, .12), transparent 42%), linear-gradient(155deg, #19121c, #101116 60%);
  box-shadow: 0 28px 90px rgba(65, 22, 82, .24), 0 0 50px rgba(255, 47, 146, .08);
  transform: translateY(-8px);
}
@media (hover: hover) and (pointer: fine) {
  .pricing-grid article.popular:hover {
    transform: translateY(-12px);
  }
}
.pricing-grid article:not(.popular) > button {
  background: rgba(255, 255, 255, .92);
  transition: transform .2s ease, background .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pricing-grid article:not(.popular) > button:hover {
    background: #fff;
    transform: translateY(-2px);
  }
}
.pricing-grid article > em {
  border: 1px solid rgba(255, 101, 171, .25);
}
.landing-final-cta {
  border-color: rgba(255, 89, 164, .4);
  background: radial-gradient(circle at 18% 25%, rgba(255, 130, 34, .15), transparent 33%),
    radial-gradient(circle at 50% 0, rgba(255, 47, 146, .22), transparent 48%),
    radial-gradient(circle at 88% 76%, rgba(139, 92, 246, .25), transparent 42%),
    linear-gradient(145deg, #151117, #10111a 74%);
  box-shadow: 0 35px 110px rgba(0, 0, 0, .34), 0 0 70px rgba(130, 61, 176, .1);
}
.landing-final-cta::before {
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent, rgba(255, 47, 146, .09), transparent, rgba(139, 92, 246, .1), transparent);
  content: "";
  animation: landing-light-drift 12s ease-in-out infinite;
  pointer-events: none;
}
.landing-final-cta > * {
  position: relative;
  z-index: 1;
}
.landing-final-cta h2 {
  text-wrap: balance;
}
@media (max-width: 700px) {
  .landing-root {
    background: linear-gradient(180deg, #07070a, #08070b 40%, #06070a 100%);
  }
  .landing-nav {
    background: rgba(6, 6, 8, .88);
  }
  .landing-nav .landing-cta {
    box-shadow: 0 8px 25px rgba(255, 47, 146, .2) !important;
  }
  .landing-three-canvas {
    opacity: .58;
  }
  .landing-hero::after {
    right: -38%;
    bottom: 13%;
    width: 620px;
    height: 420px;
  }
  .landing-output::before,
  .landing-feature-section::before,
  .landing-workflow::before,
  .landing-pricing::before {
    width: 390px;
    height: 390px;
    opacity: .13;
  }
  .landing-output::before {
    right: -70%;
  }
  .landing-feature-section::before {
    left: -74%;
  }
  .landing-workflow::before {
    right: -72%;
  }
  .landing-pricing::before {
    left: -36%;
  }
  .pricing-grid article.popular {
    transform: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .pricing-grid article.popular:hover {
      transform: none;
    }
  }
  .landing-final-cta {
    padding-inline: 18px;
  }
}
.landing-hero {
  min-height: max(780px, calc(100svh - 68px));
  padding-top: clamp(72px, 8vh, 94px);
  padding-bottom: clamp(86px, 10vh, 118px);
}
.landing-hero-copy {
  max-width: 650px;
}
.landing-hero h1 {
  overflow: hidden;
}
.landing-prompt-card textarea::placeholder {
  color: #9698a0;
  opacity: 1;
}
.landing-prompt-footer > button:disabled {
  background: linear-gradient(105deg, var(--ig-orange), var(--ig-pink) 46%, var(--ig-purple)) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(255, 47, 146, .12) !important;
  opacity: .42;
}
.landing-product-stage {
  position: relative;
  display: grid;
  width: min(630px, 100%);
  padding: 20px 26px;
  align-self: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 38px;
  background: #111216;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 44px 140px rgba(0, 0, 0, .28), 0 0 90px rgba(104, 64, 190, .08);
  isolation: isolate;
}
.landing-product-stage::before {
  display: none;
}
.landing-stage-aura {
  position: absolute;
  z-index: -1;
  inset: -12%;
  overflow: hidden;
  border-radius: 44px;
  pointer-events: none;
}
.landing-stage-aura i {
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  filter: blur(58px);
  opacity: .22;
  animation: landing-stage-breathe 8s ease-in-out infinite;
}
.landing-stage-aura i:first-child {
  top: 7%;
  right: -9%;
  background: #397cff;
}
.landing-stage-aura i:last-child {
  bottom: -8%;
  left: -12%;
  background: #ff3596;
  animation-delay: -4s;
}
.landing-stage-header {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(500px, 100%);
  min-height: 24px;
  margin-inline: auto;
  padding-inline: 3px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
.landing-stage-header > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #dedee2;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.landing-stage-header > span svg {
  color: #ff5ca4;
  filter: drop-shadow(0 0 8px rgba(255, 47, 146, .5));
}
.landing-stage-header > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.landing-stage-header > div b {
  color: #767981;
  font-size: 7px;
  font-weight: 650;
}
.landing-stage-header > div i {
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, #ff6a96, #9174ff);
  opacity: .72;
}
.landing-instagram-frame {
  position: relative;
  z-index: 2;
  width: min(500px, 100%);
  margin-inline: auto;
  border-color: rgba(255, 255, 255, .2);
  background: rgba(11, 11, 14, .96);
  box-shadow: 0 48px 130px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .025), 0 0 70px rgba(65, 99, 206, .1);
  transform: none;
  transition: border-color .35s ease, box-shadow .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-product-stage:hover .landing-instagram-frame {
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 55px 145px rgba(0, 0, 0, .7), 0 0 85px rgba(106, 77, 210, .15);
    transform: none;
  }
}
.landing-instagram-bar {
  min-height: 54px;
  padding-block: 8px;
}
.landing-post-stack {
  height: 400px;
}
.landing-post-card {
  top: 6px;
  width: 62%;
  border-color: rgba(255, 255, 255, .22);
}
.landing-post-card.post-1 {
  left: -10%;
  opacity: .3;
  filter: saturate(.72) brightness(.75);
}
.landing-post-card.post-2 {
  box-shadow: 0 28px 82px rgba(0, 0, 0, .72), 0 0 0 1px rgba(255, 255, 255, .045);
}
.landing-post-card.post-3 {
  left: 48%;
  opacity: .34;
  filter: saturate(.78) brightness(.8);
}
.landing-instagram-actions {
  min-height: 42px;
}
.landing-instagram-caption {
  min-height: 38px;
  padding: 0 12px 10px;
}
.landing-stage-footer {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(500px, 100%);
  min-height: 50px;
  margin-inline: auto;
  padding: 8px 11px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 83, 158, .18);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 68, 151, .055), rgba(117, 92, 246, .055));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.landing-stage-footer > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.landing-stage-footer > span > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ig-orange), var(--ig-pink), var(--ig-purple));
  box-shadow: 0 0 0 5px rgba(255, 47, 146, .08);
}
.landing-stage-footer > span > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.landing-stage-footer strong {
  color: #e5e5e8;
  font-size: 9px;
}
.landing-stage-footer small {
  color: #767981;
  font-size: 7px;
}
.landing-stage-footer > b {
  display: flex;
  height: 28px;
  padding: 0 9px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 111, 174, .15);
  border-radius: 999px;
  background: rgba(255, 70, 154, .055);
  color: #ed82b5;
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
}
@keyframes landing-stage-breathe {
  0%, 100% {
    opacity: .16;
    transform: translate3d(0, 0, 0) scale(.95);
  }
  50% {
    opacity: .29;
    transform: translate3d(4%, -3%, 0) scale(1.08);
  }
}
@media (max-width: 1080px) {
  .landing-hero {
    min-height: auto;
    padding-top: 66px;
  }
  .landing-product-stage {
    width: min(690px, 100%);
    margin-inline: auto;
  }
}
@media (max-width: 700px) {
  .landing-hero {
    padding: 42px 16px 72px;
    gap: 38px;
  }
  .landing-hero h1 {
    width: 100%;
    margin: 20px 0 18px;
    font-size: clamp(46px, 13vw, 53px);
    letter-spacing: -.062em;
    line-height: .91;
  }
  .landing-hero h1 span {
    display: block;
    max-width: 100%;
  }
  .landing-hero h1 em {
    display: block;
    max-width: 100%;
  }
  .landing-hero-copy > p {
    max-width: 350px;
  }
  .landing-prompt-card {
    margin-top: 24px;
  }
  .landing-prompt-head small {
    font-size: 9px;
  }
  .landing-prompt-footer > button {
    font-size: 10px;
  }
  .landing-product-stage {
    width: 100%;
    padding: 14px 7px 10px;
    gap: 8px;
    border-radius: 28px;
  }
  .landing-stage-aura {
    inset: -6%;
    border-radius: 32px;
  }
  .landing-stage-header {
    min-height: 24px;
    padding-inline: 9px;
  }
  .landing-stage-header > span {
    font-size: 7px;
  }
  .landing-stage-header > div {
    gap: 5px;
  }
  .landing-stage-header > div b {
    font-size: 6px;
  }
  .landing-stage-header > div i {
    width: 8px;
  }
  .landing-instagram-frame {
    width: 100%;
    border-radius: 21px;
    transform: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .landing-product-stage:hover .landing-instagram-frame {
      transform: none;
    }
  }
  .landing-post-stack {
    height: min(350px, 94vw);
  }
  .landing-post-card {
    top: 6px;
    width: 74%;
  }
  .landing-stage-footer {
    width: 100%;
    min-height: 48px;
    padding-inline: 10px;
  }
}
@media (max-width: 380px) {
  .landing-hero h1 {
    font-size: clamp(43px, 12.7vw, 48px);
  }
  .landing-stage-header > div {
    display: none;
  }
  .landing-prompt-footer > button {
    min-width: 106px;
  }
}
.landing-root {
  background: #080a0d;
  color: #f5f7f8;
}
.landing-nav {
  height: 64px;
  border-bottom-color: rgba(255,255,255,.075);
  background: rgba(8,10,13,.9);
  box-shadow: none;
}
.landing-scroll-progress {
  height: 1px;
  background: #8da2b7;
  box-shadow: none;
}
.landing-nav nav a::after {
  background: #c8d4df;
}
.landing-cta,
.landing-prompt-footer > button,
.landing-final-cta button {
  background: #f3f5f6 !important;
  color: #11161b !important;
  box-shadow: none !important;
  animation: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .landing-cta:hover,
.landing-prompt-footer > button:hover,
.landing-final-cta button:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
  }
}
.landing-prompt-footer > button:disabled {
  background: #30363d !important;
  color: #858c94 !important;
  box-shadow: none !important;
  opacity: 1;
}
.landing-hero {
  display: flex;
  width: min(1180px, calc(100% - 48px));
  min-height: auto;
  margin: 0 auto;
  padding: clamp(70px,8vw,112px) 0 104px;
  align-items: center;
  gap: 0;
  flex-direction: column;
  overflow: visible;
  text-align: center;
}
.landing-hero::before,
.landing-hero::after {
  display: none;
}
.landing-hero-copy {
  width: min(820px,100%);
  max-width: none;
}
.landing-pill {
  height: 30px;
  padding: 0 11px;
  border-color: rgba(151,177,201,.18);
  background: rgba(132,157,180,.06);
  color: #9aa9b7;
  font-size: 9px;
  letter-spacing: .08em;
}
.landing-pill i {
  background: #83b49d;
  box-shadow: 0 0 0 4px rgba(131,180,157,.09);
}
.landing-hero h1 {
  margin: 25px 0 20px;
  overflow: visible;
  font-size: clamp(54px,6vw,82px);
  font-weight: 580;
  letter-spacing: -.065em;
  line-height: .96;
}
.landing-hero h1 span {
  display: block;
}
.landing-hero h1 span:last-child {
  color: #9facb8;
}
.landing-hero-copy > p {
  max-width: 680px;
  margin: 0 auto;
  color: #8f979f;
  font-size: 16px;
  line-height: 1.65;
}
.landing-prompt-wrap {
  width: min(820px,100%);
  margin-top: 36px;
}
.landing-prompt-card {
  width: 100%;
  margin: 0;
  border-color: rgba(255,255,255,.14);
  border-radius: 22px;
  background: #15191e;
  box-shadow: 0 30px 90px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.025);
  text-align: left;
  transform: none;
}
.landing-prompt-card::before {
  display: none;
}
.landing-prompt-card:focus-within {
  border-color: rgba(181,202,220,.36);
  box-shadow: 0 34px 100px rgba(0,0,0,.42), 0 0 0 4px rgba(137,166,191,.06);
  transform: translateY(-1px);
}
.landing-prompt-head {
  display: flex;
  min-height: 60px !important;
  padding: 14px 18px 0 !important;
  align-items: center;
  gap: 11px;
  border: 0 !important;
}
.landing-prompt-head .donefeed-logo-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}
.landing-prompt-head > div {
  display: grid;
  gap: 3px;
}
.landing-prompt-head strong {
  color: #eef1f3;
  font-size: 12px;
}
.landing-prompt-head small {
  color: #727b84;
  font-size: 10px;
}
.landing-prompt-card textarea {
  height: 104px;
  padding: 20px 22px 14px;
  color: #f4f6f7;
  font-size: 17px;
  line-height: 1.5;
}
.landing-prompt-card textarea::placeholder {
  color: #69727c;
}
.landing-prompt-footer {
  min-height: 62px !important;
  padding: 10px 11px 11px 15px !important;
  gap: 9px !important;
  border-top-color: rgba(255,255,255,.065) !important;
  background: rgba(255,255,255,.012);
}
.landing-prompt-footer > span {
  display: flex;
  height: 36px !important;
  padding: 0 10px !important;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 10px !important;
  color: #9ba4ad !important;
  font-size: 10px !important;
}
.landing-prompt-footer > button {
  display: flex !important;
  width: auto !important;
  min-width: 128px;
  height: 40px !important;
  margin-left: auto;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 11px !important;
  font-size: 11px !important;
  font-weight: 760;
}
.landing-examples {
  width: 100%;
  margin-top: 12px;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.landing-examples::-webkit-scrollbar {
  display: none;
}
.landing-examples > span {
  flex: 0 0 auto;
  color: #626b74;
  font-size: 10px;
}
.landing-examples button {
  max-width: 240px;
  flex: 0 0 auto;
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  color: #777f88;
  font-size: 9px;
}
@media (hover: hover) and (pointer: fine) {
  .landing-examples button:hover {
    border-color: rgba(173,197,216,.2);
    background: rgba(145,171,192,.05);
    color: #c8d0d7;
  }
}
.landing-demo-flow {
  display: grid;
  width: min(1040px,100%);
  margin-top: 58px;
  gap: 12px;
  text-align: left;
}
.landing-request-bubble {
  display: grid;
  width: min(620px,88%);
  min-height: 78px;
  margin-left: auto;
  padding: 16px 18px;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px 18px 5px 18px;
  background: #191e24;
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
}
.landing-request-bubble span {
  color: #7f8b96;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.landing-request-bubble p {
  margin: 0;
  color: #e4e8eb;
  font-size: 14px;
  line-height: 1.5;
}
.landing-result-status {
  display: flex;
  min-height: 50px;
  padding: 0 4px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.landing-result-status > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #aab4bd;
  font-size: 11px;
  font-weight: 700;
}
.landing-result-status > span svg {
  color: #83b49d;
}
.landing-result-status > div {
  display: flex;
  gap: 6px;
}
.landing-result-status b {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  color: #707982;
  font-size: 8px;
  font-weight: 650;
}
.landing-carousel-shell {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 24px;
  background: #101419;
  box-shadow: 0 34px 100px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.025);
}
.landing-carousel-shell > header {
  display: flex;
  min-height: 74px;
  padding: 16px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.landing-carousel-shell > header > div {
  display: grid;
  gap: 4px;
}
.landing-carousel-shell > header span {
  color: #7f91a2;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.landing-carousel-shell > header strong {
  color: #edf0f2;
  font-size: 16px;
  letter-spacing: -.015em;
}
.landing-carousel-shell > header p {
  margin: 0;
  color: #7d8791;
  font-family: var(--font-geist-mono),monospace;
  font-size: 10px;
}
.landing-carousel-viewport {
  overflow: hidden;
  outline: 0;
  background: #0c0f13;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.landing-carousel-viewport:active {
  cursor: grabbing;
}
.landing-carousel-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px #a8bdd0;
}
.landing-carousel-track {
  display: flex;
  transition: transform .42s cubic-bezier(.22,.8,.25,1);
}
.landing-carousel-track figure {
  display: grid;
  min-width: 100%;
  margin: 0;
  padding: 28px;
  grid-template-columns: minmax(300px,420px) minmax(0,1fr);
  align-items: center;
  gap: clamp(28px,5vw,70px);
}
.landing-carousel-art {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4/5;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: #050607;
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
}
.landing-carousel-art img {
  object-fit: cover;
  pointer-events: none;
}
.landing-carousel-track figcaption {
  display: grid;
  max-width: 360px;
  gap: 13px;
}
.landing-carousel-track figcaption span {
  color: #8197aa;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.landing-carousel-track figcaption strong {
  color: #f2f4f5;
  font-size: clamp(28px,3.6vw,45px);
  font-weight: 580;
  letter-spacing: -.045em;
  line-height: 1.03;
}
.landing-carousel-track figcaption small {
  color: #7b858e;
  font-size: 11px;
}
.landing-carousel-controls {
  display: grid;
  min-height: 66px;
  padding: 10px 18px;
  grid-template-columns: 40px auto 40px 1fr;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.landing-carousel-controls > button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #cbd2d8;
}
.landing-carousel-controls > button:disabled {
  color: #4d555d;
  opacity: .55;
}
.landing-carousel-controls > div {
  display: flex;
  align-items: center;
  gap: 2px;
}
.landing-carousel-controls > div button {
  position: relative;
  width: 27px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}
.landing-carousel-controls > div button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #48515a;
  content: "";
  transform: translate(-50%,-50%);
  transition: width .18s ease, background .18s ease;
}
.landing-carousel-controls > div button.active::after {
  width: 17px;
  border-radius: 99px;
  background: #9db0c0;
}
.landing-carousel-controls > span {
  justify-self: end;
  color: #606a73;
  font-size: 9px;
}
.landing-demo-share {
  display: flex;
  width: max-content;
  height: 29px;
  margin-left: auto;
  padding: 0 11px;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  background: #f3f3f4;
  color: #111317;
  font-size: 8px;
  font-weight: 800;
}
.landing-demo-input {
  display: flex;
  height: 38px;
  margin-top: 5px;
  padding: 0 9px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: #0f1013;
  color: #d7d8dc;
  font-size: 8px;
}
.landing-demo-button {
  display: flex;
  width: 100%;
  height: 36px;
  margin-top: 12px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
  background: #e8e6f3;
  color: #14151a;
  font-size: 8px;
  font-weight: 800;
}
.landing-proof-line {
  display: flex;
  width: min(900px,100%);
  margin-top: 24px;
  justify-content: center;
  gap: 24px;
  color: #78828b;
  font-size: 10px;
}
.landing-proof-line span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.landing-proof-line svg {
  color: #83b49d;
}
.landing-section-heading > span,
.landing-output > .landing-section-heading > span {
  background: none;
  color: #8799a9;
  -webkit-text-fill-color: currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .landing-outcome-grid article:hover,
.landing-feature-grid article:hover {
    border-color: rgba(151,177,201,.22);
  }
}
.landing-outcome-grid article:nth-child(n) > span,
.landing-feature-grid article > span,
.landing-workflow-steps > article > span {
  color: #91a9bd;
  background: rgba(132,158,181,.08);
}
.landing-transformation > i {
  color: #8fa5b8;
  filter: none;
}
.landing-transformation > article.after {
  border-color: rgba(145,169,190,.25);
  background: #12171c;
  box-shadow: none;
}
.landing-output-math strong {
  background: none;
  color: #d9e0e5;
  -webkit-text-fill-color: currentColor;
}
.pricing-grid article.popular {
  border-color: rgba(145,169,190,.3);
  background: #141a20;
  box-shadow: none;
}
.pricing-grid article > em {
  background: rgba(137,164,188,.1);
  color: #a9bdce;
}
.landing-final-cta {
  border-color: rgba(145,169,190,.24);
  background: #11161b;
}
.landing-final-cta::before {
  display: none;
}
@media (max-width: 700px) {
  .landing-nav {
    height: 58px;
  }
  .landing-nav .landing-login {
    display: inline-flex;
  }
  .landing-hero {
    width: 100%;
    padding: 40px 16px 72px;
  }
  .landing-pill {
    max-width: 100%;
    font-size: 8px;
  }
  .landing-hero h1 {
    margin: 20px 0 16px;
    font-size: clamp(42px,12.4vw,49px);
    line-height: .94;
  }
  .landing-hero-copy > p {
    max-width: 355px;
    font-size: 14px;
    line-height: 1.55;
  }
  .landing-prompt-wrap {
    margin-top: 26px;
  }
  .landing-prompt-card {
    border-radius: 19px;
  }
  .landing-prompt-head {
    min-height: 56px !important;
    padding: 12px 14px 0 !important;
  }
  .landing-prompt-head .donefeed-logo-mark {
    width: 36px;
    height: 36px;
  }
  .landing-prompt-card textarea {
    height: 88px;
    padding: 17px 16px 11px;
  }
  .landing-prompt-footer {
    min-height: 58px !important;
    padding: 8px 9px 9px !important;
  }
  .landing-prompt-footer > span:first-child {
    display: none;
  }
  .landing-prompt-footer > span {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .landing-prompt-footer > button {
    min-width: 116px;
  }
  .landing-examples {
    width: calc(100% + 16px);
    margin-right: -16px;
    justify-content: flex-start;
  }
  .landing-examples button {
    min-width: 190px;
  }
  .landing-demo-flow {
    margin-top: 38px;
    gap: 10px;
  }
  .landing-request-bubble {
    width: 92%;
    min-height: 72px;
    padding: 14px 15px;
    border-radius: 16px 16px 5px 16px;
  }
  .landing-request-bubble p {
    font-size: 13px;
  }
  .landing-result-status {
    min-height: 44px;
    padding-inline: 2px;
  }
  .landing-result-status > div b:nth-child(n+2) {
    display: none;
  }
  .landing-carousel-shell {
    border-radius: 18px;
  }
  .landing-carousel-shell > header {
    min-height: 68px;
    padding: 13px 14px;
  }
  .landing-carousel-shell > header strong {
    font-size: 14px;
  }
  .landing-carousel-track figure {
    padding: 14px;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .landing-carousel-art {
    width: min(100%,390px);
    margin: auto;
    border-radius: 11px;
  }
  .landing-carousel-track figcaption {
    gap: 8px;
    padding: 0 3px 6px;
  }
  .landing-carousel-track figcaption strong {
    font-size: 25px;
  }
  .landing-carousel-controls {
    min-height: 60px;
    padding: 7px 10px;
    grid-template-columns: 40px auto 40px;
    justify-content: space-between;
  }
  .landing-carousel-controls > span {
    display: none;
  }
  .landing-proof-line {
    margin-top: 19px;
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
}
@media (max-width: 360px) {
  .landing-nav .landing-login {
    display: none;
  }
  .landing-hero {
    padding-inline: 13px;
  }
  .landing-prompt-head small {
    display: none;
  }
  .landing-prompt-footer > span {
    max-width: 102px;
  }
  .landing-prompt-footer > button {
    min-width: 110px;
    padding-inline: 10px;
  }
}
.admin-root {
  min-height: 100dvh;
  height: 100dvh;
  overflow-y: auto;
  background: radial-gradient(circle at 50% -12%, rgba(126, 101, 222, .13), transparent 34rem), #090b0e;
  color: #eef0f2;
}
.admin-topbar {
  position: sticky;
  z-index: 40;
  top: 0;
  display: grid;
  height: 60px;
  padding: 0 22px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(10,12,15,.9);
  backdrop-filter: blur(20px);
}
.admin-topbar > a, .admin-topbar > button {
  display: flex;
  width: max-content;
  height: 31px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #9299a2;
  font-size: 8px;
  font-weight: 700;
  text-decoration: none;
}
.admin-topbar > button {
  margin-left: auto;
}
.admin-topbar > button:disabled {
  opacity: .5;
}
.admin-topbar > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-topbar > div .donefeed-logo-mark {
  width: 25px;
  height: 25px;
}
.admin-topbar > div strong {
  font-family: var(--font-condensed), sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
}
.admin-content {
  display: grid;
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 54px;
  gap: 14px;
}
.admin-budget {
  display: grid;
  min-height: 126px;
  padding: 20px;
  grid-template-columns: minmax(0,1fr) minmax(260px,.7fr);
  align-items: center;
  gap: 26px;
  border: 1px solid rgba(114,184,255,.15);
  border-radius: 16px;
  background: radial-gradient(circle at 90% 0, rgba(114,184,255,.12), transparent 42%), #11151a;
}
.admin-budget.warning {
  border-color: rgba(255,174,88,.28);
  background: radial-gradient(circle at 90% 0, rgba(255,137,47,.14), transparent 42%), #15130f;
}
.admin-budget > div:first-child {
  display: grid;
  gap: 6px;
}
.admin-budget > div:first-child > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8eaac9;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-budget > div:first-child > strong {
  font-size: 32px;
  letter-spacing: -.045em;
}
.admin-budget > div:first-child > strong small {
  color: #737b85;
  font-size: 13px;
  font-weight: 550;
}
.admin-budget p {
  margin: 0;
  color: #7f8790;
  font-size: 9px;
}
.admin-budget-meter {
  position: relative;
  height: 10px;
  overflow: visible;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.admin-budget-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#71b8ff,#a18cff);
  box-shadow: 0 0 18px rgba(113,184,255,.25);
}
.admin-budget.warning .admin-budget-meter i {
  background: linear-gradient(90deg,#ffbc69,#ff715f);
}
.admin-budget-meter span {
  position: absolute;
  right: 0;
  top: -23px;
  color: #9097a1;
  font-family: var(--font-geist-mono), monospace;
  font-size: 8px;
}
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.admin-metrics article {
  display: grid;
  min-height: 128px;
  padding: 15px;
  grid-template-columns: 1fr auto;
  align-content: space-between;
  gap: 5px 10px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 13px;
  background: rgba(17,20,25,.88);
}
.admin-metrics article > svg {
  grid-column: 2;
  grid-row: 1;
  color: #7970ba;
}
.admin-metrics article > span {
  grid-column: 1;
  grid-row: 1;
  color: #777f89;
  font-size: 8px;
  font-weight: 700;
}
.admin-metrics article > strong {
  grid-column: 1/-1;
  font-size: 27px;
  letter-spacing: -.04em;
}
.admin-metrics article > small {
  grid-column: 1/-1;
  color: #676e77;
  font-size: 7px;
}
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr);
  gap: 10px;
}
.admin-panel {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 13px;
  background: #101318;
}
.admin-panel > header {
  display: flex;
  min-height: 66px;
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.admin-panel > header > div {
  display: grid;
  gap: 4px;
}
.admin-panel > header span {
  color: #7166b2;
  font-size: 6px;
  font-weight: 850;
  letter-spacing: .12em;
}
.admin-panel > header h2 {
  margin: 0;
  font-size: 14px;
  letter-spacing: -.02em;
}
.admin-panel > header > small {
  color: #626a74;
  font-size: 7px;
}
.admin-activity-list {
  max-height: 390px;
  overflow-y: auto;
}
.admin-activity-list article {
  display: grid;
  min-height: 53px;
  padding: 8px 13px;
  grid-template-columns: 8px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.admin-activity-list article > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9180ee;
  box-shadow: 0 0 0 4px rgba(145,128,238,.08);
}
.admin-activity-list article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.admin-activity-list strong {
  font-size: 8px;
}
.admin-activity-list span, .admin-activity-list time {
  overflow: hidden;
  color: #666e78;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-empty {
  padding: 25px;
  color: #646b74;
  font-size: 8px;
  text-align: center;
}
.admin-health-list {
  display: grid;
  padding: 8px 12px;
}
.admin-health-list > div {
  display: grid;
  min-height: 35px;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.035);
}
.admin-health-list i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4e555f;
}
.admin-health-list i.ready {
  background: #61d39b;
  box-shadow: 0 0 0 4px rgba(97,211,155,.07);
}
.admin-health-list span, .admin-health-list strong {
  font-size: 7px;
}
.admin-health-list span {
  color: #8a919a;
}
.admin-health-list strong {
  color: #68707a;
  font-weight: 650;
}
.admin-spend-list {
  display: grid;
  padding: 12px;
  gap: 7px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.admin-spend-list > span {
  color: #69717a;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.admin-spend-list > div {
  display: flex;
  padding: 8px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}
.admin-spend-list > div > span {
  display: grid;
  gap: 2px;
}
.admin-spend-list strong, .admin-spend-list b {
  font-size: 7px;
}
.admin-spend-list small {
  color: #5f6670;
  font-size: 6px;
}
.admin-spend-list b {
  color: #a7a0d7;
}
.admin-table-scroll {
  overflow-x: auto;
}
.admin-table-panel table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table-panel th {
  height: 35px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: #5e6670;
  font-size: 6px;
  font-weight: 750;
  text-align: left;
  text-transform: uppercase;
}
.admin-table-panel td {
  height: 51px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  color: #858d97;
  font-size: 7px;
  white-space: nowrap;
}
.admin-table-panel td:first-child {
  min-width: 190px;
}
.admin-table-panel td strong, .admin-table-panel td small {
  display: block;
}
.admin-table-panel td strong {
  max-width: 280px;
  overflow: hidden;
  color: #c8ccd1;
  font-size: 8px;
  text-overflow: ellipsis;
}
.admin-table-panel td small {
  max-width: 260px;
  margin-top: 3px;
  overflow: hidden;
  color: #59616b;
  font-size: 6px;
  text-overflow: ellipsis;
}
.admin-table-panel td a {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  color: #9299a2;
}
.admin-status {
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: #868e98;
  font-size: 6px;
}
.admin-status.ready {
  background: rgba(97,211,155,.08);
  color: #77c9a2;
}
.admin-status.generating {
  background: rgba(145,128,238,.09);
  color: #a99cf0;
}
.admin-status.interrupted,.admin-status.stopped {
  background: rgba(255,180,92,.09);
  color: #dfa963;
}
.admin-invite-funnel {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.04);
}
.admin-invite-funnel span {
  display: flex;
  min-height: 58px;
  padding: 12px;
  flex-direction: column;
  justify-content: center;
  background: #111419;
  color: #707884;
  font-size: 7px;
}
.admin-invite-funnel strong {
  color: #d4d7dc;
  font-size: 18px;
}
.admin-footer {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #4e555f;
  font-size: 7px;
}
.admin-loading {
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: #090b0e;
  color: #858d97;
  font-size: 9px;
}
.admin-loading a {
  color: #a89af0;
}
.admin-affiliate-onboarding > header > svg {
  color: #a89af0;
}
.admin-affiliate-onboarding > div {
  display: grid;
  padding: 14px;
  grid-template-columns: minmax(240px,1fr) minmax(220px,.55fr) auto;
  align-items: end;
  gap: 12px;
}
.admin-affiliate-onboarding p {
  margin: 0;
  color: #737b85;
  font-size: 8px;
  line-height: 1.55;
}
.admin-affiliate-onboarding label {
  display: grid;
  gap: 5px;
}
.admin-affiliate-onboarding label span {
  color: #6f7780;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-affiliate-onboarding input {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 0 11px;
  background: #0b0e12;
  color: #fff;
  font-size: 11px;
  letter-spacing: .07em;
}
.admin-affiliate-onboarding button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(168,154,240,.18);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(145,128,238,.1);
  color: #b8acf5;
  font-size: 8px;
  font-weight: 800;
}
.admin-affiliate-onboarding button:disabled {
  opacity: .45;
}
.admin-affiliate-onboarding > div > small {
  grid-column: 2/-1;
  color: #8f97a1;
  font-size: 7px;
}
.admin-copy-qualification-controls {
  display: grid;
  padding: 14px;
  grid-template-columns: minmax(260px,1fr) minmax(240px,.75fr) auto;
  align-items: end;
  gap: 12px;
}
.admin-copy-qualification-controls > * {
  min-width: 0;
}
.admin-copy-qualification-controls label {
  display: grid;
  gap: 5px;
}
.admin-copy-qualification-controls label > span {
  color: #6f7780;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-copy-qualification-controls :is(select,input) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 0 10px;
  background: #0b0e12;
  color: #c9cdd2;
  font-size: 8px;
}
.admin-copy-qualification-controls button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(97,211,155,.18);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(97,211,155,.07);
  color: #7bcba5;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.admin-copy-qualification-controls button:disabled {
  opacity: .42;
}
.admin-copy-qualification-result {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.045);
  color: #9aa1aa;
  font-size: 8px;
}
.admin-copy-qualification-result.error {
  color: #ed8b96;
}
.admin-copy-qualification-result p {
  display: grid;
  margin: 0;
  gap: 3px;
}
.admin-copy-qualification-result p strong {
  color: #d2d6da;
  font-size: 10px;
  text-transform: capitalize;
}
.admin-copy-qualification-result p span {
  color: #747c86;
}
.admin-copy-qualification-result details {
  margin-top: 8px;
}
.admin-copy-qualification-result summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #8d95a0;
}
.admin-copy-qualification-result pre {
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border-radius: 9px;
  background: #080a0d;
  color: #7f8791;
  font: 7px/1.55 var(--font-geist-mono),monospace;
  white-space: pre-wrap;
}
.admin-generation-tokens > header svg {
  color: #a89af0;
}
.admin-token-builder {
  display: grid;
  padding: 14px;
  grid-template-columns: minmax(210px,1fr) minmax(125px,.42fr) minmax(120px,.38fr) auto;
  align-items: end;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.admin-token-builder > label {
  display: grid;
  min-width: 0;
  gap: 5px;
}
.admin-token-builder label > span:first-child,.admin-token-scopes legend {
  color: #6f7780;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-token-builder :is(input,select),.admin-token-secret input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 0 10px;
  background: #0b0e12;
  color: #d7dbe0;
  font-size: 9px;
}
.admin-token-builder button,.admin-token-list-heading button,.admin-token-list article > button,.admin-token-secret button {
  display: inline-flex;
  min-height: 44px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #939ba5;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.admin-token-builder button.primary {
  border-color: rgba(168,154,240,.22);
  background: rgba(145,128,238,.11);
  color: #b8acf5;
}
.admin-token-builder button:disabled,.admin-token-list-heading button:disabled,.admin-token-list article > button:disabled {
  opacity: .4;
}
.admin-token-money {
  position: relative;
  display: block;
}
.admin-token-money i {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 10px;
  color: #6f7780;
  font-size: 9px;
  font-style: normal;
}
.admin-token-money input {
  padding-left: 24px;
}
.admin-token-scopes {
  display: grid;
  margin: 0;
  padding: 13px 14px 14px;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 7px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.admin-token-scopes legend {
  display: block;
  width: 100%;
  padding: 0 0 8px;
}
.admin-token-scopes label {
  display: grid;
  min-width: 0;
  min-height: 64px;
  padding: 10px;
  grid-template-columns: 16px minmax(0,1fr);
  align-items: start;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 9px;
  background: rgba(255,255,255,.018);
  cursor: pointer;
}
.admin-token-scopes input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: #9180ee;
}
.admin-token-scopes label > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.admin-token-scopes strong {
  color: #c7cbd0;
  font-size: 8px;
}
.admin-token-scopes small {
  color: #636b75;
  font-size: 7px;
  line-height: 1.35;
}
.admin-token-boundary {
  display: flex;
  min-height: 42px;
  margin: 0;
  padding: 10px 14px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  color: #747c86;
  font-size: 7px;
  line-height: 1.45;
}
.admin-token-boundary svg {
  flex: 0 0 auto;
  color: #8f82d5;
}
.admin-token-once {
  display: grid;
  padding: 13px 14px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(145,128,238,.045);
}
.admin-token-once > div:first-child {
  display: grid;
  gap: 3px;
}
.admin-token-once > div:first-child span {
  color: #9a8ee2;
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase;
}
.admin-token-once > div:first-child strong {
  color: #d8d6e9;
  font-size: 10px;
}
.admin-token-secret {
  display: grid;
  grid-template-columns: minmax(0,1fr) 44px auto 44px;
  gap: 7px;
}
.admin-token-secret input {
  font-family: var(--font-geist-mono),monospace;
}
.admin-token-secret button {
  padding: 0 10px;
}
.admin-token-message {
  display: flex;
  min-height: 38px;
  margin: 0;
  padding: 9px 14px;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  color: #78cba3;
  font-size: 8px;
}
.admin-token-message.error {
  color: #ed8b96;
}
.admin-token-list-heading {
  display: flex;
  min-height: 58px;
  padding: 10px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.admin-token-list-heading > div {
  display: grid;
  gap: 3px;
}
.admin-token-list-heading strong {
  color: #c8ccd1;
  font-size: 9px;
}
.admin-token-list-heading small {
  color: #656d77;
  font-size: 7px;
}
.admin-token-list-heading button {
  min-height: 36px;
}
.admin-token-list {
  display: grid;
}
.admin-token-list > article {
  display: grid;
  min-height: 68px;
  padding: 11px 14px;
  grid-template-columns: minmax(145px,.45fr) minmax(260px,1fr) auto auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.admin-token-list > article:last-child {
  border-bottom: 0;
}
.admin-token-list article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.admin-token-list article > div strong {
  overflow: hidden;
  color: #cbd0d5;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-token-list article code {
  color: #7166a8;
  font: 7px/1.3 var(--font-geist-mono),monospace;
}
.admin-token-list article p {
  display: grid;
  min-width: 0;
  margin: 0;
  gap: 3px;
  color: #9098a2;
  font-size: 7px;
  text-transform: capitalize;
}
.admin-token-list article p span {
  color: #5f6771;
  text-transform: none;
}
.admin-token-list article > button.danger {
  min-height: 36px;
  border-color: rgba(255,105,120,.12);
  color: #d9838e;
}
.admin-status.active {
  background: rgba(97,211,155,.08);
  color: #77c9a2;
}
.admin-status.expired {
  background: rgba(255,180,92,.09);
  color: #dfa963;
}
.admin-status.revoked {
  background: rgba(255,105,120,.09);
  color: #ed8b96;
}
.admin-audit-controls {
  display: grid;
  padding: 14px;
  grid-template-columns: minmax(240px,1fr) minmax(200px,.55fr) auto;
  align-items: end;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.admin-audit-controls label {
  display: grid;
  gap: 5px;
}
.admin-audit-controls label > span {
  color: #6f7780;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-audit-controls :is(select,input) {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 0 10px;
  background: #0b0e12;
  color: #c9cdd2;
  font-size: 8px;
}
.admin-audit-controls button,.admin-audit-restoration button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(168,154,240,.18);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(145,128,238,.1);
  color: #b8acf5;
  font-size: 8px;
  font-weight: 800;
}
.admin-audit-controls button:disabled,.admin-audit-restoration button:disabled {
  opacity: .42;
}
.admin-audit-result {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  color: #9aa1aa;
  font-size: 8px;
}
.admin-audit-summary {
  display: grid;
  padding: 12px 14px;
  grid-template-columns: repeat(6,minmax(90px,1fr));
  gap: 7px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.admin-audit-summary span {
  display: grid;
  gap: 2px;
  color: #656d77;
  font-size: 6px;
  text-transform: uppercase;
}
.admin-audit-summary strong {
  color: #d0d3d7;
  font-size: 12px;
}
.admin-status.delivered {
  background: rgba(97,211,155,.08);
  color: #77c9a2;
}
.admin-status.in_progress {
  background: rgba(145,128,238,.09);
  color: #a99cf0;
}
.admin-status.undelivered {
  background: rgba(255,105,120,.09);
  color: #ed8b96;
}
.admin-usage-audit td details summary,.admin-audit-events summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8d95a0;
  font-size: 7px;
  cursor: pointer;
  list-style: none;
}
.admin-usage-audit td details[open] pre {
  position: fixed;
  z-index: 300;
  inset: 8vh 8vw;
  margin: 0;
  padding: 18px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #0d1014;
  box-shadow: 0 30px 100px #000;
  color: #8b939d;
  font: 7px/1.55 var(--font-geist-mono),monospace;
  white-space: pre-wrap;
}
.admin-audit-restoration {
  display: flex;
  padding: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,.045);
}
.admin-audit-restoration p {
  display: grid;
  margin: 0;
  gap: 4px;
}
.admin-audit-restoration p strong {
  color: #d1d5da;
  font-size: 10px;
}
.admin-audit-restoration p span {
  max-width: 720px;
  color: #69717b;
  font-size: 7px;
  line-height: 1.45;
}
.admin-audit-restoration button {
  border-color: rgba(97,211,155,.14);
  background: rgba(97,211,155,.06);
  color: #7bcba5;
  white-space: nowrap;
}
.admin-audit-events {
  padding: 0 14px 14px;
}
.admin-audit-events pre {
  max-height: 420px;
  padding: 12px;
  overflow: auto;
  border-radius: 9px;
  background: #080a0d;
  color: #7f8791;
  font: 7px/1.55 var(--font-geist-mono),monospace;
  white-space: pre-wrap;
}
.admin-bug-list {
  display: grid;
  max-height: 640px;
  overflow-y: auto;
}
.admin-bug-list > article {
  display: grid;
  padding: 13px 14px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.admin-bug-list > article.status-resolved {
  opacity: .58;
}
.admin-bug-summary {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  align-items: start;
  gap: 10px;
}
.admin-bug-summary > i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,105,120,.08);
  color: #e7828e;
}
.admin-bug-summary > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.admin-bug-summary span {
  color: #8175c5;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-bug-summary strong {
  color: #d7dade;
  font-size: 9px;
  line-height: 1.4;
}
.admin-bug-summary small {
  color: #626a74;
  font-size: 7px;
}
.admin-bug-summary .admin-status {
  align-self: start;
}
.admin-status.new {
  background: rgba(255,105,120,.09);
  color: #ed8b96;
}
.admin-status.investigating {
  background: rgba(255,190,91,.09);
  color: #dca75e;
}
.admin-status.resolved {
  background: rgba(97,211,155,.08);
  color: #77c9a2;
}
.admin-bug-list article > p {
  margin: 0 0 0 40px;
  color: #8a9199;
  font-size: 8px;
  line-height: 1.45;
}
.admin-bug-list article > p span {
  margin-right: 7px;
  color: #5d6570;
  font-size: 6px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-bug-actions {
  display: grid;
  margin-left: 40px;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 7px;
}
.admin-bug-actions > a,.admin-bug-actions > button,.admin-bug-actions details > summary {
  display: inline-flex;
  height: 27px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.02);
  color: #858d97;
  font-size: 7px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.admin-bug-actions button.resolve {
  border-color: rgba(97,211,155,.14);
  color: #7bcba5;
}
.admin-bug-actions details {
  position: relative;
}
.admin-bug-actions details > summary {
  list-style: none;
}
.admin-bug-actions details[open] > div {
  position: fixed;
  z-index: 300;
  inset: 8vh 8vw;
  padding: 18px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #0d1014;
  box-shadow: 0 30px 100px #000;
}
.admin-bug-actions details[open] > div h4 {
  margin: 12px 0 6px;
  color: #8d82cd;
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-bug-actions details[open] > div pre {
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-radius: 9px;
  background: #080a0d;
  color: #8b939d;
  font: 7px/1.55 var(--font-geist-mono),monospace;
  white-space: pre-wrap;
}
.bug-report-launch {
  position: fixed;
  z-index: 180;
  top: 48%;
  left: 0;
  display: flex;
  height: 34px;
  padding: 0 9px 0 8px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: rgba(17,19,24,.9);
  color: #868e98;
  font-size: 7px;
  font-weight: 750;
  box-shadow: 0 10px 34px rgba(0,0,0,.3);
  backdrop-filter: blur(16px);
}
@media (hover: hover) and (pointer: fine) {
  .bug-report-launch:hover {
    background: #20242b;
    color: #f0f1f3;
  }
}
.bug-report-backdrop {
  position: fixed;
  z-index: 280;
  inset: 0;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(3,4,6,.78);
  backdrop-filter: blur(12px);
}
.bug-report-modal {
  width: min(520px,100%);
  max-height: min(760px,calc(100dvh - 30px));
  overflow: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: #14171c;
  color: #edf0f2;
  box-shadow: 0 35px 110px rgba(0,0,0,.62);
}
.bug-report-modal > header {
  display: flex;
  padding: 18px 20px 15px;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bug-report-modal > header > div {
  display: grid;
  gap: 4px;
}
.bug-report-modal > header span {
  color: #8577d0;
  font-size: 6px;
  font-weight: 850;
  letter-spacing: .12em;
}
.bug-report-modal > header h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -.035em;
}
.bug-report-modal > header p {
  margin: 1px 0 0;
  color: #747c86;
  font-size: 8px;
}
.bug-report-modal > header button {
  display: grid;
  width: 31px;
  height: 31px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  color: #858d97;
}
.bug-report-form {
  display: grid;
  padding: 16px 20px 19px;
  gap: 14px;
}
.bug-report-form > label:not(.bug-report-diagnostics) {
  position: relative;
  display: grid;
  gap: 6px;
}
.bug-report-form > label > span {
  color: #9da3ab;
  font-size: 8px;
  font-weight: 700;
}
.bug-report-form > label > span i {
  color: #626a74;
  font-style: normal;
  font-weight: 500;
}
.bug-report-form textarea,.bug-report-select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: #0d1014;
  color: #e4e6e9;
  font: 9px/1.5 var(--font-geist-sans),sans-serif;
}
.bug-report-form textarea {
  min-height: 112px;
  padding: 11px 12px;
  resize: vertical;
}
.bug-report-form textarea.compact {
  min-height: 70px;
}
.bug-report-form label > small {
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: #4f5660;
  font-size: 6px;
}
.bug-report-select {
  position: relative;
  height: 39px;
}
.bug-report-select select {
  width: 100%;
  height: 100%;
  padding: 0 34px 0 11px;
  appearance: none;
  border: 0;
  background: transparent;
  color: #d5d8dc;
  font-size: 9px;
}
.bug-report-select svg {
  position: absolute;
  top: 12px;
  right: 11px;
  color: #737b85;
  pointer-events: none;
}
.bug-report-diagnostics {
  display: grid;
  padding: 10px;
  grid-template-columns: 15px 27px minmax(0,1fr);
  align-items: start;
  gap: 8px;
  border: 1px solid rgba(141,126,220,.13);
  border-radius: 11px;
  background: rgba(127,109,213,.045);
}
.bug-report-diagnostics input {
  margin-top: 3px;
  accent-color: #8a7bd7;
}
.bug-report-diagnostics > i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: rgba(139,123,222,.09);
  color: #9b8fe0;
}
.bug-report-diagnostics > span {
  display: grid;
  gap: 3px;
}
.bug-report-diagnostics strong {
  font-size: 8px;
}
.bug-report-diagnostics small {
  color: #69717b;
  font-size: 7px;
  line-height: 1.4;
}
.bug-report-form > footer {
  display: flex;
  margin-top: 1px;
  justify-content: flex-end;
  gap: 8px;
}
.bug-report-form > footer button,.bug-report-success button {
  display: inline-flex;
  height: 37px;
  padding: 0 13px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  color: #969da6;
  font-size: 8px;
  font-weight: 750;
}
.bug-report-form > footer button.primary,.bug-report-success button {
  border-color: rgba(154,137,236,.25);
  background: #eeeaff;
  color: #14121b;
}
.bug-report-form > footer button:disabled {
  opacity: .42;
}
.bug-report-error {
  margin: -4px 0 0;
  color: #e58b96;
  font-size: 8px;
}
.bug-report-success {
  display: grid;
  min-height: 330px;
  padding: 35px;
  place-items: center;
  align-content: center;
  gap: 9px;
  text-align: center;
}
.bug-report-success > i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: rgba(97,211,155,.1);
  color: #70c79b;
}
.bug-report-success h3 {
  margin: 4px 0 0;
  font-size: 18px;
}
.bug-report-success p {
  max-width: 330px;
  margin: 0 0 8px;
  color: #747c86;
  font-size: 8px;
  line-height: 1.55;
}
.bug-report-success strong {
  color: #a99ce9;
}
@media (max-width: 820px) {
  .admin-content {
    width: min(100% - 22px, 680px);
    padding-top: 14px;
  }
  .admin-topbar {
    padding: 0 10px;
  }
  .admin-topbar > div strong {
    display: none;
  }
  .admin-budget {
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .admin-metrics {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .admin-invite-funnel {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-metrics article {
    min-height: 112px;
  }
}
@media (max-width: 480px) {
  .admin-topbar > a, .admin-topbar > button {
    width: 33px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .admin-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .admin-metrics article {
    padding: 12px;
  }
  .admin-budget > div:first-child > strong {
    font-size: 27px;
  }
  .bug-report-launch {
    top: 42%;
    width: 32px;
    padding: 0;
    justify-content: center;
  }
  .bug-report-launch span {
    display: none;
  }
  .bug-report-backdrop {
    padding: 8px;
    align-items: end;
  }
  .bug-report-modal {
    max-height: 91dvh;
    border-radius: 20px 20px 8px 8px;
  }
  .bug-report-form {
    padding: 14px;
  }
  .bug-report-modal > header {
    padding: 16px 15px 13px;
  }
  .bug-report-form > footer {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
  }
  .bug-report-form > footer button {
    width: 100%;
  }
  .admin-bug-summary {
    grid-template-columns: 27px minmax(0,1fr);
  }
  .admin-bug-summary > b {
    grid-column: 2;
    width: max-content;
  }
  .admin-bug-list article > p,.admin-bug-actions,.admin-bug-media {
    margin-left: 0;
  }
  .admin-bug-media {
    grid-template-columns: 1fr;
  }
  .admin-bug-actions {
    grid-template-columns: 1fr 1fr;
  }
  .admin-bug-actions > span {
    display: none;
  }
  .admin-bug-actions > a,.admin-bug-actions > button,.admin-bug-actions details > summary {
    justify-content: center;
  }
  .admin-bug-actions details[open] > div {
    inset: 4vh 10px;
  }
}
.mobile-primary-actions,
.mobile-simple-sheet-root {
  display: none;
}
.editor-primary-actions button span {
  white-space: nowrap;
}
.panel-back-to-layers {
  display: flex;
  height: 31px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #8d949d;
  font-size: 8px;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .panel-back-to-layers:hover {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.055);
    color: #fff;
  }
}
.panel-ready-state {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #68717b;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.panel-ready-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #66ce97;
  box-shadow: 0 0 10px rgba(102,206,151,.35);
}
.layers-section-switch {
  display: grid;
  margin-bottom: 14px;
  padding: 3px;
  grid-template-columns: repeat(3,1fr);
  gap: 3px;
  border-radius: 10px;
  background: #0e1013;
}
.layers-section-switch button {
  height: 33px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f7680;
  font-size: 8px;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .layers-section-switch button:hover {
    color: #c9cdd2;
  }
}
.layers-section-switch button.active {
  background: #252a31;
  color: #f4f5f6;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
@media (min-width: 961px) {
  .studio-layout {
    grid-template-columns: minmax(0,1fr) 380px;
  }
  .studio-layout.view-focus .canvas-stage {
    padding: 10px 18px 0;
  }
  .focus-preview-stack {
    --desktop-focus-canvas-width: min(calc((100vh - 300px) * .8), 600px, calc(100% - 165px));
    padding: 4px 0 7px;
  }
  .focus-header,
  .carousel-workspace {
    width: var(--desktop-focus-canvas-width);
  }
  .focus-header {
    max-width: none;
    margin-bottom: 6px;
  }
  .editor-primary-actions {
    display: grid;
    width: min(510px,calc(100% - 76px));
    min-height: 62px;
    margin: 7px auto 0;
    padding: 5px;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 3px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    background: rgba(17,19,23,.88);
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
  }
  .editor-primary-actions button {
    display: flex;
    min-width: 0;
    min-height: 50px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #878e97;
    font-size: 11px;
    font-weight: 700;
  }
  @media (hover: hover) and (pointer: fine) {
    .editor-primary-actions button:hover {
      background: rgba(255,255,255,.045);
      color: #eef0f2;
    }
  }
  .editor-primary-actions button.active {
    border-color: rgba(174,151,255,.24);
    background: rgba(130,99,237,.11);
    color: #e9e4ff;
  }
  .editor-primary-actions button:nth-child(2) svg {
    color: #ff7eae;
  }
  .editor-primary-actions button:nth-child(3) svg {
    color: #9d8cff;
  }
  .slide-picker {
    width: 100%;
    max-width: none;
    padding: 4px 0 9px;
    overflow-x: auto;
    overflow-y: hidden;
    contain: inline-size;
    scrollbar-width: none;
  }
  .slide-picker::-webkit-scrollbar {
    display: none;
  }
  .slide-picker-track {
    width: max-content;
    min-width: 100%;
    max-width: none;
    margin: 0;
    padding: 9px 20px 12px;
    gap: 7px;
    overflow: visible;
    justify-content: safe center;
  }
  .slide-picker-item {
    flex-basis: 62px;
    width: 62px;
    grid-template-rows: auto 19px;
    border-radius: 8px;
  }
  .slide-picker-grip {
    height: 19px;
  }
  .slide-picker-add {
    flex-basis: 62px;
    width: 62px;
    min-height: 97px;
  }
  .editor-panel {
    background: rgba(17,20,24,.985);
    box-shadow: -18px 0 48px rgba(0,0,0,.18);
  }
  .panel-header {
    min-height: 64px;
    padding: 0 15px;
  }
  .panel-header strong {
    font-size: 12px;
  }
  .panel-header span {
    font-size: 7px;
  }
  .panel-tabs {
    grid-template-columns: repeat(auto-fit,minmax(72px,1fr));
    padding: 6px 9px;
  }
  .panel-tabs button {
    height: 34px;
    font-size: 9px;
  }
  .panel-content {
    padding: 12px;
  }
  .panel-footer {
    padding: 7px 12px 9px;
  }
  .add-layer-row {
    margin-bottom: 13px;
  }
  .add-layer-row button {
    height: 45px;
    background: #171b20;
  }
  .layer-list {
    gap: 4px;
  }
  .layer-row,.layer-list > button {
    min-height: 48px;
  }
  .selection-interaction-frame.kind-scrim {
    z-index: 3200;
    outline-width: 2px;
    outline-color: #9cc1ff;
    filter: drop-shadow(0 0 3px rgba(58,139,255,.65));
  }
  .selection-interaction-frame.kind-scrim .layer-resize-handle {
    width: 18px;
    height: 18px;
    border-color: #17365d;
    background: #e8f2ff;
  }
  .selection-interaction-frame.kind-scrim .layer-resize-handle.bottom-right {
    width: 23px;
    height: 23px;
  }
  .selection-interaction-frame.kind-scrim .layer-resize-handle.edge-top,
  .selection-interaction-frame.kind-scrim .layer-resize-handle.edge-bottom {
    width: 32px;
    height: 12px;
  }
  .selection-interaction-frame.kind-scrim .layer-resize-handle.edge-left,
  .selection-interaction-frame.kind-scrim .layer-resize-handle.edge-right {
    width: 12px;
    height: 32px;
  }
}
@media (min-width: 961px) and (max-width: 1050px) {
  .studio-layout {
    grid-template-columns: minmax(0,1fr) 340px;
  }
  .carousel-workspace {
    max-width: calc(100% - 120px);
  }
  .editor-primary-actions {
    width: min(430px,calc(100% - 42px));
  }
}
.editor-canvas.isolate-overlay .canvas-layer:not(.selected) {
  filter: brightness(.46) saturate(.72);
  transition: filter 150ms ease;
}
.editor-canvas.isolate-overlay .canvas-layer.selected {
  filter: none;
}
@media (max-width: 960px) {
  .studio-root {
    --mobile-visual-height: 100dvh;
    --mobile-visual-top: 0px;
    --mobile-editor-headroom: 46px;
    position: fixed;
    top: var(--mobile-visual-top);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--mobile-visual-height);
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .studio-topbar {
    height: 54px;
    grid-template-columns: minmax(0,1fr) auto max-content;
  }
  .studio-topbar .studio-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .studio-topbar .studio-center-switches {
    grid-column: 2;
    grid-row: 1;
  }
  .studio-topbar .view-switch,
  .studio-topbar .cost-chip,
  .studio-topbar .caption-button,
  .studio-topbar .mobile-ai,
  .studio-topbar .share-button {
    display: none;
  }
  .studio-topbar .top-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .studio-topbar .top-actions > button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    flex: 0 0 44px;
    justify-content: center;
  }
  .studio-topbar .brand-copy input {
    width: 100%;
    max-width: 210px;
    font-size: 12px;
  }
  .studio-topbar .template-review-mobile-label {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    color: #ffe39a;
    font-size: 7px;
    font-weight: 760;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
  }
  .studio-layout {
    position: absolute;
    top: calc(54px + var(--generation-status-height));
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: auto;
    min-height: 0;
  }
  .studio-layout.view-focus .canvas-stage {
    display: grid;
    height: 100%;
    min-height: 0;
    padding: 0;
    grid-template-rows: minmax(0,1fr) auto auto;
    overflow: hidden;
  }
  .focus-preview-stack {
    --mobile-focus-header-height: 24px;
    --mobile-preview-reserve: 42px;
    min-height: 0;
    padding: 4px 0 14px;
    justify-content: center;
    container-name: mobile-preview;
    container-type: size;
  }
  .focus-preview-stack:has(.mobile-usage-chip) {
    --mobile-focus-header-height: 44px;
    --mobile-preview-reserve: 62px;
  }
  .focus-header {
    display: flex;
    width: min(91vw, max(128px,calc((100cqh - var(--mobile-preview-reserve)) * .8)));
    min-height: var(--mobile-focus-header-height);
    max-height: var(--mobile-focus-header-height);
    margin: 0 auto 4px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
  }
  .focus-header span {
    font-size: 8px;
  }
  .focus-header strong {
    font-size: 9px;
  }
  .focus-header .mobile-usage-chip {
    display: inline-flex;
    min-height: 30px;
    padding: 0 9px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: #d5d7dc;
    font-size: 10px;
    font-weight: 760;
    text-decoration: none;
    white-space: nowrap;
  }
  .focus-header .mobile-usage-chip.is-low {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.065);
    color: #f1f2f4;
  }
  .carousel-workspace {
    width: min(91vw, max(128px,calc((100cqh - var(--mobile-preview-reserve)) * .8)));
    max-width: none;
  }
  .peek-card {
    display: none;
  }
  .editor-canvas {
    border-radius: 9px;
    box-shadow: 0 18px 46px rgba(0,0,0,.52);
  }
  .selection-quick-actions {
    display: none;
  }
  .selection-interaction-frame.kind-scrim {
    display: none;
  }
  .selection-interaction-frame .selection-edge,
  .selection-interaction-frame .layer-resize-handle,
  .selection-interaction-frame .layer-rotate-handle {
    opacity: 0;
    pointer-events: none;
  }
  .editor-canvas.mobile-transform-mode .selection-interaction-frame .selection-edge,
  .editor-canvas.mobile-transform-mode .selection-interaction-frame .layer-resize-handle,
  .editor-canvas.mobile-transform-mode .selection-interaction-frame .layer-rotate-handle {
    opacity: 1;
    pointer-events: auto;
  }
  .editor-canvas.mobile-transform-mode .selection-interaction-frame .layer-resize-handle {
    width: 18px;
    height: 18px;
  }
  .editor-canvas.mobile-transform-mode .selection-interaction-frame .layer-resize-handle.edge-top,
  .editor-canvas.mobile-transform-mode .selection-interaction-frame .layer-resize-handle.edge-bottom {
    width: 28px;
    height: 12px;
  }
  .editor-canvas.mobile-transform-mode .selection-interaction-frame .layer-resize-handle.edge-left,
  .editor-canvas.mobile-transform-mode .selection-interaction-frame .layer-resize-handle.edge-right {
    width: 12px;
    height: 28px;
  }
  .selection-label {
    max-width: 75%;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .editor-panel {
    display: none !important;
  }
  .mobile-toolbar {
    display: none !important;
  }
  .mobile-primary-actions {
    display: grid;
    width: min(94vw, 510px);
    min-height: 62px;
    margin: 0 auto 5px;
    padding: 5px;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 3px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    background: rgba(17,19,23,.92);
    transition: opacity 180ms ease;
  }
  .mobile-primary-actions button {
    display: flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #d7d9dd;
    font-size: 11px;
  }
  .mobile-primary-actions button:active {
    background: rgba(255,255,255,.07);
    transform: scale(.97);
  }
  .mobile-primary-actions button:nth-child(2) svg {
    color: #ff7ab1;
  }
  .mobile-primary-actions button:nth-child(3) svg {
    color: #9b8cff;
  }
  .mobile-primary-actions button.active {
    background: rgba(128,96,238,.12);
    color: #f0edff;
  }
  .slide-picker {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 3px 0 max(8px,env(safe-area-inset-bottom));
    align-self: end;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    transition: opacity 180ms ease;
  }
  .slide-picker::-webkit-scrollbar {
    display: none;
  }
  .slide-picker-track {
    width: max-content;
    min-width: 100%;
    max-width: none;
    padding: 5px 14px;
    justify-content: safe center;
    gap: 8px;
    overflow: visible;
    touch-action: pan-x pan-y;
  }
  .slide-picker-track.is-reordering {
    touch-action: none;
  }
  .slide-picker-item {
    flex-basis: 66px;
    width: 66px;
    grid-template-rows: auto 22px;
    border-radius: 9px;
  }
  .slide-picker-preview {
    border-radius: 7px 7px 2px 2px;
  }
  .slide-picker-grip {
    height: 22px;
    border-radius: 0 0 7px 7px;
    color: #9299a3;
    touch-action: none;
  }
  .slide-picker-add {
    flex-basis: 66px;
    width: 66px;
    min-height: 104px;
    border-radius: 9px;
  }
  .slide-picker-drag-ghost {
    z-index: 1800;
  }
  .history-action {
    display: grid !important;
  }
  .history-action:disabled {
    opacity: .32;
  }
  .studio-root.mobile-sheet-peek {
    --mobile-sheet-base: 156px;
  }
  .studio-root.mobile-sheet-half {
    --mobile-sheet-base: min(calc(var(--mobile-visual-height) * .5),620px);
  }
  .studio-root.mobile-sheet-expanded {
    --mobile-sheet-base: min(calc(var(--mobile-visual-height) * .72),760px);
  }
  .studio-root.mobile-sheet-open {
    --mobile-sheet-target: var(--mobile-sheet-reserved);
  }
  .studio-topbar,.studio-layout {
    transition: opacity 260ms ease, background-color 260ms ease, margin-top 280ms cubic-bezier(.22,1,.36,1), height 280ms cubic-bezier(.22,1,.36,1), width 280ms cubic-bezier(.22,1,.36,1);
  }
  .focus-header {
    transition: opacity 180ms ease, min-height 280ms cubic-bezier(.22,1,.36,1), max-height 280ms cubic-bezier(.22,1,.36,1), margin-bottom 280ms cubic-bezier(.22,1,.36,1), width 280ms cubic-bezier(.22,1,.36,1);
  }
  .studio-root.mobile-sheet-open .studio-topbar {
    opacity: .5;
    background: transparent !important;
    pointer-events: none;
  }
  .studio-root.mobile-sheet-open > .generation-console {
    opacity: 0;
    pointer-events: none;
  }
  .studio-root.mobile-sheet-open .studio-layout {
    position: fixed;
    top: var(--mobile-visual-top);
    right: 0;
    left: 0;
    height: var(--mobile-visual-height);
    margin-top: 0;
  }
  .studio-root.mobile-sheet-open .canvas-stage {
    height: var(--mobile-visual-height);
    padding: 0;
    grid-template-rows: minmax(0,1fr) auto auto;
    overflow-y: hidden;
    box-sizing: border-box;
  }
  .studio-root.mobile-sheet-open .focus-preview-stack {
    height: calc(var(--mobile-visual-height) - var(--mobile-sheet-reserved));
    min-height: 0;
    flex: 0 0 auto;
    justify-content: center;
    padding: 4px 0;
    box-sizing: border-box;
    transition: height 280ms cubic-bezier(.22,1,.36,1);
  }
  .studio-root.mobile-sheet-open .focus-header,
  .studio-root.mobile-sheet-open .carousel-workspace {
    width: min(90vw, max(104px, calc((var(--mobile-visual-height) - var(--mobile-editor-headroom) - var(--mobile-sheet-reserved)) * .8)));
    transition: width 280ms cubic-bezier(.22,1,.36,1);
  }
  .studio-root[data-mobile-keyboard="true"] {
    --mobile-editor-headroom: 10px;
  }
  .studio-root[data-mobile-keyboard="true"] .focus-header {
    min-height: 0;
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    pointer-events: none;
  }
  .studio-root[data-sheet-dragging="true"] .focus-header,
  .studio-root[data-sheet-dragging="true"] .focus-preview-stack,
  .studio-root[data-sheet-dragging="true"] .carousel-workspace {
    transition: none;
  }
  .studio-root[data-mobile-viewport-changing="true"] :is(.studio-topbar,.studio-layout) {
    transition: opacity 260ms ease, background-color 260ms ease;
  }
  .studio-root[data-mobile-viewport-changing="true"] .focus-header {
    transition: opacity 180ms ease;
  }
  .studio-root[data-mobile-viewport-changing="true"] :is(.focus-preview-stack,.carousel-workspace) {
    transition: none;
  }
  .studio-root[data-mobile-viewport-changing="true"] .mobile-simple-sheet {
    transition: transform 280ms cubic-bezier(.32,.72,0,1);
  }
  .studio-root.mobile-sheet-open .mobile-primary-actions,
  .studio-root.mobile-sheet-open .slide-picker {
    opacity: 0;
    pointer-events: none;
  }
  .studio-root.mobile-sheet-open[data-sheet-dismissing="true"] .mobile-primary-actions,
  .studio-root.mobile-sheet-open[data-sheet-dismissing="true"] .slide-picker {
    opacity: 1;
  }
  .mobile-simple-sheet-root {
    position: fixed;
    z-index: 5000;
    top: var(--mobile-visual-top);
    right: 0;
    left: 0;
    display: block;
    height: var(--mobile-visual-height);
    pointer-events: none;
  }
  .mobile-sheet-dismiss {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }
  .mobile-simple-sheet {
    --mobile-sheet-height: min(calc(var(--mobile-visual-height) * .5),620px);
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    height: clamp(110px,calc(var(--mobile-sheet-height) - var(--mobile-sheet-drag,0px)),calc(var(--mobile-visual-height) * .78));
    overflow: hidden;
    grid-template-rows: 58px minmax(0,1fr) auto;
    border: 1px solid rgba(255,255,255,.12);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: rgba(20,21,25,.985);
    box-shadow: 0 -1px 0 rgba(255,255,255,.04);
    pointer-events: auto;
    backdrop-filter: blur(24px);
    transform: translate3d(0,0,0);
    transition: height 280ms cubic-bezier(.22,1,.36,1), transform 280ms cubic-bezier(.32,.72,0,1);
    animation: mobile-sheet-fade 180ms ease-out both;
    will-change: height,transform;
  }
  .mobile-simple-sheet[data-snap="peek"] {
    --mobile-sheet-height: 156px;
  }
  .mobile-simple-sheet[data-snap="half"] {
    --mobile-sheet-height: min(calc(var(--mobile-visual-height) * .5),620px);
  }
  .mobile-simple-sheet[data-snap="expanded"] {
    --mobile-sheet-height: min(calc(var(--mobile-visual-height) * .72),760px);
  }
  .mobile-simple-sheet[data-dragging="true"] {
    transition: none;
  }
  .mobile-simple-sheet[data-exiting="true"] {
    transform: translate3d(0,100%,0);
    pointer-events: none;
  }
  @keyframes mobile-sheet-fade {
    from {
      opacity: .7;
    }
    to {
      opacity: 1;
    }
  }
  .mobile-simple-sheet > header {
    position: relative;
    display: grid;
    min-height: 58px;
    padding: 11px 14px 8px;
    grid-template-columns: minmax(0,1fr) 32px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.055);
    cursor: grab;
    touch-action: none;
  }
  .mobile-simple-sheet > header:active {
    cursor: grabbing;
  }
  .mobile-simple-sheet > header > i {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 34px;
    height: 4px;
    border-radius: 99px;
    background: #50545c;
    transform: translateX(-50%);
  }
  .mobile-simple-sheet > header > span {
    display: grid;
    gap: 2px;
  }
  .mobile-simple-sheet > header small {
    color: #706a83;
    font-size: 6px;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .mobile-simple-sheet > header strong {
    color: #f0f1f3;
    font-size: 13px;
    font-weight: 680;
  }
  .mobile-simple-sheet > header button {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #aaaeb5;
  }
  .mobile-sheet-scroll {
    padding: 12px 14px max(18px,env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-simple-sheet > footer {
    padding: 8px 14px max(10px,env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.06);
    background: #15161a;
  }
  .mobile-simple-sheet > footer button {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(167,145,255,.3);
    border-radius: 10px;
    background: rgba(126,96,238,.17);
    color: #e4dfff;
    font-size: 9px;
    font-weight: 750;
  }
  .generation-console-summary {
    width: calc(100% - 16px);
    padding-inline: 0;
    grid-template-columns: 26px minmax(0,1fr) auto;
    gap: 7px;
  }
  .generation-summary-copy small {
    display: none;
  }
  .generation-console-actions {
    gap: 4px !important;
  }
  .generation-percent.researching {
    display: none;
  }
  .generation-details-toggle span {
    display: none;
  }
  .generation-console-actions .generation-details-toggle {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .generation-details-panel {
    top: calc(100% + 6px);
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 110px);
  }
  .generation-console-body {
    grid-template-columns: 1fr;
  }
  .generation-live-copy {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
  }
  .generation-details-panel > footer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-simple-sheet[data-snap="peek"] {
    grid-template-rows: 42px minmax(0,1fr);
  }
  .mobile-simple-sheet[data-snap="peek"] > header {
    min-height: 42px;
    padding-block: 8px 4px;
  }
  .mobile-simple-sheet[data-snap="peek"] > header small {
    display: none;
  }
  .mobile-simple-sheet[data-snap="peek"] > header strong {
    font-size: 10px;
  }
  .mobile-simple-sheet[data-snap="peek"] > footer {
    display: none;
  }
  .mobile-simple-sheet[data-snap="peek"] .mobile-sheet-scroll {
    padding: 6px 12px max(9px,env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .mobile-simple-sheet[data-snap="peek"]:not([data-tool="text"]) .mobile-sheet-scroll {
    display: none;
  }
  .mobile-simple-sheet[data-snap="peek"][data-tool="text"] .mobile-text-controls > :not(.mobile-text-input-wrap) {
    display: none;
  }
  .mobile-simple-sheet[data-snap="peek"][data-tool="text"] .mobile-text-input-wrap small {
    display: none;
  }
  .mobile-simple-sheet[data-snap="peek"][data-tool="text"] .mobile-text-input-wrap :is(textarea,.mobile-text-rich-input) {
    min-height: 62px;
    max-height: 62px;
  }
  .mobile-text-more {
    display: none;
  }
  .mobile-simple-sheet[data-snap="peek"][data-tool="text"] .mobile-text-more {
    display: flex;
    width: 100%;
    height: 22px;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: #9991c8;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .mobile-hook-alternatives {
    display: grid;
    gap: 7px;
  }
  .mobile-hook-alternatives > button {
    display: grid;
    min-height: 48px;
    padding: 8px 10px;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(157,140,255,.18);
    border-radius: 10px;
    background: rgba(139,112,235,.07);
    color: #b9adf4;
    text-align: left;
  }
  .mobile-hook-alternatives > button span {
    display: grid;
    gap: 2px;
  }
  .mobile-hook-alternatives > button strong {
    color: #ddd8f7;
    font-size: 9px;
  }
  .mobile-hook-alternatives > button small {
    color: #746d91;
    font-size: 7px;
  }
  .mobile-hook-alternatives > p {
    margin: 0;
    color: #f09aa4;
    font-size: 8px;
    line-height: 1.4;
  }
  .mobile-hook-alternatives > div {
    display: grid;
    gap: 5px;
  }
  .mobile-hook-alternatives > div > button {
    display: grid;
    min-height: 45px;
    padding: 8px 10px;
    grid-template-columns: 54px minmax(0,1fr);
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 9px;
    background: #15171c;
    color: #e6e7ea;
    text-align: left;
  }
  .mobile-hook-alternatives > div em {
    color: #9185c9;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .mobile-hook-alternatives > div span {
    font-size: 9px;
    line-height: 1.35;
  }
  .mobile-tool-explainer {
    margin: 0 0 11px;
    color: #858a92;
    font-size: 9px;
    line-height: 1.45;
  }
  .mobile-image-tool-stack {
    display: flex;
    flex-direction: column;
  }
  .mobile-image-tool-stack .mobile-tool-explainer {
    order: 1;
  }
  .mobile-image-tool-stack .mobile-overlay-controls,
  .mobile-image-tool-stack .mobile-background-controls {
    order: 2;
  }
  .mobile-image-tool-stack .mobile-image-picker {
    order: 3;
  }
  .mobile-image-picker {
    display: grid;
    margin-bottom: 11px;
    gap: 9px;
  }
  .mobile-image-picker-toggle {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 7px 10px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: #101216;
    color: #8d929a;
  }
  .mobile-image-picker-toggle > span {
    display: grid;
    grid-template-columns: 22px minmax(0,1fr);
    align-items: center;
    gap: 2px 6px;
    text-align: left;
  }
  .mobile-image-picker-toggle svg {
    grid-row: 1/3;
  }
  .mobile-image-picker-toggle strong {
    color: #e7e9ec;
    font-size: 9px;
  }
  .mobile-image-picker-toggle small {
    color: #686f79;
    font-size: 7px;
  }
  .mobile-image-picker.collapsed .mobile-image-picker-toggle {
    border-color: rgba(167,145,255,.2);
    background: rgba(128,96,238,.07);
  }
  .mobile-image-tabs {
    display: grid;
    margin-bottom: 10px;
    padding: 3px;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    border-radius: 10px;
    background: #0e0f12;
  }
  .mobile-image-tabs button {
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #737881;
    font-size: 8px;
    font-weight: 700;
  }
  .mobile-image-tabs button.active {
    background: #26282e;
    color: #fff;
  }
  .mobile-image-tabs small {
    display: grid;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    place-items: center;
    border-radius: 99px;
    background: rgba(255,255,255,.07);
    font-size: 6px;
  }
  .mobile-image-pool-summary {
    display: flex;
    margin: 1px 1px 8px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .mobile-image-pool-summary > span {
    display: grid;
    gap: 1px;
  }
  .mobile-image-pool-summary strong {
    color: #dfe2e7;
    font-size: 8px;
  }
  .mobile-image-pool-summary small {
    color: #686f79;
    font-size: 7px;
  }
  .mobile-image-pool-summary em {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid rgba(167,145,255,.2);
    border-radius: 99px;
    background: rgba(128,96,238,.08);
    color: #b9aaff;
    font-size: 7px;
    font-style: normal;
    font-weight: 750;
  }
  .mobile-cached-images {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
  }
  .mobile-cached-images > article {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
  }
  .mobile-cached-images .mobile-cached-use {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: #0b0c0f;
  }
  .mobile-cached-images .mobile-cached-use img {
    object-fit: cover;
  }
  .mobile-cached-images .mobile-cached-use > span {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: grid;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    place-items: center;
    border-radius: 99px;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: 7px;
    font-weight: 750;
  }
  .mobile-cached-images .mobile-cached-use > em {
    position: absolute;
    z-index: 2;
    left: 4px;
    bottom: 4px;
    padding: 3px 5px;
    border: 1px solid rgba(176,255,201,.22);
    border-radius: 999px;
    background: rgba(12,42,27,.86);
    color: #b9ffd0;
    font-size: 6px;
    font-style: normal;
    font-weight: 760;
  }
  .mobile-cached-images .mobile-cached-use:active {
    border-color: #fff;
    transform: scale(.97);
  }
  .mobile-cached-images .mobile-cached-use:disabled {
    cursor: wait;
  }
  .mobile-cached-images .mobile-cached-use:disabled:not(.is-selecting) {
    opacity: .62;
  }
  .mobile-cached-images .mobile-cached-use.is-selecting {
    border-color: rgba(190,177,255,.9);
    box-shadow: 0 0 0 2px rgba(128,96,238,.24);
    transform: scale(.97);
  }
  .mobile-cached-images .mobile-cached-use.is-selecting::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: rgba(8,9,12,.22);
    content: "";
    pointer-events: none;
  }
  .mobile-cached-images .mobile-cached-use.is-selecting > span {
    z-index: 3;
    background: rgba(18,15,29,.9);
    color: #dcd5ff;
  }
  .mobile-cached-images .mobile-cached-upscale {
    position: absolute;
    z-index: 4;
    top: 4px;
    right: 4px;
    display: grid;
    width: 21px;
    height: 21px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(215,207,255,.34);
    border-radius: 99px;
    background: rgba(18,14,31,.84);
    color: #e1dbff;
    backdrop-filter: blur(8px);
  }
  .mobile-image-choice-progress {
    display: flex;
    min-height: 44px;
    padding: 8px 9px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(178,161,255,.22);
    border-radius: 9px;
    background: rgba(111,82,214,.1);
    color: #d8d2f4;
  }
  .mobile-image-choice-progress > span {
    display: grid;
    gap: 1px;
  }
  .mobile-image-choice-progress strong {
    font-size: 8px;
  }
  .mobile-image-choice-progress small {
    color: #817c95;
    font-size: 7px;
  }
  .mobile-cached-images .mobile-upload-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-style: dashed;
    color: #868b94;
    font-size: 7px;
  }
  .mobile-image-empty {
    display: grid;
    min-height: 95px;
    grid-column: 1/-1;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 9px;
    color: #676d76;
    text-align: center;
  }
  .mobile-image-empty strong {
    color: #a6abb2;
    font-size: 9px;
  }
  .mobile-image-empty small {
    font-size: 7px;
  }
  .mobile-sheet-scroll .image-option-area.compact .ranked-media-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    max-height: none;
  }
  .mobile-sheet-scroll .image-option-area.compact .ranked-media-grid article > button.ranked-media-use {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .mobile-overlay-controls {
    display: grid;
    margin-bottom: 12px;
    padding: 9px;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.022);
  }
  .mobile-mask-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 4px;
  }
  .mobile-mask-row button {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #101216;
    color: #747a83;
    font-size: 6px;
    text-transform: capitalize;
  }
  .mobile-mask-row button.active {
    border-color: rgba(168,145,255,.36);
    background: rgba(125,95,232,.12);
    color: #e2dcff;
  }
  .mobile-stroke-row {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr) 68px;
    align-items: end;
    gap: 6px;
  }
  .mobile-stroke-row > label {
    display: grid;
    height: 48px;
    padding: 6px;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: #101216;
    color: #737981;
    font-size: 7px;
  }
  .mobile-stroke-row input[type=color] {
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
  }
  .mobile-stroke-row > button {
    height: 48px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: #101216;
    color: #717780;
    font-size: 7px;
  }
  .mobile-stroke-row > button strong {
    display: block;
    margin-top: 3px;
    color: #aaaeb5;
    font-size: 6px;
  }
  .mobile-stroke-row > button.active {
    border-color: rgba(168,145,255,.3);
    color: #ded8ff;
  }
  .mobile-image-adjust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .mobile-background-controls {
    display: grid;
    margin-bottom: 11px;
    padding: 10px;
    grid-template-columns: minmax(0,1fr);
    align-items: stretch;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.022);
  }
  .mobile-background-controls > span {
    display: grid;
    align-self: center;
    gap: 3px;
  }
  .mobile-background-controls strong {
    font-size: 8px;
  }
  .mobile-background-controls small {
    color: #686e77;
    font-size: 6px;
    line-height: 1.35;
  }
  .mobile-background-frame-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
  }
  .mobile-background-frame-reset {
    min-height: 44px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: #101216;
    color: #aeb3ba;
    font-size: 8px;
    font-weight: 750;
  }
  .mobile-background-controls .mobile-video-background {
    width: 100%;
    min-height: 54px;
  }
  .mobile-image-subject {
    position: absolute;
    z-index: 3;
    right: 4px;
    bottom: 26px;
    left: 4px;
    overflow: hidden;
    padding: 4px 5px;
    border-radius: 5px;
    background: rgba(7,9,12,.76);
    color: #fff;
    font-size: 9px;
    line-height: 1.2;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(7px);
  }
  .mobile-text-controls {
    display: grid;
    gap: 11px;
  }
  .mobile-text-input-wrap {
    display: grid;
    gap: 5px;
  }
  .mobile-text-input-wrap :is(textarea,.mobile-text-rich-input) {
    min-height: 82px;
    padding: 11px 12px;
    overflow-y: auto;
    resize: none;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    outline: 0;
    background: #0f1014;
    color: #fff;
    line-height: 1.25;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .mobile-text-input-wrap :is(textarea,.mobile-text-rich-input):focus {
    border-color: rgba(168,145,255,.48);
    box-shadow: 0 0 0 3px rgba(128,96,238,.1);
  }
  .mobile-text-rich-input[data-retained-selection="true"] [data-rich-selection] {
    border-radius: 2px;
    background: rgba(72,137,255,.3);
    box-shadow: 0 0 0 1px rgba(115,168,255,.38);
  }
  .mobile-text-input-wrap small {
    color: #777e88;
    font-size: 7px;
    line-height: 1.35;
  }
  .mobile-text-controls .text-rewrite-trigger {
    min-height: 48px;
  }
  .mobile-text-controls .text-rewrite-menu {
    padding: 10px;
  }
  .mobile-text-controls .text-rewrite-options > button {
    min-height: 52px;
  }
  .mobile-text-controls .text-rewrite-custom {
    grid-template-columns: minmax(0,1fr) 44px;
  }
  .mobile-text-controls .text-rewrite-custom input {
    height: 44px;
    font-size: 16px;
  }
  .mobile-text-controls .text-rewrite-custom > button {
    width: 44px;
    height: 44px;
  }
  .mobile-font-strip {
    display: flex;
    padding-bottom: 3px;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobile-font-strip > span {
    position: sticky;
    left: 0;
    z-index: 2;
    padding-right: 4px;
    background: #141519;
    color: #6f757e;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
  }
  .mobile-font-strip button {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: #101216;
    color: #a9adb3;
    font-size: 10px;
  }
  .mobile-font-strip button.active {
    border-color: #fff;
    color: #fff;
  }
  .font-weight-strip > span {
    background: #141519;
  }
  .mobile-color-mode {
    display: grid;
    padding: 3px;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    border-radius: 9px;
    background: #0e0f12;
  }
  .mobile-color-mode button {
    height: 31px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #707680;
    font-size: 8px;
  }
  .mobile-color-mode button.active {
    background: #27292f;
    color: #fff;
  }
  .mobile-color-swatches {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mobile-color-swatches > button,.mobile-color-swatches > label {
    position: relative;
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    place-items: center;
    overflow: hidden;
    border: 2px solid #2b2d32;
    border-radius: 50%;
    color: #aaaeb4;
  }
  .mobile-color-swatches > button.active {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  .mobile-color-swatches.has-selection {
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(128,96,238,.1);
    box-shadow: inset 0 0 0 1px rgba(168,145,255,.17);
  }
  .mobile-color-swatches > label {
    background: #23252a;
  }
  .mobile-color-swatches input {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .mobile-color-swatches > button.mobile-custom-color-trigger {
    border-style: dashed;
    background: conic-gradient(from 45deg,#ff5c6a,#ffd15c,#43d18b,#4ba3ff,#9a7cff,#ff5c6a);
    color: #fff;
    box-shadow: inset 0 0 0 6px #202228;
  }
  .mobile-custom-color-menu {
    display: grid;
    padding: 10px;
    gap: 9px;
    border: 1px solid rgba(171,148,255,.2);
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(128,96,238,.1),rgba(255,255,255,.018) 58%),#111318;
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
  }
  .mobile-custom-color-menu > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .mobile-custom-color-menu > div:first-child > span {
    display: grid;
    gap: 2px;
  }
  .mobile-custom-color-menu > div:first-child strong {
    color: #f0f1f4;
    font-size: 10px;
  }
  .mobile-custom-color-menu > div:first-child small {
    color: #747a84;
    font-size: 7px;
  }
  .mobile-custom-color-menu > div:first-child > button {
    display: grid;
    width: 27px;
    height: 27px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    color: #8b919a;
  }
  .mobile-custom-color-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 7px;
  }
  .mobile-custom-color-field,.mobile-eyedropper-button {
    position: relative;
    display: flex;
    min-height: 54px;
    padding: 8px 9px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: #17191f;
    color: #d8dbe0;
  }
  .mobile-custom-color-field > span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    font-weight: 700;
  }
  .mobile-custom-color-field i {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 7px;
    background: var(--picked-color);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .mobile-custom-color-field > strong {
    color: #858b95;
    font-family: var(--font-geist-mono),monospace;
    font-size: 7px;
  }
  .mobile-custom-color-field > input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }
  .mobile-eyedropper-button {
    justify-content: flex-start;
    border-color: rgba(169,146,255,.18);
    background: rgba(128,96,238,.09);
  }
  .mobile-eyedropper-button > svg {
    flex: 0 0 auto;
    color: #b6a7ff;
  }
  .mobile-eyedropper-button > span {
    display: grid;
    gap: 2px;
    text-align: left;
  }
  .mobile-eyedropper-button strong {
    font-size: 8px;
  }
  .mobile-eyedropper-button small {
    color: #77718d;
    font-size: 6px;
  }
  .mobile-color-hex {
    display: grid;
    min-height: 37px;
    padding: 5px 7px 5px 10px;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: center;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 9px;
    background: #0e1014;
    color: #6f7580;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
  }
  .mobile-color-hex input {
    width: 100%;
    height: 27px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    outline: 0;
    background: #191b21;
    color: #e4e6e9;
    font-family: var(--font-geist-mono),monospace;
    font-size: 9px;
  }
  .mobile-simple-sheet-root.is-sampling-color .mobile-sheet-dismiss,.mobile-simple-sheet-root.is-sampling-color .mobile-simple-sheet {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }
  .studio-root[data-color-sampling="true"] {
    --mobile-sheet-reserved: 0px;
    --mobile-editor-headroom: 56px;
  }
  .studio-root[data-color-sampling="true"] .focus-preview-stack {
    height: var(--mobile-visual-height);
  }
  .studio-root[data-color-sampling="true"] .focus-header {
    display: flex;
    min-height: 30px;
    max-height: 34px;
    margin-bottom: 6px;
    opacity: 1;
    pointer-events: auto;
  }
  .studio-root[data-color-sampling="true"] .carousel-workspace {
    width: min(94vw,max(180px,calc((var(--mobile-visual-height) - 70px) * .8)));
  }
  .mobile-color-sampler {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    pointer-events: auto;
    touch-action: none;
    cursor: crosshair;
  }
  .mobile-color-sampler-instruction {
    position: absolute;
    top: max(12px,env(safe-area-inset-top));
    right: 76px;
    left: 10px;
    display: flex;
    min-width: 0;
    padding: 10px 13px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: rgba(15,17,21,.9);
    color: #f1f2f4;
    box-shadow: 0 12px 36px rgba(0,0,0,.38);
    pointer-events: none;
    backdrop-filter: blur(18px);
  }
  .mobile-color-sampler-instruction svg {
    color: #b8a8ff;
  }
  .mobile-color-sampler-instruction span {
    display: grid;
    gap: 2px;
  }
  .mobile-color-sampler-instruction strong {
    font-size: 10px;
  }
  .mobile-color-sampler-instruction small {
    color: #858b94;
    font-size: 7px;
  }
  .mobile-color-sampler-cancel {
    position: absolute;
    top: max(16px,env(safe-area-inset-top));
    right: 10px;
    z-index: 2;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: rgba(15,17,21,.9);
    color: #d8dade;
    font-size: 8px;
    font-weight: 750;
  }
  .mobile-color-sampler-loupe {
    position: absolute;
    z-index: 4;
    display: grid;
    width: 64px;
    height: 82px;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 32px 32px 14px 14px;
    background: var(--sample-color);
    box-shadow: 0 12px 38px rgba(0,0,0,.48);
    transform: translate(-50%,-112%);
    pointer-events: none;
  }
  .mobile-color-sampler-loupe::after {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--sample-color);
    content: "";
    transform: translateX(-50%);
  }
  .mobile-color-sampler-loupe i {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 50%;
    background: var(--sample-color);
    box-shadow: 0 0 0 7px rgba(0,0,0,.12);
  }
  .mobile-color-sampler-loupe strong {
    align-self: end;
    margin-bottom: 8px;
    padding: 3px 5px;
    border-radius: 99px;
    background: rgba(0,0,0,.58);
    color: #fff;
    font-family: var(--font-geist-mono),monospace;
    font-size: 6px;
  }
  .mobile-gradient-controls {
    display: grid;
    grid-template-columns: 70px 70px minmax(0,1fr);
    align-items: end;
    gap: 7px;
  }
  .mobile-gradient-controls > label,.mobile-fade-controls > label {
    display: grid;
    min-height: 48px;
    padding: 6px 7px;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    background: #101216;
    color: #737981;
    font-size: 7px;
  }
  .mobile-gradient-controls input[type=color],.mobile-fade-controls input[type=color] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
  }
  .mobile-text-alignments,.mobile-text-effects {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .mobile-text-alignments > span,.mobile-text-effects > span {
    width: 42px;
    color: #707680;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase;
  }
  .mobile-text-alignments button,.mobile-text-effects button {
    display: grid;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    background: #101216;
    color: #767c85;
    font-size: 7px;
  }
  .mobile-text-alignments button.active,.mobile-text-effects button.active {
    border-color: rgba(168,145,255,.35);
    background: rgba(128,96,238,.13);
    color: #fff;
  }
  .mobile-text-alignments > i {
    width: 1px;
    height: 25px;
    margin: 0 3px;
    background: rgba(255,255,255,.07);
  }
  .mobile-text-effects input[type=color] {
    width: 34px;
    height: 34px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: #101216;
  }
  .mobile-inline-tip {
    margin: 0;
    color: #6f7580;
    font-size: 7px;
    line-height: 1.4;
  }
  .mobile-fade-controls {
    display: grid;
    width: 100%;
    gap: 10px;
  }
  .mobile-fade-controls p,.mobile-slide-controls > p {
    margin: 0;
    color: #828791;
    font-size: 9px;
    line-height: 1.45;
  }
  .mobile-fade-controls > label {
    width: 100%;
    box-sizing: border-box;
  }
  .mobile-slide-controls {
    display: grid;
    gap: 12px;
  }
  .mobile-slide-controls > div {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
  }
  .mobile-slide-controls > div > button {
    display: grid;
    min-height: 124px;
    padding: 9px;
    align-content: start;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
    background: #101216;
    color: #747a83;
    text-align: left;
  }
  .mobile-slide-controls > div > button.active {
    border-color: rgba(168,145,255,.42);
    background: rgba(128,96,238,.12);
    color: #fff;
  }
  .mobile-slide-controls strong {
    font-size: 9px;
  }
  .mobile-slide-controls small {
    color: #656b74;
    font-size: 6px;
    line-height: 1.35;
  }
  .mobile-slide-type-icon {
    position: relative;
    display: block;
    width: 34px;
    height: 42px;
    overflow: hidden;
    border-radius: 4px;
    background: #030405;
  }
  .mobile-slide-type-icon i {
    position: absolute;
    inset: 0 0 43%;
    background: #3f4853;
  }
  .mobile-slide-type-icon b {
    position: absolute;
    right: 4px;
    bottom: 5px;
    left: 4px;
    height: 7px;
    background: #f2f2f3;
  }
  .mobile-slide-type-icon.content i {
    bottom: 51%;
  }
  .mobile-slide-type-icon.context i {
    bottom: 56%;
    opacity: .72;
  }
  .mobile-slide-actions {
    display: flex;
    gap: 6px;
  }
  .mobile-slide-actions button {
    display: flex;
    min-width: 0;
    height: 36px;
    padding: 0 9px;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    color: #8d939b;
    font-size: 8px;
  }
  .mobile-slide-actions button.danger {
    color: #e77f89;
  }
  .mobile-ai-controls {
    display: grid;
    gap: 10px;
  }
  .mobile-ai-controls > span {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 2px 6px;
  }
  .mobile-ai-controls > span svg {
    grid-row: 1/3;
    color: #ad9dff;
  }
  .mobile-ai-controls > span strong {
    font-size: 10px;
  }
  .mobile-ai-controls > span small {
    color: #696f78;
    font-size: 7px;
  }
  .mobile-ai-controls > div {
    display: grid;
    min-height: 86px;
    padding: 8px;
    grid-template-columns: minmax(0,1fr) 38px;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: #0f1014;
  }
  .mobile-ai-controls textarea {
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: #eef0f2;
    font-size: 13px;
  }
  .mobile-ai-controls > div button {
    display: grid;
    width: 36px;
    height: 36px;
    align-self: end;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: #eeeaff;
    color: #191522;
  }
  .mobile-ai-controls nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
  }
  .mobile-ai-controls nav button {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: #101216;
    color: #828892;
    font-size: 7px;
  }
  .range-control > span {
    font-size: 7px;
  }
  .range-control > span em input {
    font-size: 8px;
  }
  .range-reset {
    height: 21px;
    padding-inline: 5px;
    font-size: 7px;
  }
  .editor-canvas.isolate-overlay .canvas-layer:not(.selected) {
    filter: none;
  }
  .toast {
    bottom: 16px;
  }
}
@media (max-width: 700px) {
  .dashboard-hero {
    min-height: 0;
    padding: 42px 14px 34px;
  }
  .dashboard-hero > p,
  .prompt-examples,
  .reference-builder {
    margin-inline: 8px;
  }
  .reference-source-row {
    grid-template-columns: 16px minmax(0, 1fr);
  }
  .reference-source-row button {
    grid-column: 2;
    width: 100%;
  }
  .reference-image-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .reference-image-row button {
    width: 100%;
  }
  .prompt-image-attachments {
    grid-template-columns: 1fr;
  }
  .prompt-image-attachments > button {
    width: 100%;
  }
  .prompt-attachment-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .dashboard-hero h1 {
    margin-bottom: 17px;
    font-size: 31px;
  }
  .dashboard-prompt {
    min-height: 0;
    border-radius: 16px;
  }
  .dashboard-prompt textarea {
    height: 94px;
    padding: 17px 15px 8px;
  }
  .prompt-footer {
    height: 58px;
  }
  .dashboard-template-picker {
    padding: 6px 8px 9px;
  }
  .template-picker-heading {
    min-height: 25px;
  }
  .template-picker-heading > span::after {
    color: #626872;
    content: " · preview";
    font-weight: 500;
  }
  .dashboard-template-card {
    flex-basis: 112px;
    min-height: 61px;
  }
}
:is(a, button, input, textarea, select, summary, [tabindex], [contenteditable="true"]):focus-visible {
  outline: 2px solid #9fc2ff !important;
  outline-offset: 3px !important;
}
.editor-panel :is(.desktop-control-label, .desktop-text-alignments > span, .desktop-text-effects > span, .desktop-font-strip > span, .font-weight-strip > span, .desktop-advanced-divider small),
.generation-console :is(.generation-summary-copy small, .generation-details-panel > header small, .generation-phase-rail li, .generation-live-copy > span, .generation-wait-note, .generation-events small),
.modal-backdrop :is(.modal-head span, .modal-head p, .modal-footer > span, .caption-signals span),
.template-save-modal :is(small, label > span) {
  color: #9299a3;
  font-size: 10px;
  line-height: 1.4;
}
.editor-panel :is(.desktop-color-mode button, .desktop-bold-toggle, .panel-back-to-layers, .layers-section-switch button, .panel-footer button),
.generation-console-actions button,
.modal-footer button {
  min-height: 32px;
  font-size: 10px;
}
.desktop-text-alignments button,
.desktop-text-effects button,
.desktop-font-strip button,
.font-weight-strip button {
  min-height: 36px;
  font-size: 10px;
}
.desktop-color-swatches > button,
.desktop-custom-color {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}
.range-control strong,
.range-control em,
.range-control > span {
  color: #9aa1aa;
  font-size: 10px;
}
.range-reset {
  min-height: 28px;
  font-size: 10px;
}
.range-control > input[type="range"] {
  height: 30px;
  background: linear-gradient(#4a515b, #4a515b) center / 100% 3px no-repeat;
}
.range-control > input[type="range"]::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
}
.inline-text-toolbar {
  min-height: 38px;
}
.inline-text-toolbar :is(select, input[type="number"], input[type="color"], button) {
  min-height: 30px;
  font-size: 10px;
}
.inline-text-toolbar .inline-color-swatch {
  width: 26px;
  min-width: 26px;
}
.toast {
  font-size: 11px;
}
@media (max-width: 960px) and (pointer: coarse) {
  .focus-header {
    min-height: 24px;
    max-height: 24px;
  }
  .focus-header:has(.mobile-usage-chip) {
    min-height: 44px;
    max-height: 44px;
  }
  .focus-header .mobile-usage-chip {
    min-height: 44px;
  }
}
@media (pointer: coarse) {
  .top-icon,
  .history-action,
  .mobile-close,
  .dashboard-back,
  .modal-head > button,
  .mobile-simple-sheet > header button {
    min-width: 44px;
    min-height: 44px;
  }
  .slide-picker-item {
    grid-template-rows: auto 22px;
  }
  .slide-picker-grip {
    min-height: 22px;
  }
  .slide-picker-drag-ghost {
    grid-template-rows: 1fr 22px;
  }
  .range-control > input[type="range"] {
    height: 44px;
  }
  .range-control > input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }
  .range-reset {
    min-width: 44px;
    min-height: 36px;
  }
}
@media (max-width: 820px) {
  .mobile-simple-sheet > header small,
  .mobile-text-input-wrap small,
  .mobile-font-strip > span,
  .mobile-image-pool-summary small,
  .mobile-background-controls small,
  .mobile-custom-color-menu small,
  .mobile-inline-tip,
  .mobile-ai-controls small {
    color: #9299a3;
    font-size: 10px;
    line-height: 1.4;
  }
  .mobile-primary-actions button,
  .mobile-text-more,
  .mobile-image-tabs button,
  .mobile-mask-row button,
  .mobile-stroke-row > label,
  .mobile-stroke-row > button,
  .mobile-color-mode button,
  .mobile-text-alignments > span,
  .mobile-text-effects > span,
  .mobile-text-alignments button,
  .mobile-text-effects button,
  .mobile-slide-actions button,
  .mobile-ai-controls nav button {
    font-size: 10px;
  }
  .mobile-text-more,
  .mobile-image-tabs button,
  .mobile-color-mode button,
  .mobile-text-alignments button,
  .mobile-text-effects button,
  .mobile-slide-actions button,
  .mobile-ai-controls nav button {
    min-height: 40px;
  }
  .mobile-simple-sheet[data-snap="peek"][data-tool="text"] .mobile-text-more {
    height: 32px;
  }
  .mobile-cached-images .mobile-cached-upscale {
    width: 34px;
    height: 34px;
  }
  .mobile-color-swatches > button,
  .mobile-color-swatches > label {
    width: 36px;
    height: 36px;
    min-height: 36px !important;
    flex-basis: 36px;
    aspect-ratio: 1;
  }
  .mobile-image-pool-summary strong,
  .mobile-background-controls strong,
  .mobile-custom-color-menu strong,
  .mobile-image-choice-progress strong {
    font-size: 11px;
  }
  .mobile-image-choice-progress small,
  .mobile-image-empty small,
  .mobile-slide-controls small {
    color: #9299a3;
    font-size: 9px;
  }
}
.bug-report-launch {
  display: grid;
  width: 40px;
  padding: 0;
  place-items: center;
  min-height: 40px;
  font-size: 10px;
}
body:has(.dashboard-root) .bug-report-launch {
  inset: auto max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) auto;
}
body:has(.dashboard-root) .projects-section {
  padding-bottom: max(74px, calc(58px + env(safe-area-inset-bottom)));
}
.bug-report-capture {
  display: grid;
  gap: 9px;
}
.bug-report-screenshot {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 128px;
  max-height: 220px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: #0b0d11;
}
.bug-report-screenshot > img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.bug-report-screenshot > span {
  display: grid;
  place-items: center;
  gap: 7px;
  color: #858d97;
}
.bug-report-screenshot > span small {
  font-size: 11px;
}
.bug-report-screenshot-empty {
  max-width: 390px;
  padding: 20px;
  text-align: center;
}
.bug-report-screenshot-empty > strong {
  color: #c6cbd1;
  font-size: 12px;
}
.bug-report-screenshot-empty > small {
  color: #767e88;
  line-height: 1.45;
}
.bug-report-screenshot-empty > i {
  display: flex;
  margin-top: 3px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-style: normal;
}
.bug-report-screenshot-empty > i button {
  display: inline-flex;
  min-height: 38px;
  padding: 0 11px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: #b3bac2;
  font-size: 11px;
  font-weight: 700;
}
.bug-report-screenshot > button {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(8,10,13,.82);
  color: #d2d5d9;
}
.bug-report-capture-note {
  color: #747c86;
  font-size: 10px;
  line-height: 1.45;
}
.bug-report-media-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bug-report-media-actions button {
  display: flex;
  min-height: 44px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: #a7adb5;
  font-size: 11px;
}
.bug-report-media-actions button.active {
  border-color: rgba(255,120,140,.3);
  background: rgba(129,38,54,.12);
  color: #ffc0c9;
}
.bug-report-video-chip {
  display: grid;
  min-height: 38px;
  padding: 5px 7px 5px 10px;
  grid-template-columns: 16px minmax(0,1fr) 30px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  color: #9da3ab;
}
.bug-report-video-chip span {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bug-report-video-chip button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: #777f89;
}
.bug-report-diagnostics-note {
  margin: -2px 0 0;
  color: #747c86;
  font-size: 10px;
  line-height: 1.45;
}
.bug-report-modal > header span,
.bug-report-modal > header p,
.bug-report-form > label > span,
.bug-report-diagnostics strong,
.bug-report-diagnostics small,
.bug-report-error,
.bug-report-success p {
  color: #939aa4;
  font-size: 11px;
}
.bug-report-form textarea,
.bug-report-select,
.bug-report-select select {
  font-size: 14px;
}
.bug-report-form > footer button,
.bug-report-success button {
  min-height: 40px;
  font-size: 11px;
}
.admin-bug-media {
  display: grid;
  margin-left: 40px;
  grid-template-columns: repeat(auto-fit,minmax(150px,220px));
  gap: 8px;
}
.admin-bug-media > a,.admin-bug-media > div {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: #0b0d11;
  color: #959da6;
  text-decoration: none;
}
.admin-bug-media img,.admin-bug-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  background: #050607;
  object-fit: contain;
}
.admin-bug-media span {
  display: flex;
  min-height: 32px;
  padding: 6px 8px;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-topbar :is(button, input),
.editor-panel :is(button, input, textarea, select),
.modal-backdrop :is(button, input, textarea, select),
.dashboard-root :is(button, input, textarea, select),
.landing-root :is(button, input, textarea, select),
.pricing-page :is(button, input, textarea, select),
.auth-backdrop :is(button, input, textarea, select) {
  font-size: max(11px, 0.6875rem);
}
.editor-panel :is(.layer-name strong, .panel-header strong, .section-title > span, .control-section > strong),
.dashboard-root :is(.projects-header span, .template-section-heading span, .template-library-card-copy strong, .base-template-copy strong),
.landing-root :is(.landing-nav nav a, .landing-nav button, .landing-proof-line, .landing-footer a, .landing-footer button),
.auth-backdrop :is(.auth-modal > p, .auth-provider-button, .auth-terms, .auth-divider) {
  font-size: 11px;
  line-height: 1.45;
}
.editor-panel :is(.layer-name small, .panel-header span, .selection-summary small),
.dashboard-root :is(.topic-card-signal > span, .topic-card-actions button, .project-progress-chip, .project-job-controls button, .template-section-heading p, .base-template-copy small, .template-library-card-copy small),
.generation-console :is(.generation-events strong, .generation-events small) {
  color: #969da7;
  font-size: 10px;
  line-height: 1.4;
}
.panel-tabs button,
.layers-section-switch button,
.editor-primary-actions button,
.topic-card-actions button,
.project-job-controls button,
.template-library-delete,
.dashboard-account-menu :is(button, a) {
  min-height: 38px;
}
.selection-label,
.resize-dimension-badge,
.resize-dimension-badge strong,
.resize-dimension-badge em {
  font-size: 10px;
}
:is(.studio-topbar, .editor-panel, .mobile-simple-sheet, .dashboard-root, .landing-root, .pricing-page, .auth-backdrop, .modal-backdrop, .bug-report-backdrop) small {
  font-size: max(10px, .625rem);
  line-height: 1.35;
}
.admin-root :is(button, a, th, td, small, time, summary, pre),
.automation-root :is(button, a, label, input, select, small, time),
.bug-report-backdrop :is(button, label, span, small, p, input, textarea, select) {
  font-size: max(10px, .625rem) !important;
  line-height: 1.4;
}
.admin-root :is(.admin-panel > header span, .admin-bug-summary span, .admin-status, .admin-footer),
.automation-root :is(.automation-eyebrow, .automation-card-heading span, .automation-message, .queue-topic > strong, .trend-strip article strong) {
  font-size: 10px !important;
  line-height: 1.4;
}
.admin-root :is(button, a),
.automation-root :is(button, a, input, select) {
  min-height: 36px;
}
.admin-root :is(
  .admin-token-builder button,
  .admin-token-list-heading button,
  .admin-token-list article > button,
  .admin-token-secret button
) {
  min-height: 44px;
}
.editor-panel :is(.media-rank, .media-dimensions, .media-cleaned-badge, .media-upscale-button, .media-search-hint, .media-search-meta, .ranked-media-grid strong, .ranked-media-grid small, .ranked-media-grid a),
.mobile-simple-sheet :is(.mobile-cached-images .mobile-cached-use > span, .mobile-cached-images .mobile-cached-use > em, .mobile-cached-images .mobile-upload-image),
.focus-header :is(span, strong),
.grid-card-meta,
.generation-console :is(button, small, em) {
  font-size: 10px;
  line-height: 1.35;
}
@media (max-width: 1320px) and (min-width: 821px) {
  .studio-topbar {
    grid-template-columns: minmax(200px,1fr) auto minmax(290px,1fr);
    padding-inline: 10px;
  }
  .studio-topbar .top-actions {
    gap: 4px;
  }
  .studio-topbar :is(.caption-button,.share-button) span,
  .studio-topbar .cost-chip :is(em,small),
  .studio-topbar .brand-copy > small {
    display: none;
  }
  .studio-topbar :is(.caption-button,.share-button) {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  .studio-topbar .cost-chip {
    min-width: 72px;
    padding-inline: 8px;
  }
}
@media (max-width: 1040px) and (min-width: 821px) {
  .studio-topbar {
    grid-template-columns: minmax(150px,1fr) auto minmax(205px,1fr);
  }
  .studio-topbar .history-action {
    display: none;
  }
  .studio-topbar .cost-chip {
    min-width: 38px;
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  .studio-topbar .cost-chip span {
    display: none;
  }
  .studio-topbar .usage-chip {
    width: auto;
    min-width: 72px;
    padding-inline: 8px;
  }
  .studio-topbar .usage-chip span {
    display: inline;
  }
}
@media (pointer: coarse) {
  .menu-select-popover {
    --menu-item-height: 44px;
    --menu-item-font: 12px;
  }
  :is(.studio-topbar, .editor-panel, .mobile-simple-sheet, .dashboard-root, .landing-root, .pricing-page, .auth-backdrop, .modal-backdrop, .generation-console)
  :is(button, [role="button"], input:not([type="range"]):not([type="color"]), select) {
    min-height: 44px;
  }
  .dashboard-avatar,
  .dashboard-header-action {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .dashboard-budget-chip {
    width: auto;
  }
  .slide-picker-grip {
    min-height: 22px;
  }
  .slide-picker-grip::before {
    position: absolute;
    inset: -11px 0;
    content: "";
  }
  .mobile-cached-images .mobile-cached-upscale {
    width: 40px;
    height: 40px;
  }
  .layer-resize-handle::after,
  .layer-rotate-handle::after {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    content: "";
  }
}
@media (max-width: 820px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  :is(.studio-root, .dashboard-root, .landing-root, .pricing-page, .auth-backdrop, .modal-backdrop, .bug-report-backdrop)
  :is(input:not([type="range"]):not([type="color"]), textarea, select) {
    font-size: 16px !important;
  }
  .mobile-simple-sheet .media-search-box {
    min-height: 52px;
    padding: 4px 4px 4px 12px;
    gap: 9px;
    border-radius: 12px;
  }
  .mobile-simple-sheet .media-search-box input {
    height: 42px;
    line-height: 1.35;
  }
  .mobile-simple-sheet .media-search-box button {
    min-width: 82px;
    height: 44px;
    padding-inline: 14px;
    border-radius: 9px;
    font-size: 12px;
  }
  .mobile-simple-sheet .media-search-feedback,
  .mobile-simple-sheet .media-search-loading {
    font-size: 11px;
  }
  .mobile-simple-sheet .more-image-results {
    min-height: 44px;
    font-size: 11px;
  }
  .mobile-simple-sheet :is(textarea,.mobile-text-rich-input) {
    -webkit-user-select: text;
    user-select: text;
    touch-action: auto;
  }
  :is(.studio-topbar, .editor-panel, .mobile-simple-sheet, .dashboard-root, .landing-root, .pricing-page, .auth-backdrop, .modal-backdrop, .bug-report-backdrop)
  small,
  .mobile-simple-sheet > header small,
  .topic-card-signal > span,
  .topic-origin span,
  .project-progress-chip,
  .project-job-controls button,
  .base-template-badge,
  .geometry-controls label > em,
  .geometry-controls > small,
  .text-layout-actions small,
  .desktop-control-label,
  .desktop-text-alignments > span,
  .desktop-text-effects > span,
  .font-weight-strip > span,
  .desktop-font-strip > span,
  .global-layer-toggle :is(small, em),
  .bottom-fade-toggle :is(small, em),
  .range-control > span,
  .range-reset {
    font-size: 10px !important;
    line-height: 1.35;
  }
  .mobile-simple-sheet :is(.mobile-image-tabs small, .mobile-image-pool-summary em, .mobile-image-subject) {
    font-size: 10px;
    line-height: 1.3;
  }
  .editor-generation-status strong,
  .mobile-image-choice-progress strong,
  .generation-slide-chip:not(.slide-surface.compact .generation-slide-chip) {
    font-size: 11px;
  }
  .editor-generation-status small,
  .mobile-image-choice-progress small,
  .media-apply-progress :is(strong, small) {
    font-size: 10px;
    line-height: 1.35;
  }
  .mobile-simple-sheet :is(.mobile-image-picker-toggle strong, .mobile-image-tabs button, .mobile-image-pool-summary strong, .mobile-mask-row button, .mobile-stroke-row > label, .mobile-stroke-row > button, .mobile-background-controls strong, .mobile-background-frame-reset, .mobile-font-strip > span, .mobile-color-mode button, .mobile-text-alignments > span, .mobile-text-effects > span, .mobile-slide-actions button, .mobile-ai-controls nav button) {
    font-size: 11px;
  }
  .mobile-simple-sheet :is(.mobile-image-picker-toggle small, .mobile-image-pool-summary small, .mobile-image-choice-progress small, .mobile-background-controls small, .mobile-text-input-wrap small, .mobile-custom-color-menu small, .mobile-eyedropper-button small, .mobile-inline-tip, .mobile-slide-controls small, .mobile-ai-controls small) {
    color: #9aa1ab;
    font-size: 10px;
    line-height: 1.4;
  }
  .mobile-primary-actions button,
  .focus-header :is(span, strong) {
    font-size: 11px;
  }
  .slide-picker-preview > .slide-picker-number,
  .slide-picker-add {
    font-size: 10px;
  }
  .slide-picker-preview > .slide-picker-number {
    min-width: 20px;
    height: 20px;
  }
}
.pricing-v2 .pricing-plan-cta,
.pricing-v2 .pricing-final-cta button,
.pricing-v2 .pricing-back,
.pricing-v2 .pricing-manage {
  font-size: 13px;
}
.landing-pricing > .pricing-compare-jump {
  display: flex;
  width: max-content;
  margin: 24px auto 0;
}
.landing-nav .landing-login,
.landing-nav .landing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.landing-nav nav a,
.landing-nav .landing-login,
.landing-nav .landing-cta {
  font-size: 13px;
}
.landing-hero {
  display: flex;
  width: 100%;
  min-height: max(720px, calc(100svh - 68px));
  margin: 0;
  padding: clamp(86px, 11vh, 132px) 24px 110px;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(70% 55% at 50% 66%, rgba(255, 57, 153, .30), transparent 72%),
    radial-gradient(50% 55% at 24% 72%, rgba(255, 133, 39, .24), transparent 72%),
    radial-gradient(54% 57% at 78% 66%, rgba(96, 103, 255, .30), transparent 72%),
    linear-gradient(180deg, #07080b 0%, #0b0c13 42%, #241525 76%, #160d17 100%);
}
.landing-hero::before {
  display: block;
  position: absolute;
  z-index: 0;
  right: -12%;
  bottom: -44%;
  left: -12%;
  height: 72%;
  border-radius: 50%;
  background: conic-gradient(from 250deg at 50% 50%, rgba(255,138,34,.32), rgba(255,47,146,.5), rgba(92,100,255,.42), rgba(255,138,34,.32));
  filter: blur(70px);
  content: "";
  opacity: .8;
  pointer-events: none;
  animation: landing-hero-breathe 12s ease-in-out infinite;
}
.landing-hero::after {
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,5,8,.18), transparent 35%, rgba(7,7,10,.16));
  content: "";
  pointer-events: none;
}
@keyframes landing-hero-breathe {
  0%, 100% {
    transform: translate3d(-2%, 2%, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, -2%, 0) scale(1.06);
  }
}
.landing-hero-copy,
.landing-prompt-wrap,
.landing-hero .landing-proof-line {
  position: relative;
  z-index: 2;
}
.landing-hero-copy {
  width: min(900px, 100%);
  max-width: none;
}
.landing-hero h1 {
  margin: 0;
  overflow: visible;
  color: #fbfbfc;
  font-size: clamp(66px, 8.5vw, 116px);
  font-weight: 620;
  letter-spacing: -.075em;
  line-height: .88;
  text-wrap: balance;
}
.landing-hero h1 span {
  display: inline;
  background: none;
  color: #ff8068;
}
.landing-hero-copy > p {
  max-width: none;
  margin: 25px auto 0;
  color: rgba(246, 245, 249, .72);
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.landing-prompt-wrap {
  width: min(790px, 100%);
  margin-top: 48px;
}
.landing-prompt-card {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 24px;
  background: rgba(17,18,22,.96);
  box-shadow: 0 35px 110px rgba(0,0,0,.48), 0 0 90px rgba(255,54,150,.12), inset 0 1px rgba(255,255,255,.04);
  transform: none;
  backdrop-filter: blur(24px);
}
.landing-prompt-card::before {
  display: none;
}
.landing-prompt-card:focus-within {
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 39px 120px rgba(0,0,0,.52), 0 0 0 3px rgba(255,255,255,.035), 0 0 105px rgba(255,54,150,.15);
  transform: translateY(-1px);
}
.landing-prompt-card textarea {
  height: 126px;
  padding: 24px 26px 18px;
  color: #f7f7f8;
  font-size: 18px;
  line-height: 1.5;
}
.landing-prompt-card textarea::placeholder {
  color: #85868c;
  opacity: 1;
}
.landing-prompt-footer {
  min-height: 64px !important;
  padding: 10px 11px 11px 16px !important;
  background: rgba(255,255,255,.012);
}
.landing-prompt-footer > span {
  min-height: 36px;
  padding-inline: 11px !important;
  border-radius: 11px !important;
  font-size: 11px !important;
}
.landing-prompt-footer > button {
  min-width: 132px;
  height: 42px !important;
  font-size: 12px !important;
}
.landing-examples {
  justify-content: center;
}
.landing-examples > span,
.landing-examples button {
  color: rgba(255,255,255,.55);
  font-size: 11px;
}
.landing-examples button {
  height: 31px;
  border-color: rgba(255,255,255,.12);
  background: rgba(8,8,11,.28);
}
.landing-hero .landing-proof-line {
  justify-content: center;
  margin-top: 28px;
  color: rgba(255,255,255,.64);
  font-size: 12px;
}
.landing-hero .landing-proof-line svg {
  color: #bff1cf;
}
.landing-meet,
.landing-discover,
.landing-audiences,
.landing-output,
.landing-feature-section,
.landing-pricing {
  position: relative;
  z-index: 1;
  width: min(1220px, calc(100% - 48px));
  margin: 0 auto;
  padding: 132px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.landing-meet {
  border-top: 0;
}
.landing-meet-stage {
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
  gap: 46px;
  align-items: stretch;
}
.landing-meet-stage > nav {
  display: grid;
  align-content: center;
  gap: 8px;
}
.landing-meet-stage > nav button {
  display: grid;
  min-height: 82px;
  padding: 14px 16px;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: #74777f;
  text-align: left;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-meet-stage > nav button:hover {
    color: #d3d5d9;
    background: rgba(255,255,255,.025);
  }
}
.landing-meet-stage > nav button.active {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
  color: #fff;
  transform: translateX(5px);
}
.landing-meet-stage > nav button > b {
  color: #555961;
  font-family: var(--font-geist-mono), monospace;
  font-size: 10px;
}
.landing-meet-stage > nav button.active > b {
  color: #ff76b3;
}
.landing-meet-stage > nav button > span {
  display: grid;
  gap: 4px;
}
.landing-meet-stage > nav strong {
  font-size: 14px;
}
.landing-meet-stage > nav small {
  color: #898d95;
  font-size: 12px;
}
.landing-meet-visual {
  position: relative;
  display: grid;
  min-height: 590px;
  overflow: hidden;
  grid-template-rows: 58px auto 1fr;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: radial-gradient(circle at 82% 18%, rgba(109,87,255,.19), transparent 38%), radial-gradient(circle at 12% 88%, rgba(255,54,150,.14), transparent 42%), #101116;
  box-shadow: 0 42px 120px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04);
}
.landing-meet-visual::after {
  position: absolute;
  inset: 0;
  background: transparent;
  content: "";
  pointer-events: none;
}
.landing-meet-visual > header {
  position: relative;
  z-index: 2;
  display: flex;
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.landing-meet-visual > header span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.landing-meet-visual > header span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg,#ff963f,#ff3f95,#8f79ff);
}
.landing-meet-visual > header b {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #989ba3;
  font-size: 9px;
}
.landing-meet-copy {
  position: relative;
  z-index: 2;
  display: grid;
  max-width: 600px;
  padding: 45px 46px 28px;
  gap: 11px;
}
.landing-meet-copy > span {
  color: #ff72b0;
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
}
.landing-meet-copy h3 {
  margin: 0;
  font-size: clamp(35px,4vw,54px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .98;
}
.landing-meet-copy p {
  max-width: 570px;
  margin: 0;
  color: #92959d;
  font-size: 14px;
  line-height: 1.6;
}
.landing-meet-product {
  position: relative;
  z-index: 2;
  display: grid;
  width: calc(100% - 92px);
  min-height: 255px;
  margin: 0 46px 42px;
  padding: 16px;
  align-self: end;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(10,11,14,.78);
  box-shadow: 0 22px 65px rgba(0,0,0,.33);
  backdrop-filter: blur(17px);
}
.landing-meet-prompt {
  display: grid;
  min-height: 43px;
  padding: 0 12px;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: #17191f;
  color: #a8abb2;
  font-size: 11px;
}
.landing-meet-prompt svg:first-child {
  color: #ff74b1;
}
.landing-meet-slides {
  display: grid;
  height: 136px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;
}
.landing-meet-slides > span {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: #090a0d;
  opacity: .36;
  transform: translateY(7px);
  transition: opacity .35s ease, transform .35s ease, border-color .35s ease;
}
.landing-meet-slides > span.ready {
  border-color: rgba(255,255,255,.16);
  opacity: 1;
  transform: translateY(0);
}
.landing-meet-slides img {
  object-fit: cover;
}
.landing-meet-slides i {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 8px;
  font-style: normal;
}
.landing-meet-product footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #858993;
  font-size: 11px;
}
.landing-meet-product footer span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.landing-discover-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 13px;
}
.landing-discover-grid > button {
  display: grid;
  min-width: 0;
  padding: 0 0 18px;
  overflow: hidden;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: #101116;
  text-align: left;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-discover-grid > button:hover {
    border-color: rgba(255,102,170,.3);
    box-shadow: 0 25px 70px rgba(0,0,0,.3);
    transform: translateY(-5px);
  }
}
.landing-discover-grid > button > span {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: #08090b;
}
.landing-discover-grid img {
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .landing-discover-grid button:hover img {
    transform: scale(1.035);
  }
}
.landing-discover-grid small,.landing-discover-grid strong,.landing-discover-grid em {
  margin-inline: 16px;
}
.landing-discover-grid small {
  margin-top: 9px;
  color: #ff73b1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.landing-discover-grid strong {
  color: #f0f1f3;
  font-size: 15px;
  line-height: 1.25;
}
.landing-discover-grid em {
  display: flex;
  margin-top: 4px;
  align-items: center;
  gap: 5px;
  color: #858993;
  font-size: 11px;
  font-style: normal;
}
.landing-discover .landing-demo-flow {
  margin-top: 76px;
}
.landing-audience-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 11px;
}
.landing-audience-grid article {
  min-height: 240px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 19px;
  background: linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.landing-audience-grid article > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg,rgba(255,67,151,.12),rgba(139,92,246,.12));
  color: #ff79b3;
}
.landing-audience-grid svg {
  width: 19px;
}
.landing-audience-grid h3 {
  margin: 58px 0 10px;
  font-size: 20px;
  letter-spacing: -.025em;
}
.landing-audience-grid p {
  margin: 0;
  color: #888b93;
  font-size: 12px;
  line-height: 1.6;
}
.landing-research-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px;
}
.landing-research-grid article {
  display: flex;
  min-height: 310px;
  padding: 28px;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: radial-gradient(circle at 90% 0,rgba(139,92,246,.14),transparent 42%),#101116;
}
.landing-research-grid article > strong {
  background: none;
  color: #ff8068;
  font-size: 62px;
  font-weight: 620;
  letter-spacing: -.065em;
  line-height: 1;
}
.landing-research-grid h3 {
  margin: 10px 0 17px;
  font-size: 20px;
  letter-spacing: -.03em;
}
.landing-research-grid p {
  margin: 0;
  color: #8c8f97;
  font-size: 13px;
  line-height: 1.6;
}
.landing-research-grid a {
  display: flex;
  margin-top: auto;
  padding-top: 24px;
  align-items: center;
  gap: 6px;
  color: #b1b4bc;
  font-size: 10px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .landing-research-grid a:hover {
    color: #fff;
  }
}
.landing-feature-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
:is(a, button, summary, [tabindex], [contenteditable="true"]):focus-visible {
  outline-color: rgba(255,255,255,.92) !important;
}
:is(input, textarea, select):focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 0 0 4px rgba(255,72,155,.15) !important;
}
.ui-field:has(> :is(input, textarea, select):focus-visible),
.ui-field:has(> label > :is(input, textarea, select):focus-visible) {
  outline: 2px solid rgba(255,255,255,.92);
  outline-offset: 3px;
}
.ui-field > :is(input, textarea, select):focus-visible,
.ui-field > label > :is(input, textarea, select):focus-visible,
.media-search-box > input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 1000px) {
  .landing-meet-stage {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .landing-meet-stage > nav {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .landing-meet-stage > nav button {
    min-height: 94px;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .landing-meet-stage > nav button.active {
    transform: translateY(-3px);
  }
  .landing-discover-grid,.landing-audience-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 700px) {
  .landing-nav .landing-brand span {
    display: inline;
  }
  .landing-hero {
    min-height: calc(100svh - 57px);
    padding: 78px 15px 70px;
  }
  .landing-hero h1 {
    max-width: 360px;
    font-size: clamp(58px,18vw,76px);
    line-height: .89;
  }
  .landing-hero h1 span {
    display: block;
  }
  .landing-hero-copy > p {
    margin-top: 20px;
    font-size: 18px;
  }
  .landing-prompt-wrap {
    margin-top: 38px;
  }
  .landing-prompt-card {
    border-radius: 19px;
  }
  .landing-prompt-card textarea {
    height: 116px;
    padding: 20px 18px 14px;
    font-size: 16px;
  }
  .landing-prompt-footer {
    min-height: 60px !important;
    padding-inline: 9px !important;
  }
  .landing-prompt-footer > span {
    padding-inline: 8px !important;
    font-size: 10px !important;
  }
  .landing-prompt-footer > span:nth-child(2) {
    display: none;
  }
  .landing-prompt-footer > button {
    min-width: 122px;
  }
  .landing-examples {
    justify-content: flex-start;
  }
  .landing-hero .landing-proof-line {
    max-width: 330px;
    margin-inline: auto;
    gap: 9px 14px;
  }
  .landing-meet,.landing-discover,.landing-audiences,.landing-output,.landing-feature-section,.landing-pricing {
    width: calc(100% - 30px);
    padding: 84px 0;
  }
  .landing-section-heading {
    margin-bottom: 36px;
  }
  .landing-section-heading h2 {
    font-size: clamp(38px,11vw,48px);
  }
  .landing-section-heading p {
    font-size: 14px;
  }
  .landing-meet-stage > nav {
    display: flex;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .landing-meet-stage > nav::-webkit-scrollbar {
    display: none;
  }
  .landing-meet-stage > nav button {
    min-width: 150px;
    min-height: 76px;
    flex: 0 0 150px;
    scroll-snap-align: start;
  }
  .landing-meet-visual {
    min-height: 520px;
    border-radius: 21px;
  }
  .landing-meet-copy {
    padding: 32px 24px 22px;
  }
  .landing-meet-copy h3 {
    font-size: 38px;
  }
  .landing-meet-product {
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 12px;
  }
  .landing-meet-slides {
    height: 120px;
    gap: 6px;
  }
  .landing-meet-product footer {
    font-size: 8px;
  }
  .landing-discover-grid {
    display: flex;
    width: calc(100% + 30px);
    margin-left: -15px;
    padding: 4px 15px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .landing-discover-grid::-webkit-scrollbar {
    display: none;
  }
  .landing-discover-grid > button {
    min-width: min(76vw,290px);
    flex: 0 0 min(76vw,290px);
    scroll-snap-align: center;
  }
  .landing-discover .landing-demo-flow {
    margin-top: 52px;
  }
  .landing-audience-grid,.landing-research-grid {
    grid-template-columns: 1fr;
  }
  .landing-audience-grid article {
    min-height: 190px;
  }
  .landing-audience-grid h3 {
    margin-top: 38px;
  }
  .landing-research-grid article {
    min-height: 270px;
  }
  .landing-carousel-track figure {
    grid-template-columns: 1fr;
  }
  .landing-carousel-track figcaption {
    display: none;
  }
}
html[data-theme] .affiliate-page {
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  padding-bottom: max(88px, calc(64px + env(safe-area-inset-bottom)));
  background: var(--df-surface-canvas);
  color: var(--df-text-primary);
  font-family: var(--font-geist-sans), Arial, sans-serif;
  -webkit-overflow-scrolling: touch;
}
html[data-theme] .affiliate-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(28px, env(safe-area-inset-right)) 0 max(28px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--df-border-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--df-border-subtle) 78%, transparent);
  }
  background: var(--df-surface-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-surface-canvas) 90%, transparent);
  }
  backdrop-filter: blur(18px);
}
html[data-theme] .affiliate-back {
  width: max-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
  text-decoration: none;
}
html[data-theme] .affiliate-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--df-text-primary);
}
html[data-theme] .affiliate-header-title strong {
  font-size: var(--df-type-body-size);
  font-weight: var(--df-type-weight-semibold);
  line-height: var(--df-type-line-single);
}
html[data-theme] .affiliate-program-badge {
  justify-self: end;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 999px;
  background: var(--df-surface-raised);
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-bold);
  letter-spacing: var(--df-type-tracking-code);
  text-transform: uppercase;
}
html[data-theme] .affiliate-program-badge.reseller {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 34%, var(--df-border-subtle));
  }
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .affiliate-workspace {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
  padding-top: 22px;
}
html[data-theme] .affiliate-page :where(button, a, summary, input):focus-visible {
  outline: 2px solid var(--df-focus-ring);
  outline-offset: 2px;
}
html[data-theme] .affiliate-loading {
  display: grid;
  place-items: center;
}
html[data-theme] .affiliate-loading > .affiliate-back {
  position: fixed;
  top: 18px;
  left: max(24px, env(safe-area-inset-left));
}
html[data-theme] .affiliate-loading > section {
  max-width: 440px;
  padding: 24px;
  text-align: center;
}
html[data-theme] .affiliate-loading > section p {
  color: var(--df-text-secondary);
}
html[data-theme] .affiliate-loading > section a {
  color: var(--df-action-primary);
}
html[data-theme] .affiliate-command-deck {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(280px, .75fr);
  gap: 12px;
}
html[data-theme] .affiliate-link-command,
html[data-theme] .affiliate-reward-command,
html[data-theme] .affiliate-metric-band,
html[data-theme] .affiliate-campaign-card,
html[data-theme] .affiliate-earnings-card,
html[data-theme] .affiliate-table-card,
html[data-theme] .affiliate-terms {
  min-width: 0;
  border: 1px solid var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .affiliate-link-command,
html[data-theme] .affiliate-reward-command,
html[data-theme] .affiliate-campaign-card,
html[data-theme] .affiliate-earnings-card,
html[data-theme] .affiliate-table-card {
  border-radius: 14px;
}
html[data-theme] .affiliate-link-command {
  padding: 20px;
  box-shadow: var(--df-shadow-raised);
}
html[data-theme] .affiliate-link-command > header,
html[data-theme] .affiliate-campaign-card > header,
html[data-theme] .affiliate-earnings-card > header,
html[data-theme] .affiliate-table-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
html[data-theme] .affiliate-link-command > header > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
html[data-theme] .affiliate-link-command > header svg {
  margin-top: 2px;
  color: var(--df-category-structure);
}
html[data-theme] .affiliate-link-command header small,
html[data-theme] .affiliate-reward-command header small,
html[data-theme] .affiliate-campaign-card > header > div > span,
html[data-theme] .affiliate-earnings-card > header > div > span,
html[data-theme] .affiliate-table-card > header > div > span {
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-heavy-label);
  letter-spacing: var(--df-type-tracking-label);
}
html[data-theme] .affiliate-link-command h1,
html[data-theme] .affiliate-campaign-card h2,
html[data-theme] .affiliate-earnings-card h2,
html[data-theme] .affiliate-table-card h2 {
  margin: 5px 0 0;
  color: var(--df-text-primary);
  font-size: var(--df-type-section-title-size);
  font-weight: var(--df-type-weight-semibold);
  line-height: var(--df-type-line-compact);
  letter-spacing: var(--df-type-tracking-tight);
}
html[data-theme] .affiliate-link-command > header > code {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 0 8px;
  background: var(--df-category-structure-surface);
  color: var(--df-category-structure);
  font-size: var(--df-type-caption-size);
  max-width: min(32ch, 45%);
  overflow: hidden;
  font-weight: var(--df-type-weight-heavy-label);
  letter-spacing: var(--df-type-tracking-code);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .affiliate-link-builder {
  display: grid;
  grid-template-columns: minmax(190px, .42fr) minmax(0, 1.58fr);
  gap: 10px;
  margin-top: 20px;
}
html[data-theme] .affiliate-link-builder label {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 10px;
  background: var(--df-surface-subtle);
}
html[data-theme] .affiliate-link-builder label:focus-within {
  border-color: var(--df-focus-ring);
  box-shadow: 0 0 0 3px var(--df-focus-ring);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--df-focus-ring) 17%, transparent);
  }
}
html[data-theme] .affiliate-link-builder label span {
  padding: 9px 12px 0;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .affiliate-link-builder input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 0;
  padding: 0 12px;
  outline: 0;
  background: transparent;
  color: var(--df-text-primary);
  font: inherit;
  font-size: var(--df-type-field-size);
}
html[data-theme] .affiliate-link-builder input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
html[data-theme] .affiliate-link-builder .affiliate-link-output {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
}
html[data-theme] .affiliate-link-builder .affiliate-link-url {
  min-width: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 14px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 10px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--df-type-control-size);
  text-overflow: ellipsis;
  user-select: all;
  white-space: nowrap;
}
html[data-theme] .affiliate-link-builder .affiliate-link-output button {
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--df-category-structure);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--df-category-structure) 38%, var(--df-border-subtle));
  }
  border-radius: 10px;
  padding: 0 18px;
  background: var(--df-category-structure-surface);
  color: var(--df-text-primary);
  font: inherit;
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
  white-space: nowrap;
}
html[data-theme] .affiliate-link-builder .affiliate-link-output button:disabled {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
  color: var(--df-text-disabled);
}
html[data-theme] .affiliate-link-command > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 13px;
}
html[data-theme] .affiliate-saved-links {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
html[data-theme] .affiliate-saved-links > span {
  margin-right: 2px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .affiliate-saved-links button,
html[data-theme] .affiliate-default-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 8px;
  padding: 0 9px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font: inherit;
  font-size: var(--df-type-caption-size);
}
html[data-theme] .affiliate-saved-link {
  flex: 0 0 auto;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 8px;
  background: var(--df-surface-subtle);
}
html[data-theme] .affiliate-saved-link > button {
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme] .affiliate-saved-links .affiliate-saved-link-select {
  padding-inline: 9px 7px;
}
html[data-theme] .affiliate-saved-links .affiliate-saved-link-copy {
  width: 30px;
  padding: 0;
  border-left: 1px solid var(--df-border-subtle);
}
html[data-theme] .affiliate-saved-links .affiliate-saved-link-qr {
  width: 30px;
  padding: 0;
  border-left: 1px solid var(--df-border-subtle);
}
html[data-theme] .affiliate-saved-links .affiliate-saved-link-remove {
  width: 30px;
  padding: 0;
  border-left: 1px solid var(--df-border-subtle);
  color: var(--df-text-tertiary);
}
html[data-theme] .affiliate-saved-links > button.active,
html[data-theme] .affiliate-saved-link.active {
  border-color: var(--df-category-structure);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-category-structure) 38%, var(--df-border-subtle));
  }
  background: var(--df-category-structure-surface);
  color: var(--df-category-structure);
}
html[data-theme] .affiliate-saved-link.active > button {
  color: var(--df-category-structure);
}
html[data-theme] .affiliate-default-link {
  flex: 0 0 auto;
  border-color: transparent;
  background: transparent;
}
html[data-theme] .affiliate-default-actions,
html[data-theme] .affiliate-table-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
html[data-theme] .affiliate-reward-command {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--df-category-ai-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-category-ai-surface) 58%, var(--df-surface-raised));
  }
}
html[data-theme] .affiliate-reward-command > header {
  display: flex;
  align-items: center;
  gap: 11px;
}
html[data-theme] .affiliate-reward-command > header > svg {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  padding: 9px;
  background: var(--df-category-ai-surface);
  color: var(--df-category-ai);
}
html[data-theme] .affiliate-reward-command > header span {
  display: grid;
  gap: 3px;
}
html[data-theme] .affiliate-reward-command > header strong {
  color: var(--df-category-ai);
  font-size: var(--df-type-reward-size);
  line-height: var(--df-type-line-tight);
  letter-spacing: var(--df-type-tracking-value);
}
html[data-theme] .affiliate-reward-command > p {
  margin: 12px 0 14px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-control-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .affiliate-reward-command > button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--df-category-ai);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--df-category-ai) 42%, var(--df-border-subtle));
  }
  border-radius: 9px;
  padding: 0 16px;
  background: var(--df-category-ai-surface);
  color: var(--df-category-ai);
  font: inherit;
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .affiliate-reward-command > button:disabled {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
  color: var(--df-text-disabled);
}
html[data-theme] .affiliate-reward-command > dl {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 15px;
}
html[data-theme] .affiliate-reward-command > dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--df-border-subtle);
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .affiliate-reward-command dt,
html[data-theme] .affiliate-reward-command dd {
  margin: 0;
}
html[data-theme] .affiliate-reward-command dd {
  color: var(--df-text-primary);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .affiliate-reward-command.is-empty {
  background: var(--df-surface-raised);
}
html[data-theme] .affiliate-reward-command.is-empty > header strong {
  color: var(--df-text-secondary);
}
html[data-theme] .affiliate-metric-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  overflow: hidden;
  border-radius: 12px;
}
html[data-theme] .affiliate-metric-band article {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 15px 18px;
}
html[data-theme] .affiliate-metric-band article + article {
  border-left: 1px solid var(--df-border-subtle);
}
html[data-theme] .affiliate-metric-band span {
  color: var(--df-text-secondary);
  font-size: var(--df-type-control-size);
  font-weight: var(--df-type-weight-medium);
}
html[data-theme] .affiliate-metric-band small {
  color: var(--df-text-tertiary);
  font-size: var(--df-type-caption-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .affiliate-metric-band strong {
  overflow: hidden;
  color: var(--df-text-primary);
  font-size: var(--df-type-metric-size);
  line-height: var(--df-type-line-tight);
  letter-spacing: var(--df-type-tracking-value);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .affiliate-metric-band .primary {
  background: var(--df-status-success-surface);
}
html[data-theme] .affiliate-metric-band .primary strong {
  color: var(--df-status-success);
}
html[data-theme] .affiliate-performance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(270px, .62fr);
  gap: 12px;
  margin-top: 12px;
}
html[data-theme] .affiliate-campaign-card,
html[data-theme] .affiliate-earnings-card {
  padding: 20px;
}
html[data-theme] .affiliate-campaign-card > header > small,
html[data-theme] .affiliate-ledger-count {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--df-border-subtle);
  border-radius: 999px;
  padding: 0 9px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-medium);
  letter-spacing: normal;
  white-space: nowrap;
}
html[data-theme] .affiliate-campaign-scroll {
  margin-top: 17px;
  overflow-x: auto;
  scrollbar-color: var(--df-border-strong) transparent;
}
html[data-theme] .affiliate-campaign-card table,
html[data-theme] .affiliate-table-card table {
  width: 100%;
  border-collapse: collapse;
}
html[data-theme] .affiliate-campaign-card table {
  min-width: 770px;
}
html[data-theme] .affiliate-campaign-card th,
html[data-theme] .affiliate-table-card th {
  height: 34px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-bold);
  letter-spacing: var(--df-type-tracking-table);
  text-align: left;
  text-transform: uppercase;
}
html[data-theme] .affiliate-campaign-card :is(th, td),
html[data-theme] .affiliate-table-card :is(th, td) {
  padding-inline: 12px;
}
html[data-theme] .affiliate-campaign-card :is(th, td):first-child,
html[data-theme] .affiliate-table-card :is(th, td):first-child {
  padding-left: 0;
}
html[data-theme] .affiliate-campaign-card :is(th, td):last-child,
html[data-theme] .affiliate-table-card :is(th, td):last-child {
  padding-right: 0;
}
html[data-theme] .affiliate-campaign-card td,
html[data-theme] .affiliate-table-card td {
  height: 58px;
  border-top: 1px solid var(--df-border-subtle);
  color: var(--df-text-secondary);
  font-size: var(--df-type-control-size);
}
html[data-theme] .affiliate-campaign-card :is(th, td):not(:first-child) {
  text-align: right;
}
html[data-theme] .affiliate-campaign-card td:nth-child(n + 2):nth-child(-n + 6),
html[data-theme] .affiliate-table-card .affiliate-money {
  font-variant-numeric: tabular-nums;
}
html[data-theme] .affiliate-campaign-name {
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
}
html[data-theme] .affiliate-campaign-name > span {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--df-border-subtle);
  border-radius: 50%;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-bold);
}
html[data-theme] .affiliate-campaign-name > span.leader {
  border-color: var(--df-data-series-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-data-series-primary) 36%, var(--df-border-subtle));
  }
  background: var(--df-data-series-surface);
  color: var(--df-data-series-primary);
}
html[data-theme] .affiliate-campaign-name > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
html[data-theme] .affiliate-campaign-name strong {
  overflow: hidden;
  color: var(--df-text-primary);
  font-size: var(--df-type-control-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .affiliate-campaign-name code {
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .affiliate-campaign-performance {
  min-width: 96px;
  display: grid;
  grid-template-columns: 28px minmax(50px, 1fr);
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
html[data-theme] .affiliate-campaign-performance strong {
  color: var(--df-text-primary);
}
html[data-theme] .affiliate-campaign-performance > span {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--df-border-subtle);
}
html[data-theme] .affiliate-campaign-performance i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--df-data-series-primary);
}
html[data-theme] .affiliate-money {
  color: var(--df-text-primary);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .affiliate-table-copy {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 8px;
  padding: 0 9px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font: inherit;
  font-size: var(--df-type-caption-size);
}
html[data-theme] .affiliate-scroll-hint {
  display: none;
  margin-top: 12px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  text-align: right;
}
html[data-theme] .affiliate-earnings-card > header > svg {
  color: var(--df-category-structure);
}
html[data-theme] .affiliate-earnings-card > dl {
  display: grid;
  margin: 17px 0 0;
}
html[data-theme] .affiliate-earnings-card > dl > div {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--df-border-subtle);
}
html[data-theme] .affiliate-earnings-card dt {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "dot label"
    "dot detail";
  align-items: center;
  gap: 2px 8px;
  color: var(--df-text-primary);
  font-size: var(--df-type-control-size);
}
html[data-theme] .affiliate-earnings-card dt > i {
  grid-area: dot;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--df-text-secondary);
}
html[data-theme] .affiliate-earnings-card dt > small {
  grid-area: detail;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .affiliate-earnings-card dd {
  margin: 0;
  color: var(--df-text-primary);
  font-size: var(--df-type-control-size);
  font-weight: var(--df-type-weight-semibold);
  font-variant-numeric: tabular-nums;
}
html[data-theme] .affiliate-earnings-card .approved i,
html[data-theme] .affiliate-earnings-card .paid i {
  background: var(--df-status-success);
}
html[data-theme] .affiliate-earnings-card .pending i {
  background: var(--df-status-warning);
}
html[data-theme] .affiliate-earnings-card .reversed i {
  background: var(--df-status-danger);
}
html[data-theme] .affiliate-program-terms {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  background: var(--df-surface-subtle);
}
html[data-theme] .affiliate-program-terms small {
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-heavy-label);
  letter-spacing: var(--df-type-tracking-label);
}
html[data-theme] .affiliate-program-terms strong {
  color: var(--df-text-primary);
  font-size: var(--df-type-control-size);
  line-height: var(--df-type-line-compact);
}
html[data-theme] .affiliate-program-terms span {
  color: var(--df-category-ai);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .affiliate-table-card {
  width: 100%;
  margin-top: 12px;
  padding: 20px;
}
html[data-theme] .affiliate-table-card > header p {
  margin: 5px 0 0;
  color: var(--df-text-secondary);
  font-size: var(--df-type-control-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .affiliate-table-scroll {
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-color: var(--df-border-strong) transparent;
}
html[data-theme] .affiliate-table-card table {
  min-width: 760px;
}
html[data-theme] .affiliate-table-card :is(th, td):nth-child(5) {
  text-align: right;
}
html[data-theme] .affiliate-table-card code {
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--df-category-structure-surface);
  color: var(--df-category-structure);
  font-size: var(--df-type-control-size);
}
html[data-theme] .affiliate-status {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 999px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-heavy-label);
  letter-spacing: var(--df-type-tracking-code);
  text-transform: uppercase;
}
html[data-theme] .affiliate-status.approved,
html[data-theme] .affiliate-status.paid {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 32%, var(--df-border-subtle));
  }
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .affiliate-status.pending {
  border-color: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 32%, var(--df-border-subtle));
  }
  background: var(--df-status-warning-surface);
  color: var(--df-status-warning);
}
html[data-theme] .affiliate-status.reversed {
  border-color: var(--df-status-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-danger) 32%, var(--df-border-subtle));
  }
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] .affiliate-empty-state {
  margin: 17px 0 0;
  padding: 36px 18px;
  border: 1px dashed var(--df-border-strong);
  border-radius: 12px;
  color: var(--df-text-secondary);
  text-align: center;
  font-size: var(--df-type-body-size);
}
html[data-theme] .affiliate-table-empty {
  height: auto;
  padding-block: 34px;
  color: var(--df-text-secondary);
  text-align: center;
}
html[data-theme] .affiliate-terms {
  width: 100%;
  display: block;
  margin-top: 12px;
  padding: 0;
  border-radius: 12px;
  background: var(--df-surface-subtle);
}
html[data-theme] .affiliate-terms summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 17px;
  color: var(--df-text-secondary);
  cursor: pointer;
  list-style: none;
}
html[data-theme] .affiliate-terms summary::-webkit-details-marker {
  display: none;
}
html[data-theme] .affiliate-terms summary > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
html[data-theme] .affiliate-terms summary strong {
  color: var(--df-text-primary);
  font-size: var(--df-type-control-size);
}
html[data-theme] .affiliate-terms summary > svg {
  transition: transform 160ms ease;
}
html[data-theme] .affiliate-terms[open] summary > svg {
  transform: rotate(90deg);
}
html[data-theme] .affiliate-terms > div {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 34px;
  padding: 18px;
  border-top: 1px solid var(--df-border-subtle);
}
html[data-theme] .affiliate-terms > div p {
  margin: 0;
  color: var(--df-text-secondary);
  font-size: var(--df-type-body-size);
  line-height: var(--df-type-line-readable);
}
html[data-theme] .affiliate-terms > div ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--df-text-secondary);
  font-size: var(--df-type-body-size);
  list-style: none;
}
html[data-theme] .affiliate-terms li {
  display: flex;
  align-items: center;
  gap: 9px;
}
html[data-theme] .affiliate-terms li svg {
  flex: 0 0 auto;
  color: var(--df-status-success);
}
html[data-theme] .affiliate-error {
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--df-status-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--df-status-danger) 34%, var(--df-border-subtle));
  }
  border-radius: 9px;
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
  font-size: var(--df-type-body-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .affiliate-copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-theme] .affiliate-qr-dialog {
  width: min(780px, calc(100vw - 32px));
  max-width: none;
  max-height: min(760px, calc(100dvh - 32px));
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  color: var(--df-text-primary);
  box-shadow: var(--df-shadow-overlay);
}
html[data-theme] .affiliate-qr-dialog::backdrop {
  background: var(--df-overlay-backdrop);
  backdrop-filter: blur(5px);
}
html[data-theme] .affiliate-qr-shell {
  max-height: inherit;
  overflow-y: auto;
  border: 1px solid var(--df-border-subtle);
  border-radius: inherit;
  background: var(--df-surface-overlay);
  color: var(--df-text-primary);
}
html[data-theme] .affiliate-qr-shell > header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .affiliate-qr-shell > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
html[data-theme] .affiliate-qr-heading-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--df-category-structure-surface);
  color: var(--df-category-structure);
}
html[data-theme] .affiliate-qr-shell > header small,
html[data-theme] .affiliate-qr-controls legend,
html[data-theme] .affiliate-qr-field > span,
html[data-theme] .affiliate-qr-colors label > span {
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-heavy-label);
  letter-spacing: var(--df-type-tracking-label);
  text-transform: uppercase;
}
html[data-theme] .affiliate-qr-shell > header h2 {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--df-text-primary);
  font-size: var(--df-type-section-title-size);
  line-height: var(--df-type-line-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .affiliate-qr-close {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  padding: 0;
  background: transparent;
  color: var(--df-text-secondary);
}
html[data-theme] .affiliate-qr-layout {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  gap: 22px;
  padding: 22px;
}
html[data-theme] .affiliate-qr-preview {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--df-border-subtle);
  border-radius: 14px;
  padding: 18px;
  background: var(--df-surface-subtle);
}
html[data-theme] .affiliate-qr-preview > div {
  width: min(100%, 320px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--df-surface-raised);
  box-shadow: var(--df-shadow-raised);
}
html[data-theme] .affiliate-qr-preview > div > div,
html[data-theme] .affiliate-qr-preview svg,
html[data-theme] .affiliate-qr-preview canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
html[data-theme] .affiliate-qr-preview > p {
  margin: 14px 0 0;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  text-align: center;
}
html[data-theme] .affiliate-qr-controls {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
}
html[data-theme] .affiliate-qr-field,
html[data-theme] .affiliate-qr-style,
html[data-theme] .affiliate-qr-presets {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
html[data-theme] .affiliate-qr-field {
  display: grid;
  gap: 7px;
}
html[data-theme] .affiliate-qr-field > div {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  background: var(--df-surface-subtle);
}
html[data-theme] .affiliate-qr-field code {
  min-width: 0;
  align-self: center;
  overflow: hidden;
  padding: 0 11px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  text-overflow: ellipsis;
  user-select: all;
  white-space: nowrap;
}
html[data-theme] .affiliate-qr-field button {
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--df-border-subtle);
  padding: 0;
  background: transparent;
  color: var(--df-text-secondary);
}
html[data-theme] .affiliate-qr-controls legend {
  margin-bottom: 7px;
}
html[data-theme] .affiliate-qr-style > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
html[data-theme] .affiliate-qr-style button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  padding: 0 9px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font: inherit;
  font-size: var(--df-type-control-size);
}
html[data-theme] .affiliate-qr-style button[aria-pressed="true"] {
  border-color: var(--df-category-structure);
  background: var(--df-category-structure-surface);
  color: var(--df-text-primary);
}
html[data-theme] .affiliate-qr-shape {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: block;
  background: currentColor;
}
html[data-theme] .affiliate-qr-shape.rounded {
  border-radius: 4px;
}
html[data-theme] .affiliate-qr-shape.dots {
  border-radius: 50%;
}
html[data-theme] .affiliate-qr-presets > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
html[data-theme] .affiliate-qr-presets button {
  min-width: 0;
  min-height: 54px;
  display: grid;
  justify-items: center;
  gap: 5px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  padding: 7px 5px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font: inherit;
  font-size: var(--df-type-caption-size);
}
html[data-theme] .affiliate-qr-presets button[aria-pressed="true"] {
  border-color: var(--df-category-structure);
  color: var(--df-text-primary);
}
html[data-theme] .affiliate-qr-presets button i {
  width: 22px;
  height: 22px;
  display: block;
  border: 1px solid var(--df-border-strong);
  border-radius: 50%;
}
html[data-theme] .affiliate-qr-colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
html[data-theme] .affiliate-qr-colors label {
  min-width: 0;
  display: grid;
  gap: 7px;
}
html[data-theme] .affiliate-qr-colors label > div {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  padding: 5px 9px;
  background: var(--df-surface-subtle);
}
html[data-theme] .affiliate-qr-colors input {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  padding: 0;
  background: transparent;
}
html[data-theme] .affiliate-qr-colors input::-webkit-color-swatch-wrapper {
  padding: 0;
}
html[data-theme] .affiliate-qr-colors input::-webkit-color-swatch {
  border: 1px solid var(--df-border-strong);
  border-radius: 6px;
}
html[data-theme] .affiliate-qr-colors code {
  overflow: hidden;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  text-overflow: ellipsis;
}
html[data-theme] .affiliate-qr-safety {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  padding: 7px 10px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .affiliate-qr-safety.safe {
  border-color: var(--df-status-success);
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .affiliate-qr-safety.warning {
  border-color: var(--df-status-warning);
  background: var(--df-status-warning-surface);
  color: var(--df-status-warning);
}
html[data-theme] .affiliate-qr-error {
  margin: 0 22px 14px;
  border: 1px solid var(--df-status-danger);
  border-radius: 9px;
  padding: 9px 11px;
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
  font-size: var(--df-type-control-size);
}
html[data-theme] .affiliate-qr-shell > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--df-border-subtle);
  background: var(--df-surface-overlay);
}
html[data-theme] .affiliate-qr-download {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  padding: 0 16px;
  font: inherit;
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .affiliate-qr-download.secondary {
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
}
html[data-theme] .affiliate-qr-download.primary {
  border-color: var(--df-text-primary);
  background: var(--df-text-primary);
  color: var(--df-surface-raised);
}
html[data-theme] .affiliate-qr-download:disabled {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
  color: var(--df-text-disabled);
}
body:has(.affiliate-page) .bug-report-launch {
  top: auto;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: auto;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  background: var(--df-surface-overlay);
  color: var(--df-text-secondary);
  box-shadow: var(--df-shadow-overlay);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .affiliate-back:hover,
  html[data-theme] .affiliate-saved-links button:hover,
  html[data-theme] .affiliate-default-link:hover,
  html[data-theme] .affiliate-table-copy:hover {
    border-color: var(--df-border-strong);
    color: var(--df-text-primary);
  }
  html[data-theme] .affiliate-link-builder .affiliate-link-output button:not(:disabled):hover,
  html[data-theme] .affiliate-reward-command > button:not(:disabled):hover {
    border-color: var(--df-border-strong);
    background: var(--df-surface-subtle);
    color: var(--df-text-primary);
  }
  body:has(.affiliate-page) .bug-report-launch:hover {
    border-color: var(--df-border-strong);
    background: var(--df-surface-raised);
    color: var(--df-text-primary);
  }
}
@media (max-width: 980px) {
  html[data-theme] .affiliate-command-deck,
  html[data-theme] .affiliate-performance-grid {
    grid-template-columns: 1fr;
  }
  html[data-theme] .affiliate-reward-command {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 18px;
  }
  html[data-theme] .affiliate-reward-command > p {
    grid-column: 1;
  }
  html[data-theme] .affiliate-reward-command > dl {
    grid-column: 1 / -1;
  }
  html[data-theme] .affiliate-reward-command > button {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}
@media (max-width: 760px) {
  html[data-theme] .affiliate-header {
    grid-template-columns: 1fr auto;
    min-height: 56px;
    padding: 0 max(15px, env(safe-area-inset-right)) 0 max(15px, env(safe-area-inset-left));
  }
  html[data-theme] .affiliate-header-title {
    display: none;
  }
  html[data-theme] .affiliate-program-badge {
    font-size: var(--df-type-caption-size);
  }
  html[data-theme] .affiliate-workspace {
    width: calc(100% - 30px);
    padding-top: 15px;
  }
  html[data-theme] .affiliate-command-deck {
    gap: 10px;
  }
  html[data-theme] .affiliate-link-command,
  html[data-theme] .affiliate-reward-command,
  html[data-theme] .affiliate-campaign-card,
  html[data-theme] .affiliate-earnings-card,
  html[data-theme] .affiliate-table-card {
    padding: 16px;
  }
  html[data-theme] .affiliate-link-builder {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }
  html[data-theme] .affiliate-link-builder .affiliate-link-output {
    grid-template-columns: 1fr;
  }
  html[data-theme] .affiliate-link-builder .affiliate-link-url {
    min-height: 48px;
  }
  html[data-theme] .affiliate-link-builder .affiliate-link-output button {
    width: 100%;
    min-height: 48px;
  }
  html[data-theme] .affiliate-link-command > footer {
    align-items: stretch;
    flex-direction: column;
  }
  html[data-theme] .affiliate-saved-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  html[data-theme] .affiliate-saved-links::-webkit-scrollbar {
    display: none;
  }
  html[data-theme] .affiliate-saved-links button {
    min-height: 44px;
    flex: 0 0 auto;
  }
  html[data-theme] .affiliate-saved-link {
    min-height: 44px;
  }
  html[data-theme] .affiliate-saved-links .affiliate-saved-link-copy {
    width: 42px;
  }
  html[data-theme] .affiliate-saved-links .affiliate-saved-link-qr {
    width: 42px;
  }
  html[data-theme] .affiliate-saved-links .affiliate-saved-link-remove {
    width: 42px;
  }
  html[data-theme] .affiliate-default-link {
    min-height: 44px;
  }
  html[data-theme] .affiliate-default-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-theme] .affiliate-default-actions .affiliate-default-link {
    width: 100%;
  }
  html[data-theme] .affiliate-qr-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 12px);
    margin: auto auto 6px;
    border-radius: 18px 18px 12px 12px;
  }
  html[data-theme] .affiliate-qr-shell > header {
    min-height: 64px;
    padding: 11px 14px;
  }
  html[data-theme] .affiliate-qr-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 14px;
  }
  html[data-theme] .affiliate-qr-preview {
    padding: 14px;
  }
  html[data-theme] .affiliate-qr-preview > div {
    width: min(66vw, 250px);
  }
  html[data-theme] .affiliate-qr-shell > footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  }
  html[data-theme] .affiliate-qr-download {
    width: 100%;
    padding-inline: 10px;
  }
  html[data-theme] .affiliate-reward-command {
    display: flex;
  }
  html[data-theme] .affiliate-reward-command > button {
    width: 100%;
    order: 3;
  }
  html[data-theme] .affiliate-reward-command > dl {
    width: 100%;
    order: 4;
  }
  html[data-theme] .affiliate-metric-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-theme] .affiliate-metric-band article {
    min-height: 92px;
    padding: 13px;
  }
  html[data-theme] .affiliate-metric-band article:nth-child(3) {
    border-top: 1px solid var(--df-border-subtle);
    border-left: 0;
  }
  html[data-theme] .affiliate-metric-band article:nth-child(4) {
    border-top: 1px solid var(--df-border-subtle);
  }
  html[data-theme] .affiliate-campaign-scroll,
  html[data-theme] .affiliate-table-scroll {
    width: calc(100% + 16px);
    padding-right: 16px;
  }
  html[data-theme] .affiliate-scroll-hint {
    display: block;
  }
  html[data-theme] .affiliate-table-copy {
    min-height: 44px;
  }
  html[data-theme] .affiliate-campaign-card :is(th, td):first-child,
  html[data-theme] .affiliate-table-card :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--df-surface-raised);
    box-shadow: var(--df-shadow-edge);
  }
  html[data-theme] .affiliate-campaign-card th:first-child,
  html[data-theme] .affiliate-table-card th:first-child {
    z-index: 2;
  }
  html[data-theme] .affiliate-terms > div {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .admin-affiliate-onboarding > div {
    grid-template-columns: 1fr;
  }
  .admin-affiliate-onboarding > div > small {
    grid-column: 1;
  }
  .admin-copy-qualification-controls,.admin-audit-controls {
    grid-template-columns: minmax(0,1fr);
  }
  .admin-token-builder {
    grid-template-columns: minmax(0,1fr);
  }
  .admin-token-scopes {
    grid-template-columns: minmax(0,1fr);
  }
  .admin-token-scopes label {
    min-height: 58px;
  }
  .admin-token-secret {
    grid-template-columns: minmax(0,1fr) 44px 1fr 44px;
  }
  .admin-token-list-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-token-list-heading button {
    width: 100%;
    min-height: 44px;
  }
  .admin-token-list > article {
    grid-template-columns: minmax(0,1fr) auto;
  }
  .admin-token-list article > p {
    grid-column: 1/-1;
  }
  .admin-token-list article > button {
    width: 100%;
    grid-column: 1/-1;
  }
  .admin-audit-summary {
    grid-template-columns: repeat(2,minmax(90px,1fr));
  }
  .admin-audit-restoration {
    align-items: stretch;
    flex-direction: column;
  }
}
.studio-center-switches {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.creation-switch {
  display: flex;
  min-width: 0;
  padding: 4px;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.creation-switch button {
  display: flex;
  height: 31px;
  padding: 0 11px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #777e88;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}
.creation-switch button.active {
  background: #f3f4f5;
  color: #111317;
  box-shadow: 0 1px 8px rgba(0,0,0,.2);
}
.creation-switch em {
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(117,87,244,.15);
  color: #b9aaff;
  font-size: 6px;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.creation-switch button.active em {
  background: #dad2ff;
  color: #4b358e;
}
.conversation-workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0,1fr);
  height: calc(100vh - 58px);
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 76% 38%, rgba(92,67,193,.12), transparent 33%),
    #0b0d10;
}
.conversation-feed {
  min-width: 0;
  min-height: 0;
  padding: 18px 16px 150px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  scrollbar-color: #353a42 transparent;
  scrollbar-width: thin;
}
.conversation-header {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.conversation-header > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.conversation-header strong {
  font-size: 16px;
}
.conversation-header svg {
  color: #aa9cff;
}
.conversation-header em {
  padding: 3px 6px;
  border: 1px solid rgba(166,145,255,.24);
  border-radius: 999px;
  background: rgba(121,89,247,.1);
  color: #bbaeff;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}
.conversation-header small {
  color: #737a84;
  font-size: 10px;
}
.conversation-generation {
  display: grid;
  min-height: 62px;
  padding: 10px 11px;
  grid-template-columns: 27px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(164,145,255,.15);
  border-radius: 13px;
  background: linear-gradient(135deg,rgba(108,79,224,.09),rgba(255,255,255,.018));
}
.conversation-generation > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: rgba(147,123,255,.11);
  color: #b7a9ff;
}
.conversation-generation > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.conversation-generation strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-generation small {
  color: #737a84;
  font-size: 8px;
}
.conversation-generation > button {
  display: flex;
  min-height: 32px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: #aeb4bc;
  font-size: 8px;
}
.conversation-generation.error {
  border-color: rgba(255,115,129,.26);
}
.conversation-generation.error > span {
  background: rgba(255,104,120,.1);
  color: #ff8995;
}
.conversation-generation.ready > span {
  background: rgba(92,210,148,.1);
  color: #79dda8;
}
.conversation-messages {
  display: grid;
  margin-top: 18px;
  gap: 10px;
}
.conversation-message {
  display: grid;
  max-width: 88%;
  padding: 11px 12px;
  justify-self: start;
  gap: 8px;
  border-radius: 14px 14px 14px 4px;
  background: #171a1f;
  color: #cdd1d7;
  font-size: 10px;
  line-height: 1.55;
}
.conversation-message.user {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: #eceef0;
  color: #17191d;
}
.conversation-message p {
  margin: 0;
}
.conversation-message > button {
  display: flex;
  width: max-content;
  height: 27px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  color: #9da4ad;
  font-size: 8px;
}
.conversation-message-images {
  display: flex;
  gap: 5px;
}
.conversation-message-images img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
}
.conversation-slide-copy {
  display: grid;
  margin-top: 20px;
  gap: 8px;
}
.conversation-slide-copy > article {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.02);
}
.conversation-slide-copy > article.active {
  border-color: rgba(162,141,255,.34);
  background: rgba(105,76,219,.065);
}
.conversation-slide-heading {
  display: grid;
  width: 100%;
  min-height: 32px;
  padding: 0;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #cfd2d7;
  text-align: left;
}
.conversation-slide-heading span {
  color: #9f91e9;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}
.conversation-slide-heading strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-slide-heading svg {
  color: #666d77;
}
.conversation-slide-copy label {
  display: grid;
  gap: 4px;
}
.conversation-slide-copy label > span {
  color: #69717b;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.conversation-copy-editor {
  min-height: 40px;
  padding: 9px 10px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  outline: 0;
  background: #0c0e11;
  color: #e6e7e9;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.conversation-copy-editor:focus {
  border-color: rgba(168,145,255,.5);
  box-shadow: 0 0 0 3px rgba(128,96,238,.1);
}
.conversation-copy-editor[data-readonly="true"] {
  color: #747b84;
  cursor: default;
}
.conversation-empty-copy {
  padding: 4px 1px 2px;
  color: #6e757e;
  font-size: 8px;
  line-height: 1.5;
}
.conversation-preview {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 24px 28px 18px;
  grid-template-rows: minmax(0,1fr) 90px;
  gap: 16px;
}
.conversation-preview-canvas {
  position: relative;
  display: grid;
  width: min(52vh,520px);
  max-width: calc(100% - 50px);
  min-height: 0;
  aspect-ratio: 4 / 5;
  margin: auto;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
}
.conversation-preview-canvas > .slide-surface {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 11px;
  box-shadow: 0 26px 80px rgba(0,0,0,.42);
}
.conversation-preview-canvas > .conversation-design-handoff {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  height: 30px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(10,12,15,.82);
  color: #f2f3f4;
  font-size: 8px;
  backdrop-filter: blur(12px);
}
.conversation-preview > nav {
  display: flex;
  min-width: 0;
  max-width: 100%;
  padding: 7px;
  gap: 7px;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}
.conversation-preview > nav button {
  position: relative;
  width: 56px;
  min-width: 56px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background: transparent;
}
.conversation-preview > nav button.active {
  border-color: #8e72ff;
}
.conversation-preview > nav .slide-surface {
  width: 100%;
  aspect-ratio: 4/5;
}
.conversation-preview > nav button > .conversation-preview-index {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.76);
  color: #fff;
  font-size: 7px;
}
.conversation-composer {
  position: absolute;
  z-index: 30;
  right: calc(100% - 430px + 14px);
  bottom: 14px;
  left: 14px;
  display: grid;
  min-height: 112px;
  padding: 11px;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 17px;
  background: rgba(25,28,32,.97);
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
  backdrop-filter: blur(18px);
}
.conversation-composer textarea {
  width: 100%;
  min-height: 48px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef0f2;
  font: inherit;
  font-size: 11px;
  line-height: 1.45;
}
.conversation-composer > small {
  color: #ff939d;
  font-size: 8px;
}
.conversation-composer > div:last-of-type {
  display: flex;
  align-items: center;
  gap: 5px;
}
.conversation-composer > div:last-of-type > button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  color: #c4c8ce;
}
.conversation-composer > div:last-of-type > button.recording {
  border-color: rgba(255,92,109,.4);
  background: rgba(255,92,109,.12);
  color: #ff8a96;
}
.conversation-composer > div:last-of-type > span {
  min-width: 0;
  flex: 1;
  color: #6f7680;
  font-size: 8px;
}
.conversation-composer > div:last-of-type > button.conversation-send {
  border: 0;
  background: #f3f4f5;
  color: #131519;
}
.conversation-composer button:disabled {
  opacity: .4;
}
.conversation-attachments {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.conversation-attachments > span {
  position: relative;
  display: block;
  width: 42px;
  min-width: 42px;
  height: 42px;
}
.conversation-attachments img {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  object-fit: cover;
}
.conversation-attachments button {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  width: 17px;
  height: 17px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: #121419;
  color: #fff;
}
@media (max-width: 1180px) {
  .studio-center-switches .view-switch {
    display: none;
  }
  .conversation-workspace {
    grid-template-columns: minmax(320px,390px) minmax(0,1fr);
  }
  .conversation-composer {
    right: calc(100% - 390px + 14px);
  }
}
@media (max-width: 820px) {
  .studio-topbar {
    grid-template-columns: minmax(88px,1fr) auto minmax(70px,auto);
  }
  .studio-center-switches {
    grid-column: 2;
    grid-row: 1;
  }
  .studio-topbar .top-actions {
    grid-column: 3;
  }
  .studio-topbar:has(.creation-switch) .mobile-ai {
    display: none;
  }
  .creation-switch {
    gap: 2px;
    padding: 3px;
  }
  .creation-switch button {
    min-width: 44px;
    height: 36px;
    padding: 0 8px;
    justify-content: center;
    font-size: 10px;
  }
  .creation-switch button svg,.creation-switch button em {
    display: none;
  }
  .conversation-workspace {
    position: absolute;
    top: 58px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: auto;
    overflow: hidden;
  }
  .conversation-feed {
    height: 100%;
    padding: 12px 12px 270px;
    border-right: 0;
    overflow-y: auto;
  }
  .conversation-header {
    margin-bottom: 10px;
  }
  .conversation-generation {
    min-height: 58px;
  }
  .conversation-slide-copy {
    margin-top: 14px;
  }
  .conversation-preview {
    position: absolute;
    z-index: 24;
    right: 12px;
    bottom: 138px;
    left: 12px;
    display: block;
    height: 154px;
    padding: 0;
    pointer-events: none;
  }
  .conversation-preview-canvas {
    width: 112px;
    max-width: none;
    height: 140px;
    margin: 7px auto;
    pointer-events: auto;
    touch-action: pan-y;
  }
  .conversation-preview-canvas > .slide-surface {
    border-radius: 7px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
  }
  .conversation-preview-canvas > .conversation-design-handoff {
    right: 50%;
    bottom: -9px;
    height: 23px;
    padding: 0 8px;
    transform: translateX(50%);
    white-space: nowrap;
  }
  .conversation-preview > nav {
    display: none;
  }
  .conversation-composer {
    right: 10px;
    bottom: max(8px,env(safe-area-inset-bottom));
    left: 10px;
    min-height: 112px;
    border-radius: 18px;
  }
  .conversation-composer > div:last-of-type > button {
    width: 44px;
    height: 44px;
  }
  .conversation-copy-editor {
    min-height: 44px;
    font-size: 16px;
  }
  .conversation-slide-heading {
    min-height: 44px;
  }
  .conversation-generation > button {
    min-height: 44px;
  }
  .conversation-message > button {
    min-height: 44px;
  }
}
.landing-v4-root {
  --v4-ink: #11110f;
  --v4-night: #0b0b0a;
  --v4-paper: #f0eee7;
  --v4-paper-muted: #aaa79f;
  --v4-coral: #ff795f;
  --v4-lime: #d7f777;
  position: fixed;
  inset: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  background: var(--v4-night);
  color: #f7f5ef;
  scrollbar-gutter: stable;
}
.landing-v4-root * {
  box-sizing: border-box;
}
.landing-v4-root button,
.landing-v4-root a {
  -webkit-tap-highlight-color: transparent;
}
.landing-v4-root button:focus-visible,
.landing-v4-root a:focus-visible,
.landing-v4-root [tabindex="0"]:focus-visible,
.landing-v4-root textarea:focus-visible {
  outline: 2px solid var(--v4-lime);
  outline-offset: 3px;
}
.landing-v4-nav {
  height: 68px;
  padding-inline: max(24px, calc((100vw - 1380px) / 2));
  border-color: rgba(255,255,255,.11);
  background: rgba(11,11,10,.92);
  box-shadow: 0 12px 40px rgba(0,0,0,.16);
}
.landing-v4-nav .landing-scroll-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  width: calc(var(--landing-progress, 0) * 100%);
  height: 2px;
  background: var(--v4-coral);
  transform-origin: left;
}
.landing-v4-nav nav a {
  position: relative;
  color: #8e8c86;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.landing-v4-nav nav a.active {
  color: #f7f5ef;
}
.landing-v4-nav nav a.active::after {
  position: absolute;
  right: 0;
  bottom: -25px;
  left: 0;
  height: 2px;
  background: var(--v4-coral);
  content: "";
}
.landing-v4-nav button {
  min-height: 44px;
  border-radius: 0;
}
.landing-v4-nav .landing-login {
  color: #b7b4ad;
}
.landing-v4-nav .landing-cta {
  padding-inline: 17px;
  border: 1px solid #f7f5ef;
  background: #f7f5ef;
  color: var(--v4-ink);
}
.landing-v4-hero {
  position: relative;
  display: grid;
  width: min(1380px, calc(100% - 48px));
  min-height: calc(100dvh - 68px);
  margin: 0 auto;
  padding: 76px 0 42px;
  grid-template-columns: minmax(0,.94fr) minmax(480px,.78fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: clamp(50px,7vw,118px);
  overflow: hidden;
}
.landing-v4-hero::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,.07);
  content: "";
}
.landing-v4-hero-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: 28px 0 34px;
}
.landing-v4-eyebrow {
  display: flex;
  margin: 0;
  align-items: center;
  gap: 16px;
  color: #aaa79f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
}
.landing-v4-eyebrow span {
  color: var(--v4-coral);
}
.landing-v4-eyebrow i {
  display: flex;
  align-items: center;
  gap: 7px;
  font-style: normal;
}
.landing-v4-eyebrow i::before {
  width: 26px;
  height: 1px;
  background: #494842;
  content: "";
}
.landing-v4-hero h1 {
  margin: 35px 0 25px;
  color: #f8f6f0;
  font-size: clamp(78px,8.2vw,132px);
  font-weight: 640;
  letter-spacing: -.084em;
  line-height: .79;
  text-wrap: balance;
}
.landing-v4-hero h1 span {
  display: inline;
  background: none;
  color: var(--v4-coral);
}
.landing-v4-deck {
  max-width: 700px;
  margin: 0;
  color: #bebbb4;
  font-size: clamp(17px,1.45vw,22px);
  line-height: 1.48;
  text-wrap: pretty;
}
.landing-v4-prompt-wrap {
  width: 100%;
  margin-top: 34px;
}
.landing-v4-prompt-card {
  width: 100%;
  max-width: 710px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 0;
  background: #161614;
  box-shadow: 12px 12px 0 #24231f;
}
.landing-v4-prompt-card:focus-within {
  border-color: var(--v4-coral);
  box-shadow: 12px 12px 0 #3a211c;
  transform: none;
}
.landing-v4-prompt-card textarea {
  height: 110px;
  padding: 20px 21px;
  color: #f4f2ec;
  font-size: 15px;
}
.landing-v4-prompt-card textarea::placeholder {
  color: #77756f;
}
.landing-v4-prompt-card .landing-prompt-footer {
  min-height: 59px !important;
  padding: 8px 9px 8px 16px !important;
}
.landing-v4-prompt-card .landing-prompt-footer > span {
  height: 32px !important;
  padding: 0 9px;
  border: 0;
  border-radius: 0 !important;
  background: #24231f;
  color: #a9a69e;
}
.landing-v4-prompt-card .landing-prompt-footer > button {
  min-width: 136px;
  height: 42px !important;
  border-radius: 0 !important;
  background: var(--v4-coral) !important;
  color: #17110e !important;
  font-size: 10px;
  font-weight: 850;
}
.landing-v4-prompt-card .landing-prompt-footer > button:disabled {
  background: #403b37 !important;
  color: #8c8880 !important;
  box-shadow: none !important;
  opacity: 1;
}
.landing-v4-examples {
  width: 100%;
  max-width: 710px;
  margin-top: 17px;
  gap: 8px;
}
.landing-v4-examples > span {
  color: #66645f;
  font-weight: 800;
  letter-spacing: .11em;
}
.landing-v4-examples button {
  min-height: 36px;
  max-width: 240px;
  border-radius: 0;
  color: #8f8c85;
}
.landing-v4-trial {
  display: flex;
  margin: 16px 0 0;
  align-items: center;
  gap: 8px;
  color: #8d8a83;
  font-size: 10px;
}
.landing-v4-trial svg {
  color: var(--v4-lime);
}
.landing-v4-trial i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #5c5a55;
}
.landing-v4-hero-proof {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  height: min(670px,72vh);
  grid-template-columns: 56px minmax(0,1fr);
  border: 1px solid rgba(255,255,255,.13);
  background: #121210;
  box-shadow: 30px 36px 90px rgba(0,0,0,.38);
}
.landing-v4-proof-rail {
  display: flex;
  padding: 21px 0;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,.1);
  color: #6d6b65;
}
.landing-v4-proof-rail span {
  font-family: var(--font-geist-mono),monospace;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}
.landing-v4-proof-rail i {
  width: 1px;
  min-height: 30px;
  margin: 12px 0;
  flex: 1;
  background: #33322f;
}
.landing-v4-proof-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.landing-v4-proof-meta {
  position: absolute;
  z-index: 5;
  top: 25px;
  left: 25px;
  display: flex;
  flex-direction: column;
}
.landing-v4-proof-meta span {
  color: var(--v4-coral);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}
.landing-v4-proof-meta strong {
  margin-top: 9px;
  color: #e9e6df;
  font-size: 14px;
  line-height: 1.23;
}
.landing-v4-proof-meta small {
  margin-top: 6px;
  color: #77746d;
  font-size: 8px;
}
.landing-v4-card-stack {
  position: absolute;
  inset: 105px 0 92px;
}
.landing-v4-card-stack figure {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72%,390px);
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid rgba(255,255,255,.16);
  background: #080808;
  box-shadow: 0 28px 65px rgba(0,0,0,.58);
  transform-origin: center;
}
.landing-v4-card-stack img {
  object-fit: cover;
}
.landing-v4-card-stack .card-1 {
  z-index: 3;
  transform: translate(-50%,-50%) rotate(-1deg);
}
.landing-v4-card-stack .card-2 {
  z-index: 2;
  transform: translate(-70%,-49%) rotate(-9deg) scale(.91);
  opacity: .58;
}
.landing-v4-card-stack .card-3 {
  z-index: 1;
  transform: translate(-28%,-48%) rotate(8deg) scale(.88);
  opacity: .38;
}
.landing-v4-project-status {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: 82px;
  padding: 14px 18px;
  grid-template-columns: repeat(3,auto) 1fr;
  align-items: center;
  gap: 13px;
  border-top: 1px solid rgba(255,255,255,.11);
  background: #171714;
}
.landing-v4-project-status span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #a7a49d;
  font-size: 8px;
  white-space: nowrap;
}
.landing-v4-project-status svg {
  color: var(--v4-lime);
}
.landing-v4-project-status strong {
  justify-self: end;
  color: var(--v4-coral);
  font-family: var(--font-geist-mono),monospace;
  font-size: 7px;
  letter-spacing: .12em;
}
.landing-v4-proof-line {
  grid-column: 1/-1;
  display: flex;
  min-height: 58px;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #8b8882;
  font-size: 9px;
}
.landing-v4-proof-line span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.landing-v4-proof-line svg {
  color: var(--v4-lime);
}
.landing-v4-section-header {
  max-width: 1020px;
  margin-bottom: 64px;
}
.landing-v4-section-header > span,
.landing-v4-audience-story > div > span,
.landing-v4-brand > div > span,
.landing-v4-outcomes > header > span {
  color: var(--v4-coral);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
}
.landing-v4-section-header h2,
.landing-v4-brand h2,
.landing-v4-outcomes h2,
.landing-v4-final h2 {
  margin: 17px 0 20px;
  font-size: clamp(47px,5.8vw,80px);
  font-weight: 620;
  letter-spacing: -.065em;
  line-height: .93;
  text-wrap: balance;
}
.landing-v4-section-header > p {
  max-width: 780px;
  margin: 0;
  color: #6e6b65;
  font-size: 16px;
  line-height: 1.65;
}
.landing-v4-audiences {
  width: 100%;
  padding: 118px max(24px,calc((100vw - 1380px) / 2)) 130px;
  background: var(--v4-paper);
  color: var(--v4-ink);
}
.landing-v4-section-header-dark > span {
  color: #c14f3b;
}
.landing-v4-audience-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #b9b6ae;
  border-bottom: 1px solid #b9b6ae;
}
.landing-v4-audience-switch button {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 18px;
  border: 0;
  background: transparent;
  color: #77746e;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}
.landing-v4-audience-switch button + button {
  padding-left: 30px;
  border-left: 1px solid #b9b6ae;
}
.landing-v4-audience-switch button span {
  color: #a29f97;
  font-family: var(--font-geist-mono),monospace;
  font-size: 9px;
}
.landing-v4-audience-switch button.active {
  color: var(--v4-ink);
}
.landing-v4-audience-switch button.active span {
  color: #c14f3b;
}
.landing-v4-audience-story {
  display: grid;
  padding-top: 54px;
  grid-template-columns: minmax(0,.9fr) minmax(430px,.72fr);
  align-items: center;
  gap: clamp(50px,8vw,130px);
}
.landing-v4-audience-story > div > span {
  color: #c14f3b;
}
.landing-v4-audience-story h3 {
  max-width: 720px;
  margin: 20px 0 22px;
  font-size: clamp(42px,5vw,72px);
  font-weight: 630;
  letter-spacing: -.06em;
  line-height: .93;
}
.landing-v4-audience-story > div > p {
  max-width: 650px;
  margin: 0;
  color: #5e5b55;
  font-size: 16px;
  line-height: 1.65;
}
.landing-v4-audience-story ul {
  display: grid;
  gap: 13px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.landing-v4-audience-story li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #403e39;
  font-size: 12px;
}
.landing-v4-audience-story li svg {
  color: #a63f2d;
}
.landing-v4-audience-story > div > button {
  display: inline-flex;
  min-height: 48px;
  margin-top: 35px;
  padding: 0 18px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--v4-ink);
  border-radius: 0;
  background: var(--v4-ink);
  color: #f3f0e8;
  font-size: 10px;
  font-weight: 850;
}
.landing-v4-audience-story figure {
  position: relative;
  min-height: 550px;
  margin: 0;
  overflow: hidden;
  background: #bbb8b0;
  box-shadow: 18px 18px 0 #d1cec5;
}
.landing-v4-audience-story figure > img {
  object-fit: cover;
  filter: saturate(.78) contrast(1.04);
}
.landing-v4-audience-story figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 62px;
  padding: 0 18px;
  align-items: center;
  gap: 12px;
  background: rgba(17,17,15,.92);
  color: #f1eee6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
}
.landing-v4-audience-story figcaption i {
  height: 1px;
  flex: 1;
  background: #5e5b55;
}
.landing-v4-audience-story figcaption strong {
  color: var(--v4-coral);
  font-size: inherit;
}
.landing-v4-process,
.landing-v4-examples-section,
.landing-v4-pricing {
  width: min(1380px,calc(100% - 48px));
  margin: 0 auto;
  padding: 122px 0;
}
.landing-v4-process {
  color: #f1efe9;
}
.landing-v4-process .landing-v4-section-header > p {
  color: #9a9790;
}
.landing-v4-process-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.landing-v4-process-grid article {
  min-height: 285px;
  padding: 25px 24px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.landing-v4-process-grid article:last-child {
  border-right: 0;
}
.landing-v4-process-grid article > span {
  color: var(--v4-coral);
  font-family: var(--font-geist-mono),monospace;
  font-size: 8px;
  letter-spacing: .11em;
}
.landing-v4-process-grid h3 {
  margin: 105px 0 13px;
  font-size: 22px;
  letter-spacing: -.035em;
}
.landing-v4-process-grid p {
  margin: 0;
  color: #8d8a84;
  font-size: 12px;
  line-height: 1.62;
}
.landing-v4-ownership {
  display: grid;
  margin-top: 72px;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255,255,255,.14);
}
.landing-v4-ownership article {
  min-height: 320px;
  padding: 35px 38px;
}
.landing-v4-ownership article:first-child {
  border-right: 1px solid rgba(255,255,255,.14);
  background: #151513;
}
.landing-v4-ownership article:last-child {
  background: var(--v4-coral);
  color: #1a100d;
}
.landing-v4-ownership article > span {
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}
.landing-v4-ownership article:first-child > span {
  color: #918e87;
}
.landing-v4-ownership h3 {
  margin: 20px 0 32px;
  font-size: 37px;
  letter-spacing: -.05em;
}
.landing-v4-ownership ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #a9a69f;
  font-size: 12px;
}
.landing-v4-ownership article:last-child ul {
  color: #351d17;
}
.landing-v4-ownership li {
  display: flex;
  gap: 9px;
  align-items: center;
}
.landing-v4-ownership li::before {
  width: 16px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}
.landing-v4-examples-section {
  border-top: 1px solid rgba(255,255,255,.1);
}
.landing-v4-examples-section .landing-v4-section-header {
  margin-left: auto;
  text-align: right;
}
.landing-v4-demo {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(520px,1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 14px 70px;
}
.landing-v4-demo .landing-request-bubble {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  margin: 38px 0 0;
  border-radius: 0;
  background: #181816;
}
.landing-v4-demo .landing-request-bubble span {
  color: var(--v4-coral);
}
.landing-v4-demo .landing-request-bubble p {
  color: #d1cec7;
  font-size: 15px;
}
.landing-v4-demo .landing-result-status {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  margin: 0;
  border-radius: 0;
}
.landing-v4-demo .landing-carousel-shell {
  grid-column: 2;
  grid-row: 1/3;
  width: 100%;
  max-width: 620px;
  margin: 0 0 0 auto;
  border-radius: 0;
  background: #151513;
  box-shadow: 24px 24px 0 #24231f;
}
.landing-v4-demo .landing-carousel-art {
  border-radius: 0;
}
.landing-v4-demo .landing-carousel-controls button {
  min-width: 44px;
  min-height: 44px;
}
.landing-v4-outcomes {
  display: grid;
  width: 100%;
  padding: 120px max(24px,calc((100vw - 1380px) / 2));
  grid-template-columns: minmax(0,.7fr) minmax(600px,1fr);
  gap: 90px;
  background: var(--v4-paper);
  color: var(--v4-ink);
}
.landing-v4-outcomes > header {
  max-width: 600px;
}
.landing-v4-outcomes > header > span {
  color: #c14f3b;
}
.landing-v4-outcomes h2 {
  font-size: clamp(45px,5vw,72px);
}
.landing-v4-outcomes header p {
  margin: 0;
  color: #625f59;
  font-size: 15px;
  line-height: 1.65;
}
.landing-v4-outcomes > div {
  border-top: 1px solid #aaa79f;
}
.landing-v4-outcomes article {
  display: grid;
  min-height: 165px;
  padding: 22px 0;
  grid-template-columns: 120px 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 7px 20px;
  border-bottom: 1px solid #aaa79f;
}
.landing-v4-outcomes article > strong {
  grid-row: 1/4;
  color: #c14f3b;
  font-size: 48px;
  letter-spacing: -.06em;
}
.landing-v4-outcomes article > span {
  font-size: 14px;
  font-weight: 800;
}
.landing-v4-outcomes article p {
  margin: 0;
  color: #5d5a54;
  font-size: 11px;
  line-height: 1.55;
}
.landing-v4-outcomes article a {
  display: inline-flex;
  width: max-content;
  margin-top: 7px;
  align-items: center;
  gap: 6px;
  color: #1d1c19;
  font-size: 9px;
  font-weight: 750;
  text-decoration: none;
}
.landing-v4-brand {
  display: grid;
  width: min(1380px,calc(100% - 48px));
  margin: 0 auto;
  padding: 130px 0;
  grid-template-columns: minmax(0,.82fr) minmax(470px,.72fr);
  align-items: center;
  gap: clamp(55px,8vw,125px);
}
.landing-v4-brand > div > p {
  max-width: 650px;
  margin: 0;
  color: #918e87;
  font-size: 15px;
  line-height: 1.65;
}
.landing-v4-brand ul {
  display: grid;
  margin: 42px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  list-style: none;
}
.landing-v4-brand li {
  display: grid;
  min-height: 74px;
  grid-template-columns: 36px 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: var(--v4-coral);
}
.landing-v4-brand li span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #85827b;
  font-size: 10px;
}
.landing-v4-brand li strong {
  color: #e8e5de;
  font-size: 13px;
}
.landing-v4-brand figure {
  margin: 0;
  border: 1px solid rgba(255,255,255,.14);
  background: #151513;
  box-shadow: 22px 22px 0 #23221f;
}
.landing-v4-brand-canvas {
  position: relative;
  min-height: 570px;
  margin: 20px;
  overflow: hidden;
}
.landing-v4-brand-canvas img {
  object-fit: cover;
}
.landing-v4-brand figcaption {
  display: flex;
  padding: 0 20px 19px;
  flex-direction: column;
}
.landing-v4-brand figcaption span {
  color: var(--v4-coral);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .13em;
}
.landing-v4-brand figcaption strong {
  margin-top: 8px;
  font-size: 13px;
}
.landing-v4-brand figcaption small {
  margin-top: 5px;
  color: #77746e;
  font-size: 9px;
}
.landing-v4-pricing {
  border-top: 1px solid rgba(255,255,255,.12);
}
.landing-v4-pricing .landing-v4-section-header > p {
  color: #918e87;
}
.landing-v4-pricing .pricing-grid {
  margin-top: 20px;
}
.landing-v4-pricing .pricing-grid article {
  border-radius: 0;
  background: #121210;
}
.landing-v4-pricing .pricing-grid article.popular {
  border-color: var(--v4-coral);
  background: #171311;
}
.landing-v4-pricing .pricing-grid article.popular > em {
  border-radius: 0;
  background: var(--v4-coral);
  color: #1a100d;
}
.landing-v4-pricing .pricing-grid button {
  min-height: 48px;
  border-radius: 0;
}
.landing-v4-final {
  width: 100%;
  min-height: 610px;
  padding: 115px max(24px,calc((100vw - 1100px) / 2));
  background: var(--v4-coral);
  color: #1a100d;
}
.landing-v4-final > span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
}
.landing-v4-final h2 {
  max-width: 1000px;
  color: #1a100d;
}
.landing-v4-final p {
  color: #5a2a20;
}
.landing-v4-final button {
  min-height: 50px;
  border-radius: 0;
  background: #17110e;
  color: #f7f2e8;
}
.landing-v4-final small {
  display: block;
  margin-top: 18px;
  color: #713427;
  font-size: 9px;
}
.landing-v4-footer {
  width: min(1380px,calc(100% - 48px));
  padding-block: 35px;
}
@media (hover: hover) and (pointer: fine) {
  .landing-v4-nav .landing-cta:hover {
    background: var(--v4-coral);
    border-color: var(--v4-coral);
  }
  .landing-v4-examples button:hover {
    border-color: #69665f;
    color: #d7d3ca;
  }
  .landing-v4-audience-switch button:hover {
    color: var(--v4-ink);
  }
  .landing-v4-audience-story > div > button:hover {
    background: #c14f3b;
    border-color: #c14f3b;
  }
  .landing-v4-outcomes article a:hover {
    color: #c14f3b;
  }
}
@media (max-width: 1080px) {
  .landing-v4-hero {
    grid-template-columns: minmax(0,1fr) minmax(400px,.72fr);
    column-gap: 40px;
  }
  .landing-v4-hero h1 {
    font-size: clamp(70px,9.5vw,102px);
  }
  .landing-v4-project-status {
    grid-template-columns: 1fr 1fr;
  }
  .landing-v4-project-status strong {
    justify-self: start;
  }
  .landing-v4-proof-line {
    flex-wrap: wrap;
    padding-top: 18px;
  }
  .landing-v4-audience-story {
    grid-template-columns: minmax(0,1fr) minmax(380px,.75fr);
    gap: 50px;
  }
  .landing-v4-process-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .landing-v4-process-grid article:nth-child(2) {
    border-right: 0;
  }
  .landing-v4-process-grid article:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  .landing-v4-demo {
    gap: 40px;
  }
  .landing-v4-outcomes {
    grid-template-columns: 1fr;
    gap: 55px;
  }
}
@media (max-width: 760px) {
  .landing-v4-root {
    scrollbar-gutter: auto;
  }
  .landing-v4-nav {
    height: 59px;
    padding-inline: 15px;
  }
  .landing-v4-nav nav,
  .landing-v4-nav .landing-login {
    display: none;
  }
  .landing-v4-nav .landing-cta {
    min-height: 42px;
    height: 42px;
    padding-inline: 12px;
  }
  .landing-v4-hero {
    width: calc(100% - 30px);
    min-height: auto;
    padding: 54px 0 34px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 50px;
  }
  .landing-v4-hero::after {
    display: none;
  }
  .landing-v4-hero-copy {
    padding: 0;
  }
  .landing-v4-eyebrow {
    flex-wrap: wrap;
    gap: 9px 12px;
    line-height: 1.5;
  }
  .landing-v4-eyebrow i::before {
    width: 16px;
  }
  .landing-v4-hero h1 {
    margin: 29px 0 22px;
    font-size: clamp(68px,22vw,92px);
    line-height: .82;
  }
  .landing-v4-deck {
    font-size: 17px;
    line-height: 1.5;
  }
  .landing-v4-prompt-wrap {
    margin-top: 29px;
  }
  .landing-v4-prompt-card {
    box-shadow: 8px 8px 0 #24231f;
  }
  .landing-v4-prompt-card textarea {
    height: 105px;
    padding: 17px;
    font-size: 14px;
  }
  .landing-v4-prompt-card .landing-prompt-footer {
    display: grid !important;
    min-height: 104px !important;
    padding: 8px !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px !important;
  }
  .landing-v4-prompt-card .landing-prompt-footer > span {
    display: flex !important;
    justify-content: center;
  }
  .landing-v4-prompt-card .landing-prompt-footer > button {
    grid-column: 1/-1;
    width: 100% !important;
    min-height: 46px;
    margin: 0;
  }
  .landing-v4-examples {
    align-items: stretch;
    flex-direction: column;
    overflow: visible;
  }
  .landing-v4-examples button {
    width: 100%;
    max-width: none;
    min-height: 44px;
    text-align: left;
  }
  .landing-v4-hero-proof {
    height: 600px;
    grid-row: 2;
    grid-template-columns: 38px minmax(0,1fr);
  }
  .landing-v4-proof-meta {
    top: 20px;
    left: 17px;
  }
  .landing-v4-card-stack {
    inset: 100px 0 100px;
  }
  .landing-v4-card-stack figure {
    width: min(76%,310px);
  }
  .landing-v4-project-status {
    min-height: 92px;
    padding: 12px;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .landing-v4-project-status span {
    font-size: 7px;
  }
  .landing-v4-project-status strong {
    grid-column: 1/-1;
  }
  .landing-v4-proof-line {
    grid-row: 3;
    min-height: 90px;
    padding: 20px 0 0;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 13px 20px;
    font-size: 8px;
  }
  .landing-v4-audiences {
    padding: 82px 15px 90px;
  }
  .landing-v4-section-header {
    margin-bottom: 44px;
  }
  .landing-v4-section-header h2,
  .landing-v4-brand h2,
  .landing-v4-outcomes h2,
  .landing-v4-final h2 {
    font-size: clamp(42px,13vw,58px);
    line-height: .95;
  }
  .landing-v4-section-header > p {
    font-size: 14px;
  }
  .landing-v4-audience-switch {
    grid-template-columns: 1fr;
  }
  .landing-v4-audience-switch button {
    min-height: 65px;
  }
  .landing-v4-audience-switch button + button {
    padding-left: 0;
    border-top: 1px solid #b9b6ae;
    border-left: 0;
  }
  .landing-v4-audience-story {
    padding-top: 42px;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .landing-v4-audience-story h3 {
    font-size: clamp(43px,13vw,58px);
  }
  .landing-v4-audience-story > div > p {
    font-size: 14px;
  }
  .landing-v4-audience-story > div > button {
    min-height: 48px;
    width: 100%;
    justify-content: center;
  }
  .landing-v4-audience-story figure {
    min-height: 480px;
    box-shadow: 9px 9px 0 #d1cec5;
  }
  .landing-v4-process,
  .landing-v4-examples-section,
  .landing-v4-pricing,
  .landing-v4-brand {
    width: calc(100% - 30px);
    padding: 88px 0;
  }
  .landing-v4-process-grid {
    grid-template-columns: 1fr;
  }
  .landing-v4-process-grid article {
    min-height: 215px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
  }
  .landing-v4-process-grid article:last-child {
    border-bottom: 0;
  }
  .landing-v4-process-grid h3 {
    margin-top: 70px;
  }
  .landing-v4-ownership {
    margin-top: 50px;
    grid-template-columns: 1fr;
  }
  .landing-v4-ownership article {
    min-height: 290px;
    padding: 30px 25px;
  }
  .landing-v4-ownership article:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .landing-v4-ownership h3 {
    font-size: 32px;
  }
  .landing-v4-examples-section .landing-v4-section-header {
    margin-left: 0;
    text-align: left;
  }
  .landing-v4-demo {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
  }
  .landing-v4-demo .landing-request-bubble {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }
  .landing-v4-demo .landing-result-status {
    grid-column: 1;
    grid-row: 2;
  }
  .landing-v4-demo .landing-carousel-shell {
    grid-column: 1;
    grid-row: 3;
    margin-top: 24px;
    box-shadow: 9px 9px 0 #24231f;
  }
  .landing-v4-demo .landing-carousel-shell > header {
    padding-inline: 14px;
  }
  .landing-v4-demo .landing-carousel-controls {
    padding-inline: 11px;
  }
  .landing-v4-demo .landing-carousel-controls > span {
    display: none;
  }
  .landing-v4-outcomes {
    padding: 85px 15px;
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .landing-v4-outcomes article {
    min-height: 190px;
    grid-template-columns: 90px 1fr;
  }
  .landing-v4-outcomes article > strong {
    font-size: 38px;
  }
  .landing-v4-brand {
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .landing-v4-brand-canvas {
    min-height: 450px;
    margin: 12px;
  }
  .landing-v4-brand figcaption {
    padding: 4px 12px 15px;
  }
  .landing-v4-brand figure {
    box-shadow: 9px 9px 0 #23221f;
  }
  .landing-v4-pricing .pricing-grid {
    grid-template-columns: 1fr;
  }
  .landing-v4-pricing .pricing-grid article {
    min-height: auto;
  }
  .landing-v4-final {
    min-height: 570px;
    padding: 85px 15px;
  }
  .landing-v4-final button {
    width: 100%;
    min-height: 50px;
  }
  .landing-v4-footer {
    width: calc(100% - 30px);
    align-items: flex-start;
    gap: 18px;
  }
  .landing-v4-footer > div {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .landing-v4-footer a,
  .landing-v4-footer button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
.df180-demo .df180-live-studio {
  min-height: 670px;
}
.df180-demo .df180-live-chat {
  overflow: hidden;
}
.df180-agent-plan {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.df180-agent-thinking {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid #343934;
  border-radius: 7px;
  background: #1a1e1b;
  color: #aeb4ad;
  font-size: 8px;
  overflow: hidden;
}
.df180-agent-thinking svg {
  flex: 0 0 auto;
  color: var(--df-coral);
  animation: df180-agent-spark 1.8s ease-in-out infinite;
}
.df180-agent-thinking span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: df180-agent-thought 1.4s steps(34, end) both;
  clip-path: inset(0 100% 0 0);
}
.df180-agent-thinking i {
  width: 3px;
  height: 3px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #7e857d;
  animation: df180-agent-dot .9s ease-in-out infinite;
}
.df180-agent-thinking i:nth-last-child(2) {
  animation-delay: .14s;
}
.df180-agent-thinking i:last-child {
  animation-delay: .28s;
}
@keyframes df180-agent-spark {
  50% {
    color: #ffd5cc;
    transform: rotate(18deg) scale(1.15);
  }
}
@keyframes df180-agent-thought {
  to {
    clip-path: inset(0);
  }
}
@keyframes df180-agent-dot {
  50% {
    opacity: .35;
    transform: translateY(-2px);
  }
}
.df180-agent-plan-list {
  display: grid;
  gap: 5px;
}
.df180-agent-plan-list article {
  min-height: 46px;
  display: grid;
  grid-template-columns: 41px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border: 1px solid #343934;
  border-radius: 7px;
  background: #1d211e;
  color: #daddd8;
  animation: df180-agent-card-write .65s cubic-bezier(.16, 1, .3, 1) var(--plan-delay) both;
}
.df180-agent-plan-list article > span {
  color: #777e77;
  font-size: 6.5px;
  font-weight: 780;
  text-transform: uppercase;
}
.df180-agent-plan-list article > div {
  min-width: 0;
}
.df180-agent-plan-list strong,
.df180-agent-plan-list p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df180-agent-plan-list strong {
  display: block;
  font-size: 8.5px;
}
.df180-agent-plan-list p {
  margin: 3px 0 0;
  color: #7f867f;
  font-size: 6.5px;
}
.df180-agent-plan-list article > small {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid #3a403a;
  border-radius: 4px;
  color: #9ba19a;
  font-size: 6px;
}
.df180-agent-plan-more {
  color: #777e77;
  font-size: 7px;
  text-align: center;
}
@keyframes df180-agent-card-write {
  from {
    opacity: .08;
    transform: translateY(12px);
    clip-path: inset(0 0 100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0);
  }
}
.df180-agent-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.df180-agent-image-choices,
.df180-agent-theme {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid #343934;
  border-radius: 7px;
  background: #191d1a;
  animation: df180-agent-choice-arrive .6s cubic-bezier(.16, 1, .3, 1) 1.45s both;
}
.df180-agent-image-choices > i {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #414741;
  border-radius: 4px;
}
.df180-agent-image-choices > i.selected {
  outline: 2px solid var(--df-coral);
  outline-offset: 1px;
}
.df180-agent-image-choices img {
  object-fit: cover;
}
.df180-agent-image-choices > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8e958d;
  font-size: 6.5px;
}
.df180-agent-theme {
  animation-delay: 1.78s;
}
.df180-agent-theme > i {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  border: 5px solid #eeb83d;
  border-radius: 50%;
  background: #253126;
}
.df180-agent-theme > span {
  display: grid;
  gap: 2px;
}
.df180-agent-theme small {
  color: #707770;
  font-size: 5.5px;
  letter-spacing: .09em;
}
.df180-agent-theme strong {
  color: #d9ddd8;
  font-size: 7px;
}
.df180-agent-theme svg {
  margin-left: auto;
  color: var(--df-lime);
}
@keyframes df180-agent-choice-arrive {
  from {
    opacity: 0;
    transform: translateX(18px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}
.df180-live-chat > .df180-agent-plan {
  gap: 6px;
}
.df180-live-chat > .df180-agent-plan .df180-agent-plan-list article {
  min-height: 39px;
}
.df180-live-chat > .df180-agent-plan .df180-agent-choices {
  grid-template-columns: 1fr 1fr;
}
.df180-desktop-plan-stage {
  width: min(82%, 500px);
}
.df180-desktop-plan-stage .df180-agent-plan-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.df180-desktop-plan-stage .df180-agent-plan-list article {
  min-height: 78px;
  grid-template-columns: 1fr;
  align-content: center;
}
.df180-desktop-plan-stage .df180-agent-plan-list article > small {
  width: fit-content;
}
.df180-desktop-plan-stage .df180-agent-choices {
  grid-template-columns: 1fr 1fr;
}
.df180-build-progress,
.df180-edit-collaboration,
.df180-instagram-outcome {
  position: relative;
  width: min(88%, 590px);
}
.df180-build-progress {
  display: grid;
  justify-items: center;
  gap: 11px;
}
.df180-build-canvas {
  position: relative;
  width: 238px;
  aspect-ratio: 4 / 5;
  filter: drop-shadow(0 20px 32px rgba(0, 0, 0, .38));
}
.df180-build-canvas > .slide-preview-surface {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 7px;
  animation: df180-canvas-materialize 1.25s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes df180-canvas-materialize {
  from {
    opacity: .05;
    clip-path: inset(0 0 100%);
    filter: saturate(0) blur(8px);
  }
  55% {
    opacity: 1;
    filter: saturate(.25) blur(2px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: saturate(1) blur(0);
  }
}
.df180-build-copy-stream {
  position: absolute;
  z-index: 4;
  top: 14%;
  right: 8%;
  left: 8%;
  display: grid;
  gap: 5px;
  padding: 8px;
  border-radius: 5px;
  background: rgba(18, 21, 18, .88);
  backdrop-filter: blur(7px);
  color: #dfe3dd;
  animation: df180-stream-panel 2.4s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-build-copy-stream span {
  font-size: 6px;
  font-weight: 700;
}
.df180-build-copy-stream i {
  height: 4px;
  border-radius: 2px;
  background: #6f766f;
  transform-origin: left;
  animation: df180-stream-line .9s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-build-copy-stream i:nth-child(2) {
  width: 88%;
  animation-delay: .25s;
}
.df180-build-copy-stream i:nth-child(3) {
  width: 64%;
  animation-delay: .42s;
}
.df180-build-copy-stream i:nth-child(4) {
  width: 76%;
  animation-delay: .58s;
}
@keyframes df180-stream-panel {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  18%, 72% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
}
@keyframes df180-stream-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.df180-build-canvas > strong {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 5px;
  background: rgba(17, 19, 17, .88);
  color: #fff;
  font-size: 7px;
}
.df180-build-canvas > strong svg {
  color: var(--df-coral);
}
.df180-build-selector,
.df180-edit-slide-switcher {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.df180-build-selector > i,
.df180-edit-slide-switcher > i {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #3b403b;
  border-radius: 4px;
  background: #191d1a;
}
.df180-build-selector > i {
  animation: df180-slide-build .72s cubic-bezier(.16, 1, .3, 1) var(--build-delay) both;
}
.df180-build-selector .slide-preview-surface,
.df180-edit-slide-switcher .slide-preview-surface {
  width: 100%;
  height: 100%;
}
.df180-build-selector > i > .df180-build-done {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--df-lime);
  color: #162016;
}
@keyframes df180-slide-build {
  from {
    opacity: .08;
    transform: translateY(18px) scale(.9);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.df180-edit-collaboration {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.df180-edit-canvas {
  position: relative;
  width: 222px;
  aspect-ratio: 4 / 5;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .38));
}
.df180-edit-canvas > .slide-preview-surface {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 7px;
}
.df180-edit-copy-field {
  position: absolute;
  z-index: 6;
  top: 17%;
  right: 7%;
  left: 7%;
  display: grid;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid #4b83ff;
  border-radius: 4px;
  background: rgba(245, 246, 242, .96);
  box-shadow: 0 9px 20px rgba(0, 0, 0, .18);
  color: #161a16;
  animation: df180-copy-editor-open 1s cubic-bezier(.16, 1, .3, 1) .55s both;
}
.df180-edit-copy-field small {
  color: #747b74;
  font-size: 5.5px;
}
.df180-edit-copy-field b {
  overflow: hidden;
  font-size: 7px;
  white-space: nowrap;
  animation: df180-copy-rewrite 1.4s steps(38, end) 1.25s both;
  clip-path: inset(0 100% 0 0);
}
.df180-edit-copy-field > i {
  width: 1px;
  height: 10px;
  background: #1b68ff;
  animation: df180-caret-blink .65s step-end 4;
}
@keyframes df180-copy-editor-open {
  from {
    opacity: 0;
    transform: scale(.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes df180-copy-rewrite {
  to {
    clip-path: inset(0);
  }
}
@keyframes df180-caret-blink {
  50% {
    opacity: 0;
  }
}
.df180-edit-image-field {
  position: absolute;
  z-index: 5;
  right: 2%;
  bottom: 2%;
  left: 2%;
  height: 53%;
  border: 2px solid #f2aa2f;
  border-radius: 3px;
  animation: df180-image-select .55s cubic-bezier(.16, 1, .3, 1) 2.45s both;
}
@keyframes df180-image-select {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}
.df180-demo-cursor {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 4px;
  color: #fff;
  font-size: 6.5px;
  font-weight: 760;
}
.df180-demo-cursor > i {
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 9px solid currentColor;
  transform: rotate(-28deg);
}
.df180-demo-cursor.cursor-copy {
  top: 9%;
  right: -48px;
  background: #347cf4;
  animation: df180-copy-cursor 2.7s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-demo-cursor.cursor-image {
  right: -43px;
  bottom: 20%;
  background: #e39b23;
  animation: df180-image-cursor 3.1s cubic-bezier(.16, 1, .3, 1) .65s both;
}
@keyframes df180-copy-cursor {
  from {
    opacity: 0;
    transform: translate(70px, -35px);
  }
  28%, 72% {
    opacity: 1;
    transform: translate(0);
  }
  to {
    opacity: .72;
    transform: translate(-22px, 14px);
  }
}
@keyframes df180-image-cursor {
  from {
    opacity: 0;
    transform: translate(75px, 48px);
  }
  30%, 76% {
    opacity: 1;
    transform: translate(0);
  }
  to {
    opacity: .74;
    transform: translate(-28px, 23px);
  }
}
.df180-image-swap-tray {
  position: absolute;
  right: 2%;
  bottom: 74px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid #3b403b;
  border-radius: 7px;
  background: #1a1e1b;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .3);
  animation: df180-swap-tray .65s cubic-bezier(.16, 1, .3, 1) 2.7s both;
}
.df180-image-swap-tray > span {
  color: #919891;
  font-size: 6px;
}
.df180-image-swap-tray > i {
  position: relative;
  width: 37px;
  height: 37px;
  overflow: hidden;
  border: 1px solid #414741;
  border-radius: 4px;
}
.df180-image-swap-tray > i.selected {
  outline: 2px solid #e39b23;
  outline-offset: 1px;
  animation: df180-image-confirm .45s cubic-bezier(.16, 1, .3, 1) 3.45s both;
}
.df180-image-swap-tray img {
  object-fit: cover;
}
.df180-image-swap-tray > svg {
  color: var(--df-lime);
}
@keyframes df180-swap-tray {
  from {
    opacity: 0;
    transform: translateX(26px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}
@keyframes df180-image-confirm {
  50% {
    transform: scale(.9);
  }
}
.df180-edit-slide-switcher > i.active {
  outline: 2px solid var(--df-coral);
  outline-offset: 1px;
}
.df180-edit-slide-switcher > i {
  animation: df180-slide-browse 4.3s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-slide-browse-cursor {
  position: absolute;
  z-index: 12;
  bottom: 13px;
  left: 26%;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border-radius: 4px;
  background: #e39b23;
  color: #fff;
  font-size: 6px;
  font-weight: 760;
  animation: df180-browse-cursor 2.2s cubic-bezier(.16, 1, .3, 1) 3.7s both;
}
.df180-slide-browse-cursor > i {
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 9px solid currentColor;
  transform: rotate(-28deg);
}
@keyframes df180-browse-cursor {
  from {
    opacity: 0;
    transform: translate(90px, 26px);
  }
  30% {
    opacity: 1;
    transform: translate(0);
  }
  62% {
    opacity: 1;
    transform: translate(82px, 0);
  }
  to {
    opacity: .78;
    transform: translate(126px, 0);
  }
}
@keyframes df180-slide-browse {
  0%, 14% {
    filter: brightness(.65);
  }
  28%, 44% {
    filter: brightness(1.18);
  }
  58%, 74% {
    filter: brightness(.76);
  }
  88%, 100% {
    filter: brightness(1);
  }
}
.df180-collaboration-log,
.df180-download-receipt {
  display: grid;
  gap: 6px;
}
.df180-collaboration-log span,
.df180-download-receipt span {
  min-height: 29px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid #343934;
  border-radius: 6px;
  background: #1b1f1c;
  color: #9ba19a;
  font-size: 7px;
  animation: df180-agent-card-write .55s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-collaboration-log span:nth-child(2),
.df180-download-receipt span:nth-child(2) {
  animation-delay: .18s;
}
.df180-collaboration-log span:nth-child(3),
.df180-download-receipt span:nth-child(3) {
  animation-delay: .36s;
}
.df180-collaboration-log i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.df180-collaboration-log i.is-mia {
  background: #347cf4;
}
.df180-collaboration-log i.is-you {
  background: #e39b23;
}
.df180-collaboration-log svg,
.df180-download-receipt svg {
  color: var(--df-lime);
}
.df180-instagram-outcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, .68fr) 26px minmax(180px, .82fr);
  align-items: center;
  gap: 12px;
}
.df180-success-confetti {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.df180-success-confetti > i {
  position: absolute;
  width: 6px;
  height: 12px;
  border-radius: 2px;
  background: var(--df-coral);
  opacity: 0;
  animation: df180-success-confetti .95s cubic-bezier(.16, 1, .3, 1) 2.45s both;
}
.df180-success-confetti > i:nth-child(3n + 2) {
  background: var(--df-lime);
}
.df180-success-confetti > i:nth-child(3n) {
  background: #f7f7f4;
}
@keyframes df180-success-confetti {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0) scale(.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y)))
      rotate(var(--confetti-rotation))
      scale(1);
  }
}
.df180-export-bundle {
  position: relative;
  min-height: 250px;
  display: grid;
  place-items: center;
}
.df180-export-bundle > i {
  position: absolute;
  width: 112px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #414741;
  border-radius: 6px;
  transform-origin: bottom center;
  animation: df180-bundle-gather .75s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-export-bundle > i .slide-preview-surface {
  width: 100%;
  height: 100%;
}
.df180-export-bundle > i.bundle-1 {
  z-index: 4;
  transform: rotate(-5deg) translateX(-12px);
}
.df180-export-bundle > i.bundle-2 {
  z-index: 3;
  transform: rotate(4deg) translateX(11px);
  animation-delay: .1s;
}
.df180-export-bundle > i.bundle-3 {
  z-index: 2;
  transform: rotate(-10deg) translateX(-25px);
  animation-delay: .2s;
}
.df180-export-bundle > i.bundle-4 {
  z-index: 1;
  transform: rotate(11deg) translateX(25px);
  animation-delay: .3s;
}
@keyframes df180-bundle-gather {
  from {
    opacity: 0;
    translate: 0 48px;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}
.df180-export-bundle > span {
  position: absolute;
  z-index: 6;
  right: 4px;
  bottom: 8px;
  left: 4px;
  min-height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  background: rgba(17, 19, 17, .9);
  color: #e4e7e2;
  font-size: 6.5px;
  animation: df180-agent-choice-arrive .55s cubic-bezier(.16, 1, .3, 1) 1s both;
}
.df180-export-bundle > span svg {
  color: var(--df-lime);
}
.df180-export-morph-arrow {
  color: var(--df-coral);
  animation: df180-morph-arrow 1.1s cubic-bezier(.16, 1, .3, 1) 1.35s both;
}
@keyframes df180-morph-arrow {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.df180-published-post {
  overflow: hidden;
  border: 1px solid #3a3f3a;
  border-radius: 9px;
  background: #f8f8f5;
  color: #151715;
  box-shadow: 0 24px 42px rgba(0, 0, 0, .34);
  animation: df180-post-publish .85s cubic-bezier(.16, 1, .3, 1) 1.55s both;
}
@keyframes df180-post-publish {
  from {
    opacity: 0;
    transform: translateX(-36px) scale(.86);
    clip-path: inset(8% 18%);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    clip-path: inset(0);
    filter: blur(0);
  }
}
.df180-published-post > header {
  min-height: 35px;
  display: grid;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
}
.df180-published-post > header .donefeed-logo-mark {
  width: 21px;
  height: 21px;
}
.df180-published-post > header > span:nth-child(2) {
  display: grid;
  gap: 1px;
}
.df180-published-post > header strong {
  font-size: 7px;
}
.df180-published-post > header small {
  color: #777c76;
  font-size: 5.5px;
}
.df180-published-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.df180-published-media > .slide-preview-surface {
  width: 100%;
  height: 100%;
}
.df180-published-actions {
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}
.df180-published-actions > span {
  display: flex;
  gap: 8px;
}
.df180-like-counter {
  position: relative;
  height: 13px;
  overflow: hidden;
  margin: 0 8px;
  font-size: 7px;
}
.df180-like-counter span,
.df180-like-counter strong {
  position: absolute;
  inset: 0;
}
.df180-like-counter span {
  animation: df180-like-old 1.4s cubic-bezier(.16, 1, .3, 1) 2.6s both;
}
.df180-like-counter strong {
  transform: translateY(120%);
  animation: df180-like-new 1.4s cubic-bezier(.16, 1, .3, 1) 2.6s both;
}
@keyframes df180-like-old {
  to {
    opacity: 0;
    transform: translateY(-120%);
  }
}
@keyframes df180-like-new {
  to {
    transform: translateY(0);
  }
}
.df180-published-post > p {
  margin: 4px 8px 0;
  font-size: 6.5px;
  line-height: 1.35;
}
.df180-comment-stream {
  display: grid;
  gap: 3px;
  padding: 5px 8px 8px;
  color: #525751;
  font-size: 6px;
}
.df180-comment-stream span {
  animation: df180-comment-arrive .55s cubic-bezier(.16, 1, .3, 1) 3.1s both;
}
.df180-comment-stream span:last-child {
  animation-delay: 3.65s;
}
@keyframes df180-comment-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.df180-live-thumbnails > span > i {
  position: absolute;
  z-index: 5;
  right: 3px;
  bottom: 3px;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--df-lime);
  color: #162016;
  animation: df180-agent-card-write .4s cubic-bezier(.16, 1, .3, 1) var(--build-delay) both;
}
.df180-product-shell[data-motion="paused"] .df180-agent-plan *,
.df180-product-shell[data-motion="paused"] .df248-awaiting-canvas *,
.df180-product-shell[data-motion="paused"] .df180-build-progress *,
.df180-product-shell[data-motion="paused"] .df180-edit-collaboration *,
.df180-product-shell[data-motion="paused"] .df180-instagram-outcome *,
.df180-product-shell[data-visible="false"] .df180-agent-plan *,
.df180-product-shell[data-visible="false"] .df248-awaiting-canvas *,
.df180-product-shell[data-visible="false"] .df180-build-progress *,
.df180-product-shell[data-visible="false"] .df180-edit-collaboration *,
.df180-product-shell[data-visible="false"] .df180-instagram-outcome * {
  animation-play-state: paused !important;
}
@media (max-width: 760px) {
  .df180-demo .df180-mobile-studio {
    min-height: 760px;
  }
  .df180-demo .df180-mobile-studio > header {
    min-height: 118px;
  }
  .df180-demo .df180-mobile-studio-scene {
    min-height: 642px;
    padding: 16px;
  }
  .df180-mobile-prompt-scene {
    align-content: start;
    gap: 10px;
  }
  .df180-mobile-prompt-scene article {
    margin: 0 0 2px;
  }
  .df180-mobile-prompt-scene > .df180-agent-plan {
    gap: 7px;
  }
  .df180-mobile-prompt-scene .df180-agent-thinking {
    min-height: 40px;
    font-size: 9px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article {
    min-height: 55px;
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > small {
    grid-column: 2;
    width: fit-content;
    margin-top: -4px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list strong {
    font-size: 10px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list p {
    font-size: 7.5px;
  }
  .df180-mobile-prompt-scene .df180-agent-choices {
    grid-template-columns: 1.15fr .85fr;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices,
  .df180-mobile-prompt-scene .df180-agent-theme {
    min-height: 58px;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices > i {
    width: 36px;
    height: 36px;
  }
  .df180-mobile-build-scene,
  .df180-mobile-edit-scene,
  .df180-mobile-export-scene {
    display: grid;
    place-items: center;
  }
  .df180-mobile-build-scene > .df180-build-progress {
    width: 100%;
    gap: 18px;
  }
  .df180-mobile-build-scene .df180-build-canvas {
    width: min(238px, 72vw);
  }
  .df180-mobile-build-scene .df180-build-selector {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }
  .df180-mobile-build-scene .df180-build-copy-stream {
    padding: 11px;
  }
  .df180-mobile-edit-scene > .df180-edit-collaboration {
    width: 100%;
    gap: 16px;
  }
  .df180-mobile-edit-scene .df180-edit-canvas {
    width: min(230px, 70vw);
  }
  .df180-mobile-edit-scene .df180-edit-copy-field b {
    font-size: 8px;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray {
    position: static;
    width: min(100%, 330px);
    justify-content: center;
    animation-delay: 2.3s;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray > span {
    font-size: 7px;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray > i {
    width: 43px;
    height: 43px;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }
  .df180-mobile-export-scene > .df180-instagram-outcome {
    width: 100%;
    min-height: 600px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
  }
  .df180-mobile-export-scene .df180-export-bundle {
    position: absolute;
    z-index: 1;
    top: 30px;
    left: 18px;
    width: 132px;
    min-height: 185px;
    transform: scale(.82);
    transform-origin: top left;
  }
  .df180-mobile-export-scene .df180-export-morph-arrow {
    display: none;
  }
  .df180-mobile-export-scene .df180-published-post {
    position: relative;
    z-index: 3;
    width: min(246px, 74vw);
    margin-left: 42px;
  }
  .df180-mobile-export-scene .df180-published-post > header {
    min-height: 42px;
  }
  .df180-mobile-export-scene .df180-published-post > p {
    font-size: 7px;
  }
  .df180-mobile-export-scene .df180-comment-stream {
    font-size: 6.5px;
  }
}
@media (max-width: 360px) {
  .df180-demo .df180-mobile-studio-scene {
    padding: 13px;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices > span {
    display: none;
  }
  .df180-mobile-prompt-scene .df180-agent-theme strong {
    font-size: 6px;
  }
  .df180-mobile-edit-scene .df180-demo-cursor {
    font-size: 5.5px;
  }
}
.df180-agent-plan-list article > label {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.df180-agent-plan-list article > label strong {
  color: #e5e8e3;
  font-size: 7px;
}
.df180-agent-plan-list article > label textarea {
  width: 100%;
  min-height: 26px;
  resize: none;
  overflow: hidden;
  padding: 6px 7px;
  border: 1px solid #414741;
  border-radius: 5px;
  outline: 0;
  background: #151916;
  color: #aeb4ad;
  font: inherit;
  font-size: 6.5px;
  line-height: 1.25;
  pointer-events: none;
}
.df180-agent-plan-list article > small {
  white-space: nowrap;
}
.df180-mobile-user-message {
  position: relative;
  animation: df180-message-send .55s cubic-bezier(.16, 1, .3, 1) .12s both;
}
.df180-mobile-user-message > small {
  position: absolute;
  right: 10px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #7f877f;
  font-size: 7px;
}
@keyframes df180-message-send {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
    clip-path: inset(100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0);
  }
}
.df180-mobile-prompt-scene .df180-agent-thinking {
  animation: df180-agent-response .55s cubic-bezier(.16, 1, .3, 1) .72s both;
}
.df180-mobile-prompt-scene .df180-agent-thinking span {
  animation-delay: 1s;
}
.df180-agent-choices > * {
  animation-delay: 5.25s;
}
.df180-agent-theme {
  animation-delay: 5.95s;
}
.df180-mobile-prompt-scene .df180-agent-choices > * {
  animation-delay: 3.55s;
}
.df180-mobile-prompt-scene .df180-agent-theme {
  animation-delay: 4.25s;
}
@keyframes df180-agent-response {
  from {
    opacity: 0;
    transform: translateY(9px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.df180-build-canvas {
  overflow: hidden;
  border-radius: 7px;
}
.df180-build-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: df180-build-frame-cycle 2.45s cubic-bezier(.16, 1, .3, 1) var(--frame-delay) both;
}
.df180-build-frame.is-final {
  animation-name: df180-build-frame-final;
}
.df180-build-frame > .slide-preview-surface {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 7px;
}
.df180-build-frame .slide-preview-layer.kind-image {
  animation: df180-generated-image-arrive .8s cubic-bezier(.16, 1, .3, 1) calc(var(--frame-delay) + 1.05s) both;
}
.df180-build-frame .slide-preview-layer.kind-text {
  animation: df180-generated-copy-write .95s steps(18, end) calc(var(--frame-delay) + .48s) both;
}
.df180-build-frame > strong {
  position: absolute;
  z-index: 5;
  right: 8px;
  bottom: 8px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 5px;
  background: rgba(17, 19, 17, .88);
  color: #fff;
  font-size: 7px;
  animation: df180-generating-status 1.8s cubic-bezier(.16, 1, .3, 1) var(--frame-delay) both;
}
.df180-build-frame > strong svg {
  color: var(--df-coral);
}
.df180-build-frame .df180-build-copy-stream {
  animation-delay: calc(var(--frame-delay) + .25s);
}
.df180-build-frame .generation-slide-chip {
  animation: df180-generating-chip-resolve .38s ease-out calc(var(--frame-delay) + 1.75s) forwards;
}
@keyframes df180-generating-chip-resolve {
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}
@keyframes df180-build-frame-cycle {
  0% {
    opacity: 0;
    transform: translateX(28px) scale(.97);
    filter: saturate(0) blur(7px);
  }
  18%,
  78% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: saturate(1) blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-24px) scale(.98);
    filter: saturate(.7) blur(3px);
  }
}
@keyframes df180-build-frame-final {
  0% {
    opacity: 0;
    transform: translateX(28px) scale(.97);
    filter: saturate(0) blur(7px);
  }
  24%,
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: saturate(1) blur(0);
  }
}
@keyframes df180-generated-copy-write {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}
@keyframes df180-generated-image-arrive {
  from {
    opacity: 0;
    transform: scale(1.08);
    clip-path: inset(100% 0 0);
    filter: saturate(0) blur(9px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0);
    filter: saturate(1) blur(0);
  }
}
@keyframes df180-generating-status {
  0%,
  12% {
    opacity: 0;
    transform: translateY(8px);
  }
  28%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
}
.df180-build-selector > i {
  overflow: hidden;
  animation: df180-slide-shell-arrive .52s cubic-bezier(.16, 1, .3, 1) var(--build-delay) both;
}
.df180-build-selector > i::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, .13) 47%, transparent 72%),
    #1b1f1c;
  background-size: 220% 100%;
  animation: df180-selector-generating 1.2s linear var(--build-delay) both,
    df180-selector-resolve .45s cubic-bezier(.16, 1, .3, 1) var(--complete-delay) forwards;
}
.df180-build-selector > i > .slide-preview-surface {
  animation: df180-selector-content .62s cubic-bezier(.16, 1, .3, 1) var(--complete-delay) both;
}
.df180-build-selector > i > .df180-build-done {
  z-index: 6;
  opacity: 0;
  animation: df180-check-complete .42s cubic-bezier(.16, 1, .3, 1) calc(var(--complete-delay) + .25s) forwards;
}
@keyframes df180-slide-shell-arrive {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes df180-selector-generating {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -120% 0;
  }
}
@keyframes df180-selector-resolve {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes df180-selector-content {
  from {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
@keyframes df180-check-complete {
  from {
    opacity: 0;
    transform: scale(.3) rotate(-24deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
.df180-edit-slide-state {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 7px;
}
.df180-edit-slide-state > .slide-preview-surface {
  width: 100%;
  height: 100%;
}
.df180-edit-slide-state.is-copy-edited {
  opacity: 0;
  animation: df180-edit-state-reveal .28s ease-out 1.8s forwards;
}
.df180-edit-slide-state.is-image-edited {
  opacity: 0;
  animation: df180-edit-state-reveal .55s cubic-bezier(.16, 1, .3, 1) 4.65s forwards;
}
@keyframes df180-edit-state-reveal {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
.df180-edit-copy-field {
  top: 20%;
  right: 7%;
  left: 7%;
  height: 17%;
  display: block;
  padding: 0;
  border: 1.5px solid #4b83ff;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  animation: df180-canvas-text-select 1.55s cubic-bezier(.16, 1, .3, 1) .75s both;
}
.df180-edit-copy-field > i {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid #4b83ff;
  background: #fff;
}
.df180-edit-copy-field > i:nth-child(1) {
  top: -3px;
  left: -3px;
}
.df180-edit-copy-field > i:nth-child(2) {
  top: -3px;
  right: -3px;
}
.df180-edit-copy-field > i:nth-child(3) {
  right: -3px;
  bottom: -3px;
}
.df180-edit-copy-field > i:nth-child(4) {
  bottom: -3px;
  left: -3px;
}
.df180-edit-copy-field > b {
  position: absolute;
  top: 17%;
  left: 52%;
  width: 1px;
  height: 65%;
  background: #4b83ff;
  animation: df180-caret-blink .55s step-end 4 .95s;
}
@keyframes df180-canvas-text-select {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  22%,
  78% {
    opacity: 1;
    clip-path: inset(0);
  }
  100% {
    opacity: 0;
    clip-path: inset(0);
  }
}
.df180-edit-image-field {
  animation: df180-image-select 1.85s cubic-bezier(.16, 1, .3, 1) 2.75s both;
}
.df180-edit-collaboration > .df180-demo-cursor {
  position: absolute;
}
.df180-edit-collaboration > .df180-demo-cursor.cursor-copy {
  z-index: 14;
  top: 23%;
  right: 12%;
  animation: df180-mia-direct-edit 2.35s cubic-bezier(.16, 1, .3, 1) .25s both;
}
.df180-edit-collaboration > .df180-demo-cursor.cursor-image {
  z-index: 14;
  top: 58%;
  right: 10%;
  bottom: auto;
  animation: df180-you-image-and-browse 6.1s cubic-bezier(.16, 1, .3, 1) 2.45s both;
}
@keyframes df180-mia-direct-edit {
  0% {
    opacity: 0;
    transform: translate(82px, -38px);
  }
  28%,
  76% {
    opacity: 1;
    transform: translate(0);
  }
  100% {
    opacity: 0;
    transform: translate(-8px, 4px);
  }
}
@keyframes df180-you-image-and-browse {
  0% {
    opacity: 0;
    transform: translate(92px, 48px);
  }
  14%,
  34% {
    opacity: 1;
    transform: translate(0);
  }
  47% {
    opacity: 1;
    transform: translate(-54px, 86px);
  }
  61% {
    opacity: 1;
    transform: translate(-105px, 165px);
  }
  76% {
    opacity: 1;
    transform: translate(-22px, 165px);
  }
  90% {
    opacity: 1;
    transform: translate(62px, 165px);
  }
  100% {
    opacity: 0;
    transform: translate(62px, 165px);
  }
}
.df180-image-swap-tray {
  animation-delay: 3.35s;
}
.df180-image-swap-tray > i.selected {
  animation-delay: 4.25s;
}
.df180-edit-slide-switcher > i {
  animation: df180-selector-click .42s cubic-bezier(.16, 1, .3, 1) var(--browse-delay);
}
.df180-edit-slide-switcher > i.active-final {
  animation: df180-selector-click .42s cubic-bezier(.16, 1, .3, 1) var(--browse-delay),
    df180-selector-final .25s ease-out calc(var(--browse-delay) + .42s) forwards;
}
.df180-edit-collaboration.is-settled .df180-edit-slide-state {
  opacity: 0;
  animation: none;
}
.df180-edit-collaboration.is-settled .df180-edit-slide-state.is-final-browse {
  z-index: 23;
  opacity: 1;
}
.df180-edit-collaboration.is-settled .df180-edit-copy-field,
.df180-edit-collaboration.is-settled .df180-edit-image-field,
.df180-edit-collaboration.is-settled > .df180-demo-cursor {
  display: none;
}
.df180-edit-collaboration.is-settled .df180-edit-slide-switcher > i {
  outline: 0;
  filter: none;
  transform: none;
  animation: none;
}
@keyframes df180-selector-click {
  45% {
    transform: translateY(-3px);
    outline: 2px solid var(--df-coral);
    outline-offset: 1px;
    filter: brightness(1.2);
  }
}
@keyframes df180-selector-final {
  to {
    outline: 2px solid var(--df-coral);
    outline-offset: 1px;
  }
}
.df180-instagram-carousel-track {
  width: 400%;
  height: 100%;
  display: flex;
  animation: df180-instagram-carousel 7.2s cubic-bezier(.72, 0, .2, 1) 2.1s both;
}
.df180-instagram-carousel-track > i {
  width: 25%;
  height: 100%;
  flex: 0 0 25%;
}
.df180-instagram-carousel-track .slide-preview-surface {
  width: 100%;
  height: 100%;
}
@keyframes df180-instagram-carousel {
  0%,
  20% {
    transform: translateX(0);
  }
  30%,
  48% {
    transform: translateX(-25%);
  }
  58%,
  76% {
    transform: translateX(-50%);
  }
  86%,
  100% {
    transform: translateX(-75%);
  }
}
.df180-carousel-count {
  position: absolute;
  z-index: 4;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 16px;
  border-radius: 999px;
  background: rgba(17, 19, 17, .78);
  color: #fff;
  font-size: 6px;
  overflow: hidden;
}
.df180-carousel-count i {
  position: absolute;
  inset: 3px 6px;
  opacity: 0;
  white-space: nowrap;
  animation: df180-carousel-count 1.65s step-end var(--count-delay) forwards;
}
.df180-carousel-count i:last-child {
  animation-name: df180-carousel-count-final;
}
@keyframes df180-carousel-count {
  0%,
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes df180-carousel-count-final {
  0%,
  100% {
    opacity: 1;
  }
}
.df180-carousel-dots {
  height: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}
.df180-carousel-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b8bcb7;
}
.df180-carousel-dots i:first-child {
  background: #2689e9;
  animation: df180-carousel-dot 7.2s steps(4, end) 2.1s both;
}
@keyframes df180-carousel-dot {
  to {
    transform: translateX(18px);
  }
}
.df180-heart-burst {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}
.df180-heart-burst svg {
  position: absolute;
  left: 50%;
  bottom: 22%;
  color: #f0445d;
  opacity: 0;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .2));
  animation: df180-heart-pop 1.35s cubic-bezier(.16, 1, .3, 1) both;
}
.df180-heart-burst svg:nth-child(1) {
  animation-delay: 3.1s;
}
.df180-heart-burst svg:nth-child(2) {
  animation-delay: 3.85s;
}
.df180-heart-burst svg:nth-child(3) {
  animation-delay: 4.7s;
}
.df180-heart-burst svg:nth-child(4) {
  animation-delay: 5.55s;
}
.df180-heart-burst svg:nth-child(5) {
  animation-delay: 6.4s;
}
@keyframes df180-heart-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(.35) rotate(-12deg);
  }
  28% {
    opacity: .95;
    transform: translate(calc(-50% + 8px), -12px) scale(1) rotate(7deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% - 18px), -72px) scale(.72) rotate(-10deg);
  }
}
.df180-like-counter strong {
  opacity: 0;
  transform: translateY(110%);
  animation: df180-like-tick .62s cubic-bezier(.16, 1, .3, 1) var(--like-delay) both;
}
.df180-like-counter strong:last-child {
  animation-name: df180-like-final;
}
@keyframes df180-like-tick {
  0% {
    opacity: 0;
    transform: translateY(110%);
  }
  30%,
  68% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-110%);
  }
}
@keyframes df180-like-final {
  0% {
    opacity: 0;
    transform: translateY(110%);
  }
  35%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.df180-comment-stream {
  max-height: 35px;
  overflow: hidden;
}
.df180-comment-stream > div {
  display: grid;
  gap: 3px;
  animation: df180-comments-scroll 2.4s cubic-bezier(.16, 1, .3, 1) 5.2s both;
}
.df180-comment-stream > div span {
  opacity: 0;
  animation: df180-live-comment .62s cubic-bezier(.16, 1, .3, 1) var(--comment-delay) forwards;
}
@keyframes df180-comments-scroll {
  0%,
  28% {
    transform: translateY(0);
  }
  62% {
    transform: translateY(-9px);
  }
  100% {
    transform: translateY(-19px);
  }
}
@keyframes df180-live-comment {
  from {
    opacity: 0;
    transform: translateY(11px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (max-width: 760px) {
  .df180-demo {
    padding-top: 34px;
  }
  .df180-demo .df180-section-intro {
    width: calc(100% - 32px);
  }
  .df180-demo-heading {
    display: block;
  }
  .df180-demo-heading h2 {
    font-size: 37px;
  }
  .df180-demo-heading p {
    display: none;
  }
  .df180-demo-grid {
    width: calc(100% - 24px);
    margin-top: 24px;
  }
  .df180-product-shell > header {
    display: none;
  }
  .df180-product-shell > nav {
    top: 0;
  }
  .df180-demo .df180-mobile-studio {
    min-height: 610px;
  }
  .df180-demo .df180-mobile-studio > header {
    min-height: 58px;
    padding: 11px 16px;
  }
  .df180-mobile-studio > header span {
    font-size: 16px;
  }
  .df180-mobile-studio > header small {
    display: none;
  }
  .df180-demo .df180-mobile-studio-scene {
    min-height: 552px;
    padding: 14px;
  }
  .df180-mobile-prompt-scene {
    gap: 8px;
  }
  .df180-mobile-user-message {
    min-height: 96px;
    padding-bottom: 24px;
  }
  .df180-mobile-prompt-scene .df180-agent-thinking {
    min-height: 34px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article {
    min-height: 66px;
    grid-template-columns: 39px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label strong {
    font-size: 9px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label textarea {
    min-height: 30px;
    padding: 7px;
    font-size: 8px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > small {
    grid-column: auto;
    margin-top: 0;
  }
  .df180-mobile-prompt-scene .df180-agent-choices {
    grid-template-columns: 1.08fr .92fr;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices,
  .df180-mobile-prompt-scene .df180-agent-theme {
    min-height: 50px;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices > i {
    width: 31px;
    height: 31px;
  }
  .df180-mobile-build-scene > .df180-build-progress {
    gap: 14px;
  }
  .df180-mobile-build-scene .df180-build-canvas {
    width: min(224px, 66vw);
  }
  .df180-mobile-build-scene .df180-build-selector {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }
  .df180-mobile-edit-scene > .df180-edit-collaboration {
    gap: 12px;
  }
  .df180-mobile-edit-scene .df180-edit-canvas {
    width: min(218px, 65vw);
  }
  .df180-mobile-edit-scene .df180-image-swap-tray {
    animation-delay: 3.35s;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher {
    gap: 6px;
  }
  .df180-mobile-edit-scene .df180-edit-collaboration > .cursor-copy {
    top: 23%;
    right: 10%;
  }
  .df180-mobile-edit-scene .df180-edit-collaboration > .cursor-image {
    top: 51%;
    right: 9%;
  }
  .df180-mobile-export-scene > .df180-instagram-outcome {
    min-height: 535px;
  }
  .df180-mobile-export-scene .df180-export-bundle {
    top: 14px;
  }
  .df180-mobile-export-scene .df180-published-post {
    width: min(238px, 72vw);
  }
  .df180-mobile-export-scene .df180-comment-stream {
    font-size: 6.3px;
  }
}
.df180-agent-plan-list article {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.df180-agent-plan-list article > header {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.df180-agent-plan-list article > header > span {
  color: #7f867f;
  font-size: 6.5px;
  font-weight: 780;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.df180-agent-plan-list article > header > small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #818881;
  font-size: 5.8px;
}
.df180-plan-typed-title {
  width: fit-content;
  max-width: 100%;
  animation: df180-plan-title-type .5s steps(18, end) calc(var(--plan-delay) + .12s) both;
  clip-path: inset(0 100% 0 0);
  white-space: nowrap;
}
.df180-plan-copy-field {
  position: relative;
  min-width: 0;
  display: block;
}
.df180-agent-plan-list article > label .df180-plan-copy-field textarea {
  color: transparent;
  caret-color: transparent;
}
.df180-plan-typed-copy {
  position: absolute;
  inset: 7px 8px;
  overflow: hidden;
  color: #aeb4ad;
  font-size: 6.5px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: nowrap;
  animation: df180-plan-copy-type .72s steps(32, end) calc(var(--plan-delay) + .44s) both;
  clip-path: inset(0 100% 0 0);
}
.df180-plan-copy-field > i {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 1px;
  height: 9px;
  background: var(--df-coral);
  opacity: 0;
  animation: df180-plan-caret .72s steps(4, end) calc(var(--plan-delay) + .44s) both;
}
@keyframes df180-plan-title-type {
  to {
    clip-path: inset(0);
  }
}
@keyframes df180-plan-copy-type {
  to {
    clip-path: inset(0);
  }
}
@keyframes df180-plan-caret {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  35% {
    opacity: .2;
  }
  100% {
    opacity: 0;
    transform: translateX(62px);
  }
}
.df180-agent-image-choices {
  grid-template-columns: auto minmax(0, 1fr);
}
.df180-agent-image-choices > span {
  display: grid;
  gap: 2px;
}
.df180-agent-image-choices > span small {
  color: #6f766f;
  font-size: 5.5px;
  letter-spacing: .08em;
}
.df180-agent-image-choices > span strong {
  color: #cbd0ca;
  font-size: 7px;
  white-space: nowrap;
}
.df180-agent-image-choices > div {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.df180-agent-image-choices > div > i {
  position: relative;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #414741;
  border-radius: 5px;
  opacity: 0;
  animation: df180-agent-image-pick .48s cubic-bezier(.16, 1, .3, 1) var(--choice-delay) forwards;
}
.df180-agent-image-choices > div > i.selected {
  outline: 1.5px solid var(--df-coral);
  outline-offset: 1px;
}
.df180-agent-image-choices > div > i img {
  object-fit: cover;
}
.df180-agent-image-choices > div > i svg {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 11px;
  height: 11px;
  padding: 2px;
  border-radius: 3px;
  background: var(--df-coral);
  color: #fff;
}
@keyframes df180-agent-image-pick {
  from {
    opacity: 0;
    transform: translateX(9px) scale(.84);
    filter: saturate(0) blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: saturate(1) blur(0);
  }
}
.df180-theme-palette {
  width: 31px;
  height: 27px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid #454b45;
  border-radius: 5px;
}
.df180-theme-palette > i:nth-child(1) {
  background: #253126;
}
.df180-theme-palette > i:nth-child(2) {
  background: #eeb83d;
}
.df180-theme-palette > i:nth-child(3) {
  background: #f0eee7;
}
.df180-build-progress.is-compact .df180-build-frame .generation-slide-chip {
  right: 7px;
  bottom: 7px;
  min-height: 19px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 6px;
}
.df180-build-progress.is-compact .df180-build-selector > i > .df180-build-done {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.df180-edit-canvas-wrap {
  position: relative;
  width: 222px;
}
.df180-edit-canvas-wrap .df180-edit-canvas {
  width: 100%;
}
.df180-edit-slide-state.is-typing-copy {
  opacity: 0;
  animation: df180-edit-copy-keystroke .3s steps(1, end) var(--typing-delay);
}
.df180-edit-slide-state.is-typing-copy.is-final-copy {
  animation: df180-edit-copy-finish .01s step-end var(--typing-delay) forwards;
}
.df180-edit-slide-state.is-browsed {
  opacity: 0;
  animation: df180-edit-browse-frame .52s steps(1, end) var(--browse-canvas-delay);
}
.df180-edit-slide-state.is-browsed.is-final-browse {
  animation: df180-edit-browse-finish .01s step-end var(--browse-canvas-delay) forwards;
}
@keyframes df180-edit-copy-keystroke {
  0%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes df180-edit-copy-finish {
  0%,
  100% {
    opacity: 1;
  }
}
@keyframes df180-edit-browse-frame {
  0%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes df180-edit-browse-finish {
  0%,
  100% {
    opacity: 1;
  }
}
.df180-edit-image-field {
  animation: df180-image-select 1.85s cubic-bezier(.16, 1, .3, 1) 2.75s both,
    df180-edit-target-release .24s ease-out 5.5s forwards;
}
.df180-image-swap-tray {
  animation: df180-swap-tray .65s cubic-bezier(.16, 1, .3, 1) 3.35s both,
    df180-edit-tray-dismiss .28s ease-in 5.45s forwards;
}
@keyframes df180-edit-target-release {
  to {
    opacity: 0;
  }
}
@keyframes df180-edit-tray-dismiss {
  to {
    opacity: 0;
    transform: translateY(7px);
    visibility: hidden;
  }
}
.df180-edit-canvas-wrap > .df180-demo-cursor.cursor-copy {
  z-index: 14;
  top: 25%;
  right: 8%;
  animation: df180-mia-type-on-canvas 2.8s cubic-bezier(.16, 1, .3, 1) .24s both;
}
.df180-edit-canvas-wrap > .df180-demo-cursor.cursor-image {
  z-index: 14;
  top: 60%;
  right: 8%;
  bottom: auto;
  animation: df180-you-precise-browse 6.1s cubic-bezier(.16, 1, .3, 1) 3.05s both;
}
@keyframes df180-mia-type-on-canvas {
  0% {
    opacity: 0;
    transform: translate(72px, -34px);
  }
  20% {
    opacity: 1;
    transform: translate(0);
  }
  34% {
    transform: translate(-22px, 2px);
  }
  48% {
    transform: translate(-8px, 9px);
  }
  62% {
    transform: translate(-29px, 12px);
  }
  78% {
    transform: translate(-2px, 18px);
  }
  100% {
    opacity: 0;
    transform: translate(-2px, 18px);
  }
}
@keyframes df180-you-precise-browse {
  0% {
    opacity: 0;
    transform: translate(76px, 24px);
  }
  13%,
  31% {
    opacity: 1;
    transform: translate(0);
  }
  43% {
    transform: translate(-44px, 137px);
  }
  58% {
    transform: translate(-67px, 198px);
  }
  73% {
    transform: translate(-17px, 198px);
  }
  89% {
    transform: translate(68px, 198px);
  }
  100% {
    opacity: 0;
    transform: translate(68px, 198px);
  }
}
.df180-edit-slide-switcher > i {
  animation: none;
}
.df180-edit-slide-switcher > i.browse-click {
  animation: df180-selector-click .42s cubic-bezier(.16, 1, .3, 1) var(--browse-delay);
}
.df180-edit-slide-switcher > i.browse-click.active-final {
  animation: df180-selector-click .42s cubic-bezier(.16, 1, .3, 1) var(--browse-delay),
    df180-selector-final .25s ease-out calc(var(--browse-delay) + .42s) forwards;
}
.df180-published-media {
  position: relative;
}
.df180-carousel-count {
  width: 28px;
  height: 15px;
  display: grid;
  place-items: center;
}
.df180-carousel-count i {
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}
.df180-carousel-dots {
  position: relative;
  width: 21px;
  margin: 0 auto;
  justify-content: flex-start;
}
.df180-carousel-dots > span {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #2689e9;
  animation: df180-carousel-dot 7.2s step-end 2.1s both;
}
.df180-carousel-dots i:first-of-type {
  background: #b8bcb7;
  animation: none;
}
@keyframes df180-carousel-dot {
  0%,
  29% {
    transform: translateX(0);
  }
  30%,
  57% {
    transform: translateX(6px);
  }
  58%,
  85% {
    transform: translateX(12px);
  }
  86%,
  100% {
    transform: translateX(18px);
  }
}
.df180-like-counter {
  display: flex;
  align-items: flex-start;
  gap: 3px;
}
.df180-like-counter .df180-like-reel {
  position: relative;
  inset: auto;
  width: 30px;
  height: 13px;
  flex: 0 0 30px;
  display: block;
  line-height: 13px;
  animation: none;
  transform: none;
}
.df180-like-counter .df180-like-reel strong {
  position: absolute;
  inset: 0;
  height: 13px;
  display: block;
  opacity: 1;
  transform: translateY(105%);
  animation: df180-like-reel 1.55s cubic-bezier(.76, 0, .24, 1) both;
}
.df180-like-counter .df180-like-reel strong:first-child {
  transform: translateY(0);
  animation: df180-like-reel-first .55s cubic-bezier(.76, 0, .24, 1) 3.35s forwards;
}
.df180-like-counter .df180-like-reel strong:nth-child(2) {
  animation-delay: 3.35s;
}
.df180-like-counter .df180-like-reel strong:nth-child(3) {
  animation-delay: 4.55s;
}
.df180-like-counter .df180-like-reel strong:last-child {
  animation: df180-like-reel-final .42s cubic-bezier(.16, 1, .3, 1) 5.75s both;
}
.df180-like-counter > b {
  font-size: 7px;
  line-height: 13px;
}
@keyframes df180-like-reel {
  0% {
    transform: translateY(105%);
  }
  22%,
  74% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-105%);
  }
}
@keyframes df180-like-reel-first {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-105%);
  }
}
@keyframes df180-like-reel-final {
  from {
    transform: translateY(105%);
  }
  to {
    transform: translateY(0);
  }
}
@media (max-width: 760px) {
  .df180-demo {
    padding-top: 26px;
  }
  .df180-demo-heading h2 {
    font-size: 36px;
    line-height: 1;
  }
  .df180-demo-grid {
    margin-top: 18px;
  }
  .df180-demo .df180-product-shell {
    min-height: 0;
    height: clamp(470px, 67svh, 570px);
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr) 44px;
  }
  .df180-product-shell > nav,
  .df180-product-shell > nav button {
    min-height: 52px;
  }
  .df180-product-shell > nav button {
    gap: 4px;
  }
  .df180-demo .df180-mobile-studio {
    min-height: 0;
    height: 100%;
    grid-template-rows: 44px minmax(0, 1fr);
    overflow: hidden;
  }
  .df180-demo .df180-mobile-studio > header {
    min-height: 44px;
    padding: 8px 14px;
  }
  .df180-mobile-studio > header span {
    font-size: 14px;
  }
  .df180-demo .df180-mobile-studio-scene {
    min-height: 0;
    height: auto;
    overflow: hidden;
    padding: 10px 12px;
  }
  .df180-product-shell > footer {
    min-height: 44px;
    padding: 0 10px;
  }
  .df180-product-shell > footer > span:first-child {
    display: none;
  }
  .df180-mobile-prompt-scene {
    height: 100%;
    align-content: center;
    gap: 5px;
  }
  .df180-mobile-user-message {
    min-height: 66px;
    padding: 11px 12px 20px;
  }
  .df180-mobile-user-message p {
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.35;
  }
  .df180-mobile-prompt-scene .df180-agent-thinking {
    min-height: 29px;
    font-size: 7.5px;
  }
  .df180-mobile-prompt-scene > .df180-agent-plan {
    gap: 5px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list {
    gap: 4px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article {
    min-height: 49px;
    gap: 2px;
    padding: 4px 6px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > header {
    min-height: 13px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label {
    gap: 2px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label strong {
    font-size: 7.5px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label textarea {
    min-height: 22px;
    padding: 5px 6px;
    font-size: 7px;
  }
  .df180-mobile-prompt-scene .df180-plan-typed-copy {
    inset: 5px 7px;
    font-size: 7px;
  }
  .df180-mobile-prompt-scene .df180-plan-copy-field > i {
    top: 6px;
    left: 7px;
    height: 8px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-more {
    font-size: 6px;
  }
  .df180-mobile-prompt-scene .df180-agent-choices {
    grid-template-columns: 1.14fr .86fr;
    gap: 5px;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices,
  .df180-mobile-prompt-scene .df180-agent-theme {
    min-height: 44px;
    padding: 4px 6px;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices > div > i {
    width: 25px;
    height: 25px;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices > span strong,
  .df180-mobile-prompt-scene .df180-agent-theme strong {
    font-size: 6.5px;
  }
  .df180-mobile-prompt-scene .df180-theme-palette {
    width: 25px;
    height: 23px;
  }
  .df180-mobile-build-scene,
  .df180-mobile-edit-scene,
  .df180-mobile-export-scene {
    width: 100%;
    height: 100%;
  }
  .df180-mobile-build-scene {
    grid-template-columns: minmax(0, 1fr);
  }
  .df180-mobile-build-scene > .df180-build-progress {
    width: auto;
    height: 100%;
    justify-self: stretch;
    align-content: center;
    gap: 9px;
  }
  .df180-mobile-build-scene .df180-build-canvas {
    width: min(248px, 72vw);
  }
  .df180-mobile-build-scene .df180-build-selector {
    width: 100%;
    gap: 4px;
  }
  .df180-mobile-build-scene .df180-build-selector > i {
    border-radius: 3px;
  }
  .df180-mobile-build-scene .df180-build-selector .image-layer,
  .df180-mobile-build-scene .df180-build-selector .image-mask-inner {
    border-radius: 0 !important;
  }
  .df180-mobile-edit-scene > .df180-edit-collaboration {
    height: 100%;
    align-content: center;
    gap: 7px;
  }
  .df180-mobile-edit-scene .df180-edit-canvas-wrap {
    width: min(220px, 64vw);
  }
  .df180-mobile-edit-scene .df180-edit-canvas {
    width: 100%;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray {
    min-height: 42px;
    padding: 3px 5px;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray > i {
    width: 35px;
    height: 35px;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher {
    width: min(100%, 300px);
    gap: 5px;
  }
  .df180-mobile-edit-scene .df180-edit-canvas-wrap > .cursor-copy {
    top: 25%;
    right: 7%;
  }
  .df180-mobile-edit-scene .df180-edit-canvas-wrap > .cursor-image {
    top: 60%;
    right: 7%;
    animation-name: df180-you-mobile-precise;
    animation-timing-function: linear;
  }
  .df180-mobile-export-scene > .df180-instagram-outcome {
    min-height: 0;
    height: 100%;
  }
  .df180-mobile-export-scene .df180-export-bundle {
    top: 5px;
    left: 4px;
    transform: scale(.68);
  }
  .df180-mobile-export-scene .df180-published-post {
    width: min(210px, 64vw);
    margin-left: 32px;
  }
  .df180-mobile-export-scene .df180-published-post > header {
    min-height: 32px;
  }
  .df180-mobile-export-scene .df180-published-actions {
    min-height: 27px;
  }
  .df180-mobile-export-scene .df180-published-post > p {
    margin-top: 2px;
    font-size: 6px;
  }
  .df180-mobile-export-scene .df180-comment-stream {
    max-height: 28px;
    padding-top: 3px;
    font-size: 5.7px;
  }
}
@keyframes df180-you-mobile-precise {
  0% {
    opacity: 0;
    transform: translate(58px, 18px);
  }
  13%,
  31% {
    opacity: 1;
    transform: translate(0);
  }
  43% {
    transform: translate(-38px, 128px);
  }
  58% {
    transform: translate(-57px, 185px);
  }
  73% {
    transform: translate(-10px, 185px);
  }
  89% {
    transform: translate(58px, 185px);
  }
  100% {
    opacity: 0;
    transform: translate(58px, 185px);
  }
}
@media (max-width: 760px) {
  .df180-demo .df180-product-shell {
    height: clamp(540px, 75svh, 640px);
  }
  .df180-demo .df180-mobile-studio-scene {
    padding: 12px;
  }
  .df180-mobile-prompt-scene {
    align-content: center;
    gap: 6px;
  }
  .df180-mobile-prompt-scene .df180-mobile-user-message {
    min-height: 78px;
    padding: 11px 12px 20px;
  }
  .df180-mobile-prompt-scene .df180-mobile-user-message p {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.35;
  }
  .df180-mobile-prompt-scene .df180-agent-thinking {
    min-height: 31px;
    padding-inline: 10px;
    font-size: 8px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list {
    gap: 5px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article {
    min-height: 58px;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > header {
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > header > span,
  .df180-mobile-prompt-scene .df180-agent-plan-list article > header > small {
    white-space: nowrap;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > header > small {
    font-size: 5.8px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label {
    min-width: 0;
    gap: 3px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label strong {
    max-width: 100%;
    font-size: 8.5px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label textarea {
    min-height: 24px;
    padding: 6px 7px;
    font-size: 7.4px;
  }
  .df180-mobile-prompt-scene .df180-plan-typed-copy {
    inset: 6px 8px;
    font-size: 7.4px;
  }
  .df180-mobile-prompt-scene .df180-plan-copy-field > i {
    top: 7px;
    left: 8px;
  }
  .df180-mobile-prompt-scene .df180-agent-choices {
    grid-template-columns: minmax(0, 1.22fr) minmax(130px, .78fr);
    gap: 6px;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices,
  .df180-mobile-prompt-scene .df180-agent-theme {
    min-height: 50px;
    padding: 5px 7px;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices > div > i {
    width: 29px;
    height: 29px;
  }
  .df180-mobile-prompt-scene .df180-theme-palette {
    width: 27px;
    height: 27px;
  }
  .df180-mobile-build-scene > .df180-build-progress {
    align-content: center;
    gap: 12px;
  }
  .df180-mobile-build-scene .df180-build-canvas {
    width: min(260px, 72vw);
  }
  .df180-mobile-build-scene .df180-build-selector {
    height: 56px;
    align-items: stretch;
  }
  .df180-mobile-build-scene .df180-build-selector > i,
  .df180-mobile-build-scene .df180-build-selector > i > .slide-preview-surface,
  .df180-mobile-build-scene .df180-build-selector .image-layer,
  .df180-mobile-build-scene .df180-build-selector .image-mask-inner {
    border-radius: 3px !important;
  }
  .df180-mobile-edit-scene > .df180-edit-collaboration {
    position: relative;
    width: 100%;
    height: 100%;
    align-content: center;
    gap: 12px;
  }
  .df180-mobile-edit-scene .df180-edit-canvas-wrap {
    width: min(236px, 68vw);
  }
  .df180-mobile-edit-scene .df180-image-swap-tray.is-compact {
    position: absolute;
    z-index: 13;
    top: calc(50% + 18px);
    right: 34px;
    bottom: auto;
    width: auto;
    min-height: 40px;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px;
    background: rgba(26, 30, 27, .96);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .34);
    animation: df180-swap-tray .45s cubic-bezier(.16, 1, .3, 1) 3.2s both,
      df180-edit-tray-dismiss .25s ease-in 5.1s forwards;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray.is-compact > span {
    position: absolute;
    right: 6px;
    bottom: calc(100% + 4px);
    padding: 3px 5px;
    border-radius: 3px;
    background: #1a1e1b;
    color: #b2b8b1;
    font-size: 6px;
    white-space: nowrap;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray.is-compact > i {
    width: 32px;
    height: 32px;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray.is-compact > svg {
    width: 10px;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher {
    width: min(100%, 320px);
    height: 66px;
    gap: 6px;
  }
  .df180-mobile-edit-scene .df180-edit-canvas-wrap > .cursor-copy {
    top: 24%;
    right: 7%;
  }
  .df180-mobile-edit-scene .df180-edit-canvas-wrap > .cursor-image {
    top: 60%;
    right: 7%;
    animation: df180-you-mobile-aligned 5.1s linear 2.7s both;
  }
  .df180-mobile-export-scene > .df180-instagram-outcome {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }
  .df180-mobile-export-scene .df180-export-bundle {
    top: 16px;
    left: 8px;
    transform: scale(.62);
  }
  .df180-mobile-export-scene .df180-published-post {
    width: min(224px, 63vw);
    margin-left: 0;
  }
  .df180-mobile-export-scene .df180-published-post > header {
    min-height: 33px;
  }
  .df180-mobile-export-scene .df180-published-actions {
    min-height: 28px;
  }
  .df180-mobile-export-scene .df180-like-counter {
    gap: 2px;
    margin-top: 1px;
  }
  .df180-mobile-export-scene .df180-like-counter .df180-like-reel {
    width: 25px;
    flex-basis: 25px;
  }
  .df180-mobile-export-scene .df180-published-post > p {
    min-height: 20px;
    margin-top: 3px;
    font-size: 6.2px;
    line-height: 1.35;
  }
  .df180-mobile-export-scene .df180-comment-stream {
    max-height: 42px;
    min-height: 42px;
    padding: 4px 8px 6px;
    font-size: 6px;
    line-height: 1.35;
  }
}
@keyframes df180-you-mobile-aligned {
  0% {
    opacity: 0;
    transform: translate(56px, 20px);
  }
  10%,
  27% {
    opacity: 1;
    transform: translate(0);
  }
  30%,
  38% {
    opacity: 1;
    transform: translate(-22px, 40px);
  }
  46%,
  50% {
    opacity: 1;
    transform: translate(-136px, 145px);
  }
  63%,
  67% {
    opacity: 1;
    transform: translate(-8px, 145px);
  }
  79%,
  94% {
    opacity: 1;
    transform: translate(56px, 145px);
  }
  100% {
    opacity: 0;
    transform: translate(56px, 145px);
  }
}
.df180-product-shell > nav button b {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.df180-product-shell > nav button b > i {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: var(--df-coral);
  transform: scaleY(0);
  transform-origin: bottom;
}
.df180-product-shell > nav button b > span {
  position: relative;
  z-index: 1;
}
.df180-product-shell[data-playback="playing"] > nav button.active b {
  background: #2a2d2a;
}
.df180-product-shell[data-playback="playing"] > nav button.active b > i {
  animation: df180-step-number-fill var(--step-duration) linear forwards;
}
.df180-product-shell[data-playback="paused"] > nav button.active b > i {
  opacity: .42;
  transform: scaleY(1);
}
@keyframes df180-step-number-fill {
  to {
    transform: scaleY(1);
  }
}
@media (max-width: 760px) {
  .df180-demo .df180-product-shell {
    grid-template-rows: 52px minmax(0, 1fr) 52px;
  }
  .df180-demo .df180-mobile-studio-scene {
    container-name: df180-mobile-scene;
    container-type: size;
  }
  .df180-product-shell > footer {
    min-height: 52px;
  }
  .df180-demo-playback {
    position: relative;
    isolation: isolate;
    border: 0;
    background: transparent;
  }
  .df180-demo-playback::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 5px 4px;
    border: 1px solid #343834;
    border-radius: 6px;
    background: #1d201e;
  }
  .df180-mobile-prompt-scene {
    align-content: center;
    gap: 5px;
  }
  .df180-mobile-prompt-scene .df180-mobile-user-message {
    width: min(88%, 300px);
    min-height: 0;
    justify-self: end;
    padding: 9px 11px 10px;
    border: 1px solid #3d423e;
    border-radius: 11px 11px 3px 11px;
    background: #252825;
  }
  .df180-mobile-prompt-scene .df180-mobile-user-message > header {
    min-height: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .df180-mobile-prompt-scene .df180-mobile-user-message > header > span {
    color: var(--df-coral);
    font-size: 7.5px;
    font-weight: 780;
    line-height: 1;
  }
  .df180-mobile-prompt-scene .df180-mobile-user-message > header > small {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #858b85;
    font-size: 6px;
    line-height: 1;
  }
  .df180-mobile-prompt-scene .df180-mobile-user-message p {
    margin: 5px 0 0;
    font-size: 10.5px;
    line-height: 1.35;
  }
  .df180-mobile-prompt-scene .df180-agent-thinking {
    min-height: 27px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list {
    gap: 2px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article {
    min-height: 50px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 7px;
    padding: 3px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article + article {
    border-top: 1px solid #292d29;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > header {
    padding-left: 2px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label {
    gap: 3px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label strong {
    font-size: 8px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > label textarea {
    min-height: 25px;
    border-color: #414741;
    background: #171a18;
  }
  .df180-mobile-build-scene > .df180-build-progress {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    align-items: center;
    gap: 8px;
    overflow: visible;
  }
  .df180-mobile-build-scene .df180-build-canvas {
    width: auto;
    height: min(calc(100cqh - 64px), 115cqw);
    max-width: 100%;
    justify-self: center;
  }
  .df180-mobile-build-scene .df180-build-selector {
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: start;
    gap: 5px;
    overflow: visible;
    padding: 2px 2px 4px;
  }
  .df180-mobile-build-scene .df180-build-selector > i > .slide-preview-surface,
  .df180-mobile-edit-scene .df180-edit-slide-switcher > i > .slide-preview-surface {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }
  .df180-mobile-build-scene .df180-build-selector > i.is-canvas-stage {
    animation: df180-slide-shell-arrive .52s cubic-bezier(.16, 1, .3, 1) var(--build-delay) both,
      df180-build-selector-focus var(--canvas-duration) linear var(--canvas-delay) both;
  }
  .df180-mobile-build-scene .df180-build-selector > i.is-canvas-stage.is-canvas-final {
    animation: df180-slide-shell-arrive .52s cubic-bezier(.16, 1, .3, 1) var(--build-delay) both,
      df180-build-selector-focus-final .2s ease-out var(--canvas-delay) both;
  }
  .df180-mobile-edit-scene > .df180-edit-collaboration {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    align-items: center;
    gap: 8px;
  }
  .df180-mobile-edit-scene .df180-edit-canvas-wrap {
    width: auto;
    height: min(calc(100cqh - 90px), 105cqw);
    max-width: 100%;
    aspect-ratio: 4 / 5;
    justify-self: center;
  }
  .df180-mobile-edit-scene .df180-edit-canvas {
    width: 100%;
    height: 100%;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher {
    width: min(100%, 330px);
    height: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 6px;
    overflow: visible;
    padding: 2px 2px 4px;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray.is-compact {
    top: calc(50% + 8px);
    right: 14px;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray.is-compact > i.selected {
    outline: 2px solid transparent;
    outline-offset: 1px;
    animation: df180-mobile-image-confirm .28s cubic-bezier(.16, 1, .3, 1) 4.3s forwards;
  }
  .df180-mobile-edit-scene .df180-image-swap-tray.is-compact > svg {
    opacity: 0;
    animation: df180-check-complete .3s cubic-bezier(.16, 1, .3, 1) 4.35s forwards;
  }
  .df180-mobile-edit-scene .df180-edit-collaboration > .cursor-copy {
    top: 24%;
    right: auto;
    left: 70%;
    animation: df180-mia-mobile-stay 3.6s cubic-bezier(.16, 1, .3, 1) .24s both;
  }
  .df180-mobile-edit-scene .df180-edit-collaboration > .cursor-image {
    top: 58%;
    right: auto;
    left: 76%;
    animation: df180-you-mobile-responsive 5.1s linear 2.7s both;
  }
  .df180-mobile-edit-scene .df180-edit-slide-state.is-browsed,
  .df180-mobile-edit-scene .df180-edit-slide-state.is-browsed.is-final-browse {
    opacity: 0;
    animation: df180-edit-browse-reveal .01s step-end var(--browse-canvas-delay) forwards;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher > i.browse-click {
    animation: df180-mobile-selector-active var(--browse-duration) linear var(--browse-delay) both;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher > i.browse-click.active-final {
    animation: df180-mobile-selector-active var(--browse-duration) linear var(--browse-delay) both,
      df180-selector-final .01s step-end calc(var(--browse-delay) + .08s) forwards;
  }
  .df180-mobile-export-scene > .df180-instagram-outcome {
    min-height: 0;
    align-items: center;
    overflow: visible;
  }
  .df180-mobile-export-scene .df180-published-post {
    width: min(68cqw, calc(80cqh - 123px));
    max-width: 238px;
    margin: 0;
  }
}
@keyframes df180-build-selector-focus {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 transparent;
    filter: brightness(1);
  }
  12%,
  88% {
    box-shadow: inset 0 0 0 2px var(--df-coral);
    filter: brightness(1.14);
  }
}
@keyframes df180-build-selector-focus-final {
  to {
    box-shadow: inset 0 0 0 2px var(--df-coral);
    filter: brightness(1.14);
  }
}
@keyframes df180-mobile-image-confirm {
  45% {
    transform: scale(.92);
  }
  100% {
    outline-color: #e39b23;
    transform: scale(1);
  }
}
@keyframes df180-mia-mobile-stay {
  0% {
    opacity: 0;
    transform: translate(18cqw, -7cqh);
  }
  18% {
    opacity: 1;
    transform: translate(0);
  }
  34% {
    transform: translate(-6cqw, .5cqh);
  }
  50% {
    transform: translate(-2cqw, 2cqh);
  }
  66% {
    transform: translate(-8cqw, 2.5cqh);
  }
  82% {
    opacity: 1;
    transform: translate(-1cqw, 4cqh);
  }
  100% {
    opacity: .72;
    transform: translate(-1cqw, 4cqh);
  }
}
@keyframes df180-you-mobile-responsive {
  0% {
    opacity: 0;
    left: 96%;
    top: 54%;
  }
  10%,
  27% {
    opacity: 1;
    left: 76%;
    top: 58%;
  }
  30%,
  40% {
    opacity: 1;
    left: 70%;
    top: 53%;
  }
  46%,
  50% {
    opacity: 1;
    left: 29%;
    top: calc(100% - 42px);
  }
  63%,
  67% {
    opacity: 1;
    left: 69%;
    top: calc(100% - 42px);
  }
  79%,
  94% {
    opacity: 1;
    left: 89%;
    top: calc(100% - 42px);
  }
  100% {
    opacity: 0;
    left: 89%;
    top: calc(100% - 42px);
  }
}
@keyframes df180-edit-browse-reveal {
  to {
    opacity: 1;
  }
}
@keyframes df180-mobile-selector-active {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 transparent;
    filter: brightness(1);
    transform: translateY(0);
  }
  5%,
  92% {
    box-shadow: inset 0 0 0 2px var(--df-coral);
    filter: brightness(1.14);
    transform: translateY(-2px);
  }
}
@media (max-width: 760px) {
  .df180-mobile-prompt-scene,
  .df180-mobile-build-scene {
    position: relative;
  }
  .df180-mobile-prompt-scene {
    padding-bottom: 38px;
  }
  .df180-mobile-prompt-scene .df180-agent-plan.is-paced .df180-agent-thinking span {
    animation-duration: 1.7s;
    animation-delay: .72s;
  }
  .df180-mobile-prompt-scene .df180-agent-plan.is-paced .df180-agent-image-choices {
    animation-delay: 5.35s;
  }
  .df180-mobile-prompt-scene .df180-agent-plan.is-paced .df180-agent-theme {
    animation-delay: 6.35s;
  }
  .df180-mobile-prompt-scene .df180-agent-plan-list article > header > span,
  .df180-mobile-prompt-scene .df180-agent-image-choices small,
  .df180-mobile-prompt-scene .df180-agent-theme small {
    color: #f6f7f3;
    font-weight: 790;
  }
  .df180-mobile-prompt-scene .df180-agent-image-choices > span strong,
  .df180-mobile-prompt-scene .df180-agent-theme strong {
    color: #fff;
  }
  .df180-mobile-prompt-next {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 0;
    min-width: 126px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid #4b514b;
    border-radius: 8px;
    background: #252925;
    color: #f6f7f3;
    font: inherit;
    font-size: 10px;
    font-weight: 760;
    cursor: pointer;
    opacity: 0;
    animation: df180-mobile-next-arrive .5s cubic-bezier(.16, 1, .3, 1) 7.25s forwards;
  }
  .df180-mobile-prompt-next svg {
    color: var(--df-coral);
  }
  .df180-mobile-prompt-next:focus-visible {
    outline: 2px solid var(--df-coral);
    outline-offset: 2px;
  }
  .df180-prompt-guide-cursor,
  .df180-build-guide-cursor {
    pointer-events: none;
    background: #e39b23;
    opacity: 0;
  }
  .df180-product-shell[data-motion="playing"][data-visible="true"] .df180-prompt-guide-cursor {
    animation: df180-prompt-guide 9s linear both;
  }
  .df180-mobile-build-scene > .df180-build-progress {
    width: 100%;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .df180-mobile-build-scene .df180-build-canvas,
  .df180-mobile-edit-scene .df180-edit-canvas-wrap {
    width: auto;
    height: min(calc(100cqh - 90px), 105cqw);
    max-width: 100%;
    aspect-ratio: 4 / 5;
    justify-self: center;
  }
  .df180-mobile-build-scene .df180-build-selector,
  .df180-mobile-edit-scene .df180-edit-slide-switcher {
    width: min(100%, 330px);
    height: auto;
    min-height: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 6px;
    overflow: visible;
    padding: 2px 2px 4px;
  }
  .df180-mobile-build-scene .df180-build-selector > i,
  .df180-mobile-edit-scene .df180-edit-slide-switcher > i {
    position: relative;
    min-width: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid #3b403b;
    border-radius: 3px;
  }
  .df180-mobile-build-scene .df180-build-selector > i > .slide-preview-surface,
  .df180-mobile-edit-scene .df180-edit-slide-switcher > i > .slide-preview-surface,
  .df180-mobile-build-scene .df180-build-selector .image-layer,
  .df180-mobile-build-scene .df180-build-selector .image-mask-inner,
  .df180-mobile-edit-scene .df180-edit-slide-switcher .image-layer,
  .df180-mobile-edit-scene .df180-edit-slide-switcher .image-mask-inner {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0 !important;
  }
  .df180-mobile-build-scene .df180-build-frame,
  .df180-mobile-build-scene .df180-build-frame.is-final {
    opacity: 0;
    animation: df180-build-frame-reveal .42s cubic-bezier(.16, 1, .3, 1) var(--frame-delay) forwards;
  }
  .df180-mobile-build-scene .df180-build-selector > i.is-canvas-stage {
    animation: df180-slide-shell-arrive .52s cubic-bezier(.16, 1, .3, 1) var(--build-delay) both,
      df180-build-selector-focus-exact var(--canvas-duration) linear var(--canvas-delay) forwards;
  }
  .df180-mobile-build-scene .df180-build-selector > i.is-canvas-stage.is-canvas-final {
    animation: df180-slide-shell-arrive .52s cubic-bezier(.16, 1, .3, 1) var(--build-delay) both,
      df180-build-selector-focus-persist .2s ease-out var(--canvas-delay) forwards;
  }
  .df180-product-shell[data-motion="playing"][data-visible="true"] .df180-build-guide-cursor {
    animation: df180-build-guide 9s linear both;
  }
  .df180-mobile-edit-scene .df180-edit-collaboration > .cursor-copy {
    animation: df180-mia-mobile-exit 3.6s cubic-bezier(.16, 1, .3, 1) .24s both;
  }
  .df180-mobile-edit-scene .df180-edit-slide-state.is-browsed,
  .df180-mobile-edit-scene .df180-edit-slide-state.is-browsed.is-final-browse {
    z-index: calc(20 + var(--browse-order));
    opacity: 0;
    animation: df180-edit-browse-persist .01s linear var(--browse-canvas-delay) forwards;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher > i.is-initial-active {
    animation: df180-mobile-selector-initial 5.2s linear both;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher > i.browse-click {
    animation: df180-mobile-selector-active-exact var(--browse-duration) linear var(--browse-delay) forwards;
  }
  .df180-mobile-edit-scene .df180-edit-slide-switcher > i.browse-click.active-final {
    animation: df180-mobile-selector-active-exact var(--browse-duration) linear var(--browse-delay) forwards,
      df180-selector-final .01s step-end calc(var(--browse-delay) + .08s) forwards;
  }
  .df180-mobile-export-scene > .df180-instagram-outcome {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: center;
    overflow: visible;
  }
  .df180-mobile-export-scene .df180-export-bundle {
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 132px;
    min-height: 185px;
    transform: translate(-50%, -50%) scale(.62);
    transform-origin: center;
    animation: df180-mobile-bundle-precursor 2.15s cubic-bezier(.16, 1, .3, 1) both;
  }
  .df180-mobile-export-scene .df180-published-post {
    position: relative;
    z-index: 3;
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    width: min(68cqw, calc(80cqh - 123px));
    max-width: 238px;
    margin: 0;
    animation: df180-mobile-post-publish .85s cubic-bezier(.16, 1, .3, 1) 1.72s both;
  }
  .df180-product-shell[data-motion="paused"] .df180-prompt-guide-cursor,
  .df180-product-shell[data-motion="paused"] .df180-build-guide-cursor,
  .df180-product-shell[data-motion="paused"] .df180-mobile-prompt-next,
  .df180-product-shell[data-visible="false"] .df180-prompt-guide-cursor,
  .df180-product-shell[data-visible="false"] .df180-build-guide-cursor,
  .df180-product-shell[data-visible="false"] .df180-mobile-prompt-next {
    animation-play-state: paused !important;
  }
}
@keyframes df180-mobile-next-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes df180-prompt-guide {
  0% {
    opacity: 0;
    left: 86%;
    top: 8%;
  }
  7%,
  14% {
    opacity: 1;
    left: 80%;
    top: 12%;
  }
  24%,
  29% {
    opacity: 1;
    left: 24%;
    top: 43%;
  }
  36%,
  41% {
    opacity: 1;
    left: 24%;
    top: 56%;
  }
  48%,
  53% {
    opacity: 1;
    left: 24%;
    top: 69%;
  }
  62%,
  67% {
    opacity: 1;
    left: 72%;
    top: 83%;
  }
  73%,
  79% {
    opacity: 1;
    left: 88%;
    top: 83%;
  }
  87% {
    opacity: 1;
    left: 82%;
    top: calc(100% - 24px);
    transform: scale(1);
  }
  93% {
    opacity: 1;
    left: 82%;
    top: calc(100% - 24px);
    transform: scale(.88);
  }
  96% {
    opacity: 1;
    left: 82%;
    top: calc(100% - 24px);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    left: 82%;
    top: calc(100% - 24px);
  }
}
@keyframes df180-build-frame-reveal {
  from {
    opacity: 0;
    clip-path: inset(0 0 100%);
    filter: saturate(.25) blur(5px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: saturate(1) blur(0);
  }
}
@keyframes df180-build-selector-focus-exact {
  0%,
  99% {
    box-shadow: inset 0 0 0 2px var(--df-coral);
    filter: brightness(1.14);
    transform: translateY(-2px);
  }
  100% {
    box-shadow: inset 0 0 0 0 transparent;
    filter: brightness(1);
    transform: translateY(0);
  }
}
@keyframes df180-build-selector-focus-persist {
  to {
    box-shadow: inset 0 0 0 2px var(--df-coral);
    filter: brightness(1.14);
    transform: translateY(-2px);
  }
}
@keyframes df180-build-guide {
  0% {
    opacity: 0;
    left: 50%;
    top: 4%;
  }
  8%,
  17% {
    opacity: 1;
    left: 50%;
    top: 10%;
  }
  25%,
  36% {
    opacity: 1;
    left: 10%;
    top: calc(100% - 40px);
    transform: scale(1);
  }
  40.5% {
    opacity: 1;
    left: 30%;
    top: calc(100% - 40px);
    transform: scale(.88);
  }
  44%,
  69% {
    opacity: 1;
    left: 30%;
    top: calc(100% - 40px);
    transform: scale(1);
  }
  72.8% {
    opacity: 1;
    left: 50%;
    top: calc(100% - 40px);
    transform: scale(.88);
  }
  77% {
    opacity: 1;
    left: 50%;
    top: calc(100% - 40px);
    transform: scale(1);
  }
  83%,
  100% {
    opacity: 0;
    left: 58%;
    top: calc(100% - 34px);
  }
}
@keyframes df180-mia-mobile-exit {
  0% {
    opacity: 0;
    transform: translate(18cqw, -7cqh);
  }
  18% {
    opacity: 1;
    transform: translate(0);
  }
  34% {
    transform: translate(-6cqw, .5cqh);
  }
  50% {
    transform: translate(-2cqw, 2cqh);
  }
  66% {
    transform: translate(-8cqw, 2.5cqh);
  }
  82% {
    opacity: 1;
    transform: translate(-1cqw, 4cqh);
  }
  100% {
    opacity: 0;
    transform: translate(-10cqw, 6cqh);
  }
}
@keyframes df180-mobile-selector-initial {
  0%,
  99.9% {
    box-shadow: inset 0 0 0 2px var(--df-coral);
    filter: brightness(1.14);
    transform: translateY(-2px);
  }
  100% {
    box-shadow: inset 0 0 0 0 transparent;
    filter: brightness(1);
    transform: translateY(0);
  }
}
@keyframes df180-mobile-selector-active-exact {
  0%,
  99% {
    box-shadow: inset 0 0 0 2px var(--df-coral);
    filter: brightness(1.14);
    transform: translateY(-2px);
  }
  100% {
    box-shadow: inset 0 0 0 0 transparent;
    filter: brightness(1);
    transform: translateY(0);
  }
}
@keyframes df180-edit-browse-persist {
  0%,
  100% {
    opacity: 1;
  }
}
@keyframes df180-mobile-bundle-precursor {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 22px)) scale(.52);
  }
  28%,
  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.62);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 16px)) scale(.56);
    visibility: hidden;
  }
}
@keyframes df180-mobile-post-publish {
  from {
    opacity: 0;
    transform: scale(.88);
    clip-path: inset(8% 14%);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0);
    filter: blur(0);
  }
}
@media (min-width: 761px) {
  .df180-conveyor {
    bottom: -94px;
    height: 712px;
  }
  .df248-live-studio {
    position: relative;
    overflow: visible;
  }
  .df248-live-studio .df180-live-chat {
    position: relative;
    min-height: 0;
    overflow: hidden;
  }
  .df248-live-studio.is-step-0 .df180-live-chat {
    z-index: 8;
    overflow: visible;
  }
  .df248-live-studio .df180-chat-message.is-user {
    width: min(92%, 260px);
    align-self: end;
    border-radius: 9px 9px 3px 9px;
    background: #242825;
  }
  .df248-live-studio .df180-chat-message.is-user > span {
    color: var(--df-coral);
  }
  .df248-live-studio .df180-chat-message.is-user.is-history {
    opacity: .52;
  }
  .df248-live-studio .df180-agent-thinking {
    padding-inline: 2px;
    border: 0;
    background: transparent;
  }
  .df248-live-studio .df180-agent-plan.is-paced .df180-agent-thinking span {
    animation-duration: 1.7s;
    animation-delay: .72s;
  }
  .df248-live-studio .df180-agent-plan.is-paced .df180-agent-image-choices {
    animation-delay: 5.35s;
  }
  .df248-live-studio .df180-agent-plan.is-paced .df180-agent-theme {
    animation-delay: 6.35s;
  }
  .df248-live-studio .df180-agent-plan-list article > header > span,
  .df248-live-studio .df180-agent-image-choices small,
  .df248-live-studio .df180-agent-theme small {
    color: #f6f7f3;
    font-weight: 790;
  }
  .df248-live-studio .df180-agent-image-choices > span strong,
  .df248-live-studio .df180-agent-theme strong {
    color: #fff;
  }
  .df248-desktop-prompt-cursor,
  .df248-desktop-build-cursor,
  .df248-desktop-export-cursor {
    pointer-events: none;
    background: #e39b23;
    opacity: 0;
  }
  .df180-product-shell[data-motion="playing"][data-visible="true"] .df248-desktop-prompt-cursor {
    animation: df248-desktop-prompt-guide 9s linear both;
  }
  .df248-plan-complete {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #343934;
    border-radius: 8px;
    background: #1b1f1c;
    animation: df248-plan-complete .58s cubic-bezier(.16, 1, .3, 1) both;
  }
  .df248-plan-complete > span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--df-lime);
    font-size: 7px;
    font-weight: 760;
  }
  .df248-plan-complete > b {
    color: #f1f3ef;
    font-size: 10px;
  }
  .df248-plan-complete > small {
    color: #7d837c;
    font-size: 7px;
  }
  .df248-live-studio .df180-live-canvas {
    min-width: 0;
    grid-template-rows: 42px minmax(0, 1fr);
  }
  .df248-live-studio .df180-canvas-stage {
    min-height: 0;
    container-name: df248-desktop-canvas;
    container-type: size;
    overflow: hidden;
  }
  .df248-live-studio .df180-live-thumbnails {
    display: none;
  }
  .df248-awaiting-canvas {
    width: min(420px, 72%);
    display: grid;
    justify-items: center;
    gap: 24px;
    color: #656b65;
  }
  .df248-awaiting-canvas > div {
    position: relative;
    width: 100%;
    height: 270px;
    display: flex;
    justify-content: center;
    align-items: end;
  }
  .df248-awaiting-canvas > div i {
    position: relative;
    width: 126px;
    aspect-ratio: 4 / 5;
    display: grid;
    align-content: end;
    gap: 8px;
    overflow: hidden;
    padding: 12px;
    border: 1px solid #282d29;
    border-radius: 7px;
    background: #151916;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
  }
  .df248-awaiting-canvas > div i::before {
    position: absolute;
    inset: 0 0 42%;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.09) 48%, transparent 66%) -160px 0 / 150px 100% no-repeat,
      linear-gradient(135deg, #202620, #171c18);
    content: "";
    animation: df248-slide-preparing 2.4s ease-in-out infinite;
  }
  .df248-awaiting-canvas > div i > span,
  .df248-awaiting-canvas > div i > b,
  .df248-awaiting-canvas > div i > em {
    position: relative;
    z-index: 1;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #303630;
    animation: df248-slide-copy-ready 2.4s ease-in-out infinite;
  }
  .df248-awaiting-canvas > div i > span {
    width: 72%;
    height: 9px;
  }
  .df248-awaiting-canvas > div i > b {
    width: 88%;
  }
  .df248-awaiting-canvas > div i > em {
    width: 54%;
  }
  .df248-awaiting-canvas > div i:nth-child(2)::before,
  .df248-awaiting-canvas > div i:nth-child(2) > :is(span, b, em) {
    animation-delay: .34s;
  }
  .df248-awaiting-canvas > div i:nth-child(3)::before,
  .df248-awaiting-canvas > div i:nth-child(3) > :is(span, b, em) {
    animation-delay: .68s;
  }
  .df248-awaiting-canvas > div i:first-child {
    transform: translate(34px, 10px) rotate(-7deg) scale(.92);
  }
  .df248-awaiting-canvas > div i:nth-child(2) {
    z-index: 2;
    border-color: #363c37;
  }
  .df248-awaiting-canvas > div i:last-child {
    transform: translate(-34px, 10px) rotate(7deg) scale(.92);
  }
  .df248-awaiting-canvas > div > b {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid #454b46;
    border-radius: 50%;
    background: rgba(17, 20, 18, .92);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
    transform: translate(-50%, -50%);
  }
  .df248-awaiting-canvas > div > b::before {
    width: 30px;
    height: 30px;
    border: 2px solid #353a36;
    border-top-color: var(--df-coral);
    border-radius: 50%;
    content: "";
    animation: df248-canvas-loader 1.1s linear infinite;
  }
  .df248-awaiting-canvas > div > b span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--df-coral);
    animation: df248-canvas-loader-dot 1.2s ease-in-out infinite;
  }
  .df248-awaiting-canvas > div > b span:first-child {
    margin-left: -18px;
  }
  .df248-awaiting-canvas > div > b span:nth-child(2) {
    animation-delay: .14s;
  }
  .df248-awaiting-canvas > div > b span:last-child {
    margin-left: 18px;
    animation-delay: .28s;
  }
  .df248-awaiting-canvas > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 700;
  }
  .df248-awaiting-canvas > span svg {
    color: var(--df-coral);
  }
  @keyframes df248-slide-preparing {
    0%, 12% {
      background-position: -160px 0, 0 0;
      filter: saturate(.6);
    }
    54%, 100% {
      background-position: 180px 0, 0 0;
      filter: saturate(1);
    }
  }
  @keyframes df248-slide-copy-ready {
    0%, 22% {
      opacity: .32;
      transform: scaleX(.62);
      transform-origin: left;
    }
    48%, 100% {
      opacity: 1;
      transform: scaleX(1);
      transform-origin: left;
    }
  }
  .df180-build-progress.is-desktop,
  .df180-edit-collaboration.is-desktop {
    width: min(92%, 620px);
    height: 100%;
    min-height: 0;
    align-content: stretch;
    align-items: center;
    gap: 12px;
  }
  .df180-build-progress.is-desktop {
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .df180-build-progress.is-desktop .df180-build-canvas {
    width: auto;
    height: min(70cqh, 390px);
    max-width: 72cqw;
    aspect-ratio: 4 / 5;
    justify-self: center;
  }
  .df180-build-progress.is-desktop .df180-build-frame,
  .df180-build-progress.is-desktop .df180-build-frame.is-final {
    z-index: 1;
    opacity: 0;
    animation: df180-build-frame-reveal .42s cubic-bezier(.16, 1, .3, 1) var(--frame-delay) forwards;
  }
  .df180-build-progress.is-desktop .df180-build-frame:nth-child(2) {
    z-index: 2;
  }
  .df180-build-progress.is-desktop .df180-build-frame:nth-child(3) {
    z-index: 3;
  }
  .df180-build-progress.is-desktop .df180-build-selector {
    width: min(100%, 520px);
    align-self: end;
    padding: 2px;
  }
  .df180-build-progress.is-desktop .df180-build-selector .image-layer,
  .df180-build-progress.is-desktop .df180-build-selector .image-mask-inner,
  .df180-edit-collaboration.is-desktop .df180-edit-slide-switcher .image-layer,
  .df180-edit-collaboration.is-desktop .df180-edit-slide-switcher .image-mask-inner {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0 !important;
    clip-path: none !important;
  }
  .df180-build-progress.is-desktop .df180-build-selector > i.is-canvas-stage {
    animation: df180-slide-shell-arrive .52s cubic-bezier(.16, 1, .3, 1) var(--build-delay) both,
      df180-build-selector-focus-exact var(--canvas-duration) linear var(--canvas-delay) forwards;
  }
  .df180-build-progress.is-desktop .df180-build-selector > i.is-canvas-stage.is-canvas-final {
    animation: df180-slide-shell-arrive .52s cubic-bezier(.16, 1, .3, 1) var(--build-delay) both,
      df180-build-selector-focus-persist .2s ease-out var(--canvas-delay) forwards;
  }
  .df180-product-shell[data-motion="playing"][data-visible="true"] .df248-desktop-build-cursor {
    animation: df248-desktop-build-guide 9s linear both;
  }
  .df180-edit-collaboration.is-desktop {
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .df180-edit-collaboration.is-desktop .df180-edit-canvas-wrap {
    width: auto;
    height: min(70cqh, 390px);
    max-width: 72cqw;
    aspect-ratio: 4 / 5;
    justify-self: center;
  }
  .df180-edit-collaboration.is-desktop .df180-edit-canvas {
    width: 100%;
    height: 100%;
  }
  .df180-edit-collaboration.is-desktop > .df180-image-swap-tray {
    display: none;
  }
  .df180-edit-collaboration.is-desktop .df180-edit-slide-switcher {
    width: min(100%, 520px);
    align-self: end;
    padding: 2px;
  }
  .df180-edit-collaboration.is-desktop .df180-edit-slide-state.is-browsed,
  .df180-edit-collaboration.is-desktop .df180-edit-slide-state.is-browsed.is-final-browse {
    z-index: calc(20 + var(--browse-order));
    opacity: 0;
    animation: df180-edit-browse-persist .01s linear var(--browse-canvas-delay) forwards;
  }
  .df180-edit-collaboration.is-desktop .df180-edit-slide-switcher > i.is-initial-active {
    animation: df180-mobile-selector-initial 5.2s linear both;
  }
  .df180-edit-collaboration.is-desktop .df180-edit-slide-switcher > i.browse-click {
    animation: df180-mobile-selector-active-exact var(--browse-duration) linear var(--browse-delay) forwards;
  }
  .df180-edit-collaboration.is-desktop .df180-edit-slide-switcher > i.browse-click.active-final {
    animation: df180-mobile-selector-active-exact var(--browse-duration) linear var(--browse-delay) forwards,
      df180-selector-final .01s step-end calc(var(--browse-delay) + .08s) forwards;
  }
  .df180-edit-collaboration.is-desktop > .df180-demo-cursor.cursor-copy {
    top: 25%;
    right: 27%;
    animation: df180-mia-mobile-exit 3.6s cubic-bezier(.16, 1, .3, 1) .24s both;
  }
  .df180-edit-collaboration.is-desktop > .df180-demo-cursor.cursor-image {
    top: 58%;
    right: 24%;
    bottom: auto;
    animation: df248-desktop-edit-cursor 5.1s linear 2.7s both;
  }
  .df180-edit-collaboration.is-desktop.is-settled .df180-edit-slide-state.is-browsed {
    opacity: 0;
    animation: none;
  }
  .df180-edit-collaboration.is-desktop.is-settled .df180-edit-slide-state.is-final-browse {
    z-index: 23;
    opacity: 1;
  }
  .df180-edit-collaboration.is-desktop.is-settled .df180-edit-slide-switcher > i,
  .df180-edit-collaboration.is-desktop.is-settled .df180-edit-slide-switcher > i.browse-click,
  .df180-edit-collaboration.is-desktop.is-settled .df180-edit-slide-switcher > i.is-initial-active {
    outline: 0;
    filter: none;
    transform: none;
    animation: none;
  }
  .df248-inspector-flow {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    overflow: hidden;
  }
  .df248-inspector-kicker {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #aab0a9;
    font-size: 7px;
    font-weight: 760;
  }
  .df248-inspector-kicker svg {
    color: var(--df-coral);
  }
  .df248-inspector-flow h3 {
    margin: 0;
    color: #eef0ec;
    font-size: 17px;
    letter-spacing: -.025em;
    line-height: 1.05;
  }
  .df248-inspector-flow p {
    margin: 0;
    color: #848a83;
    font-size: 8px;
    line-height: 1.5;
  }
  .df248-inspector-flow.is-plan {
    opacity: .72;
  }
  .df248-inspector-statuses,
  .df248-build-queue {
    display: grid;
    gap: 6px;
  }
  .df248-inspector-statuses > span {
    min-height: 34px;
    display: grid;
    grid-template-columns: 8px 1fr 12px;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    border: 1px solid #303530;
    border-radius: 6px;
    color: #8f958e;
    font-size: 7px;
    animation: df248-inspector-status .5s cubic-bezier(.16, 1, .3, 1) var(--status-delay) both;
  }
  .df248-inspector-statuses > span > i,
  .df248-presence-dot,
  .df248-build-total i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--df-coral);
  }
  .df248-inspector-statuses svg {
    color: var(--df-lime);
  }
  .df248-build-queue article {
    min-height: 54px;
    display: grid;
    grid-template-columns: 28px 1fr 14px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #333833;
    border-radius: 7px;
    background: #1b1f1c;
    animation: df248-build-queue .62s cubic-bezier(.16, 1, .3, 1) var(--queue-delay) both;
  }
  .df248-build-queue article > span {
    color: var(--df-coral);
    font-size: 8px;
    font-weight: 800;
  }
  .df248-build-queue article > div {
    display: grid;
    gap: 3px;
  }
  .df248-build-queue article b {
    color: #e8ebe6;
    font-size: 8px;
  }
  .df248-build-queue article small {
    color: #747b74;
    font-size: 6px;
  }
  .df248-build-queue article svg {
    color: var(--df-lime);
  }
  .df248-build-total {
    min-height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 9px;
    border-top: 1px solid #303530;
    color: #858b84;
    font-size: 7px;
  }
  .df248-build-total span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .df248-build-total b {
    color: var(--df-coral);
    font-size: 7px;
  }
  .df248-presence-dot {
    display: inline-block;
    background: #347cf4;
    box-shadow: 10px 0 0 #e39b23;
  }
  .df248-text-control,
  .df248-image-control {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #343934;
    border-radius: 8px;
    background: #1b1f1c;
  }
  .df248-text-control {
    animation: df248-text-control 3.55s linear both;
  }
  .df248-image-control {
    animation: df248-image-control 5.1s linear 3.15s both;
  }
  .df248-text-control header,
  .df248-image-control header {
    display: flex;
    justify-content: space-between;
    color: #f0f2ee;
    font-size: 8px;
    font-weight: 760;
  }
  .df248-text-control header small,
  .df248-image-control header small,
  .df248-image-control > small {
    color: #7a8179;
    font-size: 6px;
    font-weight: 500;
  }
  .df248-text-control label {
    display: grid;
    gap: 5px;
    color: #7f867e;
    font-size: 6px;
  }
  .df248-inspector-typed-text {
    min-height: 38px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 8px;
    border: 1px solid #485049;
    border-radius: 5px;
    background: #141715;
    color: #eef0ec;
    font-size: 8px;
    white-space: nowrap;
  }
  .df248-inspector-typed-text > i {
    width: 0;
    display: block;
    overflow: hidden;
    color: inherit;
    font-style: normal;
    white-space: nowrap;
    animation: df248-inspector-type 1.7s steps(27, end) .9s both;
  }
  .df248-text-control > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .df248-text-control > div > span {
    min-height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #343934;
    border-radius: 5px;
    background: #202421;
    color: #9da39c;
    font-size: 6px;
  }
  .df248-image-control > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .df248-image-control > div > i {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #414741;
    border-radius: 5px;
  }
  .df248-image-control img {
    object-fit: cover;
  }
  .df248-image-control > div > i.is-selected {
    animation: df248-inspector-image-selected .28s cubic-bezier(.16, 1, .3, 1) 1.15s forwards;
  }
  .df248-image-control > div > i svg {
    position: absolute;
    z-index: 2;
    right: 4px;
    bottom: 4px;
    width: 15px;
    height: 15px;
    padding: 3px;
    border-radius: 50%;
    background: var(--df-lime);
    color: #152016;
    opacity: 0;
    animation: df180-check-complete .3s cubic-bezier(.16, 1, .3, 1) 1.25s forwards;
  }
  .df248-inspector-flow.is-export .df180-download-receipt {
    margin-top: 4px;
  }
  .df248-desktop-export-modal {
    position: absolute;
    z-index: 40;
    inset: 18px;
    min-width: 0;
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr) 54px;
    overflow: hidden;
    border: 1px solid #404640;
    border-radius: 13px;
    background: #111412;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .72);
    opacity: 0;
    animation: df248-export-modal-open .55s cubic-bezier(.16, 1, .3, 1) .58s forwards;
  }
  .df248-desktop-export-modal > header,
  .df248-desktop-export-modal > footer {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-color: #303530;
    color: #f0f2ee;
  }
  .df248-desktop-export-modal > header {
    border-bottom: 1px solid #303530;
  }
  .df248-desktop-export-modal > header > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .df248-desktop-export-modal > header > div > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .df248-desktop-export-modal > header strong {
    font-size: 10px;
  }
  .df248-desktop-export-modal > header small {
    color: #858b84;
    font-size: 7px;
  }
  .df248-desktop-export-modal > footer {
    border-top: 1px solid #303530;
    color: #9ca29b;
    font-size: 8px;
  }
  .df248-desktop-export-modal > footer > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .df248-desktop-export-modal > footer > span svg {
    color: var(--df-lime);
  }
  .df248-desktop-export-modal > footer button {
    min-width: 92px;
    min-height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 7px;
    background: var(--df-coral);
    color: #fff;
    cursor: pointer;
    font-size: 8px;
    font-weight: 780;
    opacity: 0;
    animation: df248-export-done .45s cubic-bezier(.16, 1, .3, 1) 7.15s forwards;
  }
  .df248-desktop-export-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 48%, #202520 0, #131714 44%, #0f120f 74%);
  }
  .df248-desktop-export-stage > .df180-instagram-outcome {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: center;
  }
  .df248-desktop-export-stage .df180-export-bundle {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 170px;
    min-height: 220px;
    transform: translate(-50%, -50%) scale(.78);
    transform-origin: center;
    animation: df180-mobile-bundle-precursor 2.15s cubic-bezier(.16, 1, .3, 1) .58s both;
  }
  .df248-desktop-export-stage .df180-export-morph-arrow {
    display: none;
  }
  .df248-desktop-export-stage .df180-published-post {
    position: relative;
    z-index: 3;
    grid-area: 1 / 1;
    width: min(230px, 44cqh);
    margin: 0;
    animation: df180-mobile-post-publish .85s cubic-bezier(.16, 1, .3, 1) 2.3s both;
  }
  .df180-product-shell[data-motion="playing"][data-visible="true"] .df248-desktop-export-cursor {
    z-index: 50;
    display: inline-flex;
    animation: df248-desktop-export-guide 9.7s linear both;
  }
  .df180-product-shell[data-motion="paused"] .df248-desktop-prompt-cursor,
  .df180-product-shell[data-motion="paused"] .df248-desktop-build-cursor,
  .df180-product-shell[data-motion="paused"] .df248-desktop-export-cursor,
  .df180-product-shell[data-motion="paused"] .df248-inspector-flow *,
  .df180-product-shell[data-motion="paused"] .df248-desktop-export-modal *,
  .df180-product-shell[data-visible="false"] .df248-desktop-prompt-cursor,
  .df180-product-shell[data-visible="false"] .df248-desktop-build-cursor,
  .df180-product-shell[data-visible="false"] .df248-desktop-export-cursor,
  .df180-product-shell[data-visible="false"] .df248-inspector-flow *,
  .df180-product-shell[data-visible="false"] .df248-desktop-export-modal * {
    animation-play-state: paused !important;
  }
}
@media (min-width: 1121px) {
  .df248-live-studio {
    grid-template-columns: 48px clamp(260px, 21vw, 300px) minmax(0, 1fr) clamp(260px, 21vw, 300px);
  }
  .df248-live-studio .df180-live-chat,
  .df248-live-studio .df180-live-inspector {
    min-height: 0;
  }
  .df248-live-studio .df180-live-inspector {
    display: grid;
    grid-template-rows: 38px minmax(0, 1fr);
  }
  .df248-live-studio .df180-live-inspector > nav {
    margin-bottom: 12px;
  }
}
@keyframes df248-plan-complete {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes df248-desktop-prompt-guide {
  0% {
    top: 8%;
    left: 82%;
    opacity: 0;
  }
  7%,
  14% {
    top: 13%;
    left: 78%;
    opacity: 1;
  }
  24%,
  29% {
    top: 39%;
    left: 21%;
    opacity: 1;
  }
  36%,
  41% {
    top: 51%;
    left: 21%;
    opacity: 1;
  }
  48%,
  53% {
    top: 63%;
    left: 21%;
    opacity: 1;
  }
  62%,
  68% {
    top: 77%;
    left: 64%;
    opacity: 1;
  }
  74%,
  80% {
    top: 84%;
    left: 76%;
    opacity: 1;
  }
  90% {
    top: -56px;
    left: 124%;
    opacity: 1;
    transform: scale(1);
  }
  94% {
    top: -56px;
    left: 124%;
    opacity: 1;
    transform: scale(.86);
  }
  97% {
    top: -56px;
    left: 124%;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    top: -56px;
    left: 124%;
    opacity: 0;
  }
}
@keyframes df248-desktop-build-guide {
  0% {
    top: 14%;
    left: 50%;
    opacity: 0;
  }
  8%,
  20% {
    top: 30%;
    left: 51%;
    opacity: 1;
  }
  25%,
  36% {
    top: calc(100% - 54px);
    left: 23%;
    opacity: 1;
    transform: scale(1);
  }
  39% {
    transform: scale(.86);
  }
  44%,
  68% {
    top: calc(100% - 54px);
    left: 36%;
    opacity: 1;
    transform: scale(1);
  }
  71% {
    transform: scale(.86);
  }
  76%,
  92% {
    top: calc(100% - 54px);
    left: 49%;
    opacity: 1;
    transform: scale(1);
  }
  95% {
    transform: scale(.86);
  }
  100% {
    top: calc(100% - 54px);
    left: 49%;
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes df248-desktop-edit-cursor {
  0% {
    top: 58%;
    right: 10%;
    opacity: 0;
  }
  10%,
  27% {
    top: 58%;
    right: 24%;
    opacity: 1;
  }
  31%,
  41% {
    top: 58%;
    right: 30%;
    opacity: 1;
    transform: scale(1);
  }
  44% {
    transform: scale(.86);
  }
  50%,
  58% {
    top: calc(100% - 39px);
    right: 70%;
    opacity: 1;
    transform: scale(1);
  }
  61% {
    transform: scale(.86);
  }
  67%,
  73% {
    top: calc(100% - 39px);
    right: 42%;
    opacity: 1;
    transform: scale(1);
  }
  76% {
    transform: scale(.86);
  }
  82%,
  92% {
    top: calc(100% - 39px);
    right: 28%;
    opacity: 1;
    transform: scale(1);
  }
  95% {
    transform: scale(.86);
  }
  100% {
    top: calc(100% - 39px);
    right: 28%;
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes df248-inspector-status {
  from {
    opacity: .2;
    transform: translateX(12px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}
@keyframes df248-build-queue {
  0% {
    opacity: .24;
    transform: translateY(8px);
    filter: saturate(0);
  }
  24%,
  78% {
    opacity: 1;
    transform: translateY(0);
    filter: saturate(1);
  }
  100% {
    opacity: .72;
    transform: translateY(0);
    filter: saturate(.8);
  }
}
@keyframes df248-text-control {
  0%,
  78% {
    border-color: #4b83ff;
    opacity: 1;
  }
  100% {
    border-color: #343934;
    opacity: .58;
  }
}
@keyframes df248-image-control {
  0% {
    opacity: .34;
    border-color: #343934;
  }
  14%,
  100% {
    opacity: 1;
    border-color: #e39b23;
  }
}
@keyframes df248-inspector-type {
  to {
    width: 100%;
  }
}
@keyframes df248-canvas-loader {
  to {
    transform: rotate(1turn);
  }
}
@keyframes df248-canvas-loader-dot {
  0%, 100% {
    opacity: .35;
    transform: translateY(2px) scale(.75);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}
@keyframes df248-inspector-image-selected {
  40% {
    transform: scale(.92);
  }
  100% {
    box-shadow: inset 0 0 0 2px #e39b23;
    transform: scale(1);
  }
}
@keyframes df248-export-modal-open {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.97);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes df248-export-done {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes df248-desktop-export-guide {
  0% {
    top: 54%;
    left: 61%;
    opacity: 0;
  }
  4%,
  6% {
    top: -109px;
    left: calc(100% - 70px);
    opacity: 1;
    transform: scale(1);
  }
  8% {
    top: -109px;
    left: calc(100% - 70px);
    opacity: 1;
    transform: scale(.84);
  }
  11% {
    top: -109px;
    left: calc(100% - 70px);
    opacity: 0;
    transform: scale(1);
  }
  78% {
    top: calc(100% - 58px);
    left: calc(100% - 92px);
    opacity: 0;
    transform: scale(1);
  }
  84%,
  91% {
    top: calc(100% - 58px);
    left: calc(100% - 92px);
    opacity: 1;
    transform: scale(1);
  }
  94% {
    top: calc(100% - 58px);
    left: calc(100% - 92px);
    opacity: 1;
    transform: scale(.84);
  }
  97% {
    top: calc(100% - 58px);
    left: calc(100% - 92px);
    opacity: 1;
    transform: scale(1);
  }
  100% {
    top: calc(100% - 58px);
    left: calc(100% - 92px);
    opacity: 0;
  }
}
.df180-nav .df180-logo {
  --donefeed-wordmark-size: 17px;
}
.df180-scroll-cue {
  text-transform: none;
}
.df180-trial {
  display: none !important;
}
.df180-section-intro,
.df180-demo .df180-section-intro {
  width: min(1360px, calc(100% - 80px));
}
.df180-conveyor-card {
  box-shadow: none;
}
.df180-conveyor-card > .df180-template-card {
  box-shadow: 0 28px 58px rgba(15, 16, 14, .18);
}
.df180-composer {
  padding: 14px;
}
.df180-composer textarea {
  min-height: 78px;
  padding: 2px 2px 10px;
  font-size: 16px;
}
.df180-composer footer {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding-top: 9px;
}
.df180-composer footer > div {
  flex-wrap: nowrap;
}
.df180-composer footer > div .df180-inspire,
.df180-composer footer > div span {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #373a37;
  border-radius: 10px;
  background: #222523;
  color: #c9cdc7;
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}
.df180-composer footer > button {
  min-width: 122px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 730;
}
.df180-demo {
  padding-top: 108px;
  padding-bottom: 108px;
}
.df180-feed-browser {
  margin-top: 38px;
}
.df180-feed-stories {
  padding-top: 20px;
}
.df180-gallery {
  padding-top: 20px;
}
.df180-instagram-post > footer {
  gap: 5px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.df180-instagram-post > footer button {
  min-height: 29px;
}
.df180-control {
  padding-top: 126px;
  padding-bottom: 126px;
}
.df180-control .df180-section-intro h2 {
  max-width: 930px;
}
.df180-audience-toggle {
  width: min(1360px, calc(100% - 56px));
  margin-top: 38px;
  margin-bottom: 12px;
}
.df180-control-proof {
  position: relative;
  width: min(1360px, calc(100% - 56px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid #d3d6cf;
  border-radius: 20px;
  background: #d3d6cf;
  box-shadow: 0 28px 80px rgba(23, 26, 22, .09);
}
.df180-control-step {
  min-width: 0;
  display: grid;
  grid-template-rows: 62px minmax(320px, 1fr) auto;
  background: #f4f4ef;
}
.df180-control-step > *,
.df180-control-visual .df180-control-artifact {
  grid-area: auto;
}
.df180-control-step > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  border-bottom: 1px solid #dfe1dc;
  color: #5f645d;
  font-size: 11px;
  font-weight: 760;
}
.df180-control-step > header b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid #c7cac3;
  border-radius: 50%;
  background: #fff;
  color: #20231f;
  font-size: 9px;
}
.df180-control-step.step-build > header b {
  border-color: var(--df-coral);
  background: var(--df-coral);
  color: #fff;
}
.df180-control-visual {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: linear-gradient(rgba(38, 42, 36, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 42, 36, .035) 1px, transparent 1px),
    #edeee8;
  background-size: 28px 28px;
}
.df180-control-visual figure {
  position: relative;
  width: min(68%, 220px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  border-radius: 11px;
  box-shadow: 0 18px 38px rgba(26, 29, 24, .2);
}
.df180-control-visual figure img {
  object-fit: cover;
}
.df180-control-visual figure figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(16, 18, 15, .88);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.df180-control-visual .df180-business-brief {
  width: min(76%, 250px);
  min-height: 260px;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(26, 29, 24, .13);
}
.df180-control-visual .df180-control-artifact {
  width: min(68%, 220px);
}
.df180-control-visual .df180-control-signals {
  right: -30px;
  bottom: 18px;
  left: 18px;
}
.df180-approval-panel {
  position: relative;
  width: min(92%, 310px);
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid #d1d4cd;
  border-radius: 13px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 42px rgba(28, 31, 26, .13);
}
.df180-approval-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #4e7251;
  font-size: 9px;
  font-weight: 760;
}
.df180-approval-panel label {
  display: grid;
  gap: 7px;
  color: #6e736c;
  font-size: 9px;
  font-weight: 700;
}
.df180-approval-panel input {
  width: 100%;
  min-height: 66px;
  padding: 12px;
  border: 1px solid #d3d6cf;
  border-radius: 8px;
  background: #f6f6f2;
  color: #20231f;
  font: inherit;
  font-size: 12px;
}
.df180-approval-panel button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #1a1d19;
  color: #fff;
  font-size: 10px;
  font-weight: 730;
}
.df180-approval-panel .df180-production-cursor {
  top: auto;
  right: 2px;
  bottom: 10px;
  left: auto;
}
.df180-control-copy {
  min-height: 152px;
  padding: 23px 24px 26px;
  border-top: 1px solid #dfe1dc;
  background: #fff;
}
.df180-control-copy h3 {
  margin: 0;
  font-size: clamp(23px, 2.25vw, 34px);
  line-height: 1;
}
.df180-control-copy p {
  max-width: 360px;
  margin: 13px 0 0;
  color: #737871;
  font-size: 11px;
  line-height: 1.55;
}
.df180-control-flow {
  position: absolute;
  z-index: 4;
  top: 222px;
  left: 33.333%;
  width: 33.333%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: var(--df-coral);
  pointer-events: none;
  transform: translateX(-50%);
}
.df180-control-flow span {
  height: 1px;
  background: rgba(255, 90, 69, .48);
}
.df180-control-flow::after {
  position: absolute;
  right: calc(-100% + 18px);
  left: calc(100% - 18px);
  height: 1px;
  background: rgba(255, 90, 69, .48);
  content: "";
}
.df180-start {
  min-height: 780px;
  padding-top: 118px;
  padding-bottom: 118px;
}
.df180-start-copy > span {
  display: block;
  margin-bottom: 18px;
  color: var(--df-coral);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .13em;
}
.df180-start-copy h2 {
  max-width: 690px;
}
.df180-start-copy .df180-start-deck {
  max-width: 540px;
  display: block;
  margin: 24px 0 0;
  color: #a9aea8;
  font-size: 15px;
  line-height: 1.55;
}
.df180-start-copy > p {
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
  margin-top: 22px;
}
.df180-start-copy > p > span,
.df180-start-copy > p > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 0;
}
.df180-final-action {
  margin-top: 28px;
}
.df180-back-to-prompt {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  color: #c7cbc5;
  font-size: 11px;
  font-weight: 690;
  text-decoration: none;
}
.df180-footer {
  container-type: inline-size;
}
.df180-footer-wordmark {
  right: auto;
  bottom: -3.2cqw;
  left: 50%;
  width: max-content;
  font-size: 22.2cqw;
  transform: translateX(-50%);
}
.auth-backdrop {
  --auth-coral: #ff5a45;
  padding: 24px;
  background: radial-gradient(circle at 50% 105%, rgba(255, 90, 69, .23), transparent 42%),
    rgba(8, 10, 9, .82);
  backdrop-filter: blur(18px) saturate(110%);
}
.auth-modal {
  width: min(500px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px 40px 32px;
  border: 1px solid #464a44;
  border-radius: 24px;
  background: #242724;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .62);
  color: #f6f7f3;
}
.auth-close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #b7bbb5;
  cursor: pointer;
}
.auth-brand {
  gap: 10px;
}
.auth-brand .donefeed-logo-mark {
  width: 30px;
  height: 30px;
}
.auth-kicker {
  display: block;
  margin-top: 30px;
  color: #969b94;
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -.035em;
}
.auth-modal h2 {
  margin: 3px 0 8px;
  color: #f7f8f4;
  font-size: 35px;
  line-height: 1.05;
}
.auth-modal > p {
  margin-bottom: 24px;
  color: #a8ada6;
  font-size: 12px;
}
.auth-provider-stack {
  gap: 10px;
  margin: 0;
}
.auth-provider-button {
  min-height: 52px;
  border-color: #555a53;
  border-radius: 11px;
  background: #292c29;
  color: #f5f6f2;
  font-size: 13px !important;
  font-weight: 650;
}
.provider-apple,
.provider-google,
.provider-meta {
  background: #292c29;
  color: #f5f6f2;
}
.provider-google .provider-icon,
.provider-meta .provider-icon,
.provider-apple .provider-icon {
  color: #f5f6f2;
}
.auth-divider {
  margin: 22px 0 18px;
  gap: 13px;
  color: #92978f;
  font-size: 9px;
}
.auth-divider::before,
.auth-divider::after {
  background: #454943;
}
.auth-email-form {
  display: grid;
  gap: 9px;
}
.auth-email-label {
  color: #d3d6d0;
  font-size: 11px;
  font-weight: 650;
}
.auth-field {
  height: 50px;
  margin: 0;
  border-color: #50544e;
  border-radius: 10px;
  background: #1c1f1c;
  color: #92978f;
}
.auth-field:focus-within {
  border-color: var(--auth-coral);
}
.auth-field input {
  color: #f6f7f3;
  font-size: 16px;
}
.auth-submit {
  height: 50px;
  margin: 0;
  border-radius: 10px;
  background: #f4f4ef;
  color: #191b18;
  font-size: 12px;
}
.auth-submit span {
  margin-left: auto;
}
.auth-submit svg:last-child {
  margin-left: auto;
}
.auth-provider-loading {
  margin-top: 0;
}
.auth-code input {
  border-color: #50544e;
  background: #1c1f1c;
}
.auth-code input:focus {
  border-color: var(--auth-coral);
}
.auth-terms {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #424640;
  color: #90958e;
  font-size: 10px;
  line-height: 1.7;
}
.auth-terms a {
  color: #d7dad4;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .auth-provider-button:hover,
  .provider-apple:hover {
    border-color: #70756d;
    background: #323632;
  }
  .auth-close:hover {
    background: #303430;
  }
}
@media (max-width: 760px) {
  .df180-hero {
    padding-top: 88px;
  }
  .df180-hero-copy > p:first-child,
  .df180-trial {
    display: none !important;
  }
  .df180-section-intro,
  .df180-demo .df180-section-intro {
    width: calc(100% - 32px);
  }
  .df180-composer {
    padding: 12px;
  }
  .df180-composer textarea {
    min-height: 84px;
  }
  .df180-composer footer > div .df180-inspire,
  .df180-composer footer > div span {
    min-height: 44px;
    padding: 0 10px;
  }
  .df180-composer footer > button {
    min-width: 46px;
    min-height: 46px;
  }
  .df180-demo {
    padding-top: 70px;
    padding-bottom: 74px;
  }
  .df180-feed-browser {
    width: calc(100% - 20px);
    margin-top: 28px;
  }
  .df180-feed-stories {
    padding: 16px 14px 14px;
  }
  .df180-gallery {
    padding: 14px 14px 20px;
  }
  .df180-instagram-post > footer {
    gap: 8px;
    padding: 10px 12px 12px;
  }
  .df180-instagram-post > footer button {
    min-height: 44px;
  }
  .df180-control {
    padding: 96px 0 90px;
  }
  .df180-audience-toggle,
  .df180-control-proof {
    width: calc(100% - 32px);
  }
  .df180-audience-toggle {
    margin-top: 28px;
  }
  .df180-control-proof {
    grid-template-columns: 1fr;
    gap: 1px;
    overflow: visible;
    border-radius: 16px;
  }
  .df180-control-step {
    grid-template-rows: 54px auto auto;
  }
  .df180-control-step > *,
  .df180-control-visual .df180-control-artifact {
    grid-area: auto;
  }
  .df180-control-step > header {
    padding: 0 16px;
  }
  .df180-control-visual {
    min-height: 310px;
    padding: 24px;
  }
  .df180-control-visual figure,
  .df180-control-visual .df180-control-artifact {
    width: min(58vw, 210px);
  }
  .df180-control-visual .df180-business-brief {
    width: min(76vw, 280px);
  }
  .df180-control-copy {
    min-height: 0;
    padding: 20px;
  }
  .df180-control-copy h3 {
    font-size: 28px;
  }
  .df180-control-copy p {
    font-size: 12px;
  }
  .df180-control-flow {
    display: none;
  }
  .df180-start {
    min-height: auto;
    padding-top: 94px;
    padding-bottom: 94px;
  }
  .df180-start-copy h2 {
    font-size: 50px;
  }
  .df180-start-copy .df180-start-deck {
    font-size: 14px;
  }
  .df180-back-to-prompt {
    margin-top: 8px;
    margin-left: 0;
  }
  .df180-footer-wordmark {
    right: auto;
    bottom: -2.5cqw;
    left: 50%;
    font-size: 23.2cqw;
  }
  .auth-backdrop {
    align-items: end;
    padding: 12px;
  }
  .auth-modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 28px 20px max(22px, env(safe-area-inset-bottom));
    border-radius: 22px;
  }
  .auth-kicker {
    margin-top: 24px;
    font-size: 20px;
  }
  .auth-modal h2 {
    padding-right: 28px;
    font-size: 31px;
  }
}
.df180-control {
  overflow: hidden;
  padding: 132px 0;
  background: #f3f1e9;
}
.df180-control .df180-section-intro {
  position: relative;
  z-index: 2;
}
.df180-control .df180-section-intro h2 {
  max-width: 900px;
}
.df180-control-proof {
  position: relative;
  width: min(1380px, calc(100% - 56px));
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(500px, 1.5fr) minmax(280px, .92fr);
  gap: 0;
  overflow: hidden;
  margin: 54px auto 0;
  border: 1px solid #cbc9c0;
  border-radius: 22px;
  background: #e7e5dd;
  box-shadow: 0 34px 90px rgba(38, 37, 31, .12);
}
.df180-control-proof > article {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 28px;
}
.df180-control-proof > article > header {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 15px;
  border-bottom: 1px solid #d4d1c8;
}
.df180-control-proof > article > header span {
  color: #171915;
  font-size: 14px;
  font-weight: 780;
}
.df180-control-proof > article > header small {
  color: #818077;
  font-size: 9px;
}
.df180-control-origin {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #cfcdc4;
  background: #f8f6ef;
}
.df180-control-origin figure {
  position: relative;
  width: min(100%, 210px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 24px 0 0;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(26, 27, 23, .18);
}
.df180-control-origin figure img {
  object-fit: cover;
}
.df180-control-origin figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(17, 19, 16, .88);
  color: #fff;
  font-size: 9px;
  font-weight: 720;
  backdrop-filter: blur(8px);
}
.df180-control-origin blockquote {
  position: relative;
  margin: 20px 0 0 16px;
  padding: 13px 14px;
  border-radius: 3px 11px 11px 11px;
  background: #1b1e1a;
  color: #f5f4ee;
  font-size: 11px;
  line-height: 1.5;
}
.df180-control-origin blockquote::before {
  position: absolute;
  top: 0;
  left: -9px;
  border-top: 10px solid #1b1e1a;
  border-left: 10px solid transparent;
  content: "";
}
.df180-control-alternatives {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top: auto;
  padding-top: 22px;
}
.df180-control-alternatives span {
  margin-bottom: 3px;
  color: #8a8980;
  font-size: 8px;
}
.df180-control-alternatives b {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid #dedbd2;
  color: #55564f;
  font-size: 9px;
  font-weight: 670;
}
.df180-control-build {
  border-right: 1px solid #cfcdc4;
  background: #eeece4;
}
.df180-control-build-stage {
  position: relative;
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(150px, .62fr) minmax(260px, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: 22px;
}
.df180-control-signal-rail {
  display: grid;
  gap: 0;
}
.df180-control-signal-rail > span {
  --signal-delay: calc(var(--signal-index) * .42s);
  min-height: 76px;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 10px;
  border-bottom: 1px solid #d5d2c8;
  animation: df180-signal-check 5.8s var(--signal-delay) ease-in-out infinite;
}
.df180-control-signal-rail > span i {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1f6a48;
  color: #fff;
}
.df180-control-signal-rail > span b {
  color: #252721;
  font-size: 10px;
}
.df180-control-signal-rail > span small {
  margin-top: 3px;
  color: #88877f;
  font-size: 7px;
  line-height: 1.35;
}
@keyframes df180-signal-check {
  0%, 18%, 100% {
    opacity: .48;
    transform: translateX(0);
  }
  24%, 62% {
    opacity: 1;
    transform: translateX(4px);
  }
  70% {
    opacity: .68;
    transform: translateX(0);
  }
}
.df180-control-slide-stack {
  position: relative;
  width: min(100%, 310px);
  aspect-ratio: 4 / 5;
  margin: 12px auto 0;
  perspective: 900px;
}
.df180-control-slide-stack > span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(27, 29, 23, .22);
  transform-origin: 50% 100%;
}
.df180-control-slide-stack .stack-back {
  transform: translate3d(32px, -15px, -60px) rotate(5deg);
}
.df180-control-slide-stack .stack-middle {
  transform: translate3d(-25px, -8px, -30px) rotate(-4deg);
}
.df180-control-slide-stack .stack-front {
  animation: df180-control-artifact-breathe 6s cubic-bezier(.45, 0, .3, 1) infinite;
}
@keyframes df180-control-artifact-breathe {
  0%, 82%, 100% {
    transform: translate3d(0, 0, 0) rotateY(0);
  }
  88% {
    transform: translate3d(5px, -3px, 18px) rotateY(-1.4deg);
  }
  94% {
    transform: translate3d(-2px, 0, 6px) rotateY(.7deg);
  }
}
.df180-control-slide-rail {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 18px;
}
.df180-control-slide-rail > span {
  width: 48px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #c8c6bc;
  border-radius: 5px;
  opacity: .64;
}
.df180-control-slide-rail > span.active {
  border: 2px solid var(--df-coral);
  opacity: 1;
}
.df180-control-slide-rail > small {
  color: #77786f;
  font-size: 8px;
}
.df180-control-review {
  display: flex;
  flex-direction: column;
  background: #f8f6ef;
}
.df180-control-review-panel {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid #d8d5cb;
  border-bottom: 1px solid #d8d5cb;
}
.df180-review-status {
  min-height: 58px;
  display: grid;
  grid-template-columns: 10px 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 8px;
}
.df180-review-status > i {
  grid-row: 1 / 3;
  width: 8px;
  height: 8px;
  align-self: center;
  border-radius: 50%;
  background: #4eb574;
  box-shadow: 0 0 0 4px rgba(78, 181, 116, .12);
}
.df180-review-status b {
  font-size: 9px;
}
.df180-review-status small {
  color: #85847b;
  font-size: 7px;
}
.df180-control-review-panel > div {
  min-height: 78px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #d8d5cb;
  color: #6f7068;
}
.df180-control-review-panel > div > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.df180-control-review-panel > div small {
  color: #8b8a82;
  font-size: 7px;
}
.df180-control-review-panel > div b {
  overflow: hidden;
  color: #252721;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df180-control-review-panel > div > i {
  color: var(--df-coral);
  font-size: 8px;
  font-style: normal;
  font-weight: 730;
}
.df180-review-cursor {
  position: absolute;
  right: 16px;
  bottom: 57px;
  display: grid;
  color: var(--df-coral);
  font-size: 25px;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .16));
  animation: df180-review-cursor 5.8s cubic-bezier(.45, 0, .25, 1) infinite;
}
.df180-review-cursor small {
  margin: -4px 0 0 11px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--df-coral);
  color: #fff;
  font-size: 7px;
}
@keyframes df180-review-cursor {
  0%, 14% {
    transform: translate3d(0, 72px, 0);
  }
  28%, 42% {
    transform: translate3d(-60px, 0, 0);
  }
  56%, 70% {
    transform: translate3d(-8px, -78px, 0);
  }
  84%, 100% {
    transform: translate3d(0, -156px, 0);
  }
}
.df180-control-delivery {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 22px 0 0;
}
.df180-control-delivery > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4d7557;
  font-size: 8px;
  font-weight: 720;
}
.df180-control-delivery strong {
  color: #21231e;
  font-size: 12px;
}
.df180-control-delivery > b {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 13px;
  border-radius: 8px;
  background: #1c1f1b;
  color: #fff;
  font-size: 10px;
}
.df180-start {
  --closing-panel-height: clamp(330px, min(29.5vw, 58dvh), 520px);
  --closing-cover-height: clamp(310px, min(28vw, 56dvh), 480px);
  min-height: 780px;
  grid-template-columns: minmax(350px, .68fr) minmax(0, 1.32fr);
  gap: 36px;
  overflow: hidden;
  padding: 104px max(24px, calc((100vw - 1546px) / 2));
  background: #111311;
}
.df180-start-copy {
  position: relative;
  z-index: 4;
  align-self: center;
}
.df180-start-copy h2 {
  max-width: 520px;
  margin: 0;
  font-size: clamp(56px, 4.35vw, 70px);
  font-weight: 690;
  letter-spacing: -.04em;
  line-height: .97;
  text-wrap: balance;
}
.df180-start-copy h2 > span {
  display: block;
}
.df180-start-copy h2 i {
  color: var(--df-coral);
  font-style: normal;
}
.df180-start-runway {
  position: relative;
  top: 34px;
  min-height: clamp(450px, 70dvh, 650px);
  margin-right: min(-8vw, -72px);
  perspective: 760px;
  perspective-origin: 46% 52%;
  transform-style: preserve-3d;
}
.df180-showcase-group {
  --cycle: 28s;
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  transform-style: preserve-3d;
  opacity: 0;
  animation: df180-showcase-stage var(--cycle) linear infinite both;
  animation-delay: calc(var(--group-index) * 7s);
  animation-play-state: paused;
  will-change: opacity;
}
.df180-start[data-showcase-visible="true"] .df180-showcase-group,
.df180-start[data-showcase-visible="true"] .df180-showcase-slide {
  animation-play-state: running;
}
.df180-showcase-group > small {
  position: absolute;
  z-index: auto;
  top: 22px;
  left: 0;
  min-width: 280px;
  padding: 0;
  color: #e4e6e0;
  font-size: 14px;
  font-weight: 690;
}
.df180-showcase-group > small > span {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 42px;
  padding: 0 16px;
  align-items: center;
  border: 1px solid #484c47;
  border-radius: 10px;
  background: #1d201d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.df180-showcase-group > small > span > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--df-coral);
  box-shadow: 0 0 0 4px rgba(255, 90, 69, .12);
}
.df180-showcase-group > small::after {
  position: absolute;
  z-index: 1;
  top: calc(50% - 1px);
  left: 52%;
  width: 340px;
  height: 73px;
  border-right: 1px dashed rgba(255, 90, 69, .72);
  border-top: 1px dashed rgba(255, 90, 69, .72);
  border-radius: 0 32px 0 0;
  content: "";
}
.df180-showcase-group > div {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 72px;
  isolation: isolate;
  transform-style: preserve-3d;
}
.df180-showcase-group > div::after {
  position: absolute;
  z-index: -2;
  right: 3%;
  bottom: -20px;
  left: 5%;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  content: "";
  filter: blur(18px);
  transform: rotateX(72deg) translateZ(-52px);
  transform-origin: center;
}
.df180-showcase-slide {
  --panel-perspective: 760px;
  --panel-y: 0px;
  --panel-z: 0px;
  --panel-rx: 0deg;
  --panel-ry: 0deg;
  --panel-rz: 0deg;
  --float-y: -4px;
  --float-rz: .18deg;
  --entry-x: 430px;
  --exit-x: -480px;
  position: relative;
  z-index: calc(7 - var(--slide-index));
  width: 172px;
  height: var(--closing-panel-height);
  flex: 0 0 auto;
  margin-left: -18px;
  opacity: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: df180-showcase-panel-cycle var(--cycle) cubic-bezier(.16, 1, .3, 1) infinite both;
  animation-delay: calc(var(--group-index) * 7s + var(--card-delay));
  animation-play-state: paused;
  filter: drop-shadow(8px 18px 24px rgba(0, 0, 0, .28));
  will-change: transform, opacity, filter;
}
.df180-showcase-slide::before {
  position: absolute;
  z-index: -1;
  inset: 2px -3px -4px 3px;
  border: 1px solid rgba(29, 30, 27, .28);
  border-radius: 13px;
  background: linear-gradient(115deg, #d6d0c4 0%, #aaa397 58%, #817b72 100%);
  box-shadow: 4px 10px 14px rgba(0, 0, 0, .16);
  content: "";
  transform: translate3d(0, 0, -6px);
  transform-style: preserve-3d;
}
.df180-showcase-slide::after {
  position: absolute;
  z-index: -1;
  top: 4px;
  right: -8px;
  bottom: 2px;
  width: 8px;
  border: 1px solid rgba(29, 30, 27, .34);
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(90deg, #d8d2c7 0%, #938c82 68%, #69645d 100%);
  content: "";
  transform: rotateY(90deg);
  transform-origin: left center;
}
.df180-showcase-slide:first-child {
  margin-left: 0;
}
.df180-showcase-slide[data-slide-role="cover"] {
  width: clamp(180px, 14.6vw, 230px);
  height: var(--closing-cover-height);
}
.df180-showcase-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 16px;
  border: 1px solid rgba(25, 26, 23, .22);
  border-radius: 12px;
  background: #f3efe6;
  color: #171916;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .48) inset;
  backface-visibility: hidden;
}
.df180-showcase-card-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.df180-showcase-card-meta b {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #191b18;
  color: #fff;
  font-size: 11px;
}
.df180-showcase-card-meta small {
  overflow: hidden;
  color: #62665f;
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .08em;
  text-align: right;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.df180-showcase-card > strong {
  position: relative;
  z-index: 2;
  margin-top: 34px;
  font-family: var(--font-condensed), Impact, sans-serif;
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.03;
}
.df180-showcase-card.role-cover > strong {
  max-width: 8ch;
  margin-top: 10px;
  font-size: clamp(30px, 2.35vw, 38px);
  line-height: .98;
}
.df180-showcase-card.role-cover .df180-showcase-card-detail {
  display: none;
}
.df180-showcase-cover-brand {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  font-size: 9px;
  font-weight: 700;
}
.df180-showcase-card-detail {
  position: relative;
  z-index: 2;
  max-width: 16ch;
  margin-top: 13px;
  color: #52564f;
  font-size: clamp(8px, .68vw, 11px);
  line-height: 1.35;
}
.df180-showcase-card-image {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 44%;
  overflow: hidden;
}
.df180-showcase-card-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(243, 239, 230, .06), rgba(17, 19, 17, .08));
  content: "";
}
.df180-showcase-card-image img {
  object-fit: cover;
}
.df180-showcase-cover-swipe {
  position: absolute;
  z-index: 3;
  bottom: 17px;
  left: 16px;
  color: #343731;
  font-size: 9px;
  font-weight: 650;
}
.df180-showcase-end-panel {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 44%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 14px;
  background: #181b18;
  color: #f5f1e8;
}
.df180-showcase-end-panel svg {
  color: var(--df-coral);
}
.df180-showcase-end-panel small {
  max-width: 12ch;
  margin-top: auto;
  font-size: 9px;
  line-height: 1.35;
}
.df180-showcase-end-panel b {
  margin-top: 8px;
  color: var(--df-coral);
  font-size: 10px;
}
.df180-showcase-card > i {
  position: absolute;
  z-index: 2;
  top: 57%;
  left: 16px;
  width: 36px;
  height: 3px;
  background: var(--df-coral);
  transform: rotate(-4deg);
}
.df180-showcase-card.tone-dark,
.df180-showcase-card.tone-olive {
  border-color: rgba(255, 255, 255, .18);
  background: #1b1e1a;
  color: #f3f0e8;
}
.df180-showcase-card.tone-dark .df180-showcase-card-meta small,
.df180-showcase-card.tone-olive .df180-showcase-card-meta small,
.df180-showcase-card.tone-dark .df180-showcase-card-detail,
.df180-showcase-card.tone-olive .df180-showcase-card-detail {
  color: #b9bdb5;
}
.df180-showcase-card.is-end {
  border-color: rgba(25, 26, 23, .22);
  background: #f3efe6;
  color: #171916;
}
.df180-showcase-card.is-end .df180-showcase-card-meta small,
.df180-showcase-card.is-end .df180-showcase-card-detail {
  color: #62665f;
}
.df180-showcase-card.tone-coral {
  background: #e65740;
  color: #fff8ef;
}
.df180-showcase-card.tone-coral .df180-showcase-card-meta small,
.df180-showcase-card.tone-coral .df180-showcase-card-detail {
  color: rgba(255, 248, 239, .78);
}
.df180-showcase-card.tone-blue {
  background: #dce6e8;
}
.df180-showcase-slide.slide-1 {
  --panel-y: 4px;
  --panel-z: 18px;
  --panel-rx: -.35deg;
  --panel-ry: -31deg;
  --panel-rz: -.7deg;
  --float-y: -4px;
  --float-rz: .16deg;
}
.df180-showcase-slide.slide-2 {
  --panel-y: 4px;
  --panel-z: 10px;
  --panel-rx: .2deg;
  --panel-ry: -36deg;
  --panel-rz: .24deg;
  --float-y: -3px;
  --float-rz: -.13deg;
  margin-left: 10px;
}
.df180-showcase-slide.slide-3 {
  --panel-y: 1px;
  --panel-z: 2px;
  --panel-rx: -.2deg;
  --panel-ry: -37.5deg;
  --panel-rz: -.24deg;
  --float-y: -4px;
  --float-rz: .13deg;
}
.df180-showcase-slide.slide-4 {
  --panel-y: -3px;
  --panel-z: -6px;
  --panel-rx: .2deg;
  --panel-ry: -39deg;
  --panel-rz: .32deg;
  --float-y: -3px;
  --float-rz: -.12deg;
}
.df180-showcase-slide.slide-5 {
  --panel-y: -1px;
  --panel-z: -14px;
  --panel-rx: -.18deg;
  --panel-ry: -40.5deg;
  --panel-rz: -.18deg;
  --float-y: -5px;
  --float-rz: .14deg;
}
.df180-showcase-slide.slide-6 {
  --panel-y: 3px;
  --panel-z: -22px;
  --panel-rx: .16deg;
  --panel-ry: -42deg;
  --panel-rz: .26deg;
  --float-y: -3px;
  --float-rz: -.14deg;
}
.df180-showcase-slide.slide-7 {
  --panel-y: 5px;
  --panel-z: -30px;
  --panel-rx: -.2deg;
  --panel-ry: -43.5deg;
  --panel-rz: -.16deg;
  --float-y: -4px;
  --float-rz: .15deg;
}
@keyframes df180-showcase-stage {
  0%, .3% {
    opacity: 0;
  }
  .7%, 24.8% {
    opacity: 1;
  }
  27%, 100% {
    opacity: 0;
  }
}
@keyframes df180-showcase-panel-cycle {
  0%, 1.2% {
    opacity: 0;
    transform: perspective(var(--panel-perspective))
      translate3d(var(--entry-x), calc(var(--panel-y) - 26px), calc(var(--panel-z) - 230px))
      rotateX(calc(var(--panel-rx) - 5deg))
      rotateY(calc(var(--panel-ry) + 34deg))
      rotateZ(calc(var(--panel-rz) + 4.5deg))
      scale(.91);
    filter: blur(2px) drop-shadow(5px 10px 12px rgba(0, 0, 0, .12));
  }
  3.8% {
    opacity: .96;
    transform: perspective(var(--panel-perspective))
      translate3d(38px, calc(var(--panel-y) - 10px), calc(var(--panel-z) + 8px))
      rotateX(calc(var(--panel-rx) + 1.8deg))
      rotateY(calc(var(--panel-ry) + 6deg))
      rotateZ(calc(var(--panel-rz) + 1.1deg))
      scale(.985);
    filter: blur(0) drop-shadow(7px 15px 20px rgba(0, 0, 0, .24));
  }
  6.3% {
    opacity: 1;
    transform: perspective(var(--panel-perspective))
      translate3d(-14px, calc(var(--panel-y) - 4px), calc(var(--panel-z) + 34px))
      rotateX(calc(var(--panel-rx) - .8deg))
      rotateY(calc(var(--panel-ry) - 2deg))
      rotateZ(calc(var(--panel-rz) - .75deg))
      scale(1.018);
    filter: blur(0) drop-shadow(10px 22px 28px rgba(0, 0, 0, .32));
  }
  8.8% {
    transform: perspective(var(--panel-perspective))
      translate3d(6px, calc(var(--panel-y) + 2px), calc(var(--panel-z) - 8px))
      rotateX(calc(var(--panel-rx) + .35deg))
      rotateY(calc(var(--panel-ry) + 1.2deg))
      rotateZ(calc(var(--panel-rz) + .3deg))
      scale(.994);
    filter: blur(0) drop-shadow(8px 18px 24px rgba(0, 0, 0, .28));
  }
  11.5%, 16% {
    opacity: 1;
    transform: perspective(var(--panel-perspective))
      translate3d(0, var(--panel-y), var(--panel-z))
      rotateX(var(--panel-rx))
      rotateY(var(--panel-ry))
      rotateZ(var(--panel-rz))
      scale(1);
    filter: blur(0) drop-shadow(8px 18px 24px rgba(0, 0, 0, .28));
  }
  18.8% {
    opacity: 1;
    transform: perspective(var(--panel-perspective))
      translate3d(0, calc(var(--panel-y) + var(--float-y)), calc(var(--panel-z) + 7px))
      rotateX(calc(var(--panel-rx) + .35deg))
      rotateY(calc(var(--panel-ry) - .5deg))
      rotateZ(calc(var(--panel-rz) + var(--float-rz)))
      scale(1.003);
    filter: blur(0) drop-shadow(9px 20px 25px rgba(0, 0, 0, .3));
  }
  21.4% {
    opacity: 1;
    transform: perspective(var(--panel-perspective))
      translate3d(-8px, var(--panel-y), var(--panel-z))
      rotateX(var(--panel-rx))
      rotateY(calc(var(--panel-ry) + 1deg))
      rotateZ(var(--panel-rz))
      scale(1);
    filter: blur(0) drop-shadow(8px 18px 24px rgba(0, 0, 0, .28));
  }
  24.8%, 100% {
    opacity: 0;
    transform: perspective(var(--panel-perspective))
      translate3d(var(--exit-x), calc(var(--panel-y) - 16px), calc(var(--panel-z) - 190px))
      rotateX(calc(var(--panel-rx) + 4deg))
      rotateY(calc(var(--panel-ry) + 28deg))
      rotateZ(calc(var(--panel-rz) - 4deg))
      scale(.93);
    filter: blur(1.5px) drop-shadow(5px 10px 12px rgba(0, 0, 0, .12));
  }
}
.df180-footer {
  min-height: max(450px, 35vw);
  padding-bottom: 18vw;
}
.df180-footer-wordmark {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  fill: #f0f2ed;
  transform: none;
}
.df180-footer-wordmark text {
  font-family: var(--font-geist), sans-serif;
  font-size: 224px;
  font-weight: 760;
  letter-spacing: -12px;
}
.auth-backdrop {
  place-items: center;
  padding: 16px;
}
.auth-modal {
  width: min(384px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border-radius: 24px;
}
.auth-close {
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
}
.auth-brand {
  min-height: 36px;
}
.auth-brand .donefeed-logo-mark {
  width: 32px;
  height: 32px;
}
.auth-kicker {
  margin-top: 19px;
  color: #969b94;
  font-size: 25px;
  font-weight: 450;
  line-height: 1.08;
}
.auth-modal h2 {
  margin: 0 0 20px;
  padding-right: 0;
  font-size: 25px;
  font-weight: 680;
  line-height: 1.08;
}
.auth-modal > p {
  margin: -10px 0 20px;
  font-size: 11px;
}
.auth-provider-stack {
  gap: 10px;
}
.auth-provider-option {
  position: relative;
}
.auth-provider-button {
  min-height: 44px;
  display: flex;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 13px !important;
  font-weight: 560;
}
.auth-provider-button .provider-icon {
  position: static;
  width: 17px;
  height: 17px;
}
.auth-last-used {
  position: absolute;
  z-index: 2;
  top: -9px;
  right: -6px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 116, 91, .65);
  border-radius: 8px;
  background: #3a2924;
  color: #ffb3a2;
  font-size: 9px;
  line-height: 1;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
}
.auth-divider {
  margin: 16px 0;
}
.auth-email-form {
  gap: 10px;
}
.auth-email-option {
  display: grid;
}
.auth-field,
.auth-submit {
  height: 44px;
  border-radius: 9px;
}
.auth-email {
  margin-top: 0;
  grid-template-columns: 1fr;
  padding: 0 14px;
}
.auth-submit {
  background: var(--auth-coral);
  color: #fff;
  font-size: 13px;
  font-weight: 560;
  line-height: 1;
}
.auth-submit span {
  margin: 0;
}
.auth-terms {
  margin-top: 17px;
  padding-top: 0;
  border-top: 0;
  color: #7e837d;
  line-height: 1.45;
}
.auth-terms a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(126, 131, 125, .42);
  text-underline-offset: 2px;
}
.df180-start-copy > p {
  margin-top: 22px;
  color: #929791;
  font-size: 10px;
}
.df180-final-prompt {
  padding: 92px 32px 104px;
  background: var(--df-paper);
}
.df180-final-prompt-panel {
  width: min(1450px, 100%);
  min-height: 620px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 40px;
  margin: 0 auto;
  overflow: hidden;
  padding: 86px 32px 92px;
  border: 1px solid #292c29;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 116%, rgba(255, 90, 69, .2), transparent 39%),
    #111311;
  box-shadow: 0 34px 80px rgba(22, 24, 21, .13);
  color: #f7f7f4;
  text-align: center;
}
.df180-final-prompt-panel h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(56px, 5.6vw, 82px);
  font-weight: 690;
  letter-spacing: -.04em;
  line-height: .98;
  text-wrap: balance;
}
.df180-final-prompt-composer {
  width: min(760px, 100%);
}
.df180-closing-composer {
  text-align: left;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .38), 0 2px 0 rgba(255, 255, 255, .07) inset;
}
.df180-closing-composer textarea {
  min-height: 76px;
}
@media (max-width: 760px) {
  .df180-control {
    padding: 92px 0;
  }
  .df180-control-proof {
    width: calc(100% - 32px);
    min-height: 0;
    grid-template-columns: 1fr;
    margin-top: 34px;
    overflow: hidden;
    border-radius: 17px;
  }
  .df180-control-proof > article {
    padding: 22px;
  }
  .df180-control-origin,
  .df180-control-build {
    border-right: 0;
    border-bottom: 1px solid #cfcdc4;
  }
  .df180-control-origin figure {
    width: 150px;
  }
  .df180-control-origin figcaption {
    gap: 5px;
    padding: 0 6px;
    font-size: 7.5px;
  }
  .df180-control-origin blockquote {
    width: min(74%, 250px);
    align-self: flex-end;
    margin-top: -34px;
  }
  .df180-control-alternatives {
    margin-top: 18px;
  }
  .df180-control-build-stage {
    min-height: 505px;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 10px;
  }
  .df180-control-signal-rail > span {
    min-height: 68px;
    grid-template-columns: 20px 1fr;
    column-gap: 7px;
  }
  .df180-control-signal-rail > span i {
    width: 19px;
    height: 19px;
  }
  .df180-control-signal-rail > span small {
    display: none;
  }
  .df180-control-slide-stack {
    width: min(52vw, 190px);
  }
  .df180-control-slide-rail {
    gap: 5px;
    overflow: hidden;
  }
  .df180-control-slide-rail > span {
    width: 43px;
    flex: 0 0 43px;
  }
  .df180-control-review-panel {
    margin-top: 8px;
  }
  .df180-control-delivery {
    margin-top: 26px;
  }
  .df180-control-flow {
    display: none;
  }
  .df180-start {
    min-height: 760px;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 76px 16px 64px;
  }
  .df180-start-copy {
    width: 100%;
    display: grid;
    justify-items: center;
    text-align: center;
  }
  .df180-start-copy h2 {
    max-width: 360px;
    font-size: clamp(43px, 12vw, 50px);
    line-height: .98;
  }
  .df180-final-action {
    width: auto;
    min-width: 174px;
    margin-top: 28px;
    padding-inline: 24px;
    justify-content: space-between;
  }
  .df180-start-copy > p {
    align-items: center;
    margin-top: 25px;
    font-size: 9px;
  }
  .df180-start-runway {
    top: 0;
    width: 100%;
    min-height: 380px;
    margin: 0;
    perspective: 900px;
  }
  .df180-showcase-group {
    align-content: start;
  }
  .df180-showcase-group > small {
    top: 0;
    left: 50%;
    min-width: 0;
    font-size: 9px;
    transform: translateX(-50%);
  }
  .df180-showcase-group > small > span {
    min-height: 34px;
    padding-inline: 12px;
  }
  .df180-showcase-group > small::after {
    top: calc(50% - 1px);
    left: 50%;
    width: 128px;
    height: 30px;
  }
  .df180-showcase-group > div {
    width: max-content;
    margin-inline: auto;
    padding-top: 44px;
  }
  .df180-showcase-slide {
    --entry-x: 190px;
    --exit-x: -220px;
    width: 68px;
    height: 210px;
    margin-left: -15px;
    border-radius: 7px;
  }
  .df180-showcase-slide::before {
    inset: 1px -2px -3px 2px;
    transform: translate3d(0, 0, -4px);
  }
  .df180-showcase-slide::after {
    top: 3px;
    right: -4px;
    bottom: 2px;
    width: 4px;
  }
  .df180-showcase-slide[data-slide-role="cover"] {
    width: 104px;
    height: 190px;
  }
  .df180-showcase-card {
    padding: 10px 9px;
    border-radius: 8px;
  }
  .df180-showcase-card-meta b {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }
  .df180-showcase-card-meta small {
    display: none;
  }
  .df180-showcase-card > strong {
    margin-top: 21px;
    font-size: 10px;
  }
  .df180-showcase-card.role-cover > strong {
    margin-top: 7px;
    font-size: 13px;
  }
  .df180-showcase-cover-brand {
    margin-top: 11px;
    font-size: 6px;
  }
  .df180-showcase-cover-swipe {
    bottom: 8px;
    left: 9px;
    font-size: 6px;
  }
  .df180-showcase-end-panel {
    padding: 9px 7px;
  }
  .df180-showcase-end-panel svg {
    width: 11px;
    height: 11px;
  }
  .df180-showcase-end-panel small {
    font-size: 6px;
  }
  .df180-showcase-end-panel b {
    margin-top: 4px;
    font-size: 6px;
  }
  .df180-showcase-card-detail {
    margin-top: 8px;
    font-size: 7px;
  }
  .df180-showcase-card > i {
    left: 9px;
    width: 23px;
    height: 2px;
  }
  .df180-showcase-slide.slide-1 {
    --panel-y: 3px;
    --panel-z: 20px;
    --panel-rx: -.6deg;
    --panel-ry: -11deg;
    --panel-rz: -1.1deg;
  }
  .df180-showcase-slide.slide-2 {
    --panel-y: 3px;
    --panel-z: 10px;
    --panel-rx: .25deg;
    --panel-ry: -13deg;
    --panel-rz: .35deg;
    margin-left: -8px;
  }
  .df180-showcase-slide.slide-3 {
    --panel-y: 1px;
    --panel-z: 0px;
    --panel-rx: -.3deg;
    --panel-ry: -14deg;
    --panel-rz: -.35deg;
  }
  .df180-showcase-slide.slide-4 {
    --panel-y: -2px;
    --panel-z: -10px;
    --panel-rx: .35deg;
    --panel-ry: -15deg;
    --panel-rz: .45deg;
  }
  .df180-showcase-slide.slide-5 {
    --panel-y: 0px;
    --panel-z: -20px;
    --panel-rx: -.25deg;
    --panel-ry: -16deg;
    --panel-rz: -.25deg;
  }
  .df180-showcase-slide.slide-6 {
    --panel-y: 2px;
    --panel-z: -30px;
    --panel-rx: .2deg;
    --panel-ry: -18deg;
    --panel-rz: .4deg;
  }
  .df180-showcase-slide.slide-7 {
    --panel-y: 4px;
    --panel-z: -40px;
    --panel-rx: -.35deg;
    --panel-ry: -20deg;
    --panel-rz: -.2deg;
  }
  .df180-final-prompt {
    padding: 56px 16px 72px;
  }
  .df180-final-prompt-panel {
    min-height: 520px;
    gap: 32px;
    padding: 62px 16px 58px;
    border-radius: 18px;
  }
  .df180-final-prompt-panel h2 {
    max-width: 330px;
    font-size: clamp(42px, 12vw, 48px);
  }
  .df180-final-prompt-composer {
    width: 100%;
  }
  .df180-closing-composer textarea {
    min-height: 92px;
  }
  .df180-footer {
    min-height: 520px;
    padding-bottom: 18vw;
  }
  .auth-backdrop {
    align-items: center;
    padding: 16px;
  }
  .auth-modal {
    width: min(384px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 24px;
    border-radius: 24px;
  }
  .auth-kicker {
    margin-top: 19px;
    font-size: 24px;
  }
  .auth-modal h2 {
    font-size: 24px;
  }
}
.df180-template-picture {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
}
.df180-template-picture > img,
.df180-showcase-card-image > picture,
.df180-showcase-card-image > picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.df180-template-card.layout-manifesto > .df180-template-picture > img {
  opacity: .58;
  filter: saturate(.72);
}
.df180-template-card.layout-report > .df180-template-picture > img {
  object-position: center bottom;
}
.df180-root[data-hero-motion="idle"] .df180-conveyor-card > .df180-template-card,
.df180-root[data-hero-motion="idle"] .df180-conveyor-card img {
  animation: none;
  will-change: auto;
}
.df180-demo-placeholder {
  width: min(1360px, calc(100% - 80px));
  min-height: clamp(540px, 75svh, 760px);
  margin: 34px auto 0;
}
.df180-demo,
.df180-discover,
.df180-control,
.df180-start,
.df180-final-prompt,
.df180-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
@media (max-width: 760px) {
  .df180-root[data-hero-motion="idle"] .df180-mobile-hero-gallery {
    display: block;
  }
  .df180-root[data-hero-motion="idle"] .df180-mobile-hero-card.is-poster {
    margin-top: 48px;
  }
}
html[data-theme] .dashboard-root,
html[data-theme] .dashboard-session-pending {
  background: var(--df-surface-canvas);
  color: var(--df-text-primary);
  font-family: var(--font-geist-sans), Arial, sans-serif;
  transition: background-color 180ms ease, color 180ms ease;
}
html[data-theme] .dashboard-session-pending {
  background: radial-gradient(circle at 50% 7%, var(--df-action-primary), transparent 28rem),
    var(--df-surface-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 50% 7%, color-mix(in srgb, var(--df-action-primary) 7%, transparent), transparent 28rem),
    var(--df-surface-canvas);
  }
}
html[data-theme]:is([data-postroom-session="likely"], [data-postroom-session="confirmed"])
  .dashboard-session-pending:not(.has-error) > * {
  visibility: hidden;
}
html[data-theme] .dashboard-topbar {
  border-color: var(--df-border-subtle);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-border-subtle) 78%, transparent);
  }
  background: var(--df-surface-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-surface-canvas) 90%, transparent);
  }
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-brand {
  color: var(--df-text-primary);
}
html[data-theme] .donefeed-logo-mark {
  border-color: var(--df-palette-ink);
  background: var(--df-palette-ink);
}
html[data-theme] .session-pending-status,
html[data-theme] .session-pending-stage > span {
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-header-action {
  background: transparent;
  color: var(--df-text-secondary);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-quiet-control);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .dashboard-header-action:hover {
    background: var(--df-surface-subtle);
    color: var(--df-text-primary);
  }
}
html[data-theme] .dashboard-avatar,
html[data-theme] .session-pending-avatar {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-hero h1,
html[data-theme] .projects-header h2,
html[data-theme] .template-section-heading h2,
html[data-theme] .trash-empty h2 {
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-hero h1 {
  font-size: var(--df-type-display-size);
  font-weight: var(--df-type-weight-display);
}
html[data-theme] .topic-desk-collapse strong {
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .dashboard-hero > p {
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-prompt,
html[data-theme] .session-pending-prompt {
  border-color: var(--df-border-on-dark);
  background: var(--df-surface-composer);
  box-shadow: var(--df-shadow-raised);
  color: var(--df-text-on-dark);
}
html[data-theme] .dashboard-prompt:focus-within {
  border-color: var(--df-focus-ring);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-focus-ring) 72%, var(--df-border-on-dark));
  }
  box-shadow: var(--df-shadow-raised),
    0 0 0 3px var(--df-focus-ring);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: var(--df-shadow-raised),
    0 0 0 3px color-mix(in srgb, var(--df-focus-ring) 22%, transparent);
  }
}
html[data-theme] .dashboard-prompt textarea {
  color: var(--df-text-on-dark);
}
html[data-theme] .dashboard-prompt textarea::placeholder {
  color: var(--df-text-on-dark-secondary);
}
html[data-theme] .reference-attach,
html[data-theme] .slide-count-control .menu-select-trigger,
html[data-theme] .layout-control .menu-select-trigger {
  border-color: var(--df-border-on-dark);
  background: var(--df-surface-composer-subtle);
  color: var(--df-text-on-dark-secondary);
}
html[data-theme] .slide-count-control .menu-select-trigger,
html[data-theme] .layout-control .menu-select-trigger {
  color: var(--df-text-on-dark);
}
html[data-theme] .reference-attach[data-category] > svg {
  color: var(--df-category-on-media);
}
html[data-theme] .slide-count-control .menu-select-trigger > svg {
  color: var(--df-category-structure-on-media);
}
html[data-theme] .layout-control .menu-select-trigger > svg {
  color: var(--df-category-ai-on-media);
}
html[data-theme] .reference-attach.active {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 48%, var(--df-border-on-dark));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 12%, var(--df-surface-composer-subtle));
  }
  color: var(--df-text-on-dark);
}
html[data-theme] .prompt-attachment-grid article > span,
html[data-theme] .prompt-attachment-grid article > button {
  border-color: var(--df-media-overlay-border);
  background: var(--df-media-overlay);
  color: var(--df-media-overlay-text);
  box-shadow: var(--df-media-overlay-shadow);
  backdrop-filter: blur(10px);
}
html[data-theme] .reference-link-icon {
  background: var(--df-category-media-on-media);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-category-media-on-media) 14%, var(--df-surface-composer-subtle));
  }
  color: var(--df-category-media-on-media);
}
html[data-theme] .reference-preview a {
  color: var(--df-category-media-on-media);
}
html[data-theme] .prompt-shortcut {
  color: var(--df-text-tertiary);
}
html[data-theme] .prompt-submit {
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .prompt-submit:not(:disabled):hover {
    background: var(--df-action-primary-fill-hover);
  }
}
html[data-theme] .generation-progress i {
  background: var(--df-action-primary);
}
html[data-theme] .generation-progress span {
  color: var(--df-text-on-dark-secondary);
}
html[data-theme] .prompt-examples > span {
  color: var(--df-text-tertiary);
}
html[data-theme] .prompt-examples button {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-surface-raised) 62%, transparent);
  }
  color: var(--df-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .prompt-examples button:hover {
    border-color: var(--df-border-strong);
    color: var(--df-text-primary);
  }
}
html[data-theme] .dashboard-template-picker {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-surface-raised) 92%, transparent);
  }
  color: var(--df-text-primary);
  box-shadow: none;
}
html[data-theme] .template-picker-heading > span {
  color: var(--df-text-primary);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .template-picker-heading > small,
html[data-theme] .dashboard-template-card small {
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-template-card {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-template-card.active {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 5%, var(--df-surface-raised));
  }
  color: var(--df-text-primary);
  box-shadow: 0 0 0 1px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-action-primary) 16%, transparent);
  }
}
html[data-theme] .dashboard-template-card > svg {
  color: var(--df-action-primary);
}
html[data-theme] .dashboard-error {
  color: var(--df-status-danger);
}
html[data-theme] .dashboard-capacity-notice,
html[data-theme] .dashboard-low-capacity {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-capacity-notice strong,
html[data-theme] .dashboard-low-capacity strong {
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-capacity-notice small,
html[data-theme] .dashboard-low-capacity small {
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-capacity-notice a,
html[data-theme] .dashboard-low-capacity a {
  background: var(--df-text-primary);
  color: var(--df-surface-canvas);
}
html[data-theme] .dashboard-capacity-notice button {
  color: var(--df-text-secondary);
}
html[data-theme] .capacity-progress {
  background: var(--df-surface-subtle);
}
html[data-theme] .capacity-progress i {
  background: var(--df-action-primary);
}
html[data-theme] .topic-desk {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  box-shadow: none;
  color: var(--df-text-primary);
}
html[data-theme] .topic-desk-collapse > span {
  color: var(--df-category-color);
}
html[data-theme] .topic-desk-collapse > strong,
html[data-theme] .topic-headline {
  color: var(--df-text-primary);
}
html[data-theme] .topic-desk-collapse > svg,
html[data-theme] .topic-desk-meta,
html[data-theme] .topic-desk-meta span,
html[data-theme] .topic-card-signal small,
html[data-theme] .topic-origin small {
  color: var(--df-text-secondary);
}
html[data-theme] .topic-desk-heading form {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
}
html[data-theme] .topic-desk-heading input {
  color: var(--df-text-primary);
}
html[data-theme] .topic-desk-heading form button {
  background: var(--df-text-primary);
  color: var(--df-surface-canvas);
}
html[data-theme] .topic-card {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .topic-card:hover {
    border-color: var(--df-border-strong);
    background: var(--df-surface-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--df-surface-subtle) 72%, var(--df-surface-raised));
    }
  }
  html[data-theme] .topic-headline:hover {
    color: var(--df-category-color);
  }
}
html[data-theme] .topic-card-signal > span {
  background: var(--df-category-surface);
  color: var(--df-category-color);
}
html[data-theme] .topic-card-signal > span.is-trending {
  background: var(--df-status-warning-surface);
  color: var(--df-status-warning);
}
html[data-theme] .topic-origin span {
  border-color: var(--df-border-subtle);
  color: var(--df-text-secondary);
}
html[data-theme] .topic-card-actions button,
html[data-theme] .topic-load-more {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-secondary);
}
html[data-theme] .topic-card-actions button.active {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 36%, var(--df-border-subtle));
  }
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .topic-card-actions .topic-create {
  border-color: var(--df-category-color);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-category-color) 35%, var(--df-border-subtle));
  }
  background: var(--df-category-surface);
  color: var(--df-category-color);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .topic-card-actions .topic-create:hover {
    border-color: var(--df-category-color);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--df-category-color) 48%, var(--df-border-subtle));
    }
    background: var(--df-category-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--df-category-surface) 74%, var(--df-surface-raised));
    }
    color: var(--df-category-color);
  }
}
html[data-theme] .topic-card-skeleton i,
html[data-theme] .topic-card-skeleton span {
  background: linear-gradient(
    90deg,
    var(--df-surface-subtle),
    var(--df-border-subtle),
    var(--df-surface-subtle)
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    90deg,
    var(--df-surface-subtle),
    color-mix(in srgb, var(--df-border-subtle) 70%, var(--df-surface-raised)),
    var(--df-surface-subtle)
  );
  }
  background-size: 200% 100%;
}
html[data-theme] .projects-section {
  border-color: var(--df-border-subtle);
}
html[data-theme] .projects-header span,
html[data-theme] .template-section-heading p {
  color: var(--df-text-secondary);
}
html[data-theme] .template-section-heading h2 {
  color: var(--df-text-primary);
}
html[data-theme] .workspace-content-switcher {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
  box-shadow: 0 1px 2px var(--df-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--df-text-primary) 7%, transparent);
  }
}
html[data-theme] .workspace-content-switcher.searching:focus-within {
  border-color: var(--df-border-strong);
  box-shadow: inset 0 0 0 1px var(--df-text-primary),
    0 0 0 3px var(--df-text-primary),
    var(--df-shadow-raised);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--df-text-primary) 9%, transparent),
    0 0 0 3px color-mix(in srgb, var(--df-text-primary) 5%, transparent),
    var(--df-shadow-raised);
  }
}
html[data-theme] .workspace-search-control,
html[data-theme] .workspace-search-trigger,
html[data-theme] .workspace-search-control > button:not(.workspace-search-trigger) {
  color: var(--df-text-secondary);
}
html[data-theme] .workspace-search-control input {
  color: var(--df-text-primary);
}
html[data-theme] .projects-header .workspace-search-label {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  box-shadow: 0 1px 2px var(--df-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--df-text-primary) 6%, transparent);
  }
}
html[data-theme] .workspace-search-control input::placeholder {
  color: var(--df-text-tertiary);
}
html[data-theme] .workspace-search-control > button:not(.workspace-search-trigger):hover {
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-root .workspace-search-control input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
html[data-theme] .dashboard-root .workspace-search-close:focus-visible {
  outline: 0 !important;
  background: var(--df-surface-raised);
  box-shadow: inset 0 0 0 1px var(--df-focus-ring);
}
html[data-theme] .workspace-view-switch button {
  color: var(--df-text-secondary);
}
html[data-theme] .workspace-view-switch button:not(.active) small {
  background: var(--df-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-text-primary) 9%, var(--df-surface-subtle));
  }
  color: var(--df-text-secondary);
}
html[data-theme] .workspace-view-switch button.active {
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  box-shadow: 0 0 0 1px var(--df-border-subtle);
}
html[data-theme] .workspace-view-switch button.active small {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 14%, transparent);
  }
  color: var(--df-action-primary);
}
html[data-theme] .workspace-search-empty {
  border-color: var(--df-border-subtle);
  color: var(--df-text-tertiary);
}
html[data-theme] .workspace-search-empty strong {
  color: var(--df-text-primary);
}
html[data-theme] .workspace-search-empty small {
  color: var(--df-text-secondary);
}
html[data-theme] .projects-header > button,
html[data-theme] .projects-header-actions > button {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-secondary);
}
html[data-theme] .projects-header-actions > button.active {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 38%, var(--df-border-subtle));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 9%, var(--df-surface-raised));
  }
  color: var(--df-action-primary);
}
html[data-theme] .projects-header-actions > button.primary {
  border-color: var(--df-action-primary-border);
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .workspace-theme-filter .menu-select-trigger {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  box-shadow: 0 1px 2px var(--df-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--df-text-primary) 7%, transparent);
  }
}
html[data-theme] .workspace-theme-filter .menu-select-trigger:hover,
html[data-theme] .workspace-theme-filter .menu-select-trigger[aria-expanded="true"],
html[data-theme] .workspace-theme-filter.active .menu-select-trigger {
  border-color: var(--df-border-strong);
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .workspace-theme-filter.active .menu-select-icon {
  color: var(--df-category-structure);
}
html[data-theme] :is(
  .workspace-search-trigger,
  .workspace-view-switch button,
  .workspace-theme-filter .menu-select-trigger,
  .projects-header-actions > button
) {
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-quiet-control);
  line-height: var(--df-type-line-single);
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme] .workspace-theme-filter .menu-select-value {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
html[data-theme] .project-card-shell.selected::after {
  border-color: var(--df-action-primary);
  box-shadow: 0 0 0 2px var(--df-surface-canvas),
    0 0 0 5px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--df-surface-canvas) 78%, transparent),
    0 0 0 5px color-mix(in srgb, var(--df-action-primary) 18%, transparent);
  }
}
html[data-theme] .project-selection-check {
  border-color: var(--df-media-overlay-border);
  background: var(--df-media-overlay);
  color: transparent;
  box-shadow: var(--df-media-overlay-shadow);
}
html[data-theme] .project-card-shell.selected .project-selection-check {
  border-color: var(--df-action-primary-border);
  background: var(--df-action-primary);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .project-progress-chip {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 42%, var(--df-media-overlay-border));
  }
  background: var(--df-media-overlay);
  color: var(--df-action-primary);
  box-shadow: var(--df-media-overlay-shadow);
}
html[data-theme] .project-progress-chip.partial {
  border-color: var(--df-status-success-on-media);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success-on-media) 38%, var(--df-media-overlay-border));
  }
  color: var(--df-status-success-on-media);
}
html[data-theme] .project-progress-chip.error {
  border-color: var(--df-status-danger-on-media);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-danger-on-media) 40%, var(--df-media-overlay-border));
  }
  color: var(--df-status-danger-on-media);
}
html[data-theme] .project-job-controls button {
  border-color: var(--df-media-overlay-border);
  background: var(--df-media-overlay);
  color: var(--df-media-overlay-text-secondary);
  box-shadow: var(--df-media-overlay-shadow);
}
html[data-theme] .project-job-controls button.retry[data-category="ai"] {
  border-color: var(--df-category-on-media);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-category-on-media) 38%, var(--df-media-overlay-border));
  }
  color: var(--df-category-on-media);
}
html[data-theme] .project-card-recovery,
html[data-theme] .trash-project-overlay {
  border: 1px solid var(--df-media-overlay-border);
  background: var(--df-media-overlay-strong);
  color: var(--df-media-overlay-text);
  box-shadow: var(--df-media-overlay-shadow);
  backdrop-filter: blur(12px);
}
html[data-theme] .trash-project-overlay {
  padding: 9px 10px;
  border-radius: 9px;
}
html[data-theme] :is(.project-card-recovery, .trash-project-overlay) strong {
  color: var(--df-media-overlay-text);
}
html[data-theme] :is(.project-card-recovery, .trash-project-overlay) small {
  color: var(--df-media-overlay-text-secondary);
}
html[data-theme] .project-card-recovery[data-status="generating"] small {
  color: var(--df-category-ai-on-media);
}
html[data-theme] .project-card-recovery[data-status="error"] small {
  color: var(--df-status-danger-on-media);
}
html[data-theme] .template-library-preview-badge,
html[data-theme] .base-template-badge,
html[data-theme] .trash-template-deadline {
  border-color: var(--df-media-overlay-border);
  background: var(--df-media-overlay);
  color: var(--df-media-overlay-text);
  box-shadow: var(--df-media-overlay-shadow);
  backdrop-filter: blur(10px);
}
html[data-theme] .base-template-badge {
  color: var(--df-category-structure-on-media);
}
html[data-theme] .trash-template-deadline {
  color: var(--df-status-warning-on-media);
}
html[data-theme] .new-project-card,
html[data-theme] .new-template-card,
html[data-theme] .trash-empty,
html[data-theme] .template-library-card,
html[data-theme] .base-template-card {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .template-section-heading span {
  color: var(--df-text-tertiary);
}
html[data-theme] .base-template-copy strong,
html[data-theme] .template-library-card-copy > :first-child,
html[data-theme] .new-template-card strong {
  color: var(--df-text-primary);
}
html[data-theme] .base-template-copy small,
html[data-theme] .template-library-card-copy small,
html[data-theme] .new-template-card small,
html[data-theme] .template-library-loading {
  color: var(--df-text-secondary);
}
html[data-theme] .base-template-copy button {
  border-color: var(--template-accent, var(--df-category-structure));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--template-accent, var(--df-category-structure)) 24%, var(--df-border-subtle));
  }
  background: var(--template-accent, var(--df-category-structure));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--template-accent, var(--df-category-structure)) 8%, var(--df-surface-subtle));
  }
  color: var(--template-accent, var(--df-category-structure));
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--template-accent, var(--df-category-structure)) 50%, var(--df-text-primary));
  }
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .base-template-copy button:hover:not(:disabled) {
    border-color: var(--template-accent, var(--df-category-structure));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--template-accent, var(--df-category-structure)) 42%, var(--df-border-strong));
    }
    background: var(--template-accent, var(--df-category-structure));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--template-accent, var(--df-category-structure)) 13%, var(--df-surface-raised));
    }
  }
}
html[data-theme] .template-library-delete {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
}
html[data-theme] .new-template-card > span {
  border-color: var(--df-category-structure);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-category-structure) 26%, var(--df-border-subtle));
  }
  background: var(--df-category-structure-surface);
  color: var(--df-category-structure);
}
html[data-theme] .trash-empty {
  color: var(--df-text-secondary);
}
html[data-theme] .project-bulk-bar,
html[data-theme] .project-trash-toast {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-overlay);
  color: var(--df-text-primary);
  box-shadow: var(--df-shadow-overlay);
}
html[data-theme] .project-bulk-bar > span {
  color: var(--df-text-secondary);
}
html[data-theme] .project-bulk-bar > span strong {
  color: var(--df-text-primary);
}
html[data-theme] .project-bulk-bar button {
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
}
html[data-theme] .project-bulk-bar button.danger {
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] .project-trash-toast button {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, transparent);
  }
  color: var(--df-action-primary);
}
html[data-theme] .project-trash-toast button.close {
  background: transparent;
  color: var(--df-text-secondary);
}
html[data-theme] .background-generation-status,
html[data-theme] .global-generation-toast {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-overlay);
  color: var(--df-text-secondary);
  box-shadow: var(--df-shadow-overlay);
}
html[data-theme] .background-generation-status > svg,
html[data-theme] .global-generation-toast:not(.error) > span {
  color: var(--df-category-ai);
}
html[data-theme] .global-generation-toast:not(.error) > span {
  background: var(--df-category-ai-surface);
}
html[data-theme] .global-generation-toast.error > span {
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] :is(.background-generation-status, .global-generation-toast) strong {
  color: var(--df-text-primary);
}
html[data-theme] .background-generation-status span,
html[data-theme] .global-generation-toast small {
  color: var(--df-text-secondary);
}
html[data-theme] .global-generation-toast button {
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-menu-surface {
  --menu-surface: var(--df-surface-overlay);
  --menu-border: var(--df-border-subtle);
  --menu-shadow: var(--df-shadow-overlay);
  border-color: var(--menu-border);
  background: var(--menu-surface);
  color: var(--df-text-primary);
  box-shadow: var(--menu-shadow);
  backdrop-filter: none;
}
html[data-theme] .dashboard-account-menu {
  width: 250px;
}
html[data-theme] .dashboard-account-summary {
  border-color: var(--df-border-subtle);
}
html[data-theme] .dashboard-account-summary strong {
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-account-summary span {
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-menu-surface .dashboard-menu-item {
  min-height: var(--menu-item-height);
  padding-inline: 10px;
  border: 0;
  border-radius: var(--menu-item-radius);
  background: transparent;
  color: var(--df-text-primary);
  font-size: var(--menu-item-font);
  text-decoration: none;
}
html[data-theme] .dashboard-menu-surface .menu-select-group + .menu-select-group {
  border-color: var(--df-border-subtle);
}
html[data-theme] .dashboard-menu-surface .menu-select-group-label {
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-menu-surface .menu-select-option > svg {
  color: var(--df-action-primary);
}
html[data-theme] .dashboard-menu-surface.menu-select-popover {
  scrollbar-color: var(--df-border-strong) transparent;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .dashboard-menu-surface .dashboard-menu-item:hover {
    background: var(--df-surface-subtle);
    color: var(--df-text-primary);
  }
}
html[data-theme] .dashboard-menu-surface .dashboard-menu-item:focus-visible,
html[data-theme] .dashboard-menu-surface .dashboard-menu-item[aria-selected="true"] {
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-theme-menu {
  display: grid;
  padding: 6px 0;
  gap: 4px;
  border-block: 1px solid var(--df-border-subtle);
}
html[data-theme] .dashboard-theme-menu-label {
  padding: 4px 10px 2px;
  color: var(--df-text-secondary) !important;
  font-size: var(--df-type-meta-size) !important;
  font-weight: var(--df-type-weight-semibold);
  letter-spacing: var(--df-type-tracking-eyebrow);
  text-transform: uppercase;
}
html[data-theme] .dashboard-theme-options {
  display: grid;
  padding: 0 !important;
  gap: 2px !important;
  border: 0 !important;
}
html[data-theme] .dashboard-theme-options > button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
}
html[data-theme] .dashboard-theme-options > button[aria-checked="true"] {
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-theme-options > button[aria-checked="true"] > svg:first-child,
html[data-theme] .dashboard-theme-check {
  color: var(--df-action-primary);
}
html[data-theme] .dashboard-theme-options > button > span {
  color: currentColor;
  font-size: inherit;
}
html[data-theme] .session-pending-stage > p {
  color: var(--df-text-secondary);
}
html[data-theme] .session-recovery-actions button {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .session-recovery-actions button:last-child {
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .session-pending-projects i {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
}
html[data-theme] .dashboard-root :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--df-focus-ring) !important;
  outline-offset: 2px;
}
html[data-theme] .dashboard-root .dashboard-prompt textarea:focus-visible {
  outline: 0 !important;
}
@media (max-width: 700px) {
  html[data-theme] .dashboard-topbar {
    background: var(--df-surface-canvas);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--df-surface-canvas) 94%, transparent);
    }
  }
  html[data-theme] .dashboard-hero h1 {
    color: var(--df-text-primary);
  }
  html[data-theme] .dashboard-template-picker,
  html[data-theme] .topic-desk {
    border-radius: 14px;
  }
  html[data-theme] .project-progress-chip.error {
    top: 48px;
  }
  html[data-theme] .dashboard-theme-menu-label {
    min-height: auto !important;
  }
}
html[data-theme] .dashboard-hero {
  min-height: clamp(620px, calc(85dvh - 64px), 820px);
  padding: 86px 20px 76px;
  justify-content: center;
}
html[data-theme] .dashboard-hero h1 {
  margin-bottom: 30px;
}
html[data-theme] .dashboard-hero > p {
  margin-bottom: 24px;
}
html[data-theme] .dashboard-creation-module {
  position: relative;
  width: min(672px, 100%);
  text-align: left;
}
html[data-theme] .dashboard-prompt.dashboard-creation-composer {
  z-index: 3;
  width: 100%;
  min-height: 0;
  overflow: visible;
  border-color: var(--df-border-subtle);
  border-radius: 24px;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  box-shadow: 0 2px 4px var(--df-palette-ink),
    var(--df-shadow-raised);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 2px 4px color-mix(in srgb, var(--df-palette-ink) 7%, transparent),
    var(--df-shadow-raised);
  }
  transform: none;
}
html[data-theme] .dashboard-prompt.dashboard-creation-composer:has(textarea:focus-visible) {
  z-index: 4;
  border-color: var(--df-border-subtle);
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--df-focus-ring),
    0 0 0 4px var(--df-focus-ring),
    0 16px 42px var(--df-focus-ring);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--df-focus-ring) 76%, var(--df-border-strong)),
    0 0 0 4px color-mix(in srgb, var(--df-focus-ring) 14%, transparent),
    0 16px 42px color-mix(in srgb, var(--df-focus-ring) 10%, transparent);
  }
  transform: none;
}
html[data-theme] .dashboard-prompt.dashboard-creation-composer textarea {
  display: block;
  width: 100%;
  height: auto;
  min-height: 48px;
  max-height: 176px;
  padding: 20px 20px 6px;
  overflow-y: hidden;
  color: var(--df-text-primary);
  font-size: var(--df-type-field-size);
  line-height: var(--df-type-line-compact);
}
html[data-theme] .dashboard-prompt.dashboard-creation-composer textarea::placeholder {
  color: var(--df-text-tertiary);
}
html[data-theme] .dashboard-attachment-strip {
  display: flex;
  width: 100%;
  padding: 12px 12px 0;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--df-border-strong) transparent;
  scrollbar-width: thin;
  animation: dashboard-attachment-strip-in 220ms cubic-bezier(.2, .78, .2, 1) both;
}
html[data-theme] .dashboard-attachment-strip article {
  position: relative;
  display: flex;
  width: 174px;
  height: 56px;
  flex: 0 0 174px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 12px;
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-attachment-strip article.is-uploading {
  opacity: .72;
}
html[data-theme] .dashboard-attachment-open {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 5px 30px 5px 5px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
html[data-theme] .dashboard-attachment-image {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--df-surface-raised);
}
html[data-theme] .dashboard-attachment-image img {
  object-fit: cover;
}
html[data-theme] .dashboard-attachment-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 2px;
}
html[data-theme] article.is-uploading .dashboard-attachment-copy {
  padding: 5px 30px 5px 0;
}
html[data-theme] article.is-uploading .dashboard-attachment-image {
  margin-left: 5px;
  margin-right: 8px;
}
html[data-theme] .dashboard-attachment-copy strong {
  overflow: hidden;
  color: var(--df-text-primary);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-regular);
  line-height: var(--df-type-line-single);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .dashboard-attachment-copy small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
}
html[data-theme] .dashboard-attachment-remove {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--df-surface-overlay);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-surface-overlay) 86%, transparent);
  }
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-attachment-remove:hover {
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-composer-dropzone {
  position: absolute;
  z-index: 8;
  inset: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px dashed color-mix(in srgb, var(--df-action-primary) 58%, var(--df-border-strong));
  }
  border-radius: 18px;
  background: var(--df-surface-overlay);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-surface-overlay) 91%, transparent);
  }
  color: var(--df-action-primary);
  box-shadow: var(--df-shadow-overlay);
  pointer-events: none;
  backdrop-filter: blur(12px);
}
html[data-theme] .dashboard-composer-dropzone strong {
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
}
@keyframes dashboard-attachment-strip-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
html[data-theme] .dashboard-creation-composer .prompt-footer {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 52px;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html[data-theme] .dashboard-composer-tools,
html[data-theme] .dashboard-composer-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  overflow: visible;
}
html[data-theme] .dashboard-composer-actions {
  margin-left: auto;
  gap: 0;
}
html[data-theme] .dashboard-composer-icon-button,
html[data-theme] .dashboard-composer-button,
html[data-theme] .dashboard-theme-trigger {
  display: inline-flex;
  height: 32px;
  min-height: 32px;
  padding: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--df-text-primary);
  font-size: var(--df-type-composer-action-size);
  line-height: var(--df-type-line-single);
  transition: background-color 150ms ease, color 150ms ease;
}
html[data-theme] .dashboard-composer-icon-button {
  width: 32px;
}
html[data-theme] .dashboard-composer-button {
  padding-inline: 8px;
  gap: 8px;
  font-weight: var(--df-type-weight-regular);
}
html[data-theme] .dashboard-theme-trigger {
  padding-inline: 8px;
  gap: 4px;
  font-weight: var(--df-type-weight-regular);
}
html[data-theme] .dashboard-theme-trigger .dashboard-compact-deck + .dashboard-theme-trigger-label {
  margin-left: 2px;
}
html[data-theme] .dashboard-composer-icon-button > svg,
html[data-theme] .dashboard-composer-button > svg {
  width: 16px;
  height: 16px;
}
html[data-theme] .dashboard-creation-composer .reference-attach {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-creation-composer .reference-attach[data-category] > svg {
  color: currentColor;
}
html[data-theme] :is(.dashboard-composer-icon-button, .dashboard-composer-button, .dashboard-theme-trigger):hover,
html[data-theme] :is(.dashboard-composer-icon-button, .dashboard-composer-button).active,
html[data-theme] .dashboard-creation-composer .reference-attach:is(:hover, .active) {
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-ideas-trigger.active,
html[data-theme] .dashboard-composer-icon-button.active {
  color: var(--df-category-ai);
}
html[data-theme] .dashboard-compact-deck {
  position: relative;
  display: block;
  width: 38px;
  height: 28px;
  flex: 0 0 38px;
}
html[data-theme] .dashboard-compact-deck i {
  position: absolute;
  top: 1px;
  display: block;
  width: 22px;
  height: 27px;
  overflow: hidden;
  border: 1px solid var(--df-border-strong);
  border-radius: 4px;
  background: var(--df-surface-subtle);
  transition: border-color 150ms ease;
  contain: strict;
}
html[data-theme] .dashboard-compact-deck i[data-slide="0"] {
  z-index: 3;
  left: 0;
}
html[data-theme] .dashboard-compact-deck i[data-slide="1"] {
  z-index: 2;
  left: 7px;
}
html[data-theme] .dashboard-compact-deck i[data-slide="2"] {
  z-index: 1;
  left: 14px;
}
html[data-theme] .dashboard-theme-trigger:is(:hover, .active) .dashboard-compact-deck i[data-slide="0"] {
  border-color: var(--df-action-primary);
}
html[data-theme] .dashboard-theme-thumbnail {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
html[data-theme] .dashboard-theme-thumbnail-layer {
  position: absolute;
  display: block;
  overflow: hidden;
  transform-origin: center;
}
html[data-theme] .dashboard-theme-thumbnail-layer.is-image {
  background-repeat: no-repeat;
}
html[data-theme] .dashboard-theme-thumbnail-layer.is-text {
  min-height: 1px;
  border-top: max(1px, .7cqw) solid currentColor;
  background: transparent;
  box-shadow: 0 max(2px, 2.6cqw) 0 currentColor, 0 max(4px, 5.2cqw) 0 currentColor;
}
html[data-theme] .dashboard-slide-count {
  flex: 0 0 auto;
}
html[data-theme] .dashboard-slide-count .menu-select-trigger {
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
  gap: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--df-text-primary);
  font-size: var(--df-type-composer-action-size);
  font-weight: var(--df-type-weight-regular);
}
html[data-theme] .dashboard-slide-count .menu-select-icon {
  margin-right: 8px;
}
html[data-theme] .dashboard-slide-count .menu-select-chevron {
  margin-left: 4px;
}
html[data-theme] .dashboard-slide-count .menu-select-trigger:hover,
html[data-theme] .dashboard-slide-count .menu-select-trigger[aria-expanded="true"] {
  background: var(--df-surface-subtle);
}
html[data-theme] .dashboard-slide-count :is(.menu-select-icon, .menu-select-chevron) {
  display: inline-flex;
  color: currentColor;
}
html[data-theme] .dashboard-send-slot {
  position: relative;
  display: block;
  width: 0;
  height: 32px;
  margin-left: 0;
  overflow: hidden;
  pointer-events: none;
  transition: width 260ms cubic-bezier(.2, .8, .2, 1), margin-left 260ms cubic-bezier(.2, .8, .2, 1);
}
html[data-theme] .dashboard-send-slot.revealed {
  width: 32px;
  margin-left: 8px;
  overflow: visible;
  pointer-events: auto;
}
html[data-theme] .dashboard-send-slot .prompt-submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid var(--df-action-primary-border);
  border-radius: 50%;
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
  opacity: 0;
  transform: translateX(12px) scale(.92);
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease, background-color 150ms ease, border-color 150ms ease;
}
html[data-theme] .dashboard-send-slot.revealed .prompt-submit {
  opacity: 1;
  transform: translateX(0) scale(1);
}
html[data-theme] .dashboard-send-slot .prompt-submit:disabled {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
  box-shadow: none;
  color: var(--df-text-disabled);
  opacity: 1;
}
html[data-theme] .dashboard-creation-composer .reference-builder,
html[data-theme] .dashboard-creation-composer .reference-preview {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-creation-composer .reference-builder {
  margin: 0 12px 12px;
  padding: 12px;
  gap: 10px;
}
html[data-theme] .prompt-length-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
html[data-theme] .prompt-length-row > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
html[data-theme] .prompt-length-row strong,
html[data-theme] .dashboard-creation-composer .prompt-image-attachments strong,
html[data-theme] .dashboard-creation-composer .reference-preview strong {
  color: var(--df-text-primary);
}
html[data-theme] .prompt-length-row small,
html[data-theme] .dashboard-creation-composer .prompt-image-attachments small,
html[data-theme] .dashboard-creation-composer .reference-image-row small,
html[data-theme] .dashboard-creation-composer .reference-preview small {
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-creation-composer .slide-count-control .menu-select-trigger,
html[data-theme] .dashboard-creation-composer :is(.prompt-image-attachments, .reference-source-row, .reference-image-row) button {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-creation-composer .reference-source-row input {
  border-color: var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-creation-composer .reference-divider {
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-creation-composer .reference-divider::before,
html[data-theme] .dashboard-creation-composer .reference-divider::after {
  background: var(--df-border-subtle);
}
html[data-theme] .dashboard-theme-tray-shell {
  position: absolute;
  z-index: 2;
  top: calc(100% - 12px);
  left: 0;
  display: grid;
  width: 100%;
  margin: 0;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.2, .78, .2, 1), visibility 0s linear 220ms;
}
html[data-theme] .dashboard-theme-tray-shell.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
html[data-theme] .dashboard-theme-tray-inner {
  min-width: 0;
  padding-top: 12px;
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 0 0 23px 23px;
  background: var(--df-surface-raised);
  box-shadow: 0 16px 34px var(--df-palette-ink);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 16px 34px color-mix(in srgb, var(--df-palette-ink) 8%, transparent);
  }
}
html[data-theme] .dashboard-theme-rail {
  display: flex;
  width: 100%;
  height: 113px;
  padding: 10px;
  align-items: flex-start;
  gap: 4px;
  overflow-x: auto;
  scroll-padding-inline: 10px;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--df-border-strong) transparent;
  scrollbar-width: thin;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
html[data-theme] .dashboard-theme-rail[data-dragging="true"],
html[data-theme] .dashboard-theme-rail[data-dragging="true"] .dashboard-quick-theme-card {
  cursor: grabbing;
  scroll-snap-type: none;
}
html[data-theme] .dashboard-quick-theme-card {
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  min-width: 0;
  padding: 6px 3px 5px;
  justify-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--df-text-secondary);
  scroll-snap-align: start;
}
html[data-theme] .dashboard-quick-theme-card.selected {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 5%, transparent);
  }
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-quick-theme-card > strong {
  width: 100%;
  min-height: 12px;
  padding: 0 1px;
  overflow: hidden;
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-regular);
  line-height: var(--df-type-line-single);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .dashboard-quick-theme-preview {
  position: relative;
  display: grid;
  width: 50px;
  height: 64px;
  place-items: center;
}
html[data-theme] .dashboard-quick-theme-preview > i {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: 50px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--df-border-strong);
  border-radius: 6px;
  background: var(--df-palette-ink);
  opacity: 0;
  transform: translateX(0) rotate(0);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease, border-color 150ms ease;
  contain: strict;
}
html[data-theme] .dashboard-quick-theme-preview > i[data-slide="0"] {
  z-index: 3;
  opacity: 1;
}
html[data-theme] .dashboard-quick-theme-preview.selected-fan > i[data-slide="0"] {
  left: 0;
  transform: translateX(-4px) rotate(-2deg);
}
html[data-theme] .dashboard-quick-theme-preview.selected-fan > i[data-slide="1"] {
  z-index: 2;
  left: 0;
  opacity: 1;
  transform: translateX(4px) rotate(1deg);
}
html[data-theme] .dashboard-quick-theme-preview.selected-fan > i[data-slide="2"] {
  z-index: 1;
  left: 0;
  opacity: 1;
  transform: translateX(11px) rotate(3deg);
}
html[data-theme] .dashboard-quick-theme-card.new-theme .dashboard-quick-theme-preview {
  width: 50px;
  height: 64px;
  border: 1px dashed var(--df-border-strong);
  border-radius: 7px;
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-quick-theme-card.view-all {
  border-color: transparent;
  background: transparent;
}
html[data-theme] .dashboard-view-all-grid {
  display: grid;
  width: 50px;
  height: 64px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}
html[data-theme] .dashboard-view-all-grid > i {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  opacity: 1;
}
html[data-theme] .dashboard-attachment-lightbox-backdrop {
  position: fixed;
  z-index: 3400;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: var(--df-palette-ink);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-palette-ink) 72%, transparent);
  }
  backdrop-filter: blur(12px);
}
html[data-theme] .dashboard-attachment-lightbox {
  display: grid;
  width: min(1120px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 20px;
  background: var(--df-surface-overlay);
  color: var(--df-text-primary);
  box-shadow: var(--df-shadow-overlay);
}
html[data-theme] .dashboard-attachment-lightbox > header {
  display: flex;
  min-height: 54px;
  padding: 8px 8px 8px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .dashboard-attachment-lightbox > header strong {
  min-width: 0;
  overflow: hidden;
  font-size: var(--df-type-panel-title-size);
  font-weight: var(--df-type-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .dashboard-attachment-lightbox > header button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  flex: 0 0 38px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-attachment-lightbox > header button:hover {
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-attachment-lightbox > div {
  position: relative;
  min-height: min(70dvh, 720px);
  background: var(--df-palette-ink);
}
html[data-theme] .dashboard-attachment-lightbox > div img {
  object-fit: contain;
}
html[data-theme] .dashboard-error {
  margin-top: 8px;
}
html[data-theme] .dashboard-voice-notice {
  max-width: min(800px, 100%);
  margin-top: 12px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-body-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .dashboard-dialog-backdrop {
  position: fixed;
  z-index: 3200;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: var(--df-palette-ink);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-palette-ink) 54%, transparent);
  }
  backdrop-filter: blur(10px);
}
html[data-theme] .dashboard-ideas-dialog,
html[data-theme] .dashboard-new-theme-dialog {
  display: grid;
  width: min(880px, 100%);
  max-height: min(780px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 22px;
  background: var(--df-surface-overlay);
  color: var(--df-text-primary);
  box-shadow: var(--df-shadow-overlay);
}
html[data-theme] .dashboard-dialog-header {
  display: flex;
  min-height: 58px;
  padding: 10px 12px 10px 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .dashboard-dialog-header > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--df-category-ai);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
  letter-spacing: var(--df-type-tracking-eyebrow);
  text-transform: uppercase;
}
html[data-theme] .dashboard-dialog-header > button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-dialog-header > button:hover {
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
}
html[data-theme] .dashboard-ideas-intro {
  display: grid;
  padding: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: end;
  gap: 20px;
}
html[data-theme] .dashboard-ideas-intro > div {
  display: grid;
  gap: 5px;
}
html[data-theme] .dashboard-ideas-intro strong,
html[data-theme] .dashboard-new-theme-copy > strong {
  color: var(--df-text-primary);
  font-size: var(--df-type-dialog-title-size);
  font-weight: var(--df-type-weight-semibold);
  letter-spacing: var(--df-type-tracking-tight);
}
html[data-theme] .dashboard-ideas-intro small,
html[data-theme] .dashboard-new-theme-copy > p,
html[data-theme] .dashboard-ideas-meta {
  color: var(--df-text-secondary);
  font-size: var(--df-type-body-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .dashboard-ideas-intro form {
  display: grid;
  height: 42px;
  padding: 0 5px 0 12px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 12px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
}
html[data-theme] .dashboard-ideas-intro input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--df-text-primary);
  font-size: var(--df-type-panel-title-size);
}
html[data-theme] .dashboard-ideas-intro form > button {
  height: 32px;
  padding-inline: 12px;
  border: 0;
  border-radius: 9px;
  background: var(--df-text-primary);
  color: var(--df-surface-canvas);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .dashboard-ideas-meta {
  display: flex;
  padding: 0 20px 10px;
  justify-content: space-between;
  gap: 12px;
}
html[data-theme] .dashboard-ideas-scroll {
  display: grid;
  min-height: 0;
  padding: 0 20px 20px;
  gap: 10px;
  overflow-y: auto;
}
html[data-theme] .dashboard-ideas-dialog .topic-card {
  min-height: 176px;
  padding: 14px;
}
html[data-theme] .dashboard-ideas-dialog .topic-card-signal > span {
  font-size: var(--df-type-badge-size);
}
html[data-theme] .dashboard-ideas-dialog .topic-card-signal small,
html[data-theme] .dashboard-ideas-dialog .topic-origin small,
html[data-theme] .dashboard-ideas-dialog .topic-card-actions button {
  font-size: var(--df-type-meta-size);
}
html[data-theme] .dashboard-ideas-dialog .topic-headline {
  font-size: var(--df-type-card-title-size);
}
html[data-theme] .dashboard-ideas-dialog .topic-card-actions button {
  height: 34px;
  padding-inline: 10px;
}
html[data-theme] .dashboard-new-theme-dialog {
  width: min(680px, 100%);
}
html[data-theme] .dashboard-new-theme-copy {
  display: grid;
  padding: 24px 24px 18px;
  gap: 8px;
}
html[data-theme] .dashboard-new-theme-copy > p {
  max-width: 560px;
  margin: 0;
}
html[data-theme] .dashboard-new-theme-options {
  display: grid;
  padding: 0 24px 24px;
  gap: 8px;
}
html[data-theme] .dashboard-new-theme-options > button {
  position: relative;
  display: grid;
  min-height: 88px;
  padding: 14px 112px 14px 62px;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 14px;
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
  text-align: left;
  opacity: .72;
}
html[data-theme] .dashboard-new-theme-options > button > span {
  position: absolute;
  top: 18px;
  left: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--df-surface-raised);
  color: var(--df-category-media);
}
html[data-theme] .dashboard-new-theme-options strong {
  font-size: var(--df-type-composer-action-size);
}
html[data-theme] .dashboard-new-theme-options small {
  color: var(--df-text-secondary);
  font-size: var(--df-type-action-size);
  line-height: var(--df-type-line-compact);
}
html[data-theme] .dashboard-new-theme-options em {
  position: absolute;
  top: 50%;
  right: 14px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--df-surface-raised);
  color: var(--df-text-secondary);
  font-size: var(--df-type-badge-size);
  font-style: normal;
  font-weight: var(--df-type-weight-semibold);
  letter-spacing: var(--df-type-tracking-badge);
  text-transform: uppercase;
  transform: translateY(-50%);
}
@media (max-width: 700px) {
  html[data-theme] .dashboard-hero {
    min-height: 0;
    padding: 52px 14px 40px;
    justify-content: flex-start;
  }
  html[data-theme] .dashboard-hero > p {
    margin-bottom: 20px;
  }
  html[data-theme] .dashboard-prompt.dashboard-creation-composer {
    border-radius: 20px;
  }
  html[data-theme] .dashboard-prompt.dashboard-creation-composer textarea {
    min-height: 48px;
    padding: 20px 20px 6px;
    font-size: var(--df-type-field-size);
  }
  html[data-theme] .dashboard-creation-composer .prompt-footer {
    min-height: 52px;
    padding: 12px;
    grid-template-columns: none;
  }
  html[data-theme] .dashboard-composer-tools {
    gap: 8px;
  }
  html[data-theme] .dashboard-creation-composer .reference-attach {
    width: 32px;
    height: 32px;
    min-height: 32px;
    border-radius: 999px;
  }
  html[data-theme] .dashboard-theme-tray-inner {
    border-radius: 0 0 19px 19px;
  }
  html[data-theme] .dashboard-theme-tray-shell {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-height: 0;
    margin: 0;
    transition: max-height 220ms cubic-bezier(.2, .78, .2, 1), opacity 160ms ease, transform 220ms cubic-bezier(.2, .78, .2, 1), visibility 0s linear 220ms;
  }
  html[data-theme] .dashboard-theme-tray-shell.open {
    max-height: 132px;
    margin-top: -12px;
    transition-delay: 0s;
  }
  html[data-theme] .dashboard-attachment-strip {
    padding-inline: 10px;
  }
  html[data-theme] .dashboard-attachment-strip article {
    width: 154px;
    flex-basis: 154px;
  }
  html[data-theme] .dashboard-attachment-lightbox-backdrop {
    padding: 0;
    place-items: stretch;
  }
  html[data-theme] .dashboard-attachment-lightbox {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  html[data-theme] .dashboard-attachment-lightbox > div {
    min-height: 0;
  }
  html[data-theme] .dashboard-dialog-backdrop {
    padding: 0;
    place-items: end stretch;
  }
  html[data-theme] .dashboard-ideas-dialog,
  html[data-theme] .dashboard-new-theme-dialog {
    width: 100%;
    max-height: min(86dvh, 760px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
  }
  html[data-theme] .dashboard-ideas-intro {
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  html[data-theme] .dashboard-ideas-intro strong,
  html[data-theme] .dashboard-new-theme-copy > strong {
    font-size: var(--df-type-dialog-title-compact-size);
  }
  html[data-theme] .dashboard-ideas-meta {
    padding: 0 16px 10px;
  }
  html[data-theme] .dashboard-ideas-meta small {
    display: none;
  }
  html[data-theme] .dashboard-ideas-scroll {
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  }
  html[data-theme] .dashboard-ideas-dialog .topic-card-grid {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  html[data-theme] .dashboard-ideas-dialog .topic-card {
    min-height: 168px;
  }
  html[data-theme] .dashboard-ideas-dialog .topic-card-actions button:not(.topic-create) {
    min-width: 44px;
    font-size: 0;
  }
  html[data-theme] .dashboard-ideas-dialog .topic-card-actions button {
    height: 44px;
  }
  html[data-theme] .dashboard-new-theme-copy {
    padding: 20px 18px 16px;
  }
  html[data-theme] .dashboard-new-theme-options {
    padding: 0 18px calc(18px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 500px) {
  html[data-theme] .dashboard-theme-trigger-label {
    display: none;
  }
  html[data-theme] .dashboard-theme-trigger {
    gap: 4px;
  }
  html[data-theme] .dashboard-slide-count .menu-select-value {
    display: none;
  }
  html[data-theme] .dashboard-slide-count .menu-select-trigger {
    width: 48px;
    padding: 0 6px;
    gap: 3px;
  }
  html[data-theme] .dashboard-slide-count :is(.menu-select-icon, .menu-select-chevron) {
    margin: 0;
  }
}
@media (max-width: 365px) {
  html[data-theme] .dashboard-composer-button > span {
    display: none;
  }
  html[data-theme] .dashboard-composer-button {
    width: 32px;
    padding: 0;
  }
  html[data-theme] .dashboard-theme-trigger {
    padding-inline: 5px;
  }
}
@media (pointer: coarse) {
  html[data-theme] .dashboard-dialog-header > button,
  html[data-theme] .dashboard-ideas-intro form > button,
  html[data-theme] .dashboard-new-theme-options > button {
    min-height: 44px;
  }
}
html[data-theme="light"] .studio-root {
  color-scheme: light;
  --project-workspace: #ecebe5;
  --project-workspace-deep: #e5e4dd;
  --project-bar: rgba(249, 248, 243, 0.96);
  --project-panel: #faf9f5;
  --project-panel-subtle: #f2f1eb;
  --project-control: #fff;
  --project-control-hover: #eeeee8;
  --project-control-active: #e8e8e1;
  --project-text: #151613;
  --project-text-secondary: #666a63;
  --project-text-tertiary: var(--df-text-tertiary);
  --project-line: #d6d7cf;
  --project-line-strong: #b8bbb2;
  --project-shadow-control: 0 1px 8px rgba(23, 24, 21, 0.12);
  --project-shadow-card: 0 9px 24px rgba(23, 24, 21, 0.1);
  --project-shadow-card-active: 0 14px 34px rgba(23, 24, 21, 0.17);
  --project-shadow-raised: 0 12px 30px rgba(23, 24, 21, 0.14);
  --project-shadow-floating: 0 24px 68px rgba(23, 24, 21, 0.22);
  --project-shadow-panel: -18px 0 44px rgba(23, 24, 21, 0.12);
  --project-shadow-canvas: 0 24px 70px rgba(23, 24, 21, 0.24);
  --project-shadow-sheet: 0 -18px 54px rgba(23, 24, 21, 0.18);
  --project-shadow-selected: 0 0 0 1px var(--df-action-primary), 0 14px 34px rgba(23, 24, 21, 0.17);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-selected: 0 0 0 1px color-mix(in srgb, var(--df-action-primary) 34%, transparent), 0 14px 34px rgba(23, 24, 21, 0.17);
  }
  --project-shadow-drop-target: -5px 0 0 -3px var(--df-action-primary), 0 14px 34px rgba(23, 24, 21, 0.17);
  --project-shadow-selection-ring: 0 0 0 2px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-selection-ring: 0 0 0 2px color-mix(in srgb, var(--df-action-primary) 28%, transparent);
  }
  --project-shadow-focus: 0 0 0 3px var(--df-focus-ring);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--df-focus-ring) 14%, transparent);
  }
  --project-shadow-contrast: 0 0 0 1px rgba(0, 0, 0, 0.28);
  --project-shadow-on-canvas: 0 12px 34px rgba(0, 0, 0, 0.42);
  --project-shadow-action-glow: 0 0 12px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-action-glow: 0 0 12px color-mix(in srgb, var(--df-action-primary) 36%, transparent);
  }
  --project-shadow-success-glow: 0 0 10px var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-success-glow: 0 0 10px color-mix(in srgb, var(--df-status-success) 34%, transparent);
  }
  --project-generation-pulse-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --project-generation-pulse-color: color-mix(in srgb, var(--df-action-primary) 52%, transparent);
  }
  --project-filter-contrast: drop-shadow(0 0 1px rgba(0, 0, 0, 0.58));
  --project-filter-selection: drop-shadow(0 0 3px var(--df-focus-ring));
  @supports (color: color-mix(in lab, red, red)) {
    --project-filter-selection: drop-shadow(0 0 3px color-mix(in srgb, var(--df-focus-ring) 52%, transparent));
  }
  --project-filter-cursor: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
  --project-shadow: var(--project-shadow-floating);
  --project-overlay: rgba(249, 248, 244, 0.985);
  --project-rich-editor-dark: #171918;
  --project-rich-editor-light: #fff;
  --project-rich-editor-mid: #747873;
  --project-rich-editor-on-dark: #f7f7f4;
  --project-rich-editor-on-light: #151613;
  --project-rich-editor-on-mid: #fff;
}
html[data-theme="dark"] .studio-root {
  color-scheme: dark;
  --project-workspace: #0f1110;
  --project-workspace-deep: #0b0d0c;
  --project-bar: rgba(18, 20, 19, 0.96);
  --project-panel: #181a19;
  --project-panel-subtle: #202220;
  --project-control: #222522;
  --project-control-hover: #292c29;
  --project-control-active: #30332f;
  --project-text: #f7f7f4;
  --project-text-secondary: #a6aaa3;
  --project-text-tertiary: var(--df-text-tertiary);
  --project-line: #30322f;
  --project-line-strong: #454842;
  --project-shadow-control: 0 1px 9px rgba(0, 0, 0, 0.48);
  --project-shadow-card: 0 10px 28px rgba(0, 0, 0, 0.44);
  --project-shadow-card-active: 0 16px 38px rgba(0, 0, 0, 0.62);
  --project-shadow-raised: 0 14px 34px rgba(0, 0, 0, 0.54);
  --project-shadow-floating: 0 28px 78px rgba(0, 0, 0, 0.68);
  --project-shadow-panel: -18px 0 52px rgba(0, 0, 0, 0.52);
  --project-shadow-canvas: 0 30px 90px rgba(0, 0, 0, 0.72);
  --project-shadow-sheet: 0 -24px 72px rgba(0, 0, 0, 0.64);
  --project-shadow-selected: 0 0 0 1px var(--df-action-primary), 0 16px 38px rgba(0, 0, 0, 0.62);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-selected: 0 0 0 1px color-mix(in srgb, var(--df-action-primary) 42%, transparent), 0 16px 38px rgba(0, 0, 0, 0.62);
  }
  --project-shadow-drop-target: -5px 0 0 -3px var(--df-action-primary), 0 16px 38px rgba(0, 0, 0, 0.62);
  --project-shadow-selection-ring: 0 0 0 2px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-selection-ring: 0 0 0 2px color-mix(in srgb, var(--df-action-primary) 34%, transparent);
  }
  --project-shadow-focus: 0 0 0 3px var(--df-focus-ring);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--df-focus-ring) 18%, transparent);
  }
  --project-shadow-contrast: 0 0 0 1px rgba(0, 0, 0, 0.52);
  --project-shadow-on-canvas: 0 14px 38px rgba(0, 0, 0, 0.64);
  --project-shadow-action-glow: 0 0 14px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-action-glow: 0 0 14px color-mix(in srgb, var(--df-action-primary) 42%, transparent);
  }
  --project-shadow-success-glow: 0 0 12px var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    --project-shadow-success-glow: 0 0 12px color-mix(in srgb, var(--df-status-success) 28%, transparent);
  }
  --project-generation-pulse-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --project-generation-pulse-color: color-mix(in srgb, var(--df-action-primary) 58%, transparent);
  }
  --project-filter-contrast: drop-shadow(0 0 1px rgba(0, 0, 0, 0.78));
  --project-filter-selection: drop-shadow(0 0 3px var(--df-focus-ring));
  @supports (color: color-mix(in lab, red, red)) {
    --project-filter-selection: drop-shadow(0 0 3px color-mix(in srgb, var(--df-focus-ring) 62%, transparent));
  }
  --project-filter-cursor: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72));
  --project-shadow: var(--project-shadow-floating);
  --project-overlay: rgba(24, 26, 25, 0.985);
  --project-rich-editor-dark: #171918;
  --project-rich-editor-light: #fff;
  --project-rich-editor-mid: #747873;
  --project-rich-editor-on-dark: #f7f7f4;
  --project-rich-editor-on-light: #151613;
  --project-rich-editor-on-mid: #fff;
}
html[data-theme] .studio-root,
html[data-theme] .editor-project-loading {
  background: var(--project-workspace);
  color: var(--project-text);
}
html[data-theme] .editor-project-loading > strong {
  color: var(--project-text);
}
html[data-theme] .editor-project-loading > span {
  color: var(--project-text-secondary);
}
html[data-theme] .template-load-actions > :is(button, a) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text);
}
html[data-theme] .studio-root {
  --line: var(--project-line);
  --menu-surface: var(--project-overlay);
  --menu-border: var(--project-line);
  --menu-shadow: var(--project-shadow);
}
html[data-theme] .studio-topbar {
  border-color: var(--project-line);
  background: var(--project-bar);
  color: var(--project-text);
}
html[data-theme] .brand-copy strong,
html[data-theme] .project-center strong,
html[data-theme] .focus-header strong,
html[data-theme] .grid-header h1,
html[data-theme] .panel-header strong,
html[data-theme] .selection-summary strong {
  color: var(--project-text);
}
html[data-theme] :is(
  .brand-copy input,
  .project-center,
  .project-kicker,
  .saved-dot,
  .focus-header span,
  .grid-header span,
  .grid-header p,
  .panel-header span,
  .selection-summary small
) {
  color: var(--project-text-secondary);
}
html[data-theme] .brand-copy input:focus,
html[data-theme] .brand-copy input:hover {
  color: var(--project-text);
}
html[data-theme] .saved-dot i {
  background: var(--df-status-success);
}
html[data-theme] :is(.view-switch, .creation-switch) {
  border-color: var(--project-line);
  background: var(--project-panel-subtle);
}
html[data-theme] :is(.view-switch, .creation-switch) button {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.view-switch, .creation-switch) button.active {
  background: var(--project-control);
  color: var(--project-text);
  box-shadow: var(--project-shadow-control);
}
html[data-theme] .creation-switch button.active em {
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] :is(.top-icon, .dashboard-back, .mobile-close) {
  color: var(--project-text-secondary);
}
html[data-theme] .dashboard-back {
  border-color: var(--project-line);
  background: var(--project-control);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] :is(.top-icon, .dashboard-back):hover {
    border-color: var(--project-line-strong);
    background: var(--project-control-hover);
    color: var(--project-text);
  }
}
html[data-theme] :is(.caption-button, .share-button, .cost-chip, .usage-chip) {
  border-color: var(--project-line) !important;
  background: var(--project-control) !important;
  color: var(--project-text);
}
html[data-theme] .ui-header-action {
  height: 34px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--project-line) !important;
  border-radius: 10px !important;
  background: var(--project-control) !important;
  color: var(--project-text);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] :is(.grid-header h1, .modal-head h2) {
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] :is(.panel-header strong, .mobile-simple-sheet > header strong) {
  font-weight: var(--df-type-weight-semibold);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .ui-header-action:hover {
    border-color: var(--project-line-strong) !important;
    background: var(--project-control-hover) !important;
    color: var(--project-text);
  }
}
html[data-theme] .ui-header-action:disabled {
  color: var(--project-text-tertiary);
  opacity: 0.58;
}
html[data-theme] .next-button {
  border-color: var(--df-action-primary-border) !important;
  background: var(--df-action-primary-fill) !important;
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .next-button:hover {
  border-color: var(--df-action-primary-hover) !important;
  background: var(--df-action-primary-fill-hover) !important;
}
html[data-theme] .usage-progress-ring {
  background: var(--project-line);
}
html[data-theme] .usage-progress-ring > i {
  background: var(--df-action-primary);
}
html[data-theme] .canvas-stage {
  background: radial-gradient(circle at 50% 42%, var(--project-control), transparent 47%),
    var(--project-workspace);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--project-control) 72%, transparent), transparent 47%),
    var(--project-workspace);
  }
  scrollbar-color: var(--project-line-strong) transparent;
}
html[data-theme] .focus-preview-stack {
  position: relative;
  z-index: 1;
}
html[data-theme] :is(.fact-status, .grid-summary) {
  border-color: var(--project-line);
  background: var(--project-control);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--project-control) 56%, transparent);
  }
  color: var(--project-text-secondary);
}
html[data-theme] .editor-primary-actions {
  position: relative;
  z-index: 2;
  border-color: var(--project-line);
  background: var(--project-panel);
  box-shadow: var(--project-shadow-raised);
}
html[data-theme] .editor-primary-actions button {
  color: var(--project-text-secondary);
}
html[data-theme] .editor-primary-actions button.active {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 12%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] .fact-status.passed {
  color: var(--df-status-success);
}
html[data-theme] :is(.fact-status.review, .fact-status.pending) {
  color: var(--df-status-warning);
}
html[data-theme] .slide-picker {
  scrollbar-color: var(--project-line-strong) transparent;
}
html[data-theme] .slide-picker-item {
  border-color: var(--project-line);
  background: var(--project-panel);
  box-shadow: var(--project-shadow-card);
}
html[data-theme] .slide-picker-item.active {
  border-color: var(--df-action-primary);
  box-shadow: var(--project-shadow-card-active);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .slide-picker-item:hover {
    box-shadow: var(--project-shadow-card-active);
  }
}
html[data-theme] .slide-picker-item.active::after {
  border-color: var(--df-action-primary);
  box-shadow: none;
}
html[data-theme] .slide-picker-grip {
  background: var(--project-panel-subtle);
  color: var(--project-text-tertiary);
}
html[data-theme] :is(.slide-picker-add, .grid-add-card) {
  border-color: var(--project-line-strong);
  color: var(--project-text-secondary);
}
html[data-theme] .slide-picker-item.drop-target {
  border-color: var(--df-action-primary);
  box-shadow: var(--project-shadow-drop-target);
}
html[data-theme] :is(.grid-view, .deck-grid > article, .grid-add-card) {
  color: var(--project-text);
}
html[data-theme] .deck-grid > article {
  border-color: var(--project-line);
  background: var(--project-panel);
  box-shadow: var(--project-shadow-card);
}
html[data-theme] .deck-grid > article.active {
  border-color: var(--df-action-primary);
}
html[data-theme] .grid-card-meta {
  border-color: var(--project-line);
  background: var(--project-panel);
  color: var(--project-text-secondary);
}
html[data-theme] .grid-card-meta strong {
  color: var(--project-text);
}
html[data-theme] .grid-card-meta i {
  background: var(--df-status-warning);
}
html[data-theme] .grid-card-meta i.passed {
  background: var(--df-status-success);
}
html[data-theme] .grid-replace-image {
  border-color: var(--df-border-on-dark);
  background: var(--df-surface-composer);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-surface-composer) 90%, transparent);
  }
  color: var(--df-text-on-dark);
  box-shadow: var(--project-shadow-on-canvas);
}
html[data-theme] :is(.deck-grid > article.selected-for-ai, .deck-grid > button.selected-for-ai) {
  border-color: var(--df-action-primary);
  box-shadow: var(--project-shadow-selected);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] :is(.deck-grid > article:hover, .deck-grid > button:hover) {
    border-color: var(--project-line-strong);
    box-shadow: var(--project-shadow-card-active);
  }
}
html[data-theme] .grid-ai-badge {
  background: var(--df-action-primary);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .editor-panel {
  border-color: var(--project-line);
  background: var(--project-panel);
  color: var(--project-text);
  box-shadow: var(--project-shadow-panel);
}
html[data-theme] :is(.panel-header, .panel-tabs, .panel-footer) {
  border-color: var(--project-line);
}
html[data-theme] .panel-content {
  scrollbar-color: var(--project-line-strong) transparent;
}
html[data-theme] .panel-footer {
  background: var(--project-panel);
}
html[data-theme] .panel-tabs button {
  color: var(--project-text-secondary);
}
html[data-theme] .panel-tabs button.active {
  background: var(--project-control-active);
  color: var(--project-text);
}
html[data-theme] :is(.panel-tabs button, .top-icon)[data-category="ai"] svg {
  color: var(--df-category-color);
}
html[data-theme] :is(.layers-section-switch, .desktop-color-mode) {
  background: var(--project-panel-subtle);
}
html[data-theme] :is(.layers-section-switch, .desktop-color-mode) button {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.layers-section-switch, .desktop-color-mode) button.active {
  background: var(--project-control-active);
  color: var(--project-text);
}
html[data-theme] .panel-back-to-layers {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(.panel-more, .sheet-handle button) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .panel-cost-summary {
  border-color: var(--project-line);
  background: var(--project-panel-subtle);
}
html[data-theme] :is(.panel-cost-summary span, .panel-cost-summary small) {
  color: var(--project-text-secondary);
}
html[data-theme] .panel-cost-summary strong {
  color: var(--project-text);
}
html[data-theme] body:has(.studio-root) :is(.ui-menu-surface, .ui-menu-item) {
  border-color: var(--project-line);
  color: var(--project-text-secondary);
}
html[data-theme] body:has(.studio-root) .ui-menu-surface {
  background: var(--project-overlay);
  box-shadow: var(--project-shadow);
}
html[data-theme] body:has(.studio-root) :is(.ui-menu-item:hover, .ui-menu-item:focus-visible, .ui-menu-item[aria-selected="true"]) {
  background: var(--project-control-hover);
  color: var(--project-text);
}
html[data-theme] body:has(.studio-root) .ui-menu-separator {
  background: var(--project-line);
}
html[data-theme] body:has(.studio-root) .ui-menu-heading {
  color: var(--project-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .panel-tabs button:hover {
    background: var(--project-control-hover);
    color: var(--project-text);
  }
}
html[data-theme] :is(
  .add-layer-row button,
  .layer-row,
  .layer-list > button,
  .panel-action-row button,
  .wide-action,
  .subtle-action,
  .format-row button,
  .media-actions button,
  .selection-summary,
  .desktop-primary-controls,
  .desktop-text-alignments button,
  .desktop-text-effects button,
  .desktop-font-strip button,
  .font-weight-strip button,
  .desktop-bold-toggle,
  .text-layout-actions > button,
  .desktop-image-stroke-row > label,
  .desktop-image-stroke-row > button,
  .global-layer-toggle,
  .bottom-fade-toggle,
  .geometry-controls input,
  .canvas-color-control input,
  .modifier-note,
  .multi-align-grid button,
  .multi-distribute-row button,
  .multi-selection-actions button,
  .clip-text-toggle,
  .auto-layout-toggle-row > button,
  .auto-layout-anchor-grid > button
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(.global-layer-toggle.active, .bottom-fade-toggle.active) {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 11%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(.global-layer-toggle strong, .bottom-fade-toggle strong) {
  color: var(--project-text);
}
html[data-theme] :is(
  .global-layer-toggle small,
  .bottom-fade-toggle small,
  .geometry-controls label,
  .geometry-controls > small,
  .geometry-controls label > em,
  .modifier-note span
) {
  color: var(--project-text-secondary);
}
html[data-theme] .global-layer-toggle > em {
  color: var(--df-action-primary);
}
html[data-theme] :is(.layer-row.active, .layer-list > button.active) {
  border-color: var(--df-action-primary);
  background: var(--project-control-active);
}
html[data-theme] :is(.layer-thumb, .large-layer-icon) {
  background: var(--project-panel-subtle);
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .add-layer-row button,
  .template-layer-add button
)[data-category] svg,
html[data-theme] .editor-primary-actions button[data-category] svg {
  color: var(--df-category-color);
}
html[data-theme] :is(
  .layer-row,
  .template-layer-list article
)[data-category] .layer-thumb,
html[data-theme] .large-layer-icon[data-category] {
  border: 1px solid var(--df-category-color);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--df-category-color) 24%, var(--project-line));
  }
  background: var(--df-category-surface);
  color: var(--df-category-color);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] :is(
    .add-layer-row button,
    .template-layer-add button
  )[data-category]:hover {
    border-color: var(--df-category-color);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--df-category-color) 36%, var(--project-line));
    }
    background: var(--df-category-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--df-category-surface) 64%, var(--project-control));
    }
    color: var(--project-text);
  }
}
html[data-theme] :is(.group-actions, .group-actions button, .layer-mini-actions button) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .panel-action-row button {
  border: 1px solid var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .panel-action-row button.danger {
  border-color: var(--df-status-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-danger) 28%, var(--project-line));
  }
  color: var(--df-status-danger);
}
html[data-theme] .group-actions span {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.global-layer-badge, .group-layer-badge) {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 30%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, var(--project-control));
  }
  color: var(--df-action-primary);
}
html[data-theme] :is(
  .desktop-text-alignments button.active,
  .desktop-text-effects button.active,
  .font-weight-strip button.active,
  .desktop-bold-toggle.active,
  .text-layout-actions > button.active,
  .format-row button.active
) {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 12%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(
  .layer-name strong,
  .selection-summary strong,
  .text-layout-actions strong,
  .media-actions strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .layer-name small,
  .section-title,
  .field-label,
  .select-row label > span,
  .desktop-control-label,
  .desktop-text-alignments > span,
  .desktop-text-effects > span,
  .desktop-font-strip > span,
  .font-weight-strip > span,
  .section-title small,
  .desktop-advanced-divider small
) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.desktop-font-strip > span, .font-weight-strip > span) {
  background: var(--project-panel);
}
html[data-theme] :is(.desktop-color-swatches > button, .desktop-custom-color) {
  border-color: var(--project-line-strong);
}
html[data-theme] .desktop-color-swatches > button.active {
  outline-color: var(--df-action-primary);
}
html[data-theme] :is(
  .text-control,
  .desktop-rich-text-input,
  .text-rewrite-custom input,
  .select-row select,
  .range-control em input,
  .auto-layout-controls input[type="number"],
  .ai-composer textarea
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text);
}
html[data-theme] .desktop-rich-text-input,
html[data-theme] .mobile-text-rich-input {
  border-color: var(--rich-text-editor-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--rich-text-editor-foreground) 30%, transparent);
  }
  background-color: var(--rich-text-editor-background) !important;
  caret-color: var(--rich-text-editor-foreground);
}
html[data-theme] .rich-text-editor-surface-dark {
  --rich-text-editor-background: var(--project-rich-editor-dark);
  --rich-text-editor-foreground: var(--project-rich-editor-on-dark);
}
html[data-theme] .rich-text-editor-surface-light {
  --rich-text-editor-background: var(--project-rich-editor-light);
  --rich-text-editor-foreground: var(--project-rich-editor-on-light);
}
html[data-theme] .rich-text-editor-surface-mid {
  --rich-text-editor-background: var(--project-rich-editor-mid);
  --rich-text-editor-foreground: var(--project-rich-editor-on-mid);
}
html[data-theme] :is(
  .text-control,
  .desktop-rich-text-input,
  .text-rewrite-custom input,
  .select-row select,
  .range-control em input,
  .auto-layout-controls input[type="number"],
  .ai-composer textarea
):focus {
  border-color: var(--df-focus-ring);
  box-shadow: var(--project-shadow-focus);
}
html[data-theme] :is(
  .video-url-form input,
  .grid-quick-copy textarea,
  .template-rule-card > textarea,
  .template-slide-instructions textarea,
  .template-slide-fields input,
  .template-slide-fields select,
  .template-layer-fields input,
  .template-layer-fields select,
  .template-name-field input,
  .mobile-text-input-wrap textarea,
  .mobile-text-rich-input
):focus {
  border-color: var(--df-focus-ring);
  box-shadow: var(--project-shadow-focus);
}
html[data-theme] .range-control > input[type="range"] {
  accent-color: var(--df-action-primary);
  background: linear-gradient(
    90deg,
    var(--df-action-primary) 0 var(--range-progress, 0%),
    var(--project-line-strong) var(--range-progress, 0%) 100%
  ) center / 100% 3px no-repeat;
}
html[data-theme] .range-control > input[type="range"]::-webkit-slider-thumb {
  border-color: var(--project-panel);
  background: var(--df-action-primary);
}
html[data-theme] :is(.range-reset, .auto-layout-toggle-row > button.active, .auto-layout-anchor-grid > button.active) {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 11%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(.text-rewrite-trigger, .text-rewrite-menu) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .text-rewrite-options > button {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text);
}
html[data-theme] .text-rewrite-options small {
  color: var(--project-text-secondary);
}
html[data-theme] .text-fact-check {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .text-fact-check strong {
  color: var(--project-text);
}
html[data-theme] .text-fact-check small,
html[data-theme] .text-fact-check > svg:last-child {
  color: var(--project-text-secondary);
}
html[data-theme] .text-fact-check.passed {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 34%, var(--project-line));
  }
  background: var(--df-status-success-surface);
}
html[data-theme] .text-fact-check.review {
  border-color: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 34%, var(--project-line));
  }
  background: var(--df-status-warning-surface);
}
html[data-theme] .text-rewrite-control.is-open .text-rewrite-trigger {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 9%, var(--project-control));
  }
}
html[data-theme] .text-rewrite-trigger strong,
html[data-theme] .text-rewrite-menu strong {
  color: var(--project-text);
}
html[data-theme] :is(
  .text-rewrite-trigger > svg:first-child,
  .grid-summary > svg,
  .ai-context > svg,
  .mobile-ai-controls > span svg
) {
  color: var(--df-category-ai);
}
html[data-theme] :is(
  .match-canvas-button,
  .mask-controls button,
  .image-zoom-actions button,
  .image-fit-controls button,
  .split-controls button,
  .image-option-tabs,
  .media-upload-action,
  .media-search-box,
  .media-search-box button,
  .media-search-loading,
  .ranked-media-grid article
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .mask-controls button.active,
  .image-fit-controls button.active,
  .image-option-tabs button.active
) {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 11%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(
  .media-upload-action strong,
  .ranked-media-grid strong,
  .media-empty strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .mobile-image-picker-toggle,
  .image-option-tabs button,
  .media-upload-action,
  .media-upscale-button
)[data-category] > svg,
html[data-theme] .mobile-image-picker-toggle[data-category] > span > svg {
  color: var(--df-category-color);
}
html[data-theme] .media-upscale-button[data-category="ai"] {
  border-color: var(--df-category-on-media);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-category-on-media) 34%, var(--df-media-overlay-border));
  }
  background: var(--df-media-overlay);
  color: var(--df-category-on-media);
  box-shadow: var(--df-media-overlay-shadow);
  backdrop-filter: blur(12px);
}
html[data-theme] .media-upscale-button[data-category="ai"] > svg {
  color: var(--df-category-on-media);
}
html[data-theme] :is(
  .media-upload-action small,
  .ranked-media-grid small,
  .ranked-media-grid article > div p,
  .media-search-hint,
  .media-search-meta,
  .media-search-meta small,
  .media-empty,
  .media-empty span
) {
  color: var(--project-text-secondary);
}
html[data-theme] .media-search-box:focus-within {
  border-color: var(--df-focus-ring);
  background: var(--project-control);
  box-shadow: var(--project-shadow-focus);
  color: var(--project-text);
}
html[data-theme] .media-search-box input {
  color: var(--project-text);
}
html[data-theme] .media-search-box input::placeholder {
  color: var(--project-text-tertiary);
}
html[data-theme] :is(.media-note, .media-search-feedback, .media-apply-progress) {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 28%, var(--project-line));
  }
  background: var(--df-status-success-surface);
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .ai-context,
  .applied-template-card,
  .slide-composition-switcher,
  .composition-options > button,
  .composition-fidelity,
  .editor-template-grid button,
  .layer-template-switcher,
  .layer-template-options > button,
  .layer-template-actions button,
  .saved-template-manager,
  .saved-template-list article,
  .saved-template-actions button,
  .saved-template-empty,
  .template-rule-card,
  .template-layer-map,
  .template-layer-add button,
  .template-layer-list article,
  .template-slide-fields input,
  .template-slide-fields select,
  .template-layer-fields input,
  .template-layer-fields select,
  .template-rule-card > textarea,
  .template-slide-instructions textarea,
  .template-preserve-copy
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .composition-options > button.active,
  .editor-template-grid button.active,
  .layer-template-options > button.active,
  .saved-template-list article.active,
  .template-layer-list article.active
) {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(
  .applied-template-copy strong,
  .composition-fidelity > span:nth-child(2) strong,
  .saved-template-head span,
  .saved-template-main,
  .template-setup-intro strong,
  .template-rule-heading > span,
  .template-preserve-copy strong,
  .template-layer-open strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .applied-template-copy small,
  .applied-template-copy em,
  .slide-composition-switcher > p,
  .composition-fidelity > span:nth-child(2) small,
  .saved-template-head small,
  .saved-template-main small,
  .template-setup-intro small,
  .template-rule-heading > small,
  .template-slide-fields label > span,
  .template-slide-instructions > span,
  .template-layer-fields label > span,
  .template-preserve-copy small,
  .template-layer-open small,
  .template-layer-toggles label,
  .layer-template-actions > span
) {
  color: var(--project-text-secondary);
}
html[data-theme] .applied-template-card {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 28%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 7%, var(--project-control));
  }
}
html[data-theme] .applied-template-icon {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 13%, var(--project-control));
  }
  color: var(--df-action-primary);
}
html[data-theme] :is(.applied-template-card > button, .composition-fidelity > button) {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 34%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] .composition-fidelity.fidelity-repair {
  border-color: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 34%, var(--project-line));
  }
  background: var(--df-status-warning-surface);
}
html[data-theme] .fidelity-score {
  background: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-status-warning) 10%, var(--project-control));
  }
}
html[data-theme] .composition-fidelity.fidelity-repair > button {
  border-color: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 42%, var(--project-line));
  }
  background: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-status-warning) 12%, var(--project-control));
  }
}
html[data-theme] .composition-options > button strong {
  color: inherit;
}
html[data-theme] .template-setup-intro {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 28%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 8%, var(--project-control));
  }
}
html[data-theme] .ai-messages > div > :is(p, div) {
  background: var(--project-control-active);
  color: var(--project-text);
}
html[data-theme] .ai-messages > div.user > :is(p, div) {
  background: var(--df-action-primary);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .ai-suggestions button {
  border-color: var(--project-line);
  color: var(--project-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .ai-suggestions button:hover {
    background: var(--project-control-hover);
    color: var(--project-text);
  }
}
html[data-theme] :is(
  .desktop-video-controls,
  .desktop-video-controls > button:first-child,
  .desktop-remove-video,
  .desktop-gradient-controls > label,
  .desktop-fade-controls > label,
  .grid-quick-edit-head,
  .grid-quick-copy textarea,
  .playbook-context,
  .empty-panel,
  .image-generator textarea,
  .generation-reference-row button,
  .more-image-results,
  .reuse-indicator,
  .template-editing-banner,
  .template-ai-rules textarea,
  .template-mode-actions button,
  .save-post-template,
  .cost-hero,
  .cost-metrics div,
  .cost-mode-picker button,
  .cost-controls input,
  .cost-lines > div
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .desktop-video-controls > button:first-child.active,
  .cost-mode-picker button.active
) {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(
  .desktop-video-controls > button:first-child strong,
  .grid-quick-edit-head strong,
  .cost-hero strong,
  .cost-metrics strong,
  .cost-mode-picker strong,
  .cost-lines strong,
  .cost-lines em,
  .empty-panel strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .desktop-video-controls > button:first-child small,
  .desktop-fade-controls > p,
  .grid-quick-edit-head small,
  .grid-quick-copy label > span,
  .grid-quick-copy > p,
  .cost-hero span,
  .cost-hero small,
  .cost-metrics span,
  .cost-mode-picker span,
  .cost-controls span,
  .cost-lines small,
  .cost-assumptions p,
  .generation-reference-row > small,
  .generation-reference-row > span,
  .image-generator > label,
  .template-ai-rules > span,
  .empty-panel span,
  .reuse-indicator small
) {
  color: var(--project-text-secondary);
}
html[data-theme] .panel-ready-state {
  color: var(--project-text-secondary);
}
html[data-theme] .panel-ready-state i {
  background: var(--df-status-success);
}
html[data-theme] .image-layer-purpose {
  border-color: var(--project-line);
  background: var(--project-panel-subtle);
  color: var(--project-text-secondary);
}
html[data-theme] .segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--project-line);
  border-radius: 9px;
  background: var(--project-panel-subtle);
}
html[data-theme] .segmented-control > button {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--project-text-secondary);
}
html[data-theme] .segmented-control > button.active {
  background: var(--project-control);
  color: var(--project-text);
  box-shadow: var(--project-shadow-control);
}
html[data-theme] :is(.auto-layout-toggle-row > small, .auto-layout-controls > label, .auto-layout-anchor-grid > span) {
  color: var(--project-text-secondary);
}
html[data-theme] .auto-layout-controls input[type="range"] {
  height: 30px;
  accent-color: var(--df-action-primary);
  background: linear-gradient(var(--project-line-strong), var(--project-line-strong)) center / 100% 3px no-repeat;
}
html[data-theme] :is(.cost-callout, .playbook-context) {
  border-color: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 28%, var(--project-line));
  }
  background: var(--df-status-warning-surface);
}
html[data-theme] :is(.cost-callout strong, .playbook-context strong) {
  color: var(--project-text);
}
html[data-theme] :is(.cost-callout span, .playbook-context small) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.template-editing-banner, .template-ai-rules textarea) {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 26%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 7%, var(--project-control));
  }
}
html[data-theme] .generate-image-button {
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] :is(.image-generation-error, .multi-selection-actions button.danger) {
  color: var(--df-status-danger);
}
html[data-theme] .media-apply-error {
  border-color: var(--df-status-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-danger) 32%, var(--project-line));
  }
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] :is(
  .saved-template-head-actions button,
  .saved-template-head-actions a,
  .save-post-template
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(.inline-text-toolbar, .canvas-context-menu, .selection-quick-actions) {
  border-color: var(--df-border-on-dark);
  background: var(--df-surface-composer);
  color: var(--df-text-on-dark);
}
html[data-theme] :is(
  .inline-text-toolbar select,
  .inline-text-toolbar input[type="number"],
  .inline-text-toolbar input[type="color"],
  .inline-text-toolbar button,
  .canvas-context-menu > button,
  .selection-quick-actions button
) {
  border-color: var(--df-border-on-dark);
  background: var(--df-surface-composer-subtle);
  color: var(--df-text-on-dark-secondary);
}
html[data-theme] :is(.context-menu-title, .context-menu-title small) {
  color: var(--df-text-on-dark-secondary);
}
html[data-theme] .context-separator {
  background: var(--df-border-on-dark);
}
html[data-theme] :is(
  .mobile-hook-alternatives > button,
  .mobile-hook-alternatives > div > button,
  .mobile-image-picker-toggle,
  .mobile-overlay-controls,
  .mobile-background-controls,
  .mobile-mask-row button,
  .mobile-stroke-row > label,
  .mobile-stroke-row > button,
  .mobile-background-frame-reset,
  .mobile-font-strip button,
  .mobile-custom-color-field,
  .mobile-eyedropper-button,
  .mobile-video-background,
  .mobile-remove-video,
  .mobile-gradient-controls > label,
  .mobile-fade-controls > label
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .mobile-mask-row button.active,
  .mobile-stroke-row > button.active,
  .mobile-hook-alternatives > button,
  .mobile-image-picker.collapsed .mobile-image-picker-toggle
) {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 9%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(
  .mobile-hook-alternatives strong,
  .mobile-image-picker-toggle strong,
  .mobile-stroke-row > button strong,
  .mobile-background-controls strong,
  .mobile-eyedropper-button strong,
  .mobile-video-background strong,
  .mobile-image-choice-progress strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .mobile-tool-explainer,
  .mobile-hook-alternatives small,
  .mobile-image-picker-toggle small,
  .mobile-stroke-row > label,
  .mobile-background-controls small,
  .mobile-eyedropper-button small,
  .mobile-video-background small,
  .mobile-image-choice-progress small,
  .mobile-fade-controls p
) {
  color: var(--project-text-secondary);
}
html[data-theme] .mobile-font-strip > span {
  background: var(--project-panel);
  color: var(--project-text-secondary);
}
html[data-theme] :is(.mobile-color-swatches > button, .mobile-color-swatches > label) {
  border-color: var(--project-line-strong);
}
html[data-theme] .mobile-color-swatches > button.active {
  outline-color: var(--df-action-primary);
}
html[data-theme] :is(.mobile-image-choice-progress, .mobile-color-swatches.has-selection) {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 26%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 8%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(.mobile-color-sampler-instruction, .mobile-color-sampler-cancel) {
  border-color: var(--df-border-on-dark);
  background: var(--df-surface-composer);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-surface-composer) 92%, transparent);
  }
  color: var(--df-text-on-dark);
}
html[data-theme] :is(.editor-capacity-notice, .editor-generation-status, .generation-console) {
  border-color: var(--project-line);
  background: var(--project-overlay);
  color: var(--project-text);
}
html[data-theme] :is(.editor-capacity-notice, .editor-generation-status) {
  box-shadow: var(--project-shadow-raised);
}
html[data-theme] .generation-console {
  box-shadow: var(--project-shadow-floating);
}
html[data-theme] :is(
  .editor-capacity-notice strong,
  .editor-generation-status strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .editor-capacity-notice small,
  .editor-generation-status small
) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .background-generation-status,
  .global-generation-toast,
  .visual-recovery-status
) {
  border-color: var(--project-line);
  background: var(--project-overlay);
  color: var(--project-text-secondary);
  box-shadow: var(--project-shadow-raised);
}
html[data-theme] :is(
  .background-generation-status strong,
  .global-generation-toast strong,
  .visual-recovery-status strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .background-generation-status span,
  .global-generation-toast small,
  .visual-recovery-status small
) {
  color: var(--project-text-secondary);
}
html[data-theme] .visual-recovery-status.needs-review {
  border-color: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 34%, var(--project-line));
  }
  background: var(--df-status-warning-surface);
  color: var(--df-status-warning);
}
html[data-theme] .visual-recovery-status > button {
  border-color: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 40%, var(--project-line));
  }
  background: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-status-warning) 11%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(
  .generation-summary-copy strong,
  .generation-details-panel > header strong,
  .generation-live-copy > div,
  .generation-events strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .generation-summary-copy small,
  .generation-details-panel > header small,
  .generation-details-panel > footer span,
  .generation-phase-rail li,
  .generation-wait-note,
  .generation-events small
) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .generation-details-panel,
  .generation-console-body,
  .generation-phase-rail,
  .generation-live-copy
) {
  border-color: var(--project-line);
}
html[data-theme] .generation-console-actions button {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .generation-details-panel {
  border-color: var(--project-line);
  background: var(--project-overlay);
  color: var(--project-text);
  box-shadow: var(--project-shadow-floating);
}
html[data-theme] :is(.generation-details-panel > header, .generation-details-panel > footer) {
  border-color: var(--project-line);
}
html[data-theme] :is(.generation-details-panel > header button, .generation-details-panel > footer button) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .generation-phase-rail li > i {
  border-color: var(--project-line);
  color: var(--project-text-secondary);
}
html[data-theme] .generation-phase-rail li.active {
  color: var(--df-action-primary);
}
html[data-theme] .generation-phase-rail li.done {
  color: var(--df-status-success);
}
html[data-theme] .generation-orbit {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 28%, var(--project-line));
  }
}
html[data-theme] :is(.generation-orbit i, .generation-orbit b) {
  background: var(--df-action-primary);
  box-shadow: var(--project-shadow-action-glow);
}
html[data-theme] .generation-orbit em {
  background: var(--df-status-success);
  box-shadow: var(--project-shadow-success-glow);
}
html[data-theme] .generation-progress-track i {
  background: linear-gradient(90deg, var(--df-action-primary), var(--df-status-success));
  box-shadow: var(--project-shadow-action-glow);
}
html[data-theme] .generation-phase-rail li.active > i {
  box-shadow: var(--project-shadow-action-glow);
}
html[data-theme] :is(.generation-slide-chip i, .generation-slide-chip.imaging i) {
  background: var(--df-action-primary);
  box-shadow: 0 0 0 0 var(--project-generation-pulse-color);
  animation-name: project-generation-pulse;
}
@keyframes project-generation-pulse {
  60% {
    box-shadow: 0 0 0 5px transparent;
  }
}
html[data-theme] :is(.slide-surface.is-streaming, .editor-canvas.is-streaming) {
  box-shadow: inset 0 0 0 1px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--df-action-primary) 32%, transparent);
  }
}
html[data-theme] .conversation-workspace {
  background: radial-gradient(circle at 76% 38%, var(--df-action-primary), transparent 34%),
    var(--project-workspace);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 76% 38%, color-mix(in srgb, var(--df-action-primary) 7%, transparent), transparent 34%),
    var(--project-workspace);
  }
  color: var(--project-text);
}
html[data-theme] .conversation-feed {
  border-color: var(--project-line);
  scrollbar-color: var(--project-line-strong) transparent;
}
html[data-theme] :is(.conversation-header small, .conversation-generation small) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.conversation-header svg, .conversation-header em) {
  color: var(--df-action-primary);
}
html[data-theme] .conversation-header em {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 30%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, transparent);
  }
}
html[data-theme] :is(.conversation-generation, .conversation-slide-copy > article, .conversation-preview > nav) {
  border-color: var(--project-line);
  background: var(--project-control);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--project-control) 72%, transparent);
  }
}
html[data-theme] .conversation-generation > span {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 12%, transparent);
  }
  color: var(--df-action-primary);
}
html[data-theme] .conversation-generation > button {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .conversation-message {
  background: var(--project-control-active);
  color: var(--project-text);
}
html[data-theme] .conversation-message.user {
  background: var(--df-action-primary);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .conversation-message > button {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .conversation-slide-copy > article.active {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 8%, var(--project-control));
  }
}
html[data-theme] :is(.conversation-slide-heading, .conversation-copy-editor) {
  color: var(--project-text);
}
html[data-theme] :is(.conversation-slide-heading span, .conversation-preview > nav button.active) {
  color: var(--df-action-primary);
}
html[data-theme] .conversation-preview > nav button.active {
  border-color: var(--df-action-primary);
}
html[data-theme] .conversation-copy-editor {
  border-color: var(--project-line);
  background: var(--project-control);
}
html[data-theme] .conversation-copy-editor:focus {
  border-color: var(--df-focus-ring);
  box-shadow: var(--project-shadow-focus);
}
html[data-theme] .capacity-progress {
  background: var(--project-line);
}
html[data-theme] .capacity-progress i,
html[data-theme] .generation-progress-track i {
  background: var(--df-action-primary);
}
html[data-theme] .editor-capacity-action {
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] :is(.mobile-primary-actions, .mobile-toolbar) {
  border-color: var(--project-line);
  background: var(--project-panel);
}
html[data-theme] .mobile-primary-actions button {
  color: var(--project-text-secondary);
}
html[data-theme] .mobile-primary-actions button.active {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 12%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(.mobile-simple-sheet, .mobile-custom-color-menu) {
  border-color: var(--project-line);
  background: var(--project-panel);
  color: var(--project-text);
}
html[data-theme] .mobile-simple-sheet {
  box-shadow: var(--project-shadow-sheet);
}
html[data-theme] .mobile-custom-color-menu {
  box-shadow: var(--project-shadow-floating);
}
html[data-theme] .mobile-sheet-dismiss {
  background: transparent;
  backdrop-filter: none;
}
html[data-theme] .sheet-handle i {
  background: var(--project-line-strong);
}
html[data-theme] :is(
  .mobile-text-more,
  .mobile-image-tabs button,
  .mobile-color-mode button,
  .mobile-text-alignments button,
  .mobile-text-effects button,
  .mobile-slide-actions button,
  .mobile-ai-controls nav button,
  .mobile-slide-controls > div > button,
  .mobile-custom-color-field,
  .mobile-color-hex,
  .mobile-color-hex input
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .mobile-image-tabs button.active,
  .mobile-color-mode button.active,
  .mobile-text-alignments button.active,
  .mobile-text-effects button.active,
  .mobile-slide-controls > div > button.active
) {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 12%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] .mobile-ai-controls > div,
html[data-theme] .conversation-composer {
  border-color: var(--df-border-on-dark);
  background: var(--df-surface-composer);
  color: var(--df-text-on-dark);
}
html[data-theme] .conversation-composer > div:last-of-type > button.conversation-send,
html[data-theme] .mobile-ai-controls > div button {
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .mobile-ai-controls textarea,
html[data-theme] .conversation-composer textarea {
  color: var(--df-text-on-dark);
}
html[data-theme] .ui-segmented {
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--project-line);
  border-radius: 10px;
  background: var(--project-panel-subtle);
}
html[data-theme] .ui-segmented > button {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--project-text-secondary);
  box-shadow: none;
}
html[data-theme] .ui-segmented > button.active {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text);
  box-shadow: var(--project-shadow-control);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .ui-segmented > button:not(.active):hover {
    background: var(--project-control-hover);
    color: var(--project-text);
  }
}
html[data-theme] .ui-primary-tabs > button {
  border: 1px solid transparent;
}
html[data-theme] .ui-primary-tabs > button.active {
  border-color: var(--project-line);
  background: var(--project-control);
  box-shadow: var(--project-shadow-control);
}
html[data-theme] .editor-canvas {
  box-shadow: var(--project-shadow-canvas);
}
html[data-theme] :is(
  .text-rewrite-menu,
  .image-preparation-tray
) {
  box-shadow: var(--project-shadow-raised);
}
html[data-theme] :is(
  .slide-picker-drag-ghost,
  .deck-grid > article.selected-for-ai,
  .deck-grid > button.selected-for-ai
) {
  box-shadow: var(--project-shadow-selected);
}
html[data-theme] :is(
  .selection-quick-actions,
  .canvas-context-menu,
  .inline-text-toolbar,
  .carousel-arrow,
  .resize-dimension-badge,
  .edge-distance-guide b,
  .editor-image-placeholder > span,
  .layer-resize-handle,
  .layer-rotate-handle,
  .background-resize-handle,
  .remote-cursor span,
  .mobile-color-sampler-instruction,
  .mobile-color-sampler-loupe
) {
  box-shadow: var(--project-shadow-on-canvas);
}
html[data-theme] .mobile-custom-color-field i {
  box-shadow: var(--project-shadow-control);
}
html[data-theme] :is(
  .snap-guide,
  .edge-distance-guide,
  .mobile-color-sampler-loupe i
) {
  box-shadow: var(--project-shadow-contrast);
}
html[data-theme] :is(
  .conversation-composer,
  .mobile-ai-controls > div
) {
  box-shadow: var(--project-shadow-raised);
}
html[data-theme] .range-control > input[type="range"]::-webkit-slider-thumb {
  box-shadow: var(--project-shadow-control);
}
html[data-theme] .ranked-media-grid article > button.ranked-media-use.is-selecting {
  box-shadow: inset 0 0 0 2px var(--df-action-primary);
}
html[data-theme] .mobile-cached-images .mobile-cached-use.is-selecting {
  box-shadow: var(--project-shadow-selection-ring);
}
html[data-theme] :is(.applied-template-card.is-editing, .composition-options > button.active) {
  box-shadow: inset 0 0 0 1px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--df-action-primary) 28%, transparent);
  }
}
html[data-theme] :is(
  .composition-icon,
  .clip-text-toggle > i,
  .template-miniature,
  .custom-template-miniature,
  .inline-text-toolbar .inline-color-swatch
) {
  box-shadow: inset 0 0 0 1px var(--project-line);
}
html[data-theme] :is(.desktop-custom-color, .mobile-color-swatches > button.mobile-custom-color-trigger) {
  box-shadow: inset 0 0 0 6px var(--project-panel-subtle);
}
html[data-theme] .mobile-color-swatches.has-selection {
  box-shadow: inset 0 0 0 1px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--df-action-primary) 28%, transparent);
  }
}
html[data-theme] .panel-ready-state i {
  box-shadow: var(--project-shadow-success-glow);
}
html[data-theme] .selection-interaction-frame {
  filter: var(--project-filter-contrast);
}
html[data-theme] :is(
  .selection-interaction-frame.is-hugging-text,
  .selection-interaction-frame.kind-scrim
) {
  filter: var(--project-filter-selection);
}
html[data-theme] .remote-cursor i {
  filter: var(--project-filter-cursor);
}
html[data-theme] .editor-image-placeholder.is-overlay > span {
  box-shadow: none;
}
html[data-theme] :is(
  .share-live-note > i
) {
  box-shadow: 0 0 0 4px var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--df-status-success) 10%, transparent);
  }
}
html[data-theme] .share-live-note.edit-access > i {
  box-shadow: 0 0 0 4px var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--df-action-primary) 10%, transparent);
  }
}
html[data-theme] .conversation-preview-canvas > .slide-surface {
  box-shadow: var(--project-shadow-canvas);
}
html[data-theme] :is(
  .caption-modal,
  .share-modal,
  .video-source-modal,
  .template-save-modal,
  .export-modal,
  .cost-modal,
  .fact-modal,
  .usage-modal,
  .billing-checkout-dialog
) {
  border-color: var(--project-line);
  background: var(--project-panel);
  color: var(--project-text);
  box-shadow: var(--df-shadow-overlay);
}
html[data-theme] :is(
  .video-upload-option,
  .video-url-form input,
  .video-export-note
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .video-upload-option strong,
  .video-preparation-progress strong,
  .video-export-note strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .video-upload-option small,
  .video-preparation-progress small,
  .video-export-note small,
  .video-source-divider,
  .video-url-form label
) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.video-source-divider::before, .video-source-divider::after) {
  background: var(--project-line);
}
html[data-theme] .video-url-form > button {
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .video-preparation-progress {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 30%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 9%, var(--project-control));
  }
  color: var(--df-action-primary);
}
html[data-theme] .video-preparation-error {
  border-color: var(--df-status-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-danger) 32%, var(--project-line));
  }
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] :is(
  .share-access-picker label,
  .share-link-row,
  .template-name-field input,
  .template-scope-picker > button,
  .template-instructions-field textarea
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text);
}
html[data-theme] :is(
  .share-modal > p,
  .share-access-picker label > span,
  .share-access-picker p,
  .share-link-row > span,
  .template-name-field > span,
  .template-instructions-field > span,
  .template-instructions-field small,
  .template-scope-picker small
) {
  color: var(--project-text-secondary);
}
html[data-theme] .share-access-picker select {
  background: var(--project-control-active);
  color: var(--project-text);
}
html[data-theme] .template-scope-picker > button.active {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(
  .primary-modal,
  .export-action button,
  .export-action a.export-download,
  .export-template-handoff button
) {
  border-color: var(--df-action-primary-border) !important;
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] :is(
  .secondary-modal,
  .modal-head > button,
  .export-status button,
  .export-caption-block > header button,
  .usage-modal-footer > a,
  .fact-sources a
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(.caption-modal > textarea, .export-action .secondary-export) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text);
}
html[data-theme] .caption-signals span {
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] :is(.readiness-list strong, .export-action strong) {
  color: var(--project-text);
}
html[data-theme] :is(.readiness-list span, .export-action small) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.modal-head, .modal-footer, .export-action, .billing-checkout-header, .billing-checkout-footer) {
  border-color: var(--project-line);
  background: var(--project-panel);
}
html[data-theme] :is(
  .modal-head h2,
  .modal-head strong,
  .export-status strong,
  .export-caption-block strong,
  .billing-checkout-header h2,
  .billing-checkout-summary strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .modal-head p,
  .modal-head span,
  .modal-footer,
  .export-status small,
  .export-caption-block small,
  .billing-checkout-header > div > span,
  .billing-checkout-summary span,
  .billing-checkout-footer
) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .export-status,
  .export-caption-block,
  .export-template-handoff,
  .fact-checking,
  .fact-claim,
  .fact-score-card,
  .billing-checkout-summary,
  .export-gallery-card,
  .usage-balance-card,
  .usage-next-plan,
  .usage-next-benefits > span,
  .usage-upgrade-action
) {
  border-color: var(--project-line);
  background: var(--project-control);
}
html[data-theme] :is(
  .fact-checking strong,
  .fact-check-error strong,
  .fact-stale strong,
  .fact-score-card > div strong,
  .fact-claim blockquote,
  .fact-empty strong,
  .export-gallery-card footer,
  .usage-balance-heading strong,
  .usage-balance-heading em,
  .usage-balance-details strong,
  .usage-next-copy h3,
  .usage-next-benefits strong,
  .usage-upgrade-action > span strong
) {
  color: var(--project-text);
}
html[data-theme] :is(
  .fact-checking small,
  .fact-check-error small,
  .fact-stale small,
  .fact-score-card > div span,
  .fact-score-card p,
  .fact-claim > p,
  .fact-empty span,
  .export-gallery-card footer small,
  .usage-balance-heading small,
  .usage-balance-details small,
  .usage-capacity-note,
  .usage-next-copy > p,
  .usage-next-benefits small,
  .usage-upgrade-action > span small,
  .usage-upgrade-action > small
) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.fact-check-error, .usage-modal-message.is-error) {
  border-color: var(--df-status-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-danger) 32%, var(--project-line));
  }
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] :is(.fact-score-card.is-passed, .usage-modal-message.is-success) {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 32%, var(--project-line));
  }
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .fact-score-card:not(.is-passed) {
  border-color: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 32%, var(--project-line));
  }
  background: var(--df-status-warning-surface);
}
html[data-theme] .usage-meter {
  background: var(--project-line);
}
html[data-theme] .usage-meter i {
  background: var(--df-action-primary);
}
html[data-theme] .export-caption-block > textarea {
  color: var(--project-text);
}
html[data-theme] .modal-backdrop {
  background: var(--df-palette-ink);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-palette-ink) 70%, transparent);
  }
}
html[data-theme] .toast {
  border-color: var(--project-line);
  background: var(--project-overlay);
  color: var(--project-text);
  box-shadow: var(--project-shadow-raised);
}
html[data-theme] .brand-copy strong em {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 32%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, var(--project-control));
  }
  color: var(--df-action-primary);
}
html[data-theme] :is(.template-review-label, .template-review-mobile-label) {
  border-color: var(--df-status-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 42%, var(--project-line));
  }
  background: var(--df-status-warning-surface);
  color: var(--df-status-warning) !important;
}
html[data-theme] :is(.template-load-actions > button, .template-load-actions > a) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .template-load-actions > :first-child {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 38%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, var(--project-control));
  }
  color: var(--df-action-primary);
}
html[data-theme] :is(.cost-chip em, .cost-chip small) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.usage-chip.is-low, .focus-header .mobile-usage-chip.is-low) {
  border-color: var(--df-status-warning) !important;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-warning) 36%, var(--project-line)) !important;
  }
  background: var(--df-status-warning-surface) !important;
  color: var(--df-status-warning);
}
html[data-theme] .focus-header .mobile-usage-chip {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .grid-ai-badge {
  color: var(--df-action-primary-foreground) !important;
}
html[data-theme] .grid-summary span {
  border-color: var(--project-line);
  color: var(--df-status-warning);
}
html[data-theme] .slide-rail > button.active::before {
  border-color: var(--df-action-primary);
}
html[data-theme] .grid-add-card > span {
  border-color: var(--project-line-strong);
  background: var(--project-control);
}
html[data-theme] .grid-add-card strong {
  color: var(--project-text);
}
html[data-theme] .grid-add-card small {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.canvas-color, .large-layer-icon.canvas-color) {
  border-color: var(--project-line-strong) !important;
}
html[data-theme] .context-color {
  color: var(--project-text-secondary);
}
html[data-theme] .context-color input {
  border-color: var(--project-line);
  background: var(--project-control);
}
html[data-theme] .muted-icon {
  color: var(--project-text-tertiary);
}
html[data-theme] :is(.selection-quick-actions button.danger, .canvas-context-menu > button.danger) {
  color: var(--df-status-danger);
}
html[data-theme] .editor-generation-status.error {
  color: var(--df-status-danger);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .panel-footer button:hover:not(:disabled) {
    border-color: var(--project-line-strong);
    background: var(--project-control-hover);
    color: var(--project-text);
  }
  html[data-theme] .panel-footer button.danger:hover:not(:disabled) {
    border-color: var(--df-status-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--df-status-danger) 38%, var(--project-line));
    }
    background: var(--df-status-danger-surface);
    color: var(--df-status-danger);
  }
}
html[data-theme] .desktop-rich-text-input:empty::before {
  color: var(--rich-text-editor-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--rich-text-editor-foreground) 58%, transparent);
  }
  -webkit-text-fill-color: var(--rich-text-editor-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    -webkit-text-fill-color: color-mix(in srgb, var(--rich-text-editor-foreground) 58%, transparent);
  }
}
html[data-theme] .desktop-control-label.has-selection {
  color: var(--df-action-primary);
}
html[data-theme] :is(
  .text-rewrite-trigger small,
  .text-rewrite-trigger > svg:last-child,
  .text-rewrite-menu > header small,
  .text-layout-actions small,
  .desktop-image-stroke-row > button strong,
  .range-control strong,
  .canvas-color-control strong,
  .image-fit-controls button small,
  .media-actions small,
  .ai-context small
) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.text-rewrite-menu > header strong, .text-layout-actions > button.active strong) {
  color: var(--project-text);
}
html[data-theme] :is(
  .text-rewrite-custom > button,
  .desktop-text-effects input[type="color"],
  .select-row input[type="color"]
) {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(.desktop-text-alignments > i, .mobile-text-alignments > i) {
  background: var(--project-line);
}
html[data-theme] :is(.desktop-advanced-divider span, .modifier-note strong) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .text-layout-actions > button > svg,
  .text-layout-actions > button > b
) {
  color: var(--project-text-secondary);
}
html[data-theme] :is(
  .text-layout-actions > button.active > svg,
  .text-layout-actions > button.active > b,
  .bottom-fade-toggle > em,
  .cost-hero svg
) {
  color: var(--df-action-primary);
}
html[data-theme] .desktop-image-stroke-row > button.active {
  border-color: var(--df-action-primary);
  color: var(--project-text);
}
html[data-theme] .media-search-loading.has-results {
  border-color: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-action-primary) 28%, var(--project-line));
  }
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 8%, var(--project-control));
  }
  color: var(--project-text-secondary);
}
html[data-theme] .media-apply-progress small {
  color: var(--project-text-secondary);
}
html[data-theme] .text-fact-check.passed > svg:first-child {
  color: var(--df-status-success);
}
html[data-theme] .text-fact-check.review > svg:first-child {
  color: var(--df-status-warning);
}
html[data-theme] .grid-quick-edit-head em {
  background: var(--project-panel-subtle);
  color: var(--project-text-secondary);
}
html[data-theme] .playbook-context > span {
  background: var(--df-status-warning-surface);
  color: var(--df-status-warning);
}
html[data-theme] .ai-composer button {
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .billing-checkout-state.is-error {
  color: var(--df-status-danger);
}
html[data-theme] .fact-stale {
  border-color: var(--project-line);
  background: var(--project-control);
}
html[data-theme] .fact-claim header span {
  background: var(--df-status-warning-surface);
  color: var(--df-status-warning);
}
html[data-theme] .fact-claim.is-supported header span {
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .fact-claim.is-unsupported header span {
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] .fact-correction {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 8%, var(--project-control));
  }
}
html[data-theme] .fact-correction span {
  color: var(--df-action-primary);
}
html[data-theme] .fact-correction strong {
  color: var(--project-text);
}
html[data-theme] :is(.export-status > span, .usage-next-copy > span) {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 10%, var(--project-control));
  }
  color: var(--df-action-primary);
}
html[data-theme] .export-readiness span {
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] :is(.export-caption-block > header svg, .export-template-handoff > span, .usage-next-benefits svg) {
  color: var(--df-action-primary);
}
html[data-theme] .export-template-handoff strong {
  color: var(--project-text);
}
html[data-theme] .export-template-handoff small,
html[data-theme] .modal-footer > span {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.export-gallery-card footer a, .export-gallery-card footer button) {
  color: var(--df-action-primary);
}
html[data-theme] .usage-boost-note {
  color: var(--df-status-success);
}
html[data-theme] .usage-upgrade-action button {
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .usage-top-plan > a {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text);
}
html[data-theme] .readiness-list i.ready {
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .image-preparation-tray {
  border-color: var(--project-line);
  background: var(--project-overlay);
  color: var(--project-text);
}
html[data-theme] .image-preparation-heading {
  color: var(--project-text);
}
html[data-theme] .image-preparation-heading small,
html[data-theme] .image-preparation-task small,
html[data-theme] .image-preparation-dismiss {
  color: var(--project-text-secondary);
}
html[data-theme] .image-preparation-task {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .image-preparation-task:hover {
    border-color: var(--project-line-strong);
    background: var(--project-control-hover);
  }
  html[data-theme] .image-preparation-dismiss:hover {
    background: var(--project-control-hover);
    color: var(--project-text);
  }
}
html[data-theme] .image-preparation-icon {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 12%, var(--project-control));
  }
  color: var(--df-action-primary);
}
html[data-theme] .image-preparation-task.is-completed .image-preparation-icon {
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .image-preparation-task.is-review .image-preparation-icon {
  background: var(--df-status-warning-surface);
  color: var(--df-status-warning);
}
html[data-theme] .image-preparation-task.is-failed .image-preparation-icon {
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] .editor-capacity-notice button {
  border-color: var(--project-line);
}
html[data-theme] .editor-capacity-dismiss {
  color: var(--project-text-secondary);
}
html[data-theme] .generation-console-actions .generation-details-toggle {
  color: var(--df-action-primary);
}
html[data-theme] .generation-phase-rail li::after {
  background: var(--project-line);
}
html[data-theme] .generation-phase-rail li.done > i {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 34%, var(--project-line));
  }
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .generation-events li > i {
  border-color: var(--project-line);
  color: var(--df-action-primary);
}
html[data-theme] .generation-events li.done > i {
  color: var(--df-status-success);
}
html[data-theme] .inline-text-toolbar button.clear {
  color: var(--project-text-secondary);
}
html[data-theme] .share-link-row.is-loading > span {
  color: var(--project-text-tertiary);
}
html[data-theme] .share-live-note {
  background: var(--df-status-success-surface);
}
html[data-theme] .share-live-note > i {
  background: var(--df-status-success);
}
html[data-theme] .share-live-note strong {
  color: var(--project-text);
}
html[data-theme] .share-live-note small {
  color: var(--project-text-secondary);
}
html[data-theme] .share-live-note.edit-access {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 8%, var(--project-control));
  }
}
html[data-theme] .share-live-note.edit-access > i {
  background: var(--df-action-primary);
}
html[data-theme] .share-live-note.edit-access strong {
  color: var(--project-text);
}
html[data-theme] .share-live-note.edit-access small {
  color: var(--project-text-secondary);
}
html[data-theme] :is(.generation-percent, .generation-percent.researching) {
  color: var(--df-action-primary);
}
html[data-theme] .saved-template-mini {
  background: var(--project-panel-subtle);
}
html[data-theme] .saved-template-mini i {
  background: var(--project-line-strong);
}
html[data-theme] .saved-template-mini b {
  background: var(--df-action-primary);
}
html[data-theme] .saved-template-mini em {
  background: var(--project-text-secondary);
}
html[data-theme] :is(.template-editing-banner > span, .template-setup-intro > span) {
  color: var(--df-action-primary);
}
html[data-theme] :is(.template-editing-banner small, .template-layer-open > svg) {
  color: var(--project-text-secondary);
}
html[data-theme] .vertical-text-align > button.active {
  border-color: var(--df-action-primary);
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 12%, var(--project-control));
  }
  color: var(--project-text);
}
html[data-theme] :is(.clip-text-toggle strong, .template-reference-source-option > span) {
  color: var(--project-text);
}
html[data-theme] :is(.clip-text-toggle small, .template-reference-source-option small) {
  color: var(--project-text-secondary);
}
html[data-theme] .clip-text-toggle > i::after {
  background: var(--project-text-secondary);
}
html[data-theme] .clip-text-toggle:has(input:checked) > i {
  background: var(--df-action-primary);
}
html[data-theme] .clip-text-toggle:has(input:checked) > i::after {
  background: var(--df-action-primary-foreground);
}
html[data-theme] .template-reference-source-option {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 32%, var(--project-line));
  }
  background: var(--df-status-success-surface);
}
html[data-theme] .template-save-actions > button {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] .template-save-actions > button.primary {
  border-color: var(--df-action-primary-border);
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .composition-fidelity.fidelity-ready .fidelity-score,
html[data-theme] .reuse-indicator span {
  color: var(--df-status-success);
}
html[data-theme] .composition-fidelity.fidelity-repair .fidelity-score {
  color: var(--df-status-warning);
}
html[data-theme] .reuse-indicator.fresh span {
  color: var(--df-action-primary);
}
html[data-theme] .mobile-simple-sheet > header > i {
  background: var(--project-text-tertiary);
}
html[data-theme] :is(.mobile-close, .mobile-simple-sheet > header button) {
  border: 0;
  background: transparent;
  color: var(--project-text-secondary);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] :is(.mobile-close, .mobile-simple-sheet > header button):hover {
    background: var(--project-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--project-text) 7%, transparent);
    }
    color: var(--project-text);
  }
}
html[data-theme] :is(.mobile-close, .mobile-simple-sheet > header button):active {
  background: var(--project-text);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--project-text) 10%, transparent);
  }
  color: var(--project-text);
}
html[data-theme] .mobile-simple-sheet > header strong {
  color: var(--project-text);
}
html[data-theme] .mobile-simple-sheet > header small {
  color: var(--project-text-secondary);
}
html[data-theme] .mobile-simple-sheet > footer {
  border-color: var(--project-line);
  background: var(--project-panel);
}
html[data-theme] .mobile-simple-sheet > footer button {
  border-color: var(--df-action-primary-border);
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] :is(.mobile-hook-alternatives > button strong, .mobile-custom-color-menu > div:first-child strong) {
  color: var(--project-text);
}
html[data-theme] :is(
  .mobile-hook-alternatives > button small,
  .mobile-hook-alternatives > div em,
  .mobile-text-input-wrap small,
  .mobile-custom-color-menu > div:first-child small,
  .mobile-custom-color-field > strong,
  .mobile-text-alignments > span,
  .mobile-text-effects > span,
  .mobile-slide-controls > p,
  .mobile-slide-controls small,
  .mobile-ai-controls > span small
) {
  color: var(--project-text-secondary);
}
html[data-theme] .mobile-hook-alternatives > p {
  color: var(--df-status-danger);
}
html[data-theme] .mobile-text-input-wrap textarea {
  border-color: var(--project-line);
  background: var(--project-control);
  color: var(--project-text);
}
html[data-theme] .mobile-text-rich-input[data-retained-selection="true"] [data-rich-selection] {
  background: var(--df-focus-ring);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-focus-ring) 22%, transparent);
  }
  box-shadow: 0 0 0 1px var(--df-focus-ring);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--df-focus-ring) 34%, transparent);
  }
}
html[data-theme] :is(.mobile-font-strip button.active, .desktop-font-strip button.active) {
  border-color: var(--df-action-primary);
  color: var(--project-text);
}
html[data-theme] .mobile-custom-color-menu > div:first-child > button {
  background: var(--project-control);
  color: var(--project-text-secondary);
}
html[data-theme] :is(.mobile-eyedropper-button > svg, .mobile-ai-controls > span svg) {
  color: var(--df-action-primary);
}
html[data-theme] :is(.mobile-text-effects input[type="color"]) {
  border-color: var(--project-line);
  background: var(--project-control);
}
html[data-theme] .mobile-slide-type-icon {
  background: var(--project-panel-subtle);
}
html[data-theme] .mobile-slide-type-icon i {
  background: var(--project-line-strong);
}
html[data-theme] .mobile-slide-type-icon b {
  background: var(--project-text);
}
html[data-theme] .mobile-slide-actions button.danger {
  color: var(--df-status-danger);
}
html[data-theme] .creation-switch em {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 12%, transparent);
  }
  color: var(--df-action-primary);
}
html[data-theme] .conversation-generation.error {
  border-color: var(--df-status-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-danger) 34%, var(--project-line));
  }
}
html[data-theme] .conversation-generation.error > span {
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] .conversation-generation.ready > span {
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] :is(
  .conversation-slide-heading svg,
  .conversation-slide-copy label > span,
  .conversation-copy-editor[data-readonly="true"],
  .conversation-empty-copy,
  .conversation-composer > div:last-of-type > span
) {
  color: var(--project-text-secondary);
}
html[data-theme] .conversation-composer > small {
  color: var(--df-status-danger);
}
html[data-theme] .conversation-composer > div:last-of-type > button.recording {
  border-color: var(--df-status-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-danger) 42%, var(--df-border-on-dark));
  }
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] .conversation-attachments button {
  border-color: var(--df-border-on-dark);
  background: var(--df-surface-composer-subtle);
  color: var(--df-text-on-dark);
}
html[data-theme] .collaborator-avatars span {
  border-color: var(--project-bar);
  color: var(--presence-on-color);
}
html[data-theme] .remote-cursor {
  color: var(--presence-color);
}
html[data-theme] .remote-cursor span {
  background: var(--presence-color);
  color: var(--presence-on-color);
}
html[data-theme] .studio-root :is(a, button, input, textarea, select, [tabindex], [contenteditable="true"]):focus-visible {
  outline: 3px solid var(--df-focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
html[data-theme] .studio-root .editor-canvas:focus-visible {
  outline: 0 !important;
  box-shadow: var(--project-shadow-focus), var(--project-shadow-canvas) !important;
}
html[data-theme] .studio-root .desktop-rich-text-input:focus-visible {
  outline: 0 !important;
  box-shadow: var(--project-shadow-focus) !important;
}
html[data-theme] .editor-control-axis-label {
  display: flex;
  min-height: 36px;
  box-sizing: border-box;
  align-items: center;
  padding: 0;
  background: var(--project-panel);
  color: var(--project-text-secondary);
  font-size: var(--df-type-meta-size) !important;
  font-weight: var(--df-type-weight-heavy-label);
  line-height: var(--df-type-line-compact);
  letter-spacing: 0;
  text-transform: uppercase;
}
html[data-theme] .desktop-primary-controls .editor-control-axis-label {
  width: var(--df-editor-control-label-column);
  flex: 0 0 var(--df-editor-control-label-column);
}
html[data-theme] :is(
  .desktop-text-alignments,
  .desktop-text-effects,
  .desktop-font-strip,
  .font-weight-strip
) {
  gap: var(--df-editor-control-axis-gap);
}
html[data-theme] :is(
  .desktop-text-alignments,
  .desktop-text-effects,
  .desktop-font-strip,
  .font-weight-strip
) button {
  font-size: var(--df-type-control-size);
  line-height: var(--df-type-line-compact);
}
html[data-theme] body:has(.studio-root) :is(
  .ui-menu-surface,
  .inline-text-toolbar,
  .canvas-context-menu,
  .selection-quick-actions,
  .text-rewrite-menu,
  .generation-console,
  .global-generation-toast,
  .toast,
  .image-preparation-tray,
  .mobile-custom-color-menu
) {
  --project-overlay: var(--df-surface-composer);
  --project-panel: var(--df-surface-composer);
  --project-panel-subtle: var(--df-surface-composer-subtle);
  --project-control: var(--df-surface-composer-subtle);
  --project-control-hover: var(--df-text-on-dark);
  @supports (color: color-mix(in lab, red, red)) {
    --project-control-hover: color-mix(in srgb, var(--df-text-on-dark) 8%, var(--df-surface-composer-subtle));
  }
  --project-control-active: var(--df-text-on-dark);
  @supports (color: color-mix(in lab, red, red)) {
    --project-control-active: color-mix(in srgb, var(--df-text-on-dark) 12%, var(--df-surface-composer-subtle));
  }
  --project-text: var(--df-text-on-dark);
  --project-text-secondary: var(--df-text-on-dark-secondary);
  --project-text-tertiary: var(--df-text-on-dark-secondary);
  @supports (color: color-mix(in lab, red, red)) {
    --project-text-tertiary: color-mix(in srgb, var(--df-text-on-dark-secondary) 68%, transparent);
  }
  --project-line: var(--df-border-on-dark);
  --project-line-strong: var(--df-text-on-dark);
  @supports (color: color-mix(in lab, red, red)) {
    --project-line-strong: color-mix(in srgb, var(--df-text-on-dark) 28%, var(--df-border-on-dark));
  }
  border-color: var(--df-border-on-dark);
  background: var(--df-surface-composer);
  color: var(--df-text-on-dark);
}
@media (max-width: 960px) {
  html[data-theme] body:has(.studio-root) {
    background: var(--project-workspace);
  }
  html[data-theme] .editor-panel {
    border-color: var(--project-line);
    background: var(--project-overlay);
    box-shadow: var(--project-shadow-sheet);
  }
  html[data-theme] .studio-root.mobile-sheet-open .studio-topbar {
    background: transparent;
  }
}
html[data-theme] .schedule-page {
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--df-surface-canvas);
  color: var(--df-text-primary);
  font-family: var(--font-geist-sans), Arial, sans-serif;
}
html[data-theme] .schedule-page *,
html[data-theme] .schedule-page *::before,
html[data-theme] .schedule-page *::after {
  box-sizing: border-box;
}
html[data-theme] .schedule-page button,
html[data-theme] .schedule-page input,
html[data-theme] .schedule-page select {
  font: inherit;
}
html[data-theme] .schedule-page button {
  cursor: pointer;
}
html[data-theme] .schedule-page button:disabled {
  cursor: not-allowed;
  opacity: .46;
}
html[data-theme] .schedule-page button:focus-visible,
html[data-theme] .schedule-page input:focus-visible,
html[data-theme] .schedule-page select:focus-visible {
  outline: 3px solid var(--df-focus-ring);
  outline-offset: 2px;
}
html[data-theme] .schedule-header {
  position: sticky;
  z-index: 40;
  top: 0;
  display: grid;
  min-height: 68px;
  padding: 10px clamp(16px, 2.2vw, 32px);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--df-border-subtle);
  background: var(--df-surface-canvas);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-surface-canvas) 92%, transparent);
  }
  backdrop-filter: blur(18px) saturate(130%);
}
html[data-theme] .schedule-header-start,
html[data-theme] .schedule-header-actions,
html[data-theme] .schedule-header-date,
html[data-theme] .schedule-profile-select,
html[data-theme] .schedule-button,
html[data-theme] .schedule-icon-button,
html[data-theme] .schedule-view-switch,
html[data-theme] .schedule-contract,
html[data-theme] .schedule-next-action,
html[data-theme] .schedule-status-group > header,
html[data-theme] .schedule-post-row,
html[data-theme] .schedule-plan-card > header,
html[data-theme] .schedule-inspiration-card > header,
html[data-theme] .schedule-week-summary,
html[data-theme] .schedule-settings > header,
html[data-theme] .schedule-settings-section > header,
html[data-theme] .schedule-settings-actions,
html[data-theme] .schedule-settings > footer,
html[data-theme] .schedule-new-profile > header,
html[data-theme] .schedule-email-modal > header {
  display: flex;
  align-items: center;
}
html[data-theme] .schedule-header-start {
  min-width: 0;
  gap: 12px;
}
html[data-theme] .schedule-header-start h1 {
  margin: 0 5px 0 0;
  font-size: var(--df-type-section-title-size);
  font-weight: var(--df-type-weight-semibold);
  letter-spacing: var(--df-type-tracking-tight);
}
html[data-theme] .schedule-icon-button {
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
  justify-content: center;
  border: 1px solid var(--df-border-subtle);
  border-radius: 10px;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .schedule-icon-button svg {
  width: 18px;
  height: 18px;
}
html[data-theme] .schedule-icon-button.tertiary {
  border-color: transparent;
  background: transparent;
  color: var(--df-text-secondary);
}
html[data-theme] .schedule-profile-select {
  min-width: 0;
  height: 44px;
  padding: 0 12px 0 7px;
  gap: 8px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 10px;
  background: var(--df-surface-raised);
}
html[data-theme] .schedule-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: var(--df-surface-composer);
  color: var(--df-text-on-dark);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-bold);
}
html[data-theme] .schedule-profile-select select {
  max-width: 190px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--df-text-primary);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-medium);
}
html[data-theme] .schedule-header-date {
  justify-content: center;
  gap: 2px;
}
html[data-theme] .schedule-date-control {
  position: relative;
  display: flex;
  height: 44px;
  padding: 0 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 10px;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-medium);
}
html[data-theme] .schedule-date-control svg {
  width: 15px;
  color: var(--df-text-secondary);
}
html[data-theme] .schedule-date-control input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
html[data-theme] .schedule-header-actions {
  justify-content: flex-end;
  gap: 8px;
}
html[data-theme] .schedule-view-switch {
  height: 44px;
  padding: 3px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 10px;
  background: var(--df-surface-subtle);
}
html[data-theme] .schedule-view-switch button {
  display: flex;
  height: 36px;
  padding: 0 11px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--df-text-secondary);
  font-size: var(--df-type-control-size);
  font-weight: var(--df-type-weight-medium);
}
html[data-theme] .schedule-view-switch button.active {
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  box-shadow: 0 1px 2px var(--df-text-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--df-text-primary) 10%, transparent);
  }
}
html[data-theme] .schedule-view-switch svg {
  width: 14px;
  height: 14px;
}
html[data-theme] .schedule-button {
  min-height: 44px;
  padding: 0 16px;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-medium);
  white-space: nowrap;
}
html[data-theme] .schedule-button svg {
  width: 15px;
  height: 15px;
}
html[data-theme] .schedule-button.primary {
  border-color: var(--df-action-primary-border);
  background: var(--df-action-primary-fill);
  box-shadow: var(--df-action-primary-shadow);
  color: var(--df-action-primary-foreground);
}
html[data-theme] .schedule-button.secondary {
  background: var(--df-surface-raised);
}
html[data-theme] .schedule-button.tertiary {
  min-height: 40px;
  padding-inline: 8px;
  border-color: transparent;
  background: transparent;
  color: var(--df-text-secondary);
}
html[data-theme] .schedule-button.wide {
  width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme] .schedule-button.primary:hover {
    background: var(--df-action-primary-fill-hover);
  }
  html[data-theme] .schedule-button.secondary:hover,
  html[data-theme] .schedule-icon-button:hover {
    border-color: var(--df-border-strong);
  }
  html[data-theme] .schedule-button.tertiary:hover,
  html[data-theme] .schedule-icon-button.tertiary:hover {
    background: var(--df-surface-subtle);
    color: var(--df-text-primary);
  }
}
html[data-theme] .schedule-contract {
  min-height: 42px;
  padding: 9px clamp(18px, 3vw, 44px);
  gap: 9px;
  border-bottom: 1px solid var(--df-border-subtle);
  background: var(--df-surface-raised);
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
}
html[data-theme] .schedule-contract strong {
  color: var(--df-text-primary);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .schedule-pause-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--df-text-tertiary);
  box-shadow: 0 0 0 4px var(--df-text-tertiary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--df-text-tertiary) 12%, transparent);
  }
}
html[data-theme] .schedule-pause-dot.on {
  background: var(--df-status-success);
  box-shadow: 0 0 0 4px var(--df-status-success-surface);
}
html[data-theme] .schedule-toast {
  position: fixed;
  z-index: 80;
  top: 78px;
  left: 50%;
  display: flex;
  min-height: 44px;
  max-width: min(520px, calc(100vw - 28px));
  padding: 8px 8px 8px 14px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--df-border-strong);
  border-radius: 11px;
  background: var(--df-surface-overlay);
  color: var(--df-text-primary);
  box-shadow: var(--df-shadow-overlay);
  font-size: var(--df-type-control-size);
  transform: translateX(-50%);
}
html[data-theme] .schedule-toast button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--df-text-secondary);
}
html[data-theme] .schedule-toast svg {
  width: 14px;
}
html[data-theme] .schedule-body {
  display: grid;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 24px clamp(18px, 3vw, 44px) 60px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  align-items: start;
  gap: 18px;
}
html[data-theme] .schedule-main-column {
  min-width: 0;
}
html[data-theme] .schedule-next-action {
  min-height: 128px;
  padding: 22px 24px;
  gap: 16px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 15px;
  background: var(--df-surface-raised);
  box-shadow: var(--df-shadow-raised);
}
html[data-theme] .schedule-next-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--df-category-surface);
  color: var(--df-category-color);
}
html[data-theme] .schedule-next-icon svg {
  width: 22px;
}
html[data-theme] .schedule-next-action > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}
html[data-theme] .schedule-next-action span,
html[data-theme] .schedule-plan-card > header span,
html[data-theme] .schedule-inspiration-card > header span,
html[data-theme] .schedule-settings > header span,
html[data-theme] .schedule-settings-section > header span,
html[data-theme] .schedule-new-profile > header span {
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-bold);
  letter-spacing: var(--df-type-tracking-label);
  text-transform: uppercase;
}
html[data-theme] .schedule-next-action h2 {
  margin: 4px 0 5px;
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: var(--df-type-weight-semibold);
  letter-spacing: -.04em;
  line-height: 1.1;
}
html[data-theme] .schedule-next-action p {
  max-width: 720px;
  margin: 0;
  color: var(--df-text-secondary);
  font-size: var(--df-type-body-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .schedule-week-strip {
  display: grid;
  min-height: 76px;
  margin: 14px 0;
  grid-template-columns: 44px repeat(7, minmax(68px, 1fr)) 44px;
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 13px;
  background: var(--df-surface-raised);
}
html[data-theme] .schedule-week-strip > button {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 9px 6px;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  border-right: 1px solid var(--df-border-subtle);
  background: transparent;
  color: var(--df-text-secondary);
}
html[data-theme] .schedule-week-strip > button:last-child {
  border-right: 0;
}
html[data-theme] .schedule-week-strip > button.active {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 8%, var(--df-surface-raised));
  }
  color: var(--df-text-primary);
}
html[data-theme] .schedule-week-strip > button.active::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--df-action-primary);
  content: "";
}
html[data-theme] .schedule-week-strip span {
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-bold);
  text-transform: uppercase;
}
html[data-theme] .schedule-week-strip strong {
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-medium);
}
html[data-theme] .schedule-week-strip em {
  color: var(--df-text-tertiary);
  font-size: var(--df-type-caption-size);
  font-style: normal;
}
html[data-theme] .schedule-week-strip em.ready {
  color: var(--df-status-success);
  font-weight: var(--df-type-weight-bold);
}
html[data-theme] .schedule-week-strip svg {
  width: 16px;
}
html[data-theme] .schedule-agenda,
html[data-theme] .schedule-week-grid,
html[data-theme] .schedule-plan-card,
html[data-theme] .schedule-inspiration-card {
  border: 1px solid var(--df-border-subtle);
  border-radius: 15px;
  background: var(--df-surface-raised);
}
html[data-theme] .schedule-agenda {
  min-height: 430px;
  overflow: hidden;
}
html[data-theme] .schedule-status-group + .schedule-status-group {
  border-top: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-status-group > header {
  min-height: 48px;
  padding: 0 18px;
  gap: 8px;
  background: var(--df-surface-subtle);
}
html[data-theme] .schedule-status-group h3 {
  margin: 0;
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .schedule-status-group header em {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 99px;
  background: var(--df-surface-raised);
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  font-style: normal;
}
html[data-theme] .schedule-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--df-category-structure);
}
html[data-theme] .schedule-status-group.status-ready .schedule-status-dot {
  background: var(--df-status-success);
}
html[data-theme] .schedule-status-group.status-generating .schedule-status-dot {
  background: var(--df-category-ai);
}
html[data-theme] .schedule-status-group.status-failed .schedule-status-dot {
  background: var(--df-status-danger);
}
html[data-theme] .schedule-post-row {
  min-height: 88px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 60px 62px minmax(180px, 1fr) 104px 112px 44px;
  gap: 12px;
  border-top: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-status-group > div > .schedule-post-row:first-child {
  border-top: 0;
}
html[data-theme] .schedule-post-row time {
  color: var(--df-text-primary);
  font-family: var(--font-geist-mono), monospace;
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-medium);
}
html[data-theme] .schedule-post-preview {
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 8px;
  background: var(--df-surface-subtle);
}
html[data-theme] .schedule-post-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html[data-theme] .schedule-post-preview > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: var(--df-category-surface);
  color: var(--df-category-color);
}
html[data-theme] .schedule-post-preview svg {
  width: 18px;
}
html[data-theme] .schedule-post-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
html[data-theme] .schedule-post-copy > span,
html[data-theme] .schedule-post-cost span {
  color: var(--df-text-tertiary);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-semibold);
  text-transform: uppercase;
}
html[data-theme] .schedule-post-copy > strong {
  overflow: hidden;
  color: var(--df-text-primary);
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .schedule-post-copy > small {
  overflow: hidden;
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .schedule-post-cost {
  display: grid;
  gap: 3px;
}
html[data-theme] .schedule-post-cost strong {
  color: var(--df-text-primary);
  font-family: var(--font-geist-mono), monospace;
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-medium);
}
html[data-theme] .schedule-status {
  display: flex;
  min-height: 28px;
  padding: 4px 8px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 7px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-semibold);
  text-align: center;
}
html[data-theme] .schedule-status svg {
  width: 12px;
}
html[data-theme] .schedule-status.status-ready {
  background: var(--df-status-success-surface);
  color: var(--df-status-success);
}
html[data-theme] .schedule-status.status-generating {
  background: var(--df-category-ai-surface);
  color: var(--df-category-ai);
}
html[data-theme] .schedule-status.status-failed {
  background: var(--df-status-danger-surface);
  color: var(--df-status-danger);
}
html[data-theme] .schedule-empty {
  display: grid;
  min-height: 420px;
  padding: 44px;
  place-items: center;
  align-content: center;
  gap: 9px;
  text-align: center;
}
html[data-theme] .schedule-empty > svg {
  width: 28px;
  color: var(--df-text-tertiary);
}
html[data-theme] .schedule-empty h3 {
  margin: 4px 0 0;
  font-size: var(--df-type-panel-title-size);
}
html[data-theme] .schedule-empty p {
  max-width: 360px;
  margin: 0 0 9px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-body-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .schedule-week-grid {
  display: grid;
  min-height: 480px;
  margin-top: 14px;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  overflow-x: auto;
}
html[data-theme] .schedule-week-grid > section {
  min-width: 120px;
  border-right: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-week-grid > section:last-child {
  border-right: 0;
}
html[data-theme] .schedule-week-grid > section.active {
  background: var(--df-action-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--df-action-primary) 4%, transparent);
  }
}
html[data-theme] .schedule-week-grid > section > header {
  display: grid;
  min-height: 58px;
  padding: 11px;
  align-content: center;
  gap: 2px;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-week-grid > section > header span {
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  text-transform: uppercase;
}
html[data-theme] .schedule-week-grid > section > header strong {
  font-size: var(--df-type-meta-size);
}
html[data-theme] .schedule-week-grid > section > div {
  display: grid;
  padding: 7px;
  align-content: start;
  gap: 6px;
}
html[data-theme] .schedule-week-grid > section > div > button {
  display: grid;
  min-height: 94px;
  padding: 9px;
  text-align: left;
  gap: 5px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
}
html[data-theme] .schedule-week-grid time {
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .schedule-week-grid button strong {
  font-size: var(--df-type-meta-size);
  line-height: var(--df-type-line-compact);
}
html[data-theme] .schedule-week-grid button span {
  align-self: end;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .schedule-week-grid button.status-ready {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 45%, var(--df-border-subtle));
  }
  background: var(--df-status-success-surface);
}
html[data-theme] .schedule-week-grid button.status-generating {
  border-color: var(--df-category-ai);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-category-ai) 35%, var(--df-border-subtle));
  }
  background: var(--df-category-ai-surface);
}
html[data-theme] .schedule-week-grid button.status-failed {
  border-color: var(--df-status-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-danger) 35%, var(--df-border-subtle));
  }
  background: var(--df-status-danger-surface);
}
html[data-theme] .schedule-week-grid button.empty {
  min-height: 52px;
  place-items: center;
  align-content: center;
  border-style: dashed;
  color: var(--df-text-secondary);
}
html[data-theme] .schedule-side-column {
  position: sticky;
  top: 132px;
  display: grid;
  gap: 14px;
}
html[data-theme] .schedule-plan-card,
html[data-theme] .schedule-inspiration-card {
  overflow: hidden;
}
html[data-theme] .schedule-plan-card > header,
html[data-theme] .schedule-inspiration-card > header {
  min-height: 74px;
  padding: 14px 16px;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-plan-card h2,
html[data-theme] .schedule-inspiration-card h2 {
  margin: 4px 0 0;
  font-size: var(--df-type-panel-title-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .schedule-plan-card dl {
  margin: 0;
  padding: 4px 16px 0;
}
html[data-theme] .schedule-plan-card dl > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-plan-card dt {
  margin-bottom: 9px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
}
html[data-theme] .schedule-plan-card dd {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
html[data-theme] .schedule-plan-card dd > span {
  padding: 6px 8px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 7px;
  background: var(--df-surface-subtle);
  color: var(--df-text-primary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .schedule-plan-card dd strong {
  margin-right: auto;
  font-family: var(--font-geist-mono), monospace;
  font-size: var(--df-type-control-size);
}
html[data-theme] .schedule-plan-card dd button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--df-category-ai);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .schedule-content-mix {
  display: grid !important;
  grid-template-columns: 1fr;
}
html[data-theme] .schedule-content-mix > span {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--df-text-primary) !important;
}
html[data-theme] .schedule-plan-card > .schedule-button {
  width: calc(100% - 32px);
  margin: 14px 16px 16px;
}
html[data-theme] .schedule-inspiration-card > div {
  display: grid;
}
html[data-theme] .schedule-inspiration-card article {
  display: grid;
  min-height: 78px;
  padding: 10px 12px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-inspiration-card article:last-child {
  border-bottom: 0;
}
html[data-theme] .schedule-inspiration-card article > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--df-category-ai-surface);
  color: var(--df-category-ai);
}
html[data-theme] .schedule-inspiration-card article svg {
  width: 15px;
}
html[data-theme] .schedule-inspiration-card article > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}
html[data-theme] .schedule-inspiration-card article strong {
  overflow: hidden;
  font-size: var(--df-type-control-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .schedule-inspiration-card article small {
  overflow: hidden;
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .schedule-inspiration-card article button {
  min-height: 34px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: var(--df-category-ai);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .schedule-week-summary {
  min-height: 50px;
  padding: 8px 12px;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 12px;
  background: var(--df-surface-raised);
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .schedule-week-summary > span {
  display: flex;
  margin-right: auto;
  align-items: center;
  gap: 5px;
}
html[data-theme] .schedule-week-summary svg {
  width: 14px;
}
html[data-theme] .schedule-week-summary strong {
  color: var(--df-text-primary);
}
html[data-theme] .schedule-week-summary strong.ready {
  color: var(--df-status-success);
}
html[data-theme] .schedule-week-summary em {
  width: 100%;
  font-style: normal;
}
html[data-theme] .schedule-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: var(--df-overlay-backdrop);
  backdrop-filter: blur(3px);
}
html[data-theme] .schedule-overlay.centered {
  padding: 24px;
  align-items: center;
  justify-content: center;
}
html[data-theme] .schedule-settings {
  display: flex;
  width: min(560px, 100%);
  height: 100%;
  flex-direction: column;
  overflow: auto;
  border-left: 1px solid var(--df-border-subtle);
  background: var(--df-surface-overlay);
  color: var(--df-text-primary);
  box-shadow: var(--df-shadow-overlay);
}
html[data-theme] .schedule-settings > header {
  min-height: 114px;
  padding: 22px 24px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-settings > header h2,
html[data-theme] .schedule-new-profile h2 {
  margin: 5px 0 4px;
  font-size: var(--df-type-section-title-size);
  letter-spacing: var(--df-type-tracking-tight);
}
html[data-theme] .schedule-settings > header p,
html[data-theme] .schedule-settings-section > header p {
  margin: 0;
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .schedule-settings-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-settings-section > header {
  justify-content: space-between;
  gap: 14px;
}
html[data-theme] .schedule-settings-section > header > div {
  display: grid;
  gap: 4px;
}
html[data-theme] .schedule-profile-list {
  display: grid;
  margin-top: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
html[data-theme] .schedule-profile-list > button {
  display: grid;
  min-height: 58px;
  padding: 7px;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  text-align: left;
}
html[data-theme] .schedule-profile-list > button.active {
  border-color: var(--df-action-primary);
}
html[data-theme] .schedule-profile-list > button > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--df-surface-composer);
  color: var(--df-text-on-dark);
  font-size: var(--df-type-caption-size);
  font-weight: var(--df-type-weight-bold);
}
html[data-theme] .schedule-profile-list > button > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
html[data-theme] .schedule-profile-list strong,
html[data-theme] .schedule-profile-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .schedule-profile-list strong {
  font-size: var(--df-type-control-size);
}
html[data-theme] .schedule-profile-list small {
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .schedule-profile-list svg {
  width: 15px;
  color: var(--df-action-primary);
}
html[data-theme] .schedule-settings-grid {
  display: grid;
  margin-top: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
html[data-theme] .schedule-settings-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-theme] .schedule-settings-grid label,
html[data-theme] .schedule-new-profile label {
  display: grid;
  gap: 6px;
}
html[data-theme] .schedule-settings-grid label.wide {
  grid-column: 1 / -1;
}
html[data-theme] .schedule-settings-grid label > span,
html[data-theme] .schedule-new-profile label > span {
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
  font-weight: var(--df-type-weight-medium);
}
html[data-theme] .schedule-settings-grid input,
html[data-theme] .schedule-settings-grid select,
html[data-theme] .schedule-new-profile input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 9px;
  outline: 0;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  font-size: var(--df-type-field-size);
}
html[data-theme] .schedule-settings-actions {
  margin-top: 10px;
  gap: 8px;
}
html[data-theme] .schedule-automation-toggle {
  display: flex;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--df-border-subtle);
  border-radius: 10px;
  background: var(--df-surface-raised);
  color: var(--df-text-primary);
  text-align: left;
}
html[data-theme] .schedule-automation-toggle.active {
  border-color: var(--df-status-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--df-status-success) 45%, var(--df-border-subtle));
  }
  background: var(--df-status-success-surface);
}
html[data-theme] .schedule-automation-toggle > span {
  display: grid;
  gap: 5px;
}
html[data-theme] .schedule-automation-toggle strong {
  font-size: var(--df-type-action-size);
}
html[data-theme] .schedule-automation-toggle small {
  color: var(--df-text-secondary);
  font-size: var(--df-type-meta-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .schedule-automation-toggle em {
  display: grid;
  min-width: 42px;
  height: 28px;
  place-items: center;
  border-radius: 99px;
  background: var(--df-surface-subtle);
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
  font-style: normal;
  font-weight: var(--df-type-weight-bold);
}
html[data-theme] .schedule-automation-toggle.active em {
  background: var(--df-status-success);
  color: var(--df-status-success-on-solid);
}
html[data-theme] .schedule-settings > footer {
  position: sticky;
  bottom: 0;
  min-height: 76px;
  margin-top: auto;
  padding: 12px 24px;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--df-border-subtle);
  background: var(--df-surface-overlay);
}
html[data-theme] .schedule-settings > footer > div {
  display: grid;
  gap: 3px;
}
html[data-theme] .schedule-settings > footer span {
  color: var(--df-text-secondary);
  font-size: var(--df-type-caption-size);
}
html[data-theme] .schedule-settings > footer strong {
  font-family: var(--font-geist-mono), monospace;
  font-size: var(--df-type-meta-size);
}
html[data-theme] .schedule-email-modal,
html[data-theme] .schedule-new-profile {
  width: min(560px, 100%);
  max-height: min(720px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid var(--df-border-subtle);
  border-radius: 16px;
  background: var(--df-surface-overlay);
  color: var(--df-text-primary);
  box-shadow: var(--df-shadow-overlay);
}
html[data-theme] .schedule-email-modal {
  width: min(760px, 100%);
}
html[data-theme] .schedule-email-modal > header,
html[data-theme] .schedule-new-profile > header {
  min-height: 64px;
  padding: 12px 16px;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--df-border-subtle);
}
html[data-theme] .schedule-email-modal > header > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--df-type-action-size);
  font-weight: var(--df-type-weight-semibold);
}
html[data-theme] .schedule-email-modal > header svg {
  width: 16px;
}
html[data-theme] .schedule-email-modal iframe {
  display: block;
  width: 100%;
  height: min(660px, calc(100dvh - 150px));
  border: 0;
  background: var(--df-palette-white);
}
html[data-theme] .schedule-new-profile {
  padding-bottom: 18px;
}
html[data-theme] .schedule-new-profile > p {
  margin: 16px 18px;
  color: var(--df-text-secondary);
  font-size: var(--df-type-body-size);
  line-height: var(--df-type-line-body);
}
html[data-theme] .schedule-new-profile > label {
  margin: 0 18px 12px;
}
html[data-theme] .schedule-new-profile > .schedule-button {
  width: calc(100% - 36px);
  margin: 7px 18px 0;
}
html[data-theme] .spin {
  animation: schedule-spin .8s linear infinite;
}
@keyframes schedule-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 1120px) {
  html[data-theme] .schedule-header {
    grid-template-columns: 1fr auto;
  }
  html[data-theme] .schedule-header-date {
    display: none;
  }
  html[data-theme] .schedule-body {
    grid-template-columns: 1fr;
  }
  html[data-theme] .schedule-side-column {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-theme] .schedule-week-summary {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  html[data-theme] .schedule-header {
    min-height: 58px;
    padding: 7px 10px;
    gap: 8px;
  }
  html[data-theme] .schedule-header-start {
    gap: 7px;
  }
  html[data-theme] .schedule-header-start h1 {
    display: none;
  }
  html[data-theme] .schedule-profile-select {
    max-width: 164px;
    padding-right: 7px;
  }
  html[data-theme] .schedule-profile-select select {
    max-width: 104px;
  }
  html[data-theme] .schedule-header-actions .schedule-button {
    width: 44px;
    padding: 0;
    font-size: 0;
  }
  html[data-theme] .schedule-view-switch button {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  html[data-theme] .schedule-view-switch button span {
    display: none;
  }
  html[data-theme] .schedule-contract {
    padding: 9px 13px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
  }
  html[data-theme] .schedule-contract > span:last-child {
    width: calc(100% - 18px);
    margin-left: 17px;
  }
  html[data-theme] .schedule-body {
    padding: 14px 12px 36px;
    gap: 12px;
  }
  html[data-theme] .schedule-next-action {
    min-height: 0;
    padding: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 11px;
  }
  html[data-theme] .schedule-next-icon {
    width: 44px;
    height: 44px;
  }
  html[data-theme] .schedule-next-action > div:nth-child(2) {
    width: calc(100% - 56px);
  }
  html[data-theme] .schedule-next-action h2 {
    font-size: 20px;
  }
  html[data-theme] .schedule-next-action p {
    display: none;
  }
  html[data-theme] .schedule-next-action > .schedule-button {
    width: 100%;
  }
  html[data-theme] .schedule-week-strip {
    display: flex;
    min-height: 72px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  html[data-theme] .schedule-week-strip::-webkit-scrollbar {
    display: none;
  }
  html[data-theme] .schedule-week-strip > button {
    min-width: 68px;
    flex: 0 0 68px;
    scroll-snap-align: center;
  }
  html[data-theme] .schedule-week-strip > button:first-child,
  html[data-theme] .schedule-week-strip > button:last-child {
    position: sticky;
    z-index: 2;
    left: 0;
    min-width: 38px;
    flex-basis: 38px;
    background: var(--df-surface-raised);
  }
  html[data-theme] .schedule-week-strip > button:last-child {
    right: 0;
    left: auto;
  }
  html[data-theme] .schedule-status-group > header {
    min-height: 44px;
    padding-inline: 12px;
  }
  html[data-theme] .schedule-post-row {
    min-height: 106px;
    padding: 10px;
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    grid-template-areas: "preview copy open" "time copy status";
    gap: 7px 9px;
  }
  html[data-theme] .schedule-post-row time {
    grid-area: time;
    text-align: center;
  }
  html[data-theme] .schedule-post-preview {
    grid-area: preview;
    width: 48px;
    height: 48px;
  }
  html[data-theme] .schedule-post-copy {
    grid-area: copy;
  }
  html[data-theme] .schedule-post-copy > strong {
    white-space: normal;
    line-height: var(--df-type-line-compact);
  }
  html[data-theme] .schedule-post-copy > small {
    white-space: normal;
  }
  html[data-theme] .schedule-post-cost {
    display: none;
  }
  html[data-theme] .schedule-status {
    grid-area: status;
    min-height: 24px;
    padding: 3px 4px;
    font-size: 7px;
  }
  html[data-theme] .schedule-post-row > .schedule-icon-button {
    grid-area: open;
  }
  html[data-theme] .schedule-side-column {
    grid-template-columns: 1fr;
  }
  html[data-theme] .schedule-week-summary {
    grid-column: auto;
  }
  html[data-theme] .schedule-inspiration-card article {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  html[data-theme] .schedule-inspiration-card article > button {
    grid-column: 2;
    justify-self: start;
    min-height: 32px;
    padding: 0;
  }
  html[data-theme] .schedule-week-grid {
    grid-template-columns: repeat(7, 190px);
    scroll-snap-type: x mandatory;
  }
  html[data-theme] .schedule-week-grid > section {
    scroll-snap-align: start;
  }
  html[data-theme] .schedule-settings {
    border-left: 0;
  }
  html[data-theme] .schedule-settings > header,
  html[data-theme] .schedule-settings-section {
    padding-right: 16px;
    padding-left: 16px;
  }
  html[data-theme] .schedule-settings-grid,
  html[data-theme] .schedule-settings-grid.three,
  html[data-theme] .schedule-profile-list {
    grid-template-columns: 1fr;
  }
  html[data-theme] .schedule-settings > footer {
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  }
  html[data-theme] .schedule-settings > footer > div {
    display: none;
  }
  html[data-theme] .schedule-settings > footer .schedule-button {
    width: 100%;
  }
  html[data-theme] .schedule-overlay.centered {
    padding: 0;
    align-items: flex-end;
  }
  html[data-theme] .schedule-new-profile,
  html[data-theme] .schedule-email-modal {
    max-height: 90dvh;
    border-radius: 18px 18px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .schedule-page .spin {
    animation: none;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}