@font-face {
        font-display: swap;
        font-family: "ABC Diatype";
        font-style: normal;
        font-weight: 400;
        src: url("/fonts/abc-diatype-regular.woff2") format("woff2");
      }

      @font-face {
        font-display: swap;
        font-family: "ABC Diatype";
        font-style: normal;
        font-weight: 500 900;
        src: url("/fonts/abc-diatype-bold.woff2") format("woff2");
      }

      :root {
        color-scheme: light;
        --accent: #ff3850;
        --bg-primary: #ff3850;
        --icon-secondary: #99a2ad;
        --ink: #18181b;
        --line: rgba(24, 24, 27, 0.04);
        --line-strong: rgba(24, 24, 27, 0.08);
        --surface: #ffffff;
        --surface-soft: #f5f5f6;
        --surface-hover: rgba(24, 24, 27, 0.055);
        --surface-strong: rgba(24, 24, 27, 0.07);
        --text-primary: #18181b;
        --text-secondary: #6b6b70;
        --text-muted: #9ca3af;
        --text-inverse: #ffffff;
        --web-type-caption: 11px;
        --web-type-control: 12px;
        --web-type-body: 13px;
        --web-type-label: 14px;
        --web-type-title: 16px;
        --web-type-heading: 20px;
        --web-type-display: 24px;
        --web-type-section: 28px;
        --web-type-hero: 32px;
        --radius-control: 12px;
        --radius-media: 14px;
        --radius-panel: 18px;
        --radius-dialog: 24px;
        --radius-pill: 999px;
        --nav-height: 50px;
        /* Stacking order for the floating layers, bottom to top: page chrome
           (< 130) → small popovers → the global nav bar and its menus →
           modals and their scrims (150+) → toasts (420+). Small popovers sit
           under the nav on purpose: they are the expanded state of a control
           on the page, so the bar keeps painting over them. */
        --layer-small-popover: 130;
        --layer-global-nav: 140;
        --layer-global-nav-menu: 145;
        --layer-modal: 160;
        --layer-toast: 420;
        --font-ui-regular: 400;
        --font-ui-book: 400;
        --font-ui-medium: 500;
        --font-ui-display: 700;
        --regen-font-regular: 400;
        --regen-font-medium: 500;
        --regen-font-display: 700;
        --shadow-border:
          0 0 0 1px rgba(0, 0, 0, 0.04),
          0 1px 2px -1px rgba(0, 0, 0, 0.04),
          0 8px 24px rgba(0, 0, 0, 0.035);
        --shadow-border-hover:
          0 0 0 1px rgba(0, 0, 0, 0.07),
          0 2px 4px -1px rgba(0, 0, 0, 0.05),
          0 12px 32px rgba(0, 0, 0, 0.06);
        --sp-canvas: #ffffff;
        --sp-surface: #ffffff;
        --sp-surface-soft: var(--surface-soft);
        --sp-surface-hover: var(--surface-hover);
        --sp-ink: #18181b;
        --sp-ink-soft: #3f3f43;
        --sp-muted: #77777d;
        --sp-muted-soft: #a3a3a7;
        --sp-radius-control: 12px;
        --sp-radius-media: 14px;
        --sp-radius-panel: 18px;
        --sp-shadow-panel:
          0 1px 2px rgba(0, 0, 0, 0.025),
          0 18px 52px rgba(0, 0, 0, 0.07);
        --sp-shadow-float:
          0 2px 8px rgba(0, 0, 0, 0.05),
          0 24px 70px rgba(0, 0, 0, 0.13);
      }
      .rg-dropdown-menu {
        box-sizing: border-box;
        max-width: calc(100vw - 16px);
        overscroll-behavior: contain;
      }

      .rg-dropdown-menu[data-regen-positioned="true"] {
        position: fixed !important;
      }

      /* The shared small-popover surface. Placement, size, and body layout
         belong to each popover; everything that makes it behave like a
         popover rather than a dialog lives here. */
      .small-popover {
        left: 0;
        opacity: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        transform: translateY(6px) scale(0.985);
        transform-origin: top left;
        transition-duration: 120ms;
        transition-property: opacity, transform;
        transition-timing-function: var(--workspace-ease, cubic-bezier(0.2, 0, 0, 1));
        /* Below the global nav on purpose: a popover is the expanded state of
           a control on the page, so the bar it opens under keeps painting over
           it. Above every studio surface it grows out of (mobile composer at
           122 is the highest), below the modal layer at 150+. */
        z-index: var(--layer-small-popover, 130);
      }

      .small-popover[hidden] {
        display: none;
      }

      .small-popover.is-open {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      /* Scrolling is the popover's own. overscroll-behavior stops a scroll
         that reaches an edge from chaining into the page; the runtime's wheel
         guard covers the other half — a popover whose rows do not overflow at
         all, which the browser would otherwise hand straight to the page
         behind it. The bar is never drawn: a scrollbar gutter cuts a grey
         strip through the rounded corners of a surface this small. */
      [data-small-popover-scroll] {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
      }

      [data-small-popover-scroll]::-webkit-scrollbar {
        display: none;
      }

      :root {
        color-scheme: light;
        --workspace-bg: var(--surface-soft);
        --workspace-control-surface: var(--surface-soft);
        --shell: var(--surface);
        --panel: var(--surface);
        --surface-pressed: var(--surface-hover);
        --text: var(--text-primary);
        --text-soft: var(--text-secondary);
        --danger: #d84b4b;
        --focus: rgba(18, 18, 20, 0.18);
        --workspace-nav-height: 50px;
        --workspace-media-grid-gap: 6px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        -webkit-font-smoothing: antialiased;
        background: var(--shell);
        color-scheme: light;
        max-width: 100%;
        overflow-x: clip;
      }

      body {
        background: var(--shell);
        color: var(--text);
        font-family: "ABC Diatype", "SF Pro Display Ultralight", "SF Pro Display", -apple-system,
          BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
        font-size: var(--web-type-body);
        font-synthesis: none;
        font-weight: var(--font-ui-regular);
        letter-spacing: 0;
        line-height: 1.35;
        margin: 0;
        min-width: 0;
        overflow-x: clip;
        text-rendering: optimizeLegibility;
      }

      button,
      input,
      select,
      textarea {
        color: inherit;
        font: inherit;
        letter-spacing: 0;
      }

      button {
        border: 0;
        cursor: pointer;
      }

      button:focus {
        outline: 0;
      }

      button:focus-visible {
        box-shadow: 0 0 0 3px var(--focus);
      }

      button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

      h1,
      h2,
      h3,
      p {
        margin: 0;
      }

      h1,
      h2,
      h3 {
        font-weight: var(--font-ui-medium);
        text-wrap: balance;
      }

      img,
      video {
        display: block;
        max-width: 100%;
      }

      [hidden] {
        display: none !important;
      }

      .sr-only {
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
      }

      .ui-icon {
        display: block;
        fill: none;
        pointer-events: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .ui-icon.icon-chevron-down {
        height: 14px;
        stroke-width: 1.25;
        width: 14px;
      }

      .app-frame,
      .home-view {
        min-height: calc(100vh - var(--workspace-nav-height));
      }

      .home-view {
        display: block;
      }

      .project-view {
        display: none;
      }

      body.project-active {
        height: 100vh;
        overflow: hidden;
      }

      body.project-active .home-view {
        display: none;
      }

      body.project-active .project-view {
        display: block;
      }

      .selected-preset,
      .resource-pill,
      .workspace-generate,
      .workspace-tabs button,
      .preset-card,
      .project-card,
      .icon-button,
      .primary-button,
      .secondary-button,
      .danger-button,
      .transport-play,
      .model-menu button,
      .avatar-card,
      .avatar-add-card {
        transition-duration: 100ms !important;
        transition-property: background-color, border-color, box-shadow, color, filter, opacity, scale !important;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .selected-preset:active,
      .resource-pill:active,
      .workspace-generate:active,
      .workspace-tabs button:active,
      .preset-card:active,
      .project-card:active,
      .icon-button:active,
      .primary-button:active,
      .secondary-button:active,
      .danger-button:active,
      .transport-play:active,
      .model-menu button:active,
      .avatar-card:active,
      .avatar-add-card:active {
        scale: 0.99 !important;
      }

      .brief-panel,
      .workspace-library,
      .project-inspector,
      .avatar-list {
        scrollbar-width: none;
      }

      .brief-panel::-webkit-scrollbar,
      .workspace-library::-webkit-scrollbar,
      .project-inspector::-webkit-scrollbar,
      .avatar-list::-webkit-scrollbar {
        display: none;
      }

      .video-workspace {
        background: var(--shell);
        display: grid;
        grid-template-columns: 296px minmax(0, 1fr);
        min-height: calc(100vh - var(--workspace-nav-height));
      }

      .brief-panel {
        background: var(--panel);
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: calc(100vh - var(--workspace-nav-height));
        overflow-y: auto;
        padding: 20px 18px 18px;
        position: sticky;
        top: var(--workspace-nav-height);
      }

      .brief-heading {
        align-items: center;
        display: flex;
        min-height: 24px;
      }

      .brief-heading h1 {
        font-size: var(--web-type-title);
        line-height: 1.2;
      }

      .selected-preset {
        align-items: center;
        background: var(--surface-soft);
        border-radius: var(--workspace-radius);
        display: grid;
        gap: 10px;
        grid-template-columns: 36px minmax(0, 1fr) 16px;
        min-height: 52px;
        padding: 8px 10px;
        text-align: left;
        transition-duration: 40ms;
        transition-property: background-color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 100%;
      }

      .selected-preset:hover {
        background: var(--surface-hover);
      }

      .selected-preset > .ui-icon:last-child {
        color: var(--text-muted);
        height: 15px;
        width: 15px;
      }

      .tool-picker {
        animation: workspace-pop 150ms var(--workspace-ease);
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: var(--workspace-control-radius);
        left: max(12px, calc((100vw - 620px) / 2));
        max-height: min(720px, calc(100vh - 130px));
        overflow-y: auto;
        padding: 18px;
        position: fixed;
        right: max(12px, calc((100vw - 620px) / 2));
        top: 58px;
        z-index: 80;
      }

      .tool-picker-heading {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        margin: 2px 4px 8px;
        text-transform: uppercase;
      }

      .tool-picker-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .tool-picker-option {
        background: #ffffff;
        border-radius: var(--workspace-control-radius);
        display: grid;
        gap: 10px;
        min-width: 0;
        padding: 8px;
        text-align: left;
      }

      .tool-picker-option:hover {
        background: var(--surface-soft);
      }

      .tool-picker-media {
        aspect-ratio: 16 / 9;
        border-radius: 8px;
        display: block;
        overflow: hidden;
      }

      .tool-picker-media img,
      .tool-picker-media video {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .tool-picker-option > span:last-child {
        align-items: center;
        display: flex;
        gap: 6px;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        overflow: hidden;
        padding: 0 3px 3px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .selected-preset-media {
        align-items: center;
        border-radius: var(--workspace-radius);
        display: flex;
        height: 36px;
        justify-content: center;
        overflow: hidden;
        width: 36px;
      }

      .selected-preset-media img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .selected-preset-media.preset-media-empty {
        background: #ffffff;
        color: #55555a;
      }

      .selected-preset-media svg,
      .selected-preset-change svg {
        height: 15px;
        width: 15px;
      }

      .selected-preset-copy {
        min-width: 0;
      }

      .selected-preset-copy strong {
        display: block;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .selected-preset-change {
        color: var(--text-muted);
      }

      .brief-composer {
        background: var(--surface-soft);
        border-radius: var(--workspace-radius);
        display: flex;
        flex-direction: column;
        min-height: 180px;
        padding: 4px;
        transition-duration: 40ms;
        transition-property: box-shadow;
        transition-timing-function: ease-out;
      }

      .brief-composer:focus-within {
        box-shadow: 0 0 0 3px var(--focus);
      }

      .brief-prompt {
        display: flex;
        flex: 1;
      }

      .brief-prompt .prompt-editor {
        background: transparent;
        border: 0;
        cursor: text;
        flex: 1;
        min-height: 118px;
        outline: 0;
        overflow-wrap: break-word;
        overflow-y: hidden;
        padding: 13px 13px 8px;
        position: relative;
        white-space: pre-wrap;
        width: 100%;
        word-break: break-word;
      }

      /* The editor is a contenteditable (it renders @mention pills), so there
         is no native placeholder attribute to lean on. Taking the hint text
         out of flow makes it behave like one: the caret stays at the start of
         the field instead of being pushed to the right of the hint. */
      .brief-prompt .prompt-editor.is-empty::before {
        color: #99999d;
        content: attr(data-placeholder);
        left: var(--brief-prompt-inline-inset, 13px);
        pointer-events: none;
        position: absolute;
        right: var(--brief-prompt-inline-inset, 13px);
        top: var(--brief-prompt-top-inset, 13px);
      }

      .sidebar-resources {
        display: grid;
        gap: 6px;
        grid-template-columns: 1fr 1fr;
        padding: 5px;
      }

      .resource-pill {
        align-items: center;
        background: #ffffff;
        border-radius: var(--workspace-radius);
        display: flex;
        font-size: var(--web-type-caption);
        gap: 7px;
        justify-content: center;
        min-height: 38px;
        padding: 0 10px;
        transition-duration: 40ms;
        transition-property: background-color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .resource-pill:hover {
        background: #fafafa;
      }

      .resource-pill svg {
        color: #6f6f74;
        height: 15px;
        width: 15px;
      }

      /* Reading a page is a real wait: the pill swaps its trailing plus for a
         spinner and holds the busy label until references are attached. */
      .resource-pill-spinner {
        animation: spin 700ms linear infinite;
        border: 1.5px solid rgba(24, 24, 27, 0.16);
        border-radius: 50%;
        border-top-color: #6f6f74;
        display: none;
        height: 13px;
        width: 13px;
      }

      .resource-pill.is-loading .resource-pill-spinner {
        display: block;
      }

      .resource-pill.is-loading svg:last-of-type {
        display: none;
      }

      @media (prefers-reduced-motion: reduce) {
        .resource-pill-spinner {
          animation-duration: 2s;
        }
      }

      .asset-picker-card.is-loading {
        animation: asset-picker-card-pulse 1.1s ease-in-out infinite;
        aspect-ratio: 1;
        pointer-events: none;
      }

      @keyframes asset-picker-card-pulse {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 1; }
      }

      @media (prefers-reduced-motion: reduce) {
        .asset-picker-card.is-loading {
          animation: none;
        }
      }

      .source-chip-link .source-chip-media img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .brief-sources {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .brief-sources:empty {
        display: none;
      }

      .source-chip-more {
        align-items: center;
        background: rgba(24, 24, 27, 0.06);
        border-radius: var(--workspace-pill-radius);
        color: #68686f;
        display: inline-flex;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        min-height: 34px;
        padding: 0 12px;
        white-space: nowrap;
      }

      .source-chip-more:hover {
        background: rgba(24, 24, 27, 0.095);
        color: var(--text);
      }

      .source-chip,
      .selected-avatar {
        align-items: center;
        background: var(--surface-soft);
        border-radius: var(--workspace-radius);
        display: inline-grid;
        gap: 7px;
        grid-template-columns: 24px minmax(0, 1fr) 24px;
        max-width: 100%;
        min-height: 34px;
        padding: 5px;
      }

      .source-chip > img,
      .selected-avatar > img {
        border-radius: var(--workspace-radius);
        height: 24px;
        object-fit: cover;
        width: 24px;
      }

      .source-chip > span,
      .selected-avatar > span {
        font-size: var(--web-type-caption);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .source-chip button,
      .selected-avatar button {
        align-items: center;
        background: transparent;
        border-radius: var(--workspace-radius);
        color: var(--text-muted);
        display: flex;
        height: 24px;
        justify-content: center;
        width: 24px;
      }

      .source-chip button:hover,
      .selected-avatar button:hover {
        background: #ffffff;
        color: var(--text);
      }

      .source-chip button svg,
      .selected-avatar button svg {
        height: 12px;
        width: 12px;
      }

      .source-chip-media {
        align-items: center;
        background: #e7e7e4;
        border-radius: var(--workspace-radius);
        display: inline-flex;
        height: 30px;
        justify-content: center;
        object-fit: cover;
        overflow: hidden;
        width: 30px;
      }

      .source-chip-media svg {
        color: var(--workspace-muted);
        height: 15px;
        width: 15px;
      }

      .source-chip-copy {
        display: grid;
        gap: 1px;
        min-width: 0;
      }

      .source-chip-copy strong,
      .source-chip-copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .source-chip-copy strong {
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
      }

      .source-chip-copy small {
        color: var(--workspace-muted);
        font-size: 10px;
      }

      .source-chip-audio {
        background: #dededb;
      }

      /* Reading a page is a real wait, so the chip exists for the whole of it
         rather than appearing once the work is done. Pending and settled chips
         share a footprint — only the contents change as it progresses, so
         nothing below it reflows on each transition. */
      .source-chip.is-pending .source-chip-media {
        animation: source-chip-breathe 1.4s ease-in-out infinite;
      }

      .source-chip-spinner {
        animation: spin 700ms linear infinite;
        align-self: center;
        border: 1.5px solid rgba(24, 24, 27, 0.16);
        border-radius: 50%;
        border-top-color: #6f6f74;
        height: 13px;
        justify-self: center;
        width: 13px;
      }

      @keyframes source-chip-breathe {
        0%, 100% { opacity: 0.55; }
        50% { opacity: 1; }
      }

      /* The confirmation reads as a state change, not decoration: the tick and
         the tint arrive together and both time out with the label. */
      .source-chip.is-understood {
        background: rgba(52, 143, 91, 0.09);
      }

      .source-chip.is-understood .source-chip-copy small {
        color: #2f7a51;
      }

      .source-chip-tick {
        display: inline-flex;
        margin-right: 3px;
        vertical-align: -2px;
      }

      .source-chip-tick svg {
        height: 11px;
        width: 11px;
      }

      /* A failed read keeps its chip. The reason stays on screen next to the
         retry, instead of a toast that takes the reason away with it. */
      .source-chip.is-failed {
        background: rgba(216, 75, 75, 0.08);
      }

      .source-chip-media.is-failed {
        background: rgba(216, 75, 75, 0.14);
      }

      .source-chip-media.is-failed svg {
        color: var(--danger);
      }

      .source-chip.is-failed .source-chip-copy small {
        align-items: center;
        display: flex;
        gap: 5px;
        overflow: visible;
      }

      .source-chip-failure {
        color: var(--danger);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Qualified with the element: the chip's generic button rule sizes the
         24px icon buttons, and a text action has to outrank it. */
      .source-chip button.source-chip-retry {
        align-items: center;
        background: transparent;
        color: #4a4a4f;
        display: inline-flex;
        flex: none;
        font-weight: var(--font-ui-medium);
        gap: 3px;
        height: auto;
        padding: 0;
        text-decoration: underline;
        width: auto;
      }

      .source-chip button.source-chip-retry:hover {
        background: transparent;
        color: var(--text);
      }

      .source-chip button.source-chip-retry svg {
        height: 10px;
        width: 10px;
      }

      @media (prefers-reduced-motion: reduce) {
        .source-chip.is-pending .source-chip-media {
          animation: none;
          opacity: 0.7;
        }

        .source-chip-spinner {
          animation-duration: 2s;
        }
      }

      .brief-options {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .brief-option {
        background: var(--surface-soft);
        border-radius: var(--workspace-radius);
        min-width: 0;
        position: relative;
      }

      .brief-option:only-child,
      .model-option {
        grid-column: 1 / -1;
      }

      .brief-option select,
      .brief-option > button {
        appearance: none;
        background: transparent;
        border: 0;
        cursor: pointer;
        min-height: 38px;
        outline: 0;
        padding: 0 12px;
        text-align: left;
        width: 100%;
      }

      .brief-option:has(select)::after {
        border-bottom: 1px solid currentColor;
        border-right: 1px solid currentColor;
        color: #99999d;
        content: "";
        height: 5px;
        pointer-events: none;
        position: absolute;
        right: 13px;
        top: 14px;
        transform: rotate(45deg);
        width: 5px;
      }

      .model-option > button {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }

      .model-option > button svg {
        color: var(--text-muted);
        height: 13px;
        width: 13px;
      }

      .model-menu {
        background: rgba(255, 255, 255, 0.98);
        border-radius: var(--workspace-radius);
        box-shadow:
          0 8px 24px rgba(0, 0, 0, 0.08),
          0 24px 64px rgba(0, 0, 0, 0.1);
        left: 0;
        max-height: 310px;
        opacity: 1;
        overflow-y: auto;
        padding: 6px;
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        transform: translateY(0) scale(1);
        transform-origin: top center;
        z-index: 35;
      }

      .model-menu button {
        align-items: center;
        background: transparent;
        border-radius: var(--workspace-radius);
        display: grid;
        gap: 9px;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        min-height: 42px;
        padding: 6px;
        text-align: left;
        width: 100%;
      }

      .model-menu button:hover,
      .model-menu button[aria-selected="true"] {
        background: var(--surface-soft);
      }

      .model-menu button > img,
      .model-option-mark {
        border-radius: var(--workspace-radius);
        height: 28px;
        object-fit: cover;
        width: 28px;
      }

      .model-option-mark {
        align-items: center;
        background: var(--model-accent, #222);
        color: #ffffff;
        display: flex;
        justify-content: center;
      }

      .model-option-mark svg {
        height: 13px;
        width: 13px;
      }

      .model-menu strong {
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
      }

      .model-menu em {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-style: normal;
      }

      .composer-requirement {
        color: var(--danger);
        font-size: var(--web-type-caption);
        min-height: 14px;
        padding: 0 2px;
      }

      .composer-requirement:empty {
        display: none;
      }

      .workspace-generate {
        align-items: center;
        background: #1b1b1d;
        border-radius: var(--workspace-radius);
        color: #ffffff;
        display: flex;
        font-weight: var(--font-ui-medium);
        justify-content: space-between;
        margin-top: auto;
        min-height: 46px;
        padding: 0 15px;
        transition-duration: 40ms;
        transition-property: background-color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 100%;
      }

      .workspace-generate:hover {
        background: #000000;
      }

      .generate-cost {
        align-items: center;
        color: #c9c9cc;
        display: inline-flex;
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        gap: 5px;
      }

      .generate-cost svg {
        height: 13px;
        width: 13px;
      }

      .workspace-library {
        min-width: 0;
        overflow-y: auto;
        padding: 18px 24px 40px;
      }

      .library-header {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        margin-bottom: 14px;
        min-height: 40px;
      }

      .workspace-tabs {
        align-items: center;
        background: var(--surface-soft);
        border-radius: var(--workspace-radius);
        display: inline-flex;
        gap: 3px;
        padding: 3px;
      }

      .workspace-tabs button {
        background: transparent;
        border-radius: var(--workspace-radius);
        color: #6f6f74;
        min-height: 32px;
        padding: 0 12px;
        transition-duration: 40ms;
        transition-property: background-color, color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .workspace-tabs button[aria-selected="true"] {
        background: #ffffff;
        color: var(--text);
      }

      .workspace-tabs button span {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        margin-left: 3px;
      }

      .library-search {
        align-items: center;
        background: var(--workspace-control-surface);
        border-radius: var(--workspace-radius);
        display: flex;
        gap: 8px;
        height: 38px;
        padding: 0 12px;
        width: min(220px, 30vw);
      }

      .library-search:focus-within {
        box-shadow: 0 0 0 3px var(--focus);
      }

      .library-search svg {
        color: var(--text-muted);
        height: 14px;
        width: 14px;
      }

      .library-search input {
        background: transparent;
        border: 0;
        min-width: 0;
        outline: 0;
        width: 100%;
      }

      .library-search input::placeholder {
        color: #97979c;
      }

      .workspace-panel {
        min-width: 0;
      }

      /* On a phone the tool explainer is a screen and a half of illustrations
         before any content, so you land on marketing rather than on the thing
         you came to browse. Below the composer breakpoint the examples come
         first and the explainer follows them — order only, so the desktop
         layout and the DOM order for assistive tech are untouched. */
      @media (max-width: 1180px) {
        .workspace-panel[data-workspace-panel="presets"] {
          display: flex;
          flex-direction: column;
        }

        .workspace-panel[data-workspace-panel="presets"] > #preset-grid {
          order: 1;
        }

        .workspace-panel[data-workspace-panel="presets"] > #feature-strip {
          order: 2;
        }

        /* The floating composer sits over the grid, so the last row needs room
           to clear it rather than hiding underneath. */
        .workspace-panel[data-workspace-panel="presets"] > #preset-grid {
          padding-bottom: 132px;
        }
      }

      .preset-grid,
      .project-grid {
        display: grid;
        gap: 16px 14px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .preset-card,
      .project-card {
        background: transparent;
        border-radius: var(--workspace-radius);
        min-width: 0;
        padding: 4px;
        text-align: left;
        transition-duration: 100ms;
        transition-property: background-color;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .preset-card:hover,
      .project-card:hover,
      .preset-card.is-selected {
        background: var(--surface-hover);
      }

      .preset-card:focus-visible,
      .project-card:focus-visible {
        background: var(--surface-hover);
        box-shadow: none;
      }

      .preset-card-media,
      .project-card-media {
        aspect-ratio: 16 / 9;
        background: var(--workspace-bg);
        border-radius: var(--workspace-radius);
        display: block;
        overflow: hidden;
        position: relative;
      }

      /* Example cards read better as a tighter 4:3 gallery; generation
         cards keep the 16:9 media frame above. */
      .preset-card-media {
        aspect-ratio: 4 / 3;
      }

      .generation-media-frame {
        background: transparent;
        border-radius: var(--workspace-media-radius, var(--workspace-radius));
        outline: 0;
        overflow: hidden;
        position: relative;
      }

      .generation-media-frame > img,
      .generation-media-frame > video {
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        outline: 0;
        width: 100%;
      }

      .preset-card-media img,
      .project-card-media img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .preset-card-footer,
      .project-card-copy {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        min-width: 0;
        min-height: 30px;
        padding: 8px 4px 2px;
        width: 100%;
      }

      .preset-card-footer strong,
      .project-card-copy strong {
        display: block;
        flex: 1 1 auto;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }

      .project-card-placeholder {
        align-items: center;
        background: var(--surface-soft);
        color: var(--text-muted);
        display: flex;
        height: 100%;
        isolation: isolate;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .project-card-placeholder.is-shimmering::before {
        animation: project-card-shimmer 1.45s ease-in-out infinite;
        background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, 0.68) 48%, transparent 72%);
        content: "";
        inset: 0;
        position: absolute;
        transform: translateX(-110%);
        z-index: 0;
      }

      .project-card-generating-label {
        align-items: center;
        color: #96969d;
        display: inline-flex;
        flex-direction: column;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
        gap: 4px;
        line-height: 1;
        position: relative;
        z-index: 1;
      }

      .project-card-generating-label strong {
        color: #77777d;
        font-variant-numeric: tabular-nums;
        font-weight: var(--font-ui-medium);
      }

      @keyframes project-card-shimmer {
        to {
          transform: translateX(110%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .project-card-placeholder.is-shimmering::before {
          animation: none;
          opacity: 0;
        }
      }

      .project-card-state {
        align-items: center;
        color: var(--text-muted);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--web-type-caption);
        gap: 5px;
      }

      .project-card-state i {
        background: #96969a;
        border-radius: var(--workspace-radius);
        height: 6px;
        width: 6px;
      }

      .project-card-state.is-ready i {
        background: #4f9a6d;
      }

      .project-card-state.is-generating i {
        animation: pulse-dot 1.2s ease-in-out infinite;
        background: #bd8a35;
      }

      .project-card-state.is-failed i {
        background: var(--danger);
      }

      @keyframes pulse-dot {
        0%, 100% { opacity: 0.35; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1); }
      }

      .library-empty {
        align-items: center;
        color: var(--text-muted);
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: center;
        min-height: 320px;
      }

      .library-empty svg {
        height: 22px;
        width: 22px;
      }

      .library-empty strong {
        color: var(--text-soft);
        font-weight: var(--font-ui-medium);
      }

      /* Empty Generations tab: grey ghosts in real card sizes fade out
         toward the bottom of the page behind the message. */
      .library-empty.is-ghost-empty {
        display: block;
        grid-column: 1 / -1;
        min-height: 0;
        position: relative;
      }

      /* Masonry columns, not grid rows: mixed ratios pack tightly like a
         real filled gallery instead of leaving row-alignment holes. */
      .projects-ghost-grid {
        column-gap: 14px;
        columns: 3;
        display: block;
        /* The ghosts live inside one viewport: clamped to the visible page
           and fully faded out by its bottom edge. */
        max-height: calc(100vh - var(--workspace-nav-height) - 170px);
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 5%, transparent 94%);
        mask-image: linear-gradient(to bottom, #000 5%, transparent 94%);
      }

      .projects-ghost-card {
        aspect-ratio: var(--ghost-ratio, 3 / 4);
        background: rgba(24, 24, 27, 0.045);
        border-radius: var(--workspace-media-radius, var(--workspace-radius));
        break-inside: avoid;
        display: block;
        margin-bottom: 14px;
      }

      /* The copy sits dead-center over the ghost field. */
      .projects-ghost-copy {
        display: grid;
        gap: 5px;
        justify-items: center;
        left: 50%;
        position: absolute;
        text-align: center;
        top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
      }

      .projects-ghost-copy strong {
        color: var(--text-soft);
        font-weight: var(--font-ui-regular);
      }

      .projects-ghost-copy small {
        color: var(--text-muted);
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
      }

      .avatar-modal {
        align-items: center;
        display: flex;
        inset: 0;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        padding: 20px;
        position: fixed;
        transition-duration: 100ms;
        transition-property: opacity;
        transition-timing-function: var(--workspace-ease);
        z-index: 160;
      }

      .avatar-modal.is-open {
        opacity: 1;
        pointer-events: auto;
      }

      .modal-scrim {
        background: rgba(20, 20, 22, 0.78);
        inset: 0;
        position: absolute;
      }

      .avatar-dialog {
        background: #ffffff;
        border-radius: 26px;
        box-shadow:
          0 18px 46px rgba(0, 0, 0, 0.16),
          0 48px 120px rgba(0, 0, 0, 0.18);
        height: min(700px, calc(100dvh - 40px));
        max-height: calc(100dvh - 40px);
        opacity: 0;
        overflow: hidden;
        position: relative;
        transform: scale(0.96);
        transition-duration: 100ms;
        transition-property: opacity, transform;
        transition-timing-function: var(--workspace-ease);
        width: min(710px, calc(100vw - 40px));
      }

      body.workspace-modal-open {
        overflow: hidden !important;
      }

      .avatar-modal.is-open .avatar-dialog {
        opacity: 1;
        /* none, not scale(1): a lingering transform makes the dialog the
           containing block for the fixed-position voice menu, shifting it
           by the dialog origin. Transitions treat none as identity. */
        transform: none;
      }

      .avatar-dialog-close {
        align-items: center;
        background: rgba(24, 24, 27, 0.04);
        border-radius: 50%;
        color: #a0a0a5;
        display: flex;
        height: 30px;
        justify-content: center;
        position: absolute;
        right: 15px;
        top: 15px;
        transition: background-color 100ms var(--workspace-ease), color 100ms var(--workspace-ease);
        width: 30px;
        z-index: 4;
      }

      .avatar-dialog-close:hover {
        background: rgba(24, 24, 27, 0.08);
        color: #18181b;
      }

      .avatar-dialog-close .ui-icon {
        height: 15px;
        stroke-width: 1.6;
        width: 15px;
      }

      .avatar-library-view {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 25px 20px 22px;
        scrollbar-width: none;
      }

      .avatar-library-view::-webkit-scrollbar {
        display: none;
      }

      .avatar-library-header,
      .avatar-template-header > div:first-child {
        display: grid;
        gap: 4px;
      }

      .avatar-library-header h2,
      .avatar-template-header h3,
      .avatar-create-header h2 {
        color: #141417;
        font-size: 15px;
        font-weight: var(--font-ui-medium);
        letter-spacing: 0;
        line-height: 1.25;
      }

      .avatar-library-header p,
      .avatar-template-header p {
        color: #a1a1a7;
        font-size: var(--web-type-caption);
        line-height: 1.35;
      }

      .avatar-owned-row {
        display: flex;
        gap: 8px;
        margin-top: 20px;
        min-height: 180px;
        overflow-x: auto;
        padding-bottom: 1px;
        scrollbar-width: none;
      }

      .avatar-owned-row::-webkit-scrollbar {
        display: none;
      }

      .avatar-list {
        display: flex;
        gap: var(--workspace-media-grid-gap);
      }

      .avatar-card,
      .avatar-add-card {
        border-radius: 10px;
        flex: 0 0 128px;
        height: 180px;
        overflow: hidden;
        position: relative;
      }

      .avatar-add-card {
        align-items: center;
        background: #ffffff;
        border: 1px dashed rgba(24, 24, 27, 0.16);
        color: #222226;
        display: flex;
        flex-direction: column;
        font-size: var(--web-type-caption);
        gap: 10px;
        justify-content: center;
        text-align: center;
      }

      .avatar-add-card:hover {
        background: rgba(24, 24, 27, 0.025);
        border-color: rgba(24, 24, 27, 0.24);
      }

      .avatar-add-icon {
        align-items: center;
        background: rgba(24, 24, 27, 0.035);
        border-radius: 50%;
        color: #9a9aa0;
        display: flex;
        height: 36px;
        justify-content: center;
        width: 36px;
      }

      .avatar-add-icon .ui-icon {
        height: 14px;
        stroke-width: 1.5;
        width: 14px;
      }

      .avatar-card {
        background: #ededee;
      }

      .avatar-card > img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .avatar-card-actions {
        display: grid;
        gap: 4px;
        position: absolute;
        right: 7px;
        top: 7px;
      }

      .avatar-card-actions button {
        align-items: center;
        background: rgba(255, 255, 255, 0.78);
        border-radius: 50%;
        color: #85858b;
        display: flex;
        height: 21px;
        justify-content: center;
        opacity: 0;
        transition: opacity 100ms var(--workspace-ease), background-color 100ms var(--workspace-ease);
        width: 21px;
      }

      .avatar-card:hover .avatar-card-actions button,
      .avatar-card:focus-within .avatar-card-actions button {
        opacity: 1;
      }

      .avatar-card-actions .ui-icon {
        height: 11px;
        stroke-width: 1.55;
        transform: scale(1);
        transition: transform 140ms var(--workspace-ease);
        width: 11px;
      }

      .avatar-use-button {
        background: rgba(255, 255, 255, 0.94);
        border-radius: var(--workspace-pill-radius);
        bottom: 7px;
        color: #242428;
        font-size: var(--web-type-caption);
        height: 27px;
        left: 9px;
        position: absolute;
        right: 9px;
        transition: background-color 100ms var(--workspace-ease);
      }

      .avatar-use-button:hover {
        background: #ffffff;
      }

      .avatar-template-header {
        align-items: end;
        display: flex;
        justify-content: space-between;
        margin-top: 28px;
      }

      .avatar-template-grid {
        display: grid;
        gap: var(--workspace-media-grid-gap);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin-top: 17px;
      }

      .avatar-template-card {
        aspect-ratio: 0.72;
        background: #ededee;
        border-radius: 9px;
        overflow: hidden;
        position: relative;
      }

      .avatar-template-card img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .avatar-template-actions {
        display: grid;
        gap: 4px;
        opacity: 0;
        position: absolute;
        right: 7px;
        top: 7px;
        transition: opacity 100ms var(--workspace-ease);
      }

      .avatar-template-actions button {
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        color: #85858b;
        display: flex;
        height: 26px;
        justify-content: center;
        width: 26px;
      }

      .avatar-template-actions button:hover {
        background: #ffffff;
        color: #3c3c40;
      }

      .avatar-template-actions .ui-icon {
        height: 12px;
        stroke-width: 1.55;
        width: 12px;
      }

      .avatar-template-card:hover .avatar-template-actions,
      .avatar-template-card:focus-within .avatar-template-actions {
        opacity: 1;
      }

      .avatar-template-card.is-dismissed {
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms var(--workspace-ease);
      }

      /* Reference picker: floating asset popover anchored beside the brief
         panel with one unified library, upload tile, and square asset grid. */
      .reference-modal {
        align-items: flex-start;
        justify-content: flex-start;
        padding: calc(var(--workspace-nav-height) + 120px) 20px 20px 432px;
      }

      .reference-modal .modal-scrim {
        backdrop-filter: blur(2px);
        background: rgba(20, 20, 22, 0.18);
      }

      .reference-dialog {
        background: #ffffff;
        box-shadow:
          0 2px 8px rgba(0, 0, 0, 0.05),
          0 18px 46px rgba(0, 0, 0, 0.14);
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: min(620px, calc(100dvh - var(--workspace-nav-height) - 140px));
        min-height: 432px;
        isolation: isolate;
        width: min(468px, calc(100vw - 40px));
        z-index: 1;
      }

      .reference-picker-header {
        align-items: center;
        background: #ffffff;
        border-bottom: 1px solid rgba(24, 24, 27, 0.08);
        display: flex;
        flex: 0 0 auto;
        min-height: 58px;
        padding: 0 12px 0 20px;
        position: relative;
        z-index: 2;
      }

      .reference-picker-header h2 {
        align-items: center;
        color: #141417;
        display: flex;
        font-family: inherit;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        gap: 8px;
        margin: 0;
      }

      .reference-picker-header h2 .ui-icon {
        height: 16px;
        stroke-width: 1.6;
        width: 16px;
      }

      .reference-picker-tabs {
        align-items: center;
        background: var(--surface-soft);
        border-radius: 999px;
        display: flex;
        gap: 2px;
        margin-left: 16px;
        padding: 3px;
      }

      .reference-picker-tabs[hidden] {
        display: none;
      }

      .reference-picker-tabs button {
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 999px;
        color: var(--text-muted);
        font: inherit;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        min-height: 30px;
        padding: 0 12px;
      }

      .reference-picker-tabs button.is-active {
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        color: var(--text-primary);
      }

      .reference-picker-close {
        align-self: center;
        flex: 0 0 auto;
        height: 40px;
        margin-left: auto;
        position: static;
        width: 40px;
      }

      .reference-picker-scroll {
        background: #ffffff;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 14px 16px 16px;
        position: relative;
        scrollbar-width: none;
        z-index: 1;
      }

      .reference-picker-scroll::-webkit-scrollbar {
        display: none;
      }

      .reference-dialog:has(.reference-modal-footer:not([hidden])) .reference-picker-scroll {
        padding-bottom: 84px;
      }

      .reference-asset-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .reference-upload-tile {
        align-items: center;
        appearance: none;
        background: #f4f4f5;
        border: 0;
        border-radius: 14px;
        color: #7f7f86;
        display: flex;
        flex-direction: column;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        gap: 8px;
        grid-column: span 2;
        justify-content: center;
        min-height: 100px;
        transition: background-color 100ms var(--workspace-ease);
      }

      .reference-upload-tile[hidden] {
        display: none;
      }

      .reference-upload-tile:hover {
        background: #ededee;
      }

      .reference-upload-tile.is-dragging {
        background: #e8e8ea;
      }

      .reference-upload-tile .ui-icon {
        height: 18px;
        stroke-width: 1.6;
        width: 18px;
      }

      .reference-character-create-tile {
        align-items: center;
        appearance: none;
        aspect-ratio: 1 / 1;
        background: #f4f4f5;
        border: 0;
        border-radius: 14px;
        color: #7f7f86;
        display: flex;
        flex-direction: column;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        gap: 8px;
        justify-content: center;
        min-width: 0;
        transition-duration: 100ms;
        transition-property: background-color, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .reference-character-create-tile:hover {
        background: #ededee;
      }

      .reference-character-create-tile:active {
        scale: 0.96;
      }

      .reference-character-create-icon {
        align-items: center;
        background: transparent;
        border-radius: 0;
        color: var(--icon-secondary);
        display: flex;
        height: 18px;
        justify-content: center;
        width: 18px;
      }

      .reference-character-create-icon .ui-icon {
        height: 18px;
        stroke-width: 1.6;
        width: 18px;
      }

      /* Only the named surfaces morph. Without this, every view transition
         also snapshots and crossfades the entire page (root) — a full-screen
         double-paint over the video grid that reads as lag. */
      ::view-transition-old(root),
      ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
      }

      ::view-transition-group(reference-character-picker) {
        animation-duration: 220ms;
        animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      ::view-transition-old(reference-character-picker),
      ::view-transition-new(reference-character-picker) {
        animation-duration: 180ms;
        animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
        mix-blend-mode: normal;
      }

      ::view-transition-group(reference-character-backdrop),
      ::view-transition-old(reference-character-backdrop),
      ::view-transition-new(reference-character-backdrop) {
        animation-duration: 160ms;
        animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
        mix-blend-mode: normal;
      }

      ::view-transition-group(character-picker-surface) {
        animation-duration: 220ms;
        animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      ::view-transition-old(character-picker-surface),
      ::view-transition-new(character-picker-surface) {
        animation-duration: 180ms;
        animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
        mix-blend-mode: normal;
      }

      .reference-character-morph-ghost,
      .character-picker-morph-ghost {
        margin: 0;
        opacity: 1;
        pointer-events: none;
        position: fixed;
        transform: translate(0, 0) scale(1, 1);
        transform-origin: top left;
        will-change: transform, opacity;
        z-index: 180;
      }

      .reference-history-grid {
        display: contents;
      }

      .reference-history-grid.is-character-library {
        display: block;
        grid-column: 1 / -1;
      }

      .reference-character-section + .reference-character-section {
        margin-top: 24px;
      }

      .reference-character-section h3 {
        color: var(--text-primary);
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
        margin: 0 0 10px;
      }

      .reference-character-section-grid {
        display: grid;
        gap: var(--workspace-media-grid-gap);
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .reference-avatar-card-wrap {
        aspect-ratio: 1;
        min-width: 0;
        position: relative;
      }

      .reference-avatar-card-wrap > .reference-history-card {
        height: 100%;
        width: 100%;
      }

      .avatar-speech-preview-media {
        border-radius: inherit;
        display: block;
        inset: 0;
        overflow: hidden;
        position: absolute;
      }

      .avatar-speech-preview-media > img,
      .avatar-speech-preview-media > video {
        border-radius: inherit;
        display: block;
        height: 100%;
        inset: 0;
        object-fit: cover;
        position: absolute;
        transition-duration: 160ms;
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 100%;
      }

      /* Character videos are always live: the video layer stays visible so
         the muted loop never gets suspended, with the still underneath as a
         loading fallback. */
      .avatar-speech-preview-media > video {
        opacity: 1;
      }

      .avatar-speech-preview-media:has(> video) > img {
        opacity: 0;
      }

      .is-avatar-previewing
        .avatar-speech-preview-media:not(:has(> video))
        > img {
        animation: avatar-still-speech-preview 1.1s ease-in-out infinite alternate;
        transform-origin: 50% 38%;
      }

      .avatar-speech-preview-media > audio {
        display: none;
      }

      @keyframes avatar-still-speech-preview {
        from {
          transform: scale(1) translateY(0);
        }
        to {
          transform: scale(1.035) translateY(-0.8%);
        }
      }

      .avatar-speech-preview-toggle {
        align-items: center;
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.92);
        border: 0;
        border-radius: 5px;
        box-shadow: none;
        color: #18181b;
        display: flex;
        /* Sound is the one control on a tile you aim for rather than land on,
           so it is sized to be hit, not to be tidy — 18px was a target you had
           to be accurate about and read as decoration. */
        height: 24px;
        justify-content: center;
        opacity: 0;
        padding: 0;
        position: absolute;
        right: 8px;
        scale: 0.96;
        top: 8px;
        transition-duration: 120ms;
        transition-property: background-color, color, opacity, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 24px;
        z-index: 5;
      }

      .avatar-speech-preview-toggle::before {
        content: "";
        height: 44px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
      }

      .avatar-speech-preview-toggle:hover,
      .avatar-speech-preview-toggle:focus-visible {
        background: #ffffff;
        color: #18181b;
      }

      .avatar-speech-preview-toggle:not(.is-muted),
      .avatar-speech-preview-toggle:not(.is-muted):hover,
      .avatar-speech-preview-toggle:not(.is-muted):focus-visible {
        background: #18181b;
        color: #ffffff;
      }

      .avatar-speech-preview-toggle .ui-icon {
        height: 13px;
        width: 13px;
      }

      .avatar-speech-preview-toggle.is-muted::after {
        background: currentColor;
        border-radius: 999px;
        content: "";
        height: 1px;
        position: absolute;
        rotate: -45deg;
        width: 12px;
      }

      /* A video card carries both the sound toggle and the ellipsis, and both
         sit top-right by default. The toggle is the one you reach for, so it
         keeps the corner and the ellipsis steps aside. */
      .prompt-mention-card-wrap.has-sound-toggle > .prompt-mention-more {
        right: 38px;
      }

      .prompt-mention-card-wrap:hover > .avatar-speech-preview-toggle,
      .prompt-mention-card-wrap:focus-within > .avatar-speech-preview-toggle,
      .prompt-mention-card-wrap.is-avatar-previewing > .avatar-speech-preview-toggle,
      .reference-avatar-card-wrap:hover > .avatar-speech-preview-toggle,
      .reference-avatar-card-wrap:focus-within > .avatar-speech-preview-toggle,
      .reference-avatar-card-wrap.is-avatar-previewing > .avatar-speech-preview-toggle {
        opacity: 1;
        scale: 1;
      }

      /* The press reads in colour, not in size: globalPressInteractionCss owns
         scale for every button with !important, and its 1% compression is
         invisible on a control this small — which is what made the toggle feel
         like it was not taking the click at all. Each state flashes toward the
         one it is about to become. */
      .avatar-speech-preview-toggle.is-muted:active {
        background: #18181b;
        color: #ffffff;
      }

      .avatar-speech-preview-toggle:not(.is-muted):active {
        background: #ffffff;
        color: #18181b;
      }

      .reference-audio-segment {
        background: rgba(24, 24, 27, 0.035);
        border-radius: 14px;
        display: grid;
        gap: 12px;
        grid-column: 1 / -1;
        padding: 14px;
      }

      .reference-audio-segment[hidden] {
        display: none;
      }

      .reference-audio-segment-item {
        display: grid;
        gap: 12px;
      }

      .reference-audio-segment-item + .reference-audio-segment-item {
        border-top: 1px solid rgba(24, 24, 27, 0.07);
        padding-top: 14px;
      }

      .reference-audio-segment-header {
        align-items: center;
        display: flex;
        gap: 10px;
        min-width: 0;
      }

      .reference-audio-segment-header > span:last-child {
        min-width: 0;
      }

      .reference-audio-segment-header strong,
      .reference-audio-segment-header small {
        display: block;
      }

      .reference-audio-segment-header strong {
        color: var(--text-primary);
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
      }

      .reference-audio-segment-header small {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .reference-audio-segment-icon {
        align-items: center;
        background: #ffffff;
        border-radius: 10px;
        color: #6957c8;
        display: flex;
        flex: 0 0 auto;
        height: 36px;
        justify-content: center;
        width: 36px;
      }

      .reference-audio-segment-icon .ui-icon {
        height: 17px;
        width: 17px;
      }

      .reference-audio-segment audio {
        height: 34px;
        width: 100%;
      }

      .reference-audio-segment-times {
        align-items: end;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      }

      .reference-audio-segment-times label span {
        color: var(--text-muted);
        display: block;
        font-size: var(--web-type-caption);
        margin: 0 0 4px 2px;
      }

      .reference-audio-segment-times input {
        appearance: none;
        background: #ffffff;
        border: 0;
        border-radius: 9px;
        color: var(--text-primary);
        font: inherit;
        font-size: var(--web-type-caption);
        height: 34px;
        outline: none;
        padding: 0 10px;
        width: 100%;
      }

      .reference-audio-segment-times input:focus-visible {
        box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.16);
      }

      .reference-audio-segment-times > span {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        padding-bottom: 9px;
      }

      .reference-history-card {
        appearance: none;
        aspect-ratio: 1 / 1;
        background: var(--surface-soft);
        border: 0;
        border-radius: 14px;
        color: var(--icon-secondary);
        overflow: hidden;
        padding: 0;
        position: relative;
        text-align: left;
      }

      .reference-history-card.is-uploading {
        align-items: center;
        animation: reference-upload-pulse 1.2s ease-in-out infinite;
        display: flex;
        justify-content: center;
      }

      .reference-history-uploading-spinner {
        animation: spin 700ms linear infinite;
        border: 2px solid rgba(24, 24, 27, 0.14);
        border-radius: 50%;
        border-top-color: rgba(24, 24, 27, 0.55);
        display: block;
        height: 22px;
        width: 22px;
      }

      @keyframes reference-upload-pulse {
        0%, 100% { background: var(--surface-soft); }
        50% { background: color-mix(in srgb, var(--surface-soft) 55%, #ffffff); }
      }

      html.is-media-uploading .reference-upload-tile {
        opacity: 0.55;
        pointer-events: none;
      }

      .reference-history-card img,
      .reference-history-card video {
        border-radius: inherit;
        height: 100%;
        object-fit: cover;
        outline: 0;
        position: relative;
        width: 100%;
        z-index: 1;
      }

      .reference-avatar-card-wrap
        .reference-history-card
        .avatar-speech-preview-media
        > img,
      .reference-avatar-card-wrap
        .reference-history-card
        .avatar-speech-preview-media
        > video {
        inset: 0;
        position: absolute;
        z-index: auto;
      }

      .reference-history-card.is-audio {
        background: #f7f7f8;
        cursor: pointer;
      }

      .reference-history-card.is-preview-missing img,
      .reference-history-card.is-preview-missing video {
        display: none;
      }

      .reference-history-fallback {
        align-items: center;
        display: grid;
        gap: 8px;
        inset: 0;
        justify-items: center;
        padding: 16px;
        position: absolute;
        text-align: center;
      }

      .reference-history-fallback-icon {
        align-items: center;
        background: #ffffff;
        border-radius: 999px;
        color: #9ca3af;
        display: flex;
        height: 36px;
        justify-content: center;
        width: 36px;
      }

      .reference-history-fallback-icon .ui-icon {
        height: 17px;
        width: 17px;
      }

      .reference-history-fallback strong,
      .reference-history-fallback small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .reference-history-fallback strong {
        color: #55555a;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        max-width: 100%;
      }

      .reference-history-fallback small {
        color: #a1a1aa;
        font-size: 10px;
        margin-top: 2px;
      }

      .reference-history-card.is-selected {
        box-shadow: none;
      }

      .reference-history-card.is-added {
        box-shadow: none;
      }

      .reference-history-card.is-selected::before,
      .reference-history-card.is-added::before {
        align-items: center;
        background: #18181b;
        border-radius: 50%;
        color: #ffffff;
        content: "✓";
        display: flex;
        font-size: 10px;
        height: 19px;
        justify-content: center;
        position: absolute;
        right: 7px;
        top: 7px;
        width: 19px;
        z-index: 2;
      }

      .reference-history-empty {
        align-items: center;
        background: var(--surface-soft);
        border-radius: 18px;
        color: var(--text-primary);
        display: grid;
        gap: 8px;
        font-size: var(--web-type-label);
        grid-column: 1 / -1;
        justify-items: center;
        justify-content: center;
        min-height: 260px;
        padding: 34px;
        text-align: center;
      }

      .reference-history-empty-icon {
        align-items: center;
        background: #ffffff;
        border-radius: 999px;
        color: #a7a7ad;
        display: flex;
        height: 46px;
        justify-content: center;
        margin-bottom: 4px;
        width: 46px;
      }

      .reference-history-empty-icon .ui-icon {
        height: 20px;
        stroke-width: 1.65;
        width: 20px;
      }

      .reference-history-empty strong {
        color: #343438;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
        position: relative;
        z-index: 1;
      }

      .reference-history-empty small {
        color: #9a9aa1;
        font-size: var(--web-type-control);
        line-height: 1.45;
        max-width: 360px;
      }

      .reference-modal-footer {
        background: #ffffff;
        bottom: 0;
        box-shadow: 0 -12px 24px rgba(255, 255, 255, 0.94);
        left: 0;
        padding: 14px 20px 18px;
        position: absolute;
        right: 0;
        z-index: 5;
      }

      .reference-add-button {
        background: #18181b;
        border-radius: 10px;
        color: #ffffff;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        height: 42px;
        width: 100%;
      }

      .reference-add-button:disabled {
        background: var(--surface-soft);
        color: #a5a5ab;
        opacity: 1;
      }

      .link-dialog {
        height: min(540px, calc(100dvh - 40px));
      }

      .link-picker-entry {
        display: flex;
        gap: 8px;
        margin-top: 20px;
      }

      .link-picker-entry label {
        flex: 1;
      }

      .link-picker-entry input {
        background: #f7f7f8;
        border: 1px solid transparent;
        border-radius: 10px;
        color: #202024;
        font-size: var(--web-type-control);
        height: 42px;
        outline: none;
        padding: 0 12px;
        width: 100%;
      }

      .link-picker-entry input:focus {
        border-color: rgba(24, 24, 27, 0.18);
        background: #ffffff;
      }

      .link-picker-entry button {
        background: #18181b;
        border-radius: 10px;
        color: #ffffff;
        font-size: var(--web-type-control);
        min-width: 58px;
      }

      .link-history-list {
        display: grid;
        gap: 7px;
        margin-top: 17px;
      }

      .link-history-empty {
        color: #9ca3af;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        line-height: 1.4;
        margin: 2px 0 0;
      }

      .link-history-row {
        align-items: center;
        background: #f7f7f8;
        border-radius: 10px;
        color: #252529;
        display: flex;
        gap: 10px;
        min-height: 54px;
        padding: 8px 10px;
        text-align: left;
        width: 100%;
      }

      .link-history-row:hover { background: #f0f0f1; }

      .link-history-row > .ui-icon { color: #919198; height: 15px; width: 15px; }

      .link-history-row span { display: grid; gap: 2px; min-width: 0; }
      .link-history-row strong { font-size: var(--web-type-control); font-weight: var(--font-ui-medium); }
      .link-history-row small { color: #96969c; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

      .avatar-create {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 100%;
      }

      .avatar-create[hidden] {
        display: none;
      }

      .avatar-create-fields {
        border-right: 1px solid rgba(24, 24, 27, 0.055);
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        padding: 22px 22px 20px;
      }

      .avatar-create-header {
        align-items: center;
        display: flex;
        gap: 8px;
        min-height: 26px;
        padding-right: 24px;
      }

      .avatar-create-header button {
        align-items: center;
        color: #a0a0a5;
        display: flex;
        height: 24px;
        justify-content: center;
        width: 24px;
      }

      .avatar-create-header .ui-icon {
        height: 13px;
        stroke-width: 1.6;
        width: 13px;
      }

      .avatar-drop,
      .avatar-prompt textarea,
      .avatar-name input {
        background: rgba(24, 24, 27, 0.035);
        border: 0;
        border-radius: 10px;
        color: #343439;
        outline: 0;
        width: 100%;
      }

      .avatar-drop {
        align-items: center;
        display: grid;
        gap: 2px 10px;
        grid-template-columns: 34px 1fr;
        min-height: 58px;
        padding: 8px 12px;
        text-align: left;
      }

      .avatar-drop > span {
        align-items: center;
        background: rgba(255, 255, 255, 0.72);
        border-radius: 9px;
        display: flex;
        grid-row: 1 / span 2;
        height: 34px;
        justify-content: center;
        width: 34px;
      }

      .avatar-drop .ui-icon {
        color: var(--icon-secondary);
        height: 14px;
        stroke-width: 1.3;
        width: 14px;
      }

      .avatar-drop strong {
        align-self: end;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      .avatar-drop small {
        align-self: start;
        color: #aaaab0;
        font-size: 10px;
      }

      .avatar-upload-preview {
        display: grid;
        gap: 7px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .avatar-upload-preview:empty {
        display: none;
      }

      .avatar-upload-preview img,
      .avatar-upload-preview video {
        aspect-ratio: 1;
        border-radius: 10px;
        object-fit: cover;
        width: 100%;
      }

      .avatar-prompt {
        display: block;
        position: relative;
      }

      .avatar-prompt-hint {
        align-items: center;
        background: #ffffff;
        border-radius: 50%;
        bottom: 10px;
        color: #a7a7ad;
        display: flex;
        height: 28px;
        justify-content: center;
        position: absolute;
        right: 10px;
        width: 28px;
      }

      .avatar-prompt-hint .ui-icon {
        height: 13px;
        stroke-width: 1.5;
        width: 13px;
      }

      .avatar-prompt textarea {
        display: block;
        font: inherit;
        font-size: var(--web-type-caption);
        line-height: 1.45;
        min-height: 178px;
        padding: 14px;
        resize: none;
      }

      .avatar-name input {
        font: inherit;
        font-size: var(--web-type-caption);
        height: 42px;
        padding: 0 14px;
      }

      .avatar-drop:focus-visible,
      .avatar-prompt textarea:focus,
      .avatar-name input:focus {
        box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.055);
      }

      .avatar-create-generate {
        align-items: center;
        background: #363639;
        border-radius: var(--workspace-pill-radius);
        color: #ffffff;
        display: flex;
        font-size: 10px;
        height: 37px;
        justify-content: center;
        margin-top: auto;
        position: relative;
        width: 100%;
      }

      .avatar-create-generate > span:last-child {
        align-items: center;
        display: flex;
        gap: 4px;
        position: absolute;
        right: calc(50% - 57px);
      }

      .avatar-create-generate > span[hidden] {
        display: none;
      }

      .avatar-create-generate .ui-icon {
        height: 11px;
        stroke-width: 1.4;
        width: 11px;
      }

      .avatar-create-generate:disabled {
        cursor: wait;
        opacity: 0.64;
      }

      .avatar-create-output {
        align-items: center;
        /* Matches the baked-in background of the silhouette placeholder
           artwork so the image blends into the pane without a visible box. */
        background: #f8f8f8;
        display: flex;
        justify-content: center;
      }

      .avatar-output-placeholder {
        color: #fafafa;
        display: flex;
        justify-content: center;
        width: 44%;
      }

      .avatar-output-placeholder svg,
      .avatar-output-placeholder img {
        height: auto;
        max-height: 78%;
        object-fit: contain;
        width: 100%;
      }

      .avatar-output-placeholder img {
        /* The artwork's near-white ground multiplies to invisible against the
           pane, so the silhouette floats without a visible image box. */
        mix-blend-mode: multiply;
      }

      .avatar-create-output:has(.avatar-generated-preview:not([hidden])) .avatar-output-placeholder {
        display: none;
      }

      .avatar-generating-pill {
        align-items: center;
        background: #ffffff;
        border-radius: var(--workspace-pill-radius);
        color: #65656a;
        display: inline-flex;
        font-size: 10px;
        gap: 6px;
        height: 27px;
        padding: 0 12px;
      }

      .avatar-generating-pill[hidden] {
        display: none;
      }

      .avatar-generating-pill i {
        border: 1px solid #d4d4d7;
        border-radius: 50%;
        border-top-color: #5e5e63;
        height: 11px;
        width: 11px;
        animation: avatar-spin 700ms linear infinite;
      }

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

      /* Products is a small popover: the expanded state of the Product pill,
         not a dialog. The shared .small-popover carries placement, layering,
         and the open transition; this is only its size and skin. */
      .asset-popover {
        background: #ffffff;
        border: 1px solid rgba(24, 24, 27, 0.06);
        border-radius: 18px;
        box-shadow:
          0 16px 36px rgba(0, 0, 0, 0.12),
          0 40px 90px rgba(0, 0, 0, 0.14);
        display: flex;
        flex-direction: column;
        height: min(425px, calc(100dvh - 96px));
        transform-origin: bottom left;
        width: min(455px, calc(100vw - 24px));
      }

      .asset-popover-header {
        align-items: stretch;
        display: flex;
        height: 48px;
        justify-content: space-between;
        padding: 0 10px 0 16px;
      }

      .asset-popover-tabs {
        align-items: stretch;
        display: flex;
        gap: 18px;
      }

      .asset-popover-tabs button {
        align-items: center;
        color: #aaaab0;
        display: inline-flex;
        font-size: var(--web-type-caption);
        gap: 6px;
        position: relative;
      }

      .asset-popover-tabs button[aria-selected="true"] {
        color: #4d4d52;
      }

      .asset-popover-tabs button[aria-selected="true"]::after {
        background: #5b5b60;
        bottom: 0;
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        right: 0;
      }

      .asset-popover-tabs .ui-icon {
        height: 13px;
        stroke-width: 1.3;
        width: 13px;
      }

      .asset-popover-close {
        align-items: center;
        align-self: center;
        background: rgba(24, 24, 27, 0.035);
        border-radius: 50%;
        color: #aaaab0;
        display: flex;
        height: 27px;
        justify-content: center;
        width: 27px;
      }

      .asset-popover-close .ui-icon {
        height: 13px;
        stroke-width: 1.5;
        width: 13px;
      }

      .asset-grid {
        display: grid;
        gap: var(--workspace-media-grid-gap);
        grid-auto-rows: 98px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-height: calc(100% - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 13px 16px 18px;
        scrollbar-width: none;
      }

      .asset-grid::-webkit-scrollbar {
        display: none;
      }

      .asset-picker-card {
        background: rgba(24, 24, 27, 0.035);
        border-radius: 10px;
        overflow: hidden;
        position: relative;
      }

      .asset-picker-card img,
      .asset-picker-card video {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .asset-picker-upload {
        align-items: center;
        color: #a6a6ac;
        display: flex;
        flex-direction: column;
        font-size: var(--web-type-caption);
        gap: 6px;
        grid-column: span 2;
        justify-content: center;
      }

      .asset-picker-upload .ui-icon {
        height: 16px;
        stroke-width: 1.25;
        width: 16px;
      }

      .icon-button,
      .transport-play {
        align-items: center;
        background: var(--surface-soft);
        border-radius: var(--workspace-radius);
        display: inline-flex;
        height: 40px;
        justify-content: center;
        transition-duration: 40ms;
        transition-property: background-color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 40px;
      }

      .icon-button:hover,
      .transport-play:hover {
        background: var(--surface-hover);
      }

      .icon-button svg,
      .transport-play svg {
        height: 16px;
        width: 16px;
      }

      .primary-button,
      .secondary-button,
      .danger-button {
        align-items: center;
        border-radius: var(--workspace-radius);
        display: inline-flex;
        font-size: var(--web-type-caption);
        gap: 7px;
        justify-content: center;
        min-height: 40px;
        padding: 0 14px;
        transition-duration: 40ms;
        transition-property: background-color, color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .primary-button {
        background: #1b1b1d;
        color: #ffffff;
      }

      .secondary-button {
        background: var(--surface-soft);
      }

      .danger-button {
        background: #f7e7e7;
        color: var(--danger);
      }

      .primary-button svg,
      .secondary-button svg,
      .danger-button svg {
        height: 14px;
        width: 14px;
      }

      .icon-only-button {
        padding: 0;
        width: 40px;
      }

      .project-view {
        background: var(--shell);
        height: calc(100vh - var(--workspace-nav-height));
        overflow: hidden;
      }

      .project-header {
        align-items: center;
        background: #ffffff;
        display: grid;
        gap: 12px;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        min-height: 64px;
        padding: 12px 20px;
      }

      .project-heading h1 {
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .project-heading {
        min-width: 0;
      }

      .project-subtitle {
        color: var(--danger);
        font-size: var(--web-type-caption);
        line-height: 1.35;
        margin: 3px 0 0;
        max-width: min(720px, 62vw);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .project-header-actions {
        align-items: center;
        display: flex;
        gap: 8px;
      }

      .project-status {
        background: var(--surface-soft);
        border-radius: var(--workspace-radius);
        color: var(--text-soft);
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        padding: 7px 10px;
      }

      .project-status.is-successful {
        color: #377653;
      }

      .project-status.is-failed {
        color: var(--danger);
      }

      .project-layout {
        display: grid;
        gap: 0;
        grid-template-columns: minmax(0, 1fr) 280px;
        height: calc(100vh - var(--workspace-nav-height) - 64px);
        min-height: 0;
        overflow: hidden;
      }

      .project-canvas {
        display: grid;
        grid-template-rows: minmax(0, 1fr) 58px 94px;
        min-height: 0;
        min-width: 0;
        padding: 22px 24px 18px;
      }

      .project-stage {
        align-items: center;
        align-self: center;
        aspect-ratio: 16 / 9;
        background: #171719;
        border-radius: var(--workspace-radius);
        display: flex;
        height: 100%;
        justify-self: center;
        max-height: 100%;
        max-width: 100%;
        overflow: hidden;
        position: relative;
        width: auto;
      }

      .project-stage > video,
      .project-stage > .project-poster {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .project-stage-empty,
      .project-stage-message {
        align-items: center;
        color: #d8d8da;
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: 100%;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .project-stage-message > img {
        filter: brightness(0.48);
        height: 100%;
        inset: 0;
        object-fit: cover;
        position: absolute;
        width: 100%;
      }

      .project-stage-message > *:not(img) {
        position: relative;
        z-index: 1;
      }

      .project-stage-message.is-generating {
        background: #171719;
      }

      .project-stage-message strong {
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
      }

      .project-stage-message.is-generating strong {
        font-size: var(--web-type-label);
      }

      .project-stage-message p {
        color: #b9b9bd;
        font-size: var(--web-type-caption);
        max-width: min(520px, 76%);
        text-align: center;
      }

      .project-stage-message.is-generating p {
        color: #8f8f95;
        font-size: var(--web-type-caption);
      }

      .project-stage-retry {
        align-items: center;
        background: var(--bg-primary, #ff3b4d);
        border: 0;
        border-radius: 999px;
        color: #ffffff;
        cursor: pointer;
        display: inline-flex;
        font: inherit;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        justify-content: center;
        margin-top: 4px;
        min-height: 40px;
        padding: 0 18px;
        transition-duration: 120ms;
        transition-property: background-color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .project-stage-retry:hover,
      .project-stage-retry:focus-visible {
        background: color-mix(in srgb, var(--bg-primary, #ff3b4d) 90%, #000000);
        outline: 0;
      }

      .project-stage-retry:active {
        scale: 0.96;
      }

      .history-stage-failure-actions {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 4px;
      }

      .history-stage-failure-actions .project-stage-retry {
        margin-top: 0;
      }

      .project-stage-delete {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 999px;
        color: #d54646;
        cursor: pointer;
        display: inline-flex;
        font: inherit;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        justify-content: center;
        min-height: 40px;
        padding: 0 16px;
        transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1), scale 120ms cubic-bezier(0.2, 0, 0, 1);
      }

      .project-stage-delete:hover,
      .project-stage-delete:focus-visible {
        background: rgba(224, 82, 82, 0.07);
        outline: 0;
      }

      .project-stage-delete:active {
        scale: 0.96;
      }

      .project-stage-retry:disabled,
      .project-stage-delete:disabled {
        cursor: wait;
        opacity: 0.56;
      }

      .stage-spinner {
        animation: spin 0.8s linear infinite;
        border: 2px solid #3b3b3f;
        border-radius: 999px;
        border-top-color: #d8d8da;
        contain: paint;
        height: 22px;
        transform-origin: 50% 50%;
        will-change: transform;
        width: 22px;
      }

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

      .player-transport {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: 40px auto minmax(80px, 1fr) auto 40px 40px;
        justify-self: center;
        padding: 9px 0;
        width: min(100%, 1100px);
      }

      .player-transport.is-disabled {
        opacity: 0.44;
        pointer-events: none;
      }

      .transport-time {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
      }

      .transport-seek {
        accent-color: #1b1b1d;
        width: 100%;
      }

      .project-inspector {
        background: #ffffff;
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        overflow-y: auto;
        padding: 20px;
      }

      .inspector-details {
        color: var(--text-soft);
      }

      .inspector-details summary {
        align-items: center;
        background: var(--surface-soft);
        border-radius: var(--workspace-radius);
        cursor: pointer;
        display: flex;
        font-size: var(--web-type-control);
        justify-content: space-between;
        list-style: none;
        min-height: 42px;
        padding: 0 12px;
      }

      .inspector-details summary::-webkit-details-marker {
        display: none;
      }

      .inspector-details summary::after {
        content: "+";
        font-size: 15px;
      }

      .inspector-details[open] summary::after {
        content: "-";
      }

      .inspector-details p {
        margin-top: 12px;
      }

      .inspector-section p {
        color: var(--text-soft);
        font-size: var(--web-type-control);
        line-height: 1.55;
      }

      .inspector-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
      }

      .inspector-meta strong {
        background: var(--surface-soft);
        border-radius: var(--workspace-radius);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        padding: 5px 8px;
      }

      .project-sources {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .project-sources img {
        border-radius: var(--workspace-radius);
        height: 48px;
        object-fit: cover;
        width: 48px;
      }

      .inspector-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: auto;
      }

      .inspector-empty {
        color: var(--text-muted);
      }

      .web-toast {
        background: #1b1b1d;
        border-radius: var(--workspace-radius);
        bottom: 20px;
        color: #ffffff;
        left: 50%;
        opacity: 0;
        padding: 9px 14px;
        pointer-events: none;
        position: fixed;
        transform: translate(-50%, 7px) scale(0.98);
        transition-duration: 40ms;
        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        /* Above every popover and menu (max 420): a toast that reports a
           failure from inside the reference-library popover has to clear it. */
        z-index: 500;
      }

      .web-toast.is-visible {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
      }

      
      .web-text { color: var(--text-primary); font-family: inherit; letter-spacing: 0; margin: 0; text-wrap: pretty; }
      .web-text-primary { color: var(--text-primary, #18181b); }
      .web-text-secondary { color: var(--text-secondary); font-weight: var(--font-ui-regular); }
      .web-text-muted { color: var(--text-muted); font-weight: var(--font-ui-regular); }
      .web-text-caption { font-size: var(--web-type-caption); line-height: 1.35; }
      .web-text-control { font-size: var(--web-type-control); line-height: 1.25; }
      .web-text-body { font-size: var(--web-type-body); line-height: 1.4; }
      .web-text-label { font-size: var(--web-type-label); line-height: 1.3; }
      .web-text-subtitle { font-size: var(--web-type-label); line-height: 1.35; }
      .web-text-title { font-size: var(--web-type-title); font-weight: var(--font-ui-medium); line-height: 1.25; }
      .web-text-heading { font-size: var(--web-type-heading); font-weight: var(--font-ui-medium); line-height: 1.2; text-wrap: balance; }
      .web-text-display { font-size: var(--web-type-display); font-weight: var(--font-ui-medium); line-height: 1.15; text-wrap: balance; }
      .web-text-section { font-size: var(--web-type-section); font-weight: var(--font-ui-medium); line-height: 1.15; text-wrap: balance; }
      .web-text-hero { font-size: var(--web-type-hero); font-weight: var(--font-ui-medium); line-height: 1.1; text-wrap: balance; }
    
      
      .rg-modal-layer {
        align-items: center;
        background: rgba(20, 20, 22, 0.28);
        display: flex;
        inset: 0;
        justify-content: center;
        opacity: 0;
        overflow-y: auto;
        padding: 32px 16px;
        position: fixed;
        transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1);
        /* A real modal owns the screen, so it covers the global nav — the
           opposite of a small popover, which tucks under it. */
        z-index: var(--layer-modal, 160);
      }

      .rg-modal-layer[hidden] {
        display: none;
      }

      .rg-modal-layer.open {
        opacity: 1;
      }

      .rg-modal {
        background: var(--surface);
        border-radius: var(--radius-dialog, 24px);
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.8) inset,
          0 30px 80px rgba(0, 0, 0, 0.18),
          0 8px 24px rgba(0, 0, 0, 0.08);
        margin: auto;
        opacity: 0;
        padding: 28px;
        position: relative;
        transform: scale(0.985);
        transition:
          opacity 100ms cubic-bezier(0.2, 0, 0, 1),
          transform 100ms cubic-bezier(0.2, 0, 0, 1);
        width: 420px;
      }

      .rg-modal-layer.open .rg-modal {
        opacity: 1;
        transform: scale(1);
      }

      .rg-modal-close {
        align-items: center;
        background: var(--surface-soft);
        border-radius: var(--radius-pill, 999px);
        color: var(--text-secondary);
        display: inline-flex;
        height: 32px;
        justify-content: center;
        position: absolute;
        right: 16px;
        top: 16px;
        width: 32px;
      }

      .rg-modal-close svg {
        height: 12px;
        width: 12px;
      }

      /* Reserve the scrollbar gutter at all times so locking body scroll
         when a modal opens never reflows the page sideways. */
      html {
        scrollbar-gutter: stable;
      }

      body.rg-modal-open {
        overflow: hidden;
      }

      .rg-auth-modal.step-code {
        width: 420px;
      }

      .rg-auth-title {
        line-height: 1.15;
        margin: 0 0 24px;
        padding-right: 44px;
        text-wrap: balance;
      }

      .rg-auth-title .rg-auth-subtitle {
        display: block;
        line-height: 1.2;
        margin-top: 2px;
        text-wrap: pretty;
      }

      .rg-auth-field {
        margin-bottom: 14px;
      }

      .rg-auth-modal:not(.is-signin) .rg-signin-only {
        display: none;
      }

      /* Google stays offered in sign-in mode too. The Clerk instance has
         password auth disabled (email_code + oauth_google are the only first
         factors), so hiding it here left returning users with an email/password
         form that Clerk always rejects. */

      .rg-forgot-link {
        background: transparent;
        color: var(--text-secondary);
        display: inline-block;
        font-size: var(--web-type-caption);
        margin-top: 9px;
        padding: 0;
        text-decoration: underline;
      }

      .rg-forgot-link:hover {
        color: var(--text-primary);
      }

      /* Controls in this app are filled, not outlined: the soft surface is
         what marks them, the same as every other secondary control. */
      .rg-google-button {
        align-items: center;
        background: var(--surface-soft);
        border: 0;
        border-radius: var(--radius-pill, 999px);
        color: var(--text-primary);
        display: flex;
        gap: 8px;
        height: 48px;
        justify-content: center;
        width: 100%;
      }

      .rg-google-button svg {
        height: 15px;
        width: 15px;
      }

      .rg-or-divider {
        align-items: center;
        color: var(--text-muted);
        display: flex;
        font-size: var(--web-type-caption);
        font-style: normal;
        font-weight: var(--font-ui-medium);
        gap: 12px;
        letter-spacing: 0.04em;
        margin: 18px 0;
        text-transform: uppercase;
      }

      .rg-or-divider::before,
      .rg-or-divider::after {
        background: var(--line-strong);
        content: "";
        display: block;
        height: 1px;
        width: 100%;
      }

      .rg-field-label {
        color: var(--text-secondary);
        display: block;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        margin: 0 0 8px;
      }

      .rg-text-input {
        background: var(--surface-soft);
        border: 0;
        color: var(--text-primary);
        height: 48px;
        outline: none;
        padding: 0 16px;
        width: 100%;
      }

      .rg-text-input::placeholder {
        color: var(--text-muted);
      }

      .rg-text-input:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-primary) 14%, transparent);
      }

      .rg-primary-pill {
        align-items: center;
        display: inline-flex;
        height: 48px;
        justify-content: center;
        margin-top: 12px;
        width: 100%;
      }

      .rg-primary-pill[disabled] {
        opacity: 0.6;
      }

      .rg-auth-footer {
        color: var(--text-secondary);
        font-size: var(--web-type-caption);
        margin: 20px 0 0;
        text-align: center;
      }

      .rg-inline-link {
        background: transparent;
        color: var(--text-primary);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        padding: 0;
        text-decoration: underline;
      }

      .rg-code-sent {
        color: var(--text-secondary);
        font-size: var(--web-type-caption);
        margin: 0 0 16px;
      }

      .rg-code-boxes {
        display: flex;
        gap: 8px;
        justify-content: center;
      }

      .rg-code-box {
        background: var(--surface-soft);
        border: 0;
        border-radius: var(--radius-control, 12px);
        caret-color: var(--rg-accent, var(--bg-primary));
        color: var(--text-primary);
        font-size: var(--web-type-heading);
        font-weight: var(--font-ui-medium);
        height: 56px;
        outline: none;
        text-align: center;
        transition: border-color 100ms cubic-bezier(0.2, 0, 0, 1);
        width: 48px;
      }

      .rg-code-box:focus {
        box-shadow: 0 0 0 2px var(--rg-accent, var(--bg-primary)) inset;
      }

      .rg-resend-row {
        color: var(--text-primary);
        font-size: var(--web-type-caption);
        margin: 14px 0 0;
      }

      .rg-resend {
        background: transparent;
        color: var(--text-muted);
        cursor: default;
        font-size: var(--web-type-caption);
        padding: 0;
      }

      .rg-resend.active {
        color: var(--rg-accent, var(--bg-primary));
        cursor: pointer;
        text-decoration: underline;
      }

      .rg-password-field {
        position: relative;
      }

      .rg-password-field .rg-text-input {
        padding-right: 40px;
      }

      .rg-eye-toggle {
        align-items: center;
        background: transparent;
        color: var(--text-secondary);
        display: inline-flex;
        height: 40px;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
      }

      .rg-eye-toggle svg {
        height: 15px;
        width: 15px;
      }

      .rg-field-hint {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        margin: 5px 0 0;
      }

      .rg-toast {
        background: var(--text-primary);
        border-radius: var(--radius-control, 12px);
        bottom: 26px;
        color: var(--text-inverse);
        font-size: var(--web-type-caption);
        left: 50%;
        opacity: 0;
        padding: 9px 16px;
        pointer-events: none;
        position: fixed;
        transform: translate(-50%, 8px);
        transition:
          opacity 40ms ease-out,
          transform 40ms ease-out;
        /* Top of the stack: a message raised from inside a modal has to clear
           it, the nav, and every popover. */
        z-index: var(--layer-toast, 420);
      }

      .rg-toast.visible {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      .rg-nav-credits {
        align-items: center;
        background: var(--surface-soft, #f5f5f6);
        border-radius: var(--radius-control, 12px);
        color: var(--text-primary);
        display: inline-flex;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        gap: 5px;
        min-height: 28px;
        padding: 0 12px;
      }

      .rg-nav-credits .rg-spark {
        color: var(--text-primary);
      }

      .rg-nav-avatar {
        align-items: center;
        background: var(--text-primary);
        border-radius: var(--radius-pill, 999px);
        color: var(--text-inverse);
        display: inline-flex;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        height: 30px;
        justify-content: center;
        overflow: hidden;
        text-decoration: none;
        width: 30px;
      }

      .rg-nav-avatar img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .rg-profile-menu {
        display: inline-flex;
        position: relative;
      }

      .rg-profile-menu > .rg-nav-avatar {
        border: 0;
        cursor: pointer;
        font: inherit;
        padding: 0;
      }

      .rg-profile-popover {
        padding-top: 8px;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 100%;
        transform: translateY(-3px) scale(0.98);
        transform-origin: top right;
        transition:
          opacity 100ms ease-out,
          transform 100ms ease-out,
          visibility 100ms ease-out;
        visibility: hidden;
        width: 248px;
        z-index: 120;
      }

      .rg-profile-menu:hover .rg-profile-popover,
      .rg-profile-menu:focus-within .rg-profile-popover,
      .rg-profile-menu.is-open .rg-profile-popover {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        visibility: visible;
      }

      .rg-profile-dropdown {
        background: rgba(255, 255, 255, 0.98);
        border-radius: 14px;
        box-shadow:
          0 18px 44px rgba(24, 24, 27, 0.15),
          0 2px 10px rgba(24, 24, 27, 0.08);
        overflow: hidden;
        padding: 6px;
      }

      .rg-profile-credit-summary,
      .rg-profile-menu-item {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 10px;
        color: var(--text-primary);
        display: flex;
        font: inherit;
        gap: 10px;
        min-width: 0;
        padding: 9px 10px;
        text-align: left;
        text-decoration: none;
        width: 100%;
      }

      .rg-profile-credit-summary {
        min-height: 56px;
      }

      .rg-profile-credit-summary:hover,
      .rg-profile-menu-item:hover {
        background: var(--surface-hover);
      }

      .rg-profile-credit-icon {
        align-items: center;
        background: var(--surface-soft, #f5f5f6);
        border-radius: 10px;
        color: var(--bg-primary, #ff3850);
        display: inline-flex;
        flex: 0 0 auto;
        height: 34px;
        justify-content: center;
        width: 34px;
      }

      .rg-profile-credit-icon .ui-icon,
      .rg-profile-menu-item .ui-icon {
        height: 16px;
        width: 16px;
      }

      .rg-profile-credit-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .rg-profile-credit-copy strong {
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium, 600);
        line-height: 1.2;
      }

      .rg-profile-credit-copy small {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular, 400);
        line-height: 1.25;
      }

      .rg-profile-menu-divider {
        background: var(--line-strong);
        height: 1px;
        margin: 5px 4px;
      }

      .rg-profile-menu-item {
        cursor: pointer;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular, 400);
        min-height: 34px;
      }

      .rg-profile-menu-item.is-signout {
        color: var(--text-secondary);
      }


      .rg-paywall-modal {
        width: 640px;
      }

      .rg-paywall-title {
        color: #0b0b0c;
        font-size: var(--web-type-heading);
        font-weight: 600;
        margin: 0 0 6px;
        text-align: center;
      }

      .rg-paywall-sub {
        align-items: center;
        color: #9a9aa0;
        display: none;
        font-size: var(--web-type-caption);
        gap: 6px;
        justify-content: center;
        margin: 0 0 18px;
      }

      .rg-device-glyph {
        height: 13px;
        width: 13px;
      }

      .rg-period-toggle {
        background: var(--surface-soft, #f5f5f6);
        border-radius: var(--radius-control, 12px);
        display: flex;
        height: 32px;
        margin: 0 auto 20px;
        padding: 3px;
        position: relative;
        width: 190px;
      }

      .rg-period-toggle button {
        align-items: center;
        background: transparent;
        border-radius: var(--radius-control, 12px);
        color: #55555a;
        display: inline-flex;
        flex: 1;
        font-size: var(--web-type-caption);
        font-weight: 600;
        gap: 4px;
        justify-content: center;
        position: relative;
        z-index: 1;
      }

      .rg-period-thumb {
        background: #fff;
        border-radius: var(--radius-control, 12px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        height: 26px;
        left: 3px;
        position: absolute;
        top: 3px;
        transition: transform 40ms ease-out;
        width: calc(50% - 3px);
      }

      .rg-period-toggle[data-period="annual"] .rg-period-thumb {
        transform: translateX(100%);
      }

      .rg-period-toggle[data-period="weekly"] [data-period-value="weekly"],
      .rg-period-toggle[data-period="annual"] [data-period-value="annual"] {
        color: #0b0b0c;
      }

      .rg-discount-chip {
        background: #ffe3e7;
        border-radius: var(--radius-control, 12px);
        color: var(--rg-accent, #ff3850);
        font-size: var(--web-type-caption);
        font-style: normal;
        font-weight: 700;
        padding: 2px 6px;
      }

      .rg-plan-cards {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .rg-plan-card {
        background: var(--surface-soft, #f5f5f6);
        border: 0;
        border-radius: var(--radius-control, 12px);
        display: flex;
        flex-direction: column;
        padding: 16px;
        position: relative;
      }

      /* "rg-popular" (not "popular") - the landing page already styles a
         .popular home-section class and grid-stretch breaks on collision. */
      .rg-plan-card.rg-popular {
        background: #fff0f2;
      }

      .rg-popular-chip {
        background: var(--rg-accent, #ff3850);
        border-radius: var(--radius-control, 12px);
        color: #fff;
        font-size: var(--web-type-caption);
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 3px 8px;
        position: absolute;
        right: 12px;
        top: -9px;
      }

      .rg-plan-name {
        color: #55555a;
        font-size: var(--web-type-caption);
        font-weight: 600;
        margin: 0 0 8px;
      }

      .rg-plan-price {
        align-items: baseline;
        color: #0b0b0c;
        display: flex;
        gap: 4px;
        margin: 0 0 8px;
      }

      .rg-plan-price strong {
        font-size: var(--web-type-heading);
        font-weight: 700;
      }

      .rg-plan-price .rg-plan-period {
        color: #9a9aa0;
        font-size: var(--web-type-caption);
      }

      .rg-plan-price .rg-plan-strike {
        color: #b6b6ba;
        font-size: var(--web-type-caption);
        text-decoration: line-through;
      }

      .rg-plan-desc {
        display: none;
      }

      .rg-plan-divider {
        display: none;
      }

      .rg-plan-feature {
        align-items: center;
        color: #3c3c41;
        display: flex;
        font-size: var(--web-type-caption);
        gap: 7px;
        margin: 0 0 8px;
      }

      .rg-plan-feature .rg-feature-icon {
        color: #9a9aa0;
        flex: none;
        height: 11px;
        width: 11px;
      }

      .rg-plan-feature.primary .rg-feature-icon {
        color: var(--rg-accent, #ff3850);
      }

      .rg-plan-cta {
        align-items: center;
        background: #17171a;
        border: 0;
        border-radius: var(--radius-control, 12px);
        color: #fff;
        display: inline-flex;
        font-size: var(--web-type-caption);
        font-weight: 600;
        height: 34px;
        justify-content: center;
        margin-top: auto;
        width: 100%;
      }

      .rg-plan-cta.secondary {
        background: #e9e9eb;
        color: #111113;
      }

      .rg-plan-cta.current {
        background: #e9e9eb;
        color: #9a9aa0;
        pointer-events: none;
      }

      .rg-compact-modal {
        text-align: center;
        width: 300px;
      }

      .rg-success-check {
        height: 110px;
        margin: 4px auto 14px;
        width: 110px;
      }

      .rg-success-title {
        color: #0b0b0c;
        font-size: var(--web-type-heading);
        font-weight: 600;
        margin: 0 0 6px;
      }

      .rg-success-sub {
        color: #9a9aa0;
        font-size: var(--web-type-caption);
        line-height: 1.5;
        margin: 0 0 4px;
      }

      .rg-ooc-title {
        color: #0b0b0c;
        display: grid;
        font-size: var(--web-type-heading);
        font-weight: 600;
        margin: 0 0 14px;
        text-align: left;
      }

      .rg-ooc-title span:last-child {
        color: #9a9aa0;
        font-weight: 500;
      }

      .rg-ooc-card {
        background: #f7f7f8;
        border-radius: var(--radius-control, 12px);
        display: flex;
        justify-content: space-between;
        margin-bottom: 14px;
        padding: 16px;
        text-align: left;
      }

      .rg-ooc-plan {
        color: #55555a;
        font-size: var(--web-type-caption);
        font-weight: 600;
        margin: 0 0 6px;
      }

      .rg-ooc-price {
        align-items: baseline;
        display: flex;
        gap: 5px;
        margin: 0 0 6px;
        white-space: nowrap;
      }

      .rg-ooc-price .rg-plan-strike {
        color: #b6b6ba;
        font-size: var(--web-type-control);
        text-decoration: line-through;
      }

      .rg-ooc-price strong {
        color: #0b0b0c;
        font-size: var(--web-type-display);
        font-weight: 700;
        white-space: nowrap;
      }

      .rg-ooc-price span:last-child {
        color: #9a9aa0;
        font-size: var(--web-type-caption);
      }

      .rg-ooc-credits {
        color: var(--rg-accent, #ff3850);
        font-size: var(--web-type-caption);
        font-weight: 600;
        margin: 0;
      }

      /* Shrinkable so the price row ("$99.99 /mo") never clips; frameless
         (no global img outline, white tile removed at asset generation). */
      .rg-ooc-art {
        flex: 0 1 auto;
        height: 90px;
        min-width: 0;
        object-fit: contain;
        outline: none;
        width: 90px;
      }

      .rg-ooc-card > div:first-child {
        flex: none;
      }

      .rg-ooc-due {
        color: #0b0b0c;
        font-size: var(--web-type-caption);
        font-weight: 600;
        margin: 0 0 4px;
      }

      .rg-ooc-terms {
        color: #9a9aa0;
        font-size: var(--web-type-caption);
        margin: 0 0 14px;
      }

      .rg-dark-pill {
        align-items: center;
        background: #17171a;
        border-radius: var(--radius-control, 12px);
        color: #fff;
        display: inline-flex;
        font-size: var(--web-type-control);
        font-weight: 600;
        height: 38px;
        justify-content: center;
        margin-bottom: 8px;
        width: 100%;
      }

      .rg-light-pill {
        align-items: center;
        background: var(--surface-soft, #f5f5f6);
        border-radius: var(--radius-control, 12px);
        color: #111113;
        display: inline-flex;
        font-size: var(--web-type-control);
        font-weight: 600;
        height: 38px;
        justify-content: center;
        width: 100%;
      }

      .rg-topup-modal {
        width: 340px;
      }

      .rg-topup-title {
        color: #0b0b0c;
        display: grid;
        font-size: var(--web-type-heading);
        font-weight: 600;
        margin: 0 0 16px;
        text-align: left;
      }

      .rg-topup-title span:last-child {
        color: #9a9aa0;
        font-weight: 500;
      }

      .rg-pack-grid {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        margin-bottom: 14px;
      }

      .rg-pack-card {
        align-items: center;
        background: #f7f7f8;
        border: 0;
        border-radius: var(--radius-control, 12px);
        display: flex;
        flex-direction: column;
        grid-column: span 2;
        justify-content: center;
        min-height: 96px;
        padding: 10px 6px;
        position: relative;
      }

      .rg-pack-card.rg-size-large {
        grid-column: span 3;
        min-height: 120px;
      }

      .rg-pack-card.selected {
        background: #fff3f5;
        box-shadow: 0 10px 24px rgba(255, 56, 80, 0.1);
      }

      /* Frameless art: the landing page outlines every <img> globally and
         the source PNGs carried a baked-in white tile (removed at asset
         generation time), so the art floats directly on the card. */
      .rg-pack-card img {
        height: 56px;
        object-fit: contain;
        outline: none;
        width: 100%;
      }

      .rg-pack-card.rg-size-large img {
        height: 84px;
      }

      .rg-pack-credits {
        color: #111113;
        font-size: var(--web-type-control);
        font-weight: 600;
        margin-top: 6px;
      }

      .rg-pack-credits .rg-spark {
        color: #9a9aa0;
      }

      .rg-pack-price {
        color: #9a9aa0;
        font-size: var(--web-type-caption);
        margin-top: 2px;
      }

      .rg-pack-popular {
        background: var(--rg-accent, #ff3850);
        border-radius: var(--radius-control, 12px);
        color: #fff;
        font-size: var(--web-type-caption);
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 3px 8px;
        position: absolute;
        right: 8px;
        top: -9px;
      }

      .rg-topup-buy {
        height: 40px;
        margin-bottom: 8px;
      }

      .rg-topup-alt {
        height: 40px;
      }

      @media (max-width: 720px) {
        .rg-paywall-modal {
          width: min(92vw, 640px);
        }

        .rg-plan-cards {
          grid-template-columns: 1fr;
        }
      }

      /* Approved paywall geometry. The reference captures are Retina (2x),
         so these are their exact logical-pixel dimensions. */
      .rg-modal-layer:has(> .rg-modal-overlay-hit[data-layer="paywall-modal-layer"]),
      .rg-modal-layer:has(> .rg-modal-overlay-hit[data-layer="success-modal-layer"]),
      .rg-modal-layer:has(> .rg-modal-overlay-hit[data-layer="out-of-credits-modal-layer"]),
      .rg-modal-layer:has(> .rg-modal-overlay-hit[data-layer="topup-modal-layer"]) {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(10, 10, 11, 0.6);
      }

      .rg-modal.rg-paywall-modal,
      .rg-modal.rg-success-modal,
      .rg-modal.rg-ooc-modal,
      .rg-modal.rg-topup-modal {
        border-radius: 15px;
        box-sizing: border-box;
        box-shadow: 0 20px 55px rgba(0, 0, 0, 0.2);
      }

      .rg-paywall-modal .rg-modal-close,
      .rg-success-modal .rg-modal-close,
      .rg-ooc-modal .rg-modal-close,
      .rg-topup-modal .rg-modal-close {
        border-radius: 999px;
        height: 25px;
        right: 10px;
        top: 10px;
        width: 25px;
      }

      .rg-paywall-modal .rg-modal-close svg,
      .rg-success-modal .rg-modal-close svg,
      .rg-ooc-modal .rg-modal-close svg,
      .rg-topup-modal .rg-modal-close svg {
        height: 10px;
        width: 10px;
      }

      .rg-paywall-modal {
        min-height: 468px;
        padding: 30px 24px 20px;
        width: 640px;
      }

      .rg-paywall-modal .rg-paywall-title {
        font-size: var(--web-type-display);
        font-weight: 650;
        letter-spacing: -0.035em;
        line-height: 1.15;
        margin-bottom: 8px;
      }

      .rg-paywall-modal .rg-paywall-sub {
        display: flex;
        font-size: var(--web-type-control);
        line-height: 1.25;
        margin: 0 0 20px;
      }

      .rg-device-glyph {
        height: 13px;
        margin-left: 2px;
        width: 13px;
      }

      .rg-paywall-modal .rg-period-toggle {
        border-radius: 999px;
        height: 32px;
        margin: 0 auto 24px;
        padding: 3px;
        width: 196px;
      }

      .rg-paywall-modal .rg-period-toggle button {
        border-radius: 999px;
        font-size: var(--web-type-caption);
        font-weight: 600;
      }

      .rg-paywall-modal .rg-period-thumb {
        border-radius: 999px;
        height: 26px;
        left: 3px;
        top: 3px;
        width: calc(50% - 3px);
      }

      .rg-paywall-modal .rg-discount-chip {
        border-radius: 999px;
        font-size: 9px;
        padding: 2px 6px;
      }

      .rg-paywall-modal .rg-plan-cards {
        gap: 12px;
      }

      .rg-paywall-modal .rg-plan-card {
        border: 1px solid transparent;
        border-radius: 15px;
        min-height: 300px;
        padding: 18px 16px 12px;
      }

      .rg-paywall-modal .rg-plan-card.rg-popular {
        background: #f7f7f8;
        border-color: var(--rg-accent, #ff3850);
        box-shadow: none;
      }

      .rg-paywall-modal .rg-popular-chip {
        border-radius: 6px;
        font-size: 8px;
        letter-spacing: 0;
        padding: 4px 8px;
        right: 12px;
        top: 12px;
      }

      .rg-paywall-modal .rg-plan-name {
        color: #18181b;
        font-size: var(--web-type-control);
        font-weight: 600;
        margin-bottom: 12px;
      }

      .rg-paywall-modal .rg-plan-price {
        gap: 4px;
        margin-bottom: 12px;
      }

      .rg-paywall-modal .rg-plan-price strong {
        font-size: var(--web-type-display);
        letter-spacing: -0.04em;
        line-height: 1;
      }

      .rg-paywall-modal .rg-plan-price .rg-plan-period,
      .rg-paywall-modal .rg-plan-price .rg-plan-strike {
        font-size: var(--web-type-caption);
      }

      .rg-paywall-modal .rg-plan-desc {
        color: #838388;
        display: block;
        font-size: var(--web-type-caption);
        line-height: 1.45;
        margin: 0 0 15px;
      }

      .rg-paywall-modal .rg-plan-divider {
        background: #e8e8ea;
        display: block;
        height: 1px;
        margin-bottom: 14px;
      }

      .rg-paywall-modal .rg-plan-feature {
        color: #7e7e83;
        font-size: var(--web-type-caption);
        gap: 7px;
        line-height: 1.3;
        margin-bottom: 12px;
      }

      .rg-paywall-modal .rg-plan-feature .rg-feature-icon {
        height: 11px;
        width: 11px;
      }

      .rg-paywall-modal .rg-plan-cta {
        border-radius: 999px;
        font-size: var(--web-type-body);
        height: 38px;
      }

      #paywall-plan-cards .rg-plan-cta:not(.secondary):not(.current) {
        background: #252525;
        border-radius: 999px;
      }

      .rg-success-modal {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        min-height: 394px;
        padding: 48px 29px 19px;
        text-align: center;
        width: 323px;
      }

      .rg-success-modal .rg-success-check {
        display: block;
        height: 220px;
        margin: 0 auto 18px;
        object-fit: contain;
        outline: 0;
        width: 220px;
      }

      .rg-success-modal .rg-success-title {
        font-size: 21px;
        font-weight: 650;
        letter-spacing: -0.035em;
        line-height: 1.1;
        margin-bottom: 10px;
      }

      .rg-success-modal .rg-success-sub {
        font-size: 9px;
        line-height: 1.35;
        margin: 0 0 auto;
      }

      .rg-success-modal .rg-primary-pill {
        background: var(--rg-accent, #ff3850);
        border-radius: 999px;
        font-size: var(--web-type-body);
        height: 31px;
        margin-top: 18px;
      }

      .rg-ooc-modal {
        padding: 18px 14px 10px;
        text-align: center;
        width: 216px;
      }

      .rg-ooc-modal .rg-ooc-title,
      .rg-topup-modal .rg-topup-title {
        font-size: var(--web-type-title);
        letter-spacing: -0.035em;
        line-height: 1.15;
        margin: 0 0 17px;
      }

      .rg-ooc-modal .rg-ooc-title span:last-child,
      .rg-topup-modal .rg-topup-title span:last-child {
        color: #a0a0a4;
        font-weight: 550;
      }

      .rg-ooc-card {
        border-radius: 15px;
        box-sizing: border-box;
        height: 72px;
        margin-bottom: 16px;
        min-height: 0;
        overflow: hidden;
        padding: 12px 9px;
      }

      .rg-ooc-plan {
        color: #18181b;
        font-size: 8px;
        margin-bottom: 4px;
      }

      .rg-ooc-price {
        gap: 3px;
        margin-bottom: 11px;
      }

      .rg-ooc-price .rg-plan-strike,
      .rg-ooc-price span:last-child {
        font-size: 8px;
      }

      .rg-ooc-price strong {
        font-size: 17px;
        letter-spacing: -0.04em;
      }

      .rg-ooc-credits {
        font-size: 6px;
      }

      .rg-ooc-art {
        height: 64px;
        margin: -8px -7px -8px 0;
        width: 64px;
      }

      .rg-ooc-modal .rg-ooc-due,
      .rg-ooc-modal .rg-ooc-terms {
        font-size: 6.5px;
      }

      .rg-ooc-modal .rg-ooc-due {
        margin-bottom: 3px;
      }

      .rg-ooc-modal .rg-ooc-terms {
        margin-bottom: 10px;
      }

      .rg-dark-pill,
      .rg-light-pill {
        border-radius: 999px;
        font-size: 7px;
        height: 23px;
      }

      .rg-dark-pill {
        margin-bottom: 5px;
      }

      .rg-topup-modal {
        padding: 22px 20px 18px;
        width: 372px;
      }

      .rg-topup-modal .rg-topup-title {
        font-size: var(--web-type-heading);
        margin-bottom: 20px;
      }

      .rg-pack-grid {
        gap: 9px;
        margin-bottom: 16px;
      }

      .rg-topup-modal .rg-pack-card {
        border: 1px solid transparent;
        border-radius: 18px;
        box-sizing: border-box;
        height: 120px;
        min-height: 0;
        overflow: hidden;
        padding: 14px 8px 12px;
      }

      .rg-topup-modal .rg-pack-card.rg-size-large {
        height: 156px;
        min-height: 0;
      }

      .rg-topup-modal .rg-pack-card.selected {
        background: #f7f7f8;
        border-color: var(--rg-accent, #ff3850);
        box-shadow: none;
      }

      .rg-topup-modal .rg-pack-card img {
        height: 58px;
      }

      .rg-topup-modal .rg-pack-card.rg-size-large img {
        height: 88px;
      }

      .rg-topup-modal .rg-pack-credits {
        font-size: var(--web-type-label);
        margin-top: 8px;
      }

      .rg-topup-modal .rg-pack-price {
        background: #fff;
        border-radius: 999px;
        color: #18181b;
        font-size: var(--web-type-caption);
        margin-top: 8px;
        padding: 5px 11px;
      }

      .rg-topup-modal .rg-pack-popular {
        border-radius: 6px;
        font-size: 9px;
        letter-spacing: 0;
        padding: 3px 8px;
        right: 8px;
        top: 8px;
      }

      .rg-topup-modal .rg-topup-buy,
      .rg-topup-modal .rg-topup-alt {
        font-size: var(--web-type-body);
        height: 42px;
      }

      @media (max-width: 560px) {
        .rg-paywall-modal {
          max-height: calc(100dvh - 24px);
          min-height: 0;
          overflow-y: auto;
          width: calc(100vw - 24px);
        }

        .rg-paywall-modal .rg-plan-cards {
          grid-template-columns: 1fr;
        }

        .rg-paywall-modal .rg-plan-card {
          min-height: 238px;
        }
      }


      @media (max-width: 1120px) {
        .preset-grid,
        .project-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .project-layout {
          grid-template-columns: minmax(0, 1fr) 240px;
        }
      }

      @media (max-width: 820px) {
        body.project-active {
          height: auto;
          overflow-y: auto;
        }

        .video-workspace {
          display: block;
        }

        .brief-panel {
          height: auto;
          padding: 16px;
          position: relative;
          top: 0;
        }

        .brief-heading {
          display: none;
        }

        .brief-composer {
          min-height: 142px;
        }

        .brief-prompt .prompt-editor {
          min-height: 82px;
        }

        .workspace-generate {
          margin-top: 0;
        }

        .workspace-library {
          overflow: visible;
          padding: 14px 16px 32px;
        }

        .project-view {
          height: auto;
          min-height: calc(100vh - var(--workspace-nav-height));
          overflow: visible;
        }

        .project-layout {
          display: block;
          height: auto;
        }

        .project-canvas {
          display: block;
          padding: 16px;
        }

        .project-stage {
          height: auto;
          width: 100%;
        }

        .player-transport {
          margin-top: 10px;
        }

        .project-inspector {
          min-height: 220px;
          overflow: visible;
        }
      }

      @media (max-width: 560px) {
        .library-header {
          align-items: stretch;
          flex-wrap: wrap;
        }

        .workspace-tabs {
          flex: 1;
        }

        .workspace-tabs button {
          flex: 1;
        }

        .library-search {
          order: 2;
          width: 100%;
        }

        .preset-grid,
        .project-grid {
          gap: 13px 9px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .preset-card,
        .project-card {
          border-radius: var(--workspace-radius);
          padding: 3px;
        }

        .preset-card-footer,
        .project-card-copy {
          align-items: flex-start;
          flex-direction: column;
          gap: 3px;
          min-height: 42px;
        }

        .avatar-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .project-header {
          padding: 10px 12px;
        }

        .project-status {
          display: none;
        }

        .player-transport {
          grid-template-columns: 40px auto minmax(60px, 1fr) auto;
        }

        .player-transport .icon-button {
          display: none;
        }
      }

      /* Superpower component mapping: floating nav, rounded lead surface,
         login-form controls, and image-first media cards. */
      :root {
        --workspace-nav-height: 0px;
        --workspace-control-radius: var(--radius-control);
        --workspace-media-radius: var(--radius-media);
        --workspace-panel-radius: var(--radius-panel);
        --workspace-pill-radius: var(--radius-pill);
        --workspace-radius: var(--workspace-control-radius);
        --workspace-ink: var(--text-primary);
        --workspace-page: var(--workspace-bg);
        --workspace-panel: #ffffff;
        --workspace-panel-hover: var(--workspace-bg);
        --workspace-muted: var(--text-secondary);
        --workspace-accent: #ff3850;
        --workspace-accent-soft: var(--workspace-bg);
        --workspace-accent-blue: var(--workspace-bg);
        --workspace-accent-green: var(--workspace-bg);
        --workspace-ease: cubic-bezier(0.2, 0, 0, 1);
      }

      .app-frame,
      .home-view {
        min-height: 100vh;
      }

      body,
      .video-workspace,
      .project-view,
      .rg-modal {
        font-weight: var(--font-ui-regular);
      }

      .workspace-topbar {
        align-items: center;
        background: rgba(255, 255, 255, 0.97);
        border-bottom: 1px solid rgba(24, 24, 27, 0.07);
        display: grid;
        column-gap: 6px;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        height: 50px;
        left: 0;
        padding: 0 18px;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 70;
      }

      .workspace-topbar .auth-button:focus-visible,
      .workspace-topbar .pricing-link:focus-visible {
        box-shadow: 0 0 0 3px rgba(255, 56, 80, 0.2);
      }

      .workspace-brand {
        align-items: center;
        color: var(--workspace-ink);
        display: inline-flex;
        gap: 7px;
        justify-self: start;
        min-width: 0;
        text-decoration: none;
      }

      .workspace-brand-mark {
        align-items: center;
        color: var(--workspace-ink);
        display: flex;
        height: 20px;
        justify-content: center;
        width: 20px;
      }

      .workspace-brand-mark svg {
        height: 17px;
        width: 17px;
      }

      .workspace-brand strong {
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
      }

      .workspace-canvas-nav {
        align-items: center;
        display: flex;
        gap: 8px;
        grid-column: 2;
        justify-self: start;
        min-width: 0;
        position: relative;
      }

      .workspace-primary-nav {
        align-items: center;
        display: flex;
        gap: 4px;
        justify-self: start;
        margin-left: 8px;
      }

      .workspace-top-tabs {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .workspace-top-tabs a,
      .workspace-top-tabs button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: var(--workspace-pill-radius);
        color: var(--workspace-muted);
        display: inline-flex;
        font-size: var(--web-type-body);
        height: 32px;
        justify-content: center;
        padding: 0 14px;
        text-decoration: none;
      }

      .workspace-top-tabs a[aria-selected="true"],
      .workspace-top-tabs button[aria-selected="true"] {
        background: var(--workspace-control-surface);
        color: var(--workspace-ink);
      }

      .library-tabs {
        display: none;
      }

      .workspace-primary-nav a {
        border-radius: 999px;
        color: var(--workspace-muted);
        font-size: var(--web-type-body);
        padding: 7px 11px;
        text-decoration: none;
      }

      .workspace-primary-nav a:hover,
      .workspace-primary-nav a[aria-current="page"] {
        background: var(--workspace-control-surface);
        color: var(--workspace-ink);
      }

      .workspace-canvas-back {
        align-items: center;
        border-radius: 10px;
        color: var(--workspace-muted);
        display: inline-flex;
        height: 36px;
        justify-self: start;
        justify-content: center;
        text-decoration: none;
        width: 36px;
      }

      .workspace-canvas-back .ui-icon {
        height: 20px;
        stroke-width: 1.5;
        transform: rotate(180deg);
        width: 20px;
      }

      .workspace-canvas-back:hover {
        color: var(--workspace-ink);
      }

      .workspace-canvas-tool {
        align-items: center;
        background: transparent;
        border-radius: 10px;
        color: var(--workspace-ink);
        display: flex;
        font-size: 18px;
        font-weight: var(--font-ui-medium);
        gap: 9px;
        max-width: min(48vw, 440px);
        min-height: 38px;
        min-width: 0;
        padding: 0 2px;
      }

      .workspace-canvas-tool:hover {
        color: var(--workspace-accent);
      }

      .workspace-canvas-tool .selected-preset-media {
        display: none;
      }

      .workspace-canvas-tool .selected-preset-media {
        border-radius: 8px;
        flex: 0 0 28px;
        height: 28px;
        width: 28px;
      }

      .workspace-canvas-tool .selected-preset-media img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .workspace-canvas-tool .selected-preset-media svg {
        height: 16px;
        width: 16px;
      }

      .workspace-canvas-tool .selected-preset-copy {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .workspace-canvas-tool > .ui-icon:last-child {
        color: var(--workspace-muted);
        flex: 0 0 14px;
        height: 14px;
        width: 14px;
      }

      .workspace-canvas-tool[aria-expanded="true"] > .ui-icon:last-child {
        transform: rotate(180deg);
      }

      .workspace-canvas-nav .tool-picker {
        animation: workspace-pop 100ms var(--workspace-ease);
        background: #ffffff;
        border: 0;
        border-radius: 13px;
        box-shadow: 0 14px 30px rgba(24, 24, 27, 0.12), 0 2px 7px rgba(24, 24, 27, 0.08);
        display: grid;
        gap: 2px;
        left: -8px;
        max-height: min(640px, calc(100vh - 80px));
        overflow-y: auto;
        padding: 8px;
        position: absolute;
        right: auto;
        top: calc(100% + 7px);
        width: min(310px, calc(100vw - 28px));
        z-index: 80;
      }

      .workspace-canvas-nav .tool-picker[hidden] {
        display: none;
      }

      .tool-picker-option {
        align-items: center;
        background: transparent;
        border-radius: 8px;
        display: grid;
        gap: 9px;
        grid-template-columns: 58px minmax(0, 1fr);
        min-height: 60px;
        padding: 6px;
        text-align: left;
        width: 100%;
      }

      .tool-picker-option:hover {
        background: var(--workspace-bg);
      }

      .tool-picker-media {
        aspect-ratio: 58 / 48;
        border-radius: 6px;
        display: block;
        overflow: hidden;
      }

      .tool-picker-media img,
      .tool-picker-media video {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .workspace-canvas-nav .tool-picker-option > .tool-picker-copy {
        display: grid;
        gap: 2px;
        grid-template-columns: 78px minmax(0, 1fr);
        min-width: 0;
        overflow: visible;
        padding: 0;
        text-overflow: clip;
        white-space: normal;
      }

      .tool-picker-option > .tool-picker-copy strong {
        color: #242426;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tool-picker-option > .tool-picker-copy small {
        color: #9ca3af;
        font-size: 10px;
        font-weight: 400;
        line-height: 1.35;
        max-width: 210px;
      }

      .workspace-topbar .nav-actions {
        align-items: center;
        display: flex;
        gap: 4px;
        grid-column: 3;
        justify-self: end;
        min-width: 0;
      }

      .workspace-topbar .auth-button,
      .workspace-topbar .pricing-link,
      .workspace-topbar .rg-nav-avatar,
      .workspace-topbar .rg-nav-credits {
        align-items: center;
        background: transparent;
        border-radius: var(--workspace-pill-radius);
        color: var(--workspace-ink);
        display: inline-flex;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
        height: 38px;
        justify-content: center;
        padding: 0 16px;
        white-space: nowrap;
        text-decoration: none;
        transition-duration: 160ms;
        transition-property: background-color, color, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .workspace-topbar .auth-button:hover,
      .workspace-topbar .pricing-link:hover {
        background: rgba(24, 24, 27, 0.06);
      }

      .workspace-topbar .auth-button.sign-up {
        background: var(--bg-primary, #ff3850);
        color: #ffffff;
        padding-inline: 20px;
      }

      .workspace-topbar .auth-button.sign-up:hover {
        background: #e62f47;
      }

      .workspace-topbar .rg-nav-avatar {
        overflow: hidden;
        padding: 0;
        width: 38px;
      }

      .workspace-topbar .rg-nav-avatar img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      @media (max-width: 760px) {
        .workspace-topbar {
          padding-inline: 12px;
        }

        .workspace-brand strong {
          display: none;
        }

        .workspace-canvas-tool {
          font-size: var(--web-type-title);
          max-width: 30vw;
        }

        .workspace-topbar .auth-button.sign-in,
        .workspace-topbar .pricing-link,
        .workspace-topbar .rg-nav-credits {
          display: none;
        }

        .workspace-topbar .auth-button.sign-up {
          height: 34px;
          padding-inline: 14px;
        }

        .tool-picker {
          max-height: calc(100vh - 70px);
          padding: 12px;
        }
      }

      @media (max-width: 520px) {
        .workspace-canvas-nav {
          gap: 4px;
        }

        .workspace-canvas-tool {
          font-size: 15px;
          gap: 4px;
          max-width: 31vw;
        }

        .workspace-canvas-tool .selected-preset-media {
          flex-basis: 24px;
          height: 24px;
          width: 24px;
        }

        .tool-picker-grid {
          grid-template-columns: 1fr;
        }
      }

      .video-workspace {
        background: var(--workspace-page);
        display: grid;
        gap: 36px;
        grid-template-areas: "brief library";
        grid-template-columns: 370px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: 100vh;
        min-height: 640px;
        overflow: hidden;
        padding: 50px 14px 14px;
      }

      .feature-strip {
        min-width: 0;
      }

      .tool-shelf {
        margin-bottom: 28px;
        min-width: 0;
      }

      .tool-shelf-header {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        min-height: 34px;
      }

      .tool-shelf-header h2 {
        font-size: 19px;
        font-weight: var(--font-ui-medium);
        letter-spacing: 0;
        line-height: 1.2;
        margin: 0;
      }

      .tool-kind-label {
        color: var(--workspace-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        letter-spacing: 0.01em;
        margin: 0 0 8px;
        text-transform: uppercase;
      }

      .image-tools-label {
        margin-top: 18px;
      }

      .tool-kind-tabs {
        align-items: center;
        background: rgba(255, 255, 255, 0.68);
        border-radius: var(--workspace-pill-radius);
        display: flex;
        gap: 2px;
        padding: 3px;
      }

      .tool-kind-tabs button {
        background: transparent;
        border-radius: var(--workspace-pill-radius);
        color: var(--workspace-muted);
        font-size: var(--web-type-control);
        height: 30px;
        padding: 0 13px;
        transition-duration: 160ms;
        transition-property: background-color, color, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .tool-kind-tabs button:hover {
        color: var(--workspace-ink);
      }

      .tool-kind-tabs button[aria-selected="true"] {
        background: var(--workspace-accent-soft);
        box-shadow: 0 1px 4px rgba(255, 56, 80, 0.12);
        color: #c52e43;
      }

      .tool-card-row {
        display: grid;
        gap: 8px;
        grid-auto-columns: minmax(152px, 1fr);
        grid-auto-flow: column;
        min-width: 0;
        overflow-x: auto;
        padding: 0 0 2px;
        scrollbar-width: none;
      }

      .tool-card-row::-webkit-scrollbar {
        display: none;
      }

      .tool-card-row.is-entering {
        animation: tool-row-pop 220ms var(--workspace-ease) both;
      }

      @keyframes tool-row-pop {
        from {
          opacity: 0;
          transform: translateY(5px) scale(0.99);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .feature-button {
        background: transparent;
        border-radius: 0;
        color: #4a4a4f;
        display: grid;
        gap: 0;
        grid-template-rows: auto 38px;
        min-width: 0;
        padding: 0;
        text-align: left;
        transition-duration: 100ms;
        transition-property: background-color, color;
        transition-timing-function: var(--workspace-ease);
      }

      .feature-button:hover {
        background: transparent;
        box-shadow: none;
        color: var(--workspace-ink);
        transform: none;
      }

      .feature-button.is-selected {
        background: transparent;
        box-shadow: none;
        color: var(--workspace-ink);
      }

      .feature-media {
        aspect-ratio: 16 / 10;
        background: transparent;
        border-radius: 13px;
        display: block;
        overflow: hidden;
        position: relative;
      }

      .feature-media img,
      .feature-media video {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .feature-copy {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        min-width: 0;
        padding: 0;
      }

      .feature-copy strong {
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .brief-panel,
      .workspace-library {
        height: 100%;
        overflow-y: auto;
        position: relative;
        top: 0;
      }

      .brief-panel {
        background: #ffffff;
        border-radius: var(--workspace-panel-radius);
        box-shadow:
          0 1px 2px rgba(0, 0, 0, 0.025),
          0 16px 42px rgba(0, 0, 0, 0.06);
        gap: 12px;
        grid-area: brief;
        overflow: visible;
        padding: 4px 0 20px 24px;
        z-index: 30;
      }

      .selected-preset {
        background: var(--workspace-control-surface);
        border-radius: var(--workspace-control-radius);
        grid-template-columns: 40px minmax(0, 1fr) 18px;
        min-height: 56px;
        padding: 8px;
        transition-duration: 160ms;
        transition-property: background-color, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .selected-preset:hover {
        background: var(--workspace-panel-hover);
      }

      .selected-preset-media {
        border-radius: 8px;
        height: 40px;
        width: 40px;
      }

      .selected-preset-media.preset-media-empty {
        background: rgba(255, 255, 255, 0.72);
      }

      .selected-preset-copy strong {
        font-size: var(--web-type-label);
        font-weight: 400;
      }

      .brief-composer {
        background: var(--workspace-panel);
        border: 0;
        border-radius: var(--workspace-media-radius);
        min-height: 160px;
        padding: 6px;
        transition-duration: 160ms;
        transition-property: box-shadow;
        transition-timing-function: var(--workspace-ease);
      }

      .brief-composer:focus-within {
        box-shadow: 0 0 0 4px rgba(255, 56, 80, 0.12);
      }

      .brief-prompt .prompt-editor {
        font-size: var(--web-type-title);
        line-height: 24px;
        min-height: 96px;
        padding: 14px 16px 8px;
      }

      .sidebar-resources {
        gap: 3px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 3px;
      }

      .brief-assets {
        padding: 2px 0 16px;
      }

      .brief-assets-heading {
        color: var(--workspace-ink);
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        margin: 0 4px 6px;
      }

      .brief-asset-box {
        align-items: center;
        background: var(--workspace-control-surface);
        border: 1px dashed #c7c7c3;
        border-radius: var(--workspace-control-radius);
        display: grid;
        gap: 7px;
        justify-items: center;
        min-height: 112px;
        padding: 18px 14px;
        text-align: center;
        transition: scale 100ms var(--workspace-ease);
        width: 100%;
      }

      .brief-asset-box:active {
        scale: 0.95;
      }

      .brief-asset-box-universal {
        gap: 10px;
        min-height: 150px;
      }

      .brief-asset-kind-actions {
        align-items: center;
        display: flex;
        filter: drop-shadow(0 9px 14px rgba(24, 24, 27, 0.08));
        gap: 0;
        justify-content: center;
        isolation: isolate;
        padding: 4px 10px 8px;
      }

      .brief-asset-kind-actions button {
        align-items: center;
        background:
          radial-gradient(circle at 35% 24%, #ffffff 0, #f4f4f2 38%, #e5e5e2 100%) padding-box,
          linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(24, 24, 27, 0.2)) border-box;
        border: 1px solid transparent;
        border-radius: 999px;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.96),
          inset 0 0 0 1px rgba(255, 255, 255, 0.42),
          0 0 0 1px rgba(255, 255, 255, 0.72),
          0 0 20px rgba(24, 24, 27, 0.08),
          0 1px 3px rgba(24, 24, 27, 0.08),
          0 6px 16px rgba(24, 24, 27, 0.1);
        color: var(--workspace-muted);
        display: inline-flex;
        height: 52px;
        justify-content: center;
        margin-left: -12px;
        padding: 0;
        position: relative;
        transition: color 100ms var(--workspace-ease), filter 100ms var(--workspace-ease), scale 100ms var(--workspace-ease);
        width: 52px;
      }

      .brief-asset-kind-actions button:first-child {
        margin-left: 0;
      }

      .brief-asset-kind-actions button:nth-child(1) { z-index: 1; }
      .brief-asset-kind-actions button:nth-child(2) { z-index: 2; }
      .brief-asset-kind-actions button:nth-child(3) { z-index: 3; }

      .brief-asset-kind-actions button:hover {
        color: var(--workspace-ink);
        filter: brightness(0.98);
        z-index: 4;
      }

      .brief-asset-kind-actions button:active {
        scale: 0.95;
      }

      .brief-asset-box .brief-asset-kind-actions svg {
        height: 16px;
        width: 16px;
      }

      .brief-asset-box-universal > span {
        gap: 4px;
      }

      .brief-asset-box-universal strong {
        font-size: 18px;
        font-weight: var(--font-ui-medium);
      }

      .brief-asset-box-universal small {
        font-size: var(--web-type-body);
      }

      .brief-assets .sidebar-resources {
        grid-template-columns: 1fr;
      }

      .prompt-resources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid rgba(24, 24, 27, 0.08);
        padding: 3px;
      }

      .brief-asset-box svg {
        color: var(--workspace-muted);
        flex: 0 0 auto;
        height: 24px;
        width: 24px;
      }

      .brief-asset-box span {
        display: grid;
        gap: 2px;
        min-width: 0;
        width: 100%;
      }

      .brief-asset-box strong,
      .brief-asset-box small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .brief-asset-box strong {
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
      }

      .brief-asset-box small {
        color: var(--workspace-muted);
        font-size: var(--web-type-control);
      }

      .resource-pill {
        background: #f1f1ef;
        border-radius: var(--workspace-pill-radius);
        font-size: var(--web-type-control);
        gap: 6px;
        min-height: 40px;
        padding: 0 8px;
        transition-duration: 160ms;
        transition-property: background-color, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .resource-pill:hover {
        background: var(--workspace-control-surface);
      }

      .resource-pill svg {
        height: 15px;
        width: 15px;
      }

      .prompt-resources .resource-pill {
        background: #ffffff;
      }

      .prompt-resources .resource-pill:hover {
        background: #f1f1ef;
      }

      #voice-select {
        font-size: var(--web-type-caption);
      }

      #generation-count-select {
        font-size: var(--web-type-control);
      }

      .link-entry {
        background: var(--workspace-panel);
        border-radius: var(--workspace-control-radius);
        display: grid;
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 6px;
      }

      .link-entry input {
        background: #ffffff;
        border: 0;
        border-radius: 8px;
        font-size: var(--web-type-label);
        height: 42px;
        outline: 0;
        padding: 0 12px;
        width: 100%;
      }

      .link-entry button {
        background: var(--workspace-ink);
        border-radius: 8px;
        color: #ffffff;
        font-size: var(--web-type-body);
        padding: 0 16px;
      }

      .source-chip,
      .selected-avatar {
        background: var(--workspace-panel);
        border-radius: var(--workspace-control-radius);
        font-size: var(--web-type-control);
        min-height: 36px;
      }

      .source-chip > img,
      .selected-avatar > img {
        border-radius: 8px;
      }

      .source-link {
        grid-template-columns: 20px minmax(0, 1fr) 24px;
      }

      .source-link > svg {
        height: 14px;
        margin-left: 4px;
        width: 14px;
      }

      .brief-options {
        gap: 7px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .brief-option {
        background: var(--workspace-control-surface);
        border-radius: var(--workspace-control-radius);
      }

      .brief-options .model-option {
        grid-column: 1 / -1;
      }

      .brief-option select,
      .brief-option > button {
        background: transparent;
        border-radius: inherit;
        font-size: var(--web-type-label);
        min-height: 46px;
        padding-inline: 8px;
        white-space: nowrap;
      }

      .brief-option-icon {
        margin-left: 8px;
      }

      .brief-option-icon svg {
        height: 13px;
        width: 13px;
      }

      .brief-option:has(select)::after {
        right: 15px;
        top: 20px;
      }

      .model-menu {
        animation: workspace-pop 160ms var(--workspace-ease);
        background: rgba(255, 255, 255, 0.98);
        border-radius: 20px;
        bottom: auto;
        box-shadow:
          0 2px 8px rgba(0, 0, 0, 0.06),
          0 24px 70px rgba(0, 0, 0, 0.14);
        max-height: 236px;
        padding: 8px;
        top: calc(100% + 8px);
        transform-origin: top center;
      }

      .model-menu button {
        border-radius: var(--workspace-control-radius);
        font-size: var(--web-type-body);
        min-height: 48px;
        padding: 8px;
        transition-duration: 160ms;
        transition-property: background-color, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .model-menu button:hover,
      .model-menu button[aria-selected="true"] {
        background: var(--workspace-panel);
      }

      .model-menu button > img,
      .model-option-mark {
        border-radius: 8px;
        height: 32px;
        width: 32px;
      }

      .model-menu strong,
      .model-menu em {
        font-size: var(--web-type-control);
      }

      @keyframes workspace-pop {
        from {
          filter: blur(4px);
          opacity: 0;
          transform: translateY(-6px) scale(0.95);
        }
        to {
          filter: blur(0);
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .workspace-generate {
        background: var(--bg-primary, var(--workspace-accent));
        border-radius: var(--workspace-pill-radius);
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
        min-height: 52px;
        padding: 0 20px;
        transition-duration: 160ms;
        transition-property: background-color, box-shadow, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .workspace-generate:hover {
        background: #e62f47;
        box-shadow:
          0 1px 3px rgba(0, 0, 0, 0.1),
          0 10px 24px rgba(255, 56, 80, 0.2);
      }

      .generate-cost {
        color: rgba(255, 255, 255, 0.72);
        font-size: var(--web-type-body);
      }

      .composer-requirement {
        font-size: var(--web-type-control);
      }

      .workspace-library {
        background: #ffffff;
        border-radius: var(--workspace-panel-radius);
        box-shadow:
          0 1px 2px rgba(0, 0, 0, 0.025),
          0 16px 42px rgba(0, 0, 0, 0.06);
        grid-area: library;
        padding: 18px 20px 38px;
      }

      .library-header {
        align-items: center;
        margin: 0 0 18px;
        min-height: 44px;
        padding: 0;
      }

      .workspace-tabs {
        background: rgba(255, 255, 255, 0.72);
        border-radius: var(--workspace-pill-radius);
        gap: 2px;
        padding: 3px;
      }

      .workspace-tabs button {
        background: transparent;
        border-radius: var(--workspace-pill-radius);
        color: #66666c;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
        min-height: 38px;
        padding: 0 16px;
        transition-duration: 160ms;
        transition-property: background-color, color, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .workspace-tabs button[aria-selected="true"] {
        background: var(--workspace-accent-soft);
        box-shadow: none;
        color: #c52e43;
      }

      .workspace-tabs button[aria-selected="true"] span {
        color: rgba(197, 46, 67, 0.72);
      }

      .workspace-global-search {
        align-items: center;
        background: var(--workspace-control-surface);
        border-radius: var(--workspace-control-radius);
        display: flex;
        gap: 9px;
        height: 44px;
        padding: 0 14px;
        width: min(240px, 34vw);
      }

      .workspace-global-search:focus-within {
        background: var(--workspace-control-surface);
        box-shadow: 0 0 0 4px rgba(255, 56, 80, 0.12);
      }

      .workspace-global-search svg {
        color: var(--workspace-muted);
        height: 16px;
        width: 16px;
      }

      .workspace-global-search input {
        background: transparent;
        border: 0;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-regular);
        min-width: 0;
        outline: 0;
        width: 100%;
      }

      .preset-grid,
      .project-grid {
        gap: 22px 16px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .preset-card,
      .project-card {
        background: transparent;
        border-radius: var(--workspace-media-radius);
        padding: 0;
        transition-duration: 100ms;
        transition-property: background-color, color;
        transition-timing-function: var(--workspace-ease);
      }

      .preset-card:hover,
      .project-card:hover {
        background: transparent;
        transform: none;
      }

      .preset-card-media,
      .project-card-media {
        border-radius: var(--workspace-media-radius);
        outline: 0;
        transition: none;
      }

      .preset-card:hover .preset-card-media,
      .project-card:hover .project-card-media {
        box-shadow: none;
        filter: none;
      }

      .preset-card.is-selected {
        background: transparent;
        box-shadow: none;
      }

      /* The chosen example carries the brand ring plus the check badge. The
         ring is drawn inside the frame rather than as a box-shadow around it,
         so the media stays full-bleed and the grid never reflows on select. */
      .preset-card.is-selected .preset-card-media {
        box-shadow: none;
      }

      .preset-card.is-selected .preset-card-media::before {
        align-items: center;
        background: var(--bg-primary);
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(255, 56, 80, 0.35);
        color: #ffffff;
        content: "✓";
        display: flex;
        font-size: var(--web-type-caption);
        height: 22px;
        justify-content: center;
        left: 8px;
        position: absolute;
        top: 8px;
        width: 22px;
        z-index: 3;
      }


      .preset-card-footer,
      .project-card-copy {
        min-height: 34px;
        padding: 10px 2px 0;
      }

      .preset-card-footer strong,
      .project-card-copy strong {
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-regular);
      }

      .project-card-state {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.82);
        border-radius: var(--workspace-pill-radius);
        font-size: var(--web-type-caption);
        padding: 5px 8px;
      }

      .library-empty {
        border: 0;
        border-radius: var(--workspace-media-radius);
      }

      .avatar-dialog,
      .rg-modal {
        border-radius: var(--workspace-panel-radius);
      }

      .rg-auth-modal,
      .rg-auth-modal.step-code {
        border-radius: 24px;
        box-shadow:
          0 30px 80px rgba(0, 0, 0, 0.18),
          0 8px 24px rgba(0, 0, 0, 0.08);
        padding: 30px;
        width: min(420px, calc(100vw - 32px));
      }

      #auth-modal-layer.rg-modal-layer {
        background: rgba(20, 20, 22, 0.28);
      }

      .rg-auth-title {
        font-size: 27px;
        font-weight: 500;
        margin-bottom: 24px;
      }

      .rg-modal-close {
        background: rgba(0, 0, 0, 0.045);
        border-radius: 999px;
        height: 40px;
        right: 20px;
        top: 20px;
        width: 40px;
      }

      .rg-modal-close:hover {
        background: var(--surface-hover);
      }

      /* Only the shape of these controls belongs here. Their type and colour
         are the design system's — restating them was what let the account
         modal drift away from every other surface. */
      .rg-google-button,
      .rg-text-input {
        background: var(--surface-soft);
        height: 48px;
        padding-inline: 16px;
      }

      .rg-or-divider {
        margin: 18px 0;
      }

      .rg-primary-pill {
        height: 48px;
        margin-top: 12px;
      }

      .avatar-dialog {
        animation: none;
      }

      .rg-text-input,
      .rg-google-button,
      .rg-dark-pill,
      .rg-light-pill,
      .rg-plan-card,
      .rg-plan-cta,
      .rg-pack-card {
        border-radius: var(--workspace-control-radius);
      }

      .video-workspace :where(button, a):active,
      .project-view :where(button, a):active {
        scale: 0.95;
      }

      .project-view {
        background: var(--workspace-page);
        height: 100vh;
        overflow: hidden;
        padding: 84px 14px 14px;
      }

      .project-header {
        background: transparent;
        min-height: 54px;
        padding: 0 10px 10px;
      }

      .project-heading h1 {
        font-size: 18px;
        font-weight: 400;
      }

      .project-header-actions {
        gap: 6px;
      }

      .project-status,
      .inspector-meta strong {
        background: var(--workspace-accent-green);
        border-radius: var(--workspace-pill-radius);
        font-weight: 400;
      }

      .project-layout {
        gap: 14px;
        grid-template-columns: minmax(0, 1fr) 300px;
        height: calc(100vh - 152px);
      }

      .project-canvas,
      .project-inspector {
        background: var(--workspace-panel);
        border-radius: var(--workspace-panel-radius);
      }

      .project-canvas {
        padding: 18px 20px 16px;
      }

      .project-stage {
        border-radius: var(--workspace-media-radius);
      }

      .project-stage > video,
      .project-stage > .project-poster {
        border-radius: inherit;
      }

      .icon-button,
      .transport-play,
      .primary-button,
      .secondary-button,
      .danger-button {
        border-radius: var(--workspace-control-radius);
        transition-duration: 160ms;
        transition-property: background-color, color, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .icon-button,
      .transport-play,
      .secondary-button {
        background: #ffffff;
      }

      .primary-button {
        background: var(--workspace-accent);
      }

      .project-inspector {
        padding: 18px;
      }

      .inspector-details summary {
        background: #ffffff;
        border-radius: var(--workspace-control-radius);
        min-height: 48px;
        padding: 0 14px;
      }

      .project-sources img {
        border-radius: var(--workspace-control-radius);
      }

      .web-toast {
        border-radius: var(--workspace-pill-radius);
      }

      @media (max-width: 1180px) {
        .video-workspace {
          gap: 22px 26px;
          grid-template-columns: 340px minmax(0, 1fr);
        }

        .tool-card-row {
          grid-auto-columns: minmax(144px, 1fr);
        }

        .preset-grid,
        .project-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 820px) {
        .video-workspace {
          display: flex;
          flex-direction: column;
          gap: 16px;
          height: auto;
          min-height: 100vh;
          overflow: visible;
          padding: 50px 14px 20px;
        }

        .brief-panel,
        .workspace-library {
          height: auto;
          overflow: visible;
          position: relative;
          top: 0;
        }

        .brief-panel {
          order: 1;
          padding: 0 14px;
        }

        .workspace-library {
          margin: 0 10px;
          order: 2;
          padding: 16px;
        }

        .workspace-library::before {
          display: none;
        }

        .brief-options {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        body.project-active {
          height: auto;
          overflow-y: auto;
        }

        .project-view {
          height: auto;
          min-height: 100vh;
          overflow: visible;
        }

        .project-layout {
          display: block;
          height: auto;
        }

        .project-canvas,
        .project-inspector {
          margin-bottom: 14px;
        }
      }

      @media (max-width: 620px) {
        .brief-panel {
          padding: 0 8px;
        }

        .brief-options {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .library-header {
          align-items: stretch;
          flex-wrap: wrap;
        }

        .workspace-tabs {
          flex: 1;
        }

        .workspace-tabs button {
          flex: 1;
        }

        .workspace-global-search {
          order: 2;
          width: 100%;
        }

        .workspace-library {
          margin-inline: 0;
          padding: 14px;
        }

        .tool-shelf {
          margin-bottom: 22px;
        }

        .tool-shelf-header h2 {
          font-size: 17px;
        }

        .tool-card-row {
          grid-auto-columns: 148px;
          margin-right: 0;
          padding-right: 0;
        }

        .feature-button {
          border-radius: 16px;
          grid-template-rows: auto 36px;
          padding: 5px;
        }

        .feature-media {
          border-radius: 12px;
        }

        .preset-grid,
        .project-grid {
          gap: 18px 10px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .preset-card-footer strong,
        .project-card-copy strong {
          font-size: var(--web-type-body);
        }

        .project-view {
          padding: 74px 8px 8px;
        }

        .project-header {
          padding-inline: 4px;
        }

        .project-heading h1 {
          font-size: 15px;
        }
      }

      .preset-grid {
        display: flex;
        flex-direction: column;
        gap: 28px;
      }

      .tool-card-row {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: visible;
      }

      .tool-card-row .feature-button {
        min-width: 0;
      }

      .brief-option {
        align-items: center;
        display: flex;
      }

      .brief-option-icon {
        align-items: center;
        color: var(--workspace-muted);
        display: inline-flex;
        flex: 0 0 auto;
        justify-content: center;
        margin-left: 14px;
        pointer-events: none;
      }

      .brief-option-icon svg {
        height: 15px;
        width: 15px;
      }

      .brief-option select,
      .brief-option > button {
        flex: 1 1 auto;
        min-width: 0;
      }

      .brief-option > button {
        align-items: center;
        display: flex;
        gap: 7px;
      }

      .brief-option > button > .brief-option-icon {
        margin-left: 0;
      }

      .brief-option > button > .ui-icon:last-child {
        margin-left: auto;
      }

      .library-header {
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
      }

      .workspace-tabs {
        display: flex;
        min-width: 0;
        overflow: hidden;
        width: max-content;
        max-width: 100%;
      }

      .workspace-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
      }

      .workspace-global-search,
      .library-search {
        min-width: 0;
        width: 100%;
      }

      .brief-option select,
      .brief-option > button,
      .workspace-global-search input,
      .library-search input {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tool-trend-header {
        min-width: 0;
      }

      .tool-trend-header > div {
        min-width: 0;
      }

      .tool-trend-header h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tool-trend-change {
        white-space: nowrap;
      }

      .preset-group {
        min-width: 0;
      }

      .preset-group-header {
        align-items: baseline;
        display: flex;
        justify-content: space-between;
        margin: 0 2px 14px;
      }

      .preset-group-title {
        color: var(--workspace-ink);
        font-size: 15px;
        font-weight: var(--font-ui-medium);
        letter-spacing: -0.01em;
        margin: 0;
      }

      .preset-group-grid {
        display: grid;
        gap: 8px;
        grid-auto-columns: minmax(220px, 260px);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        padding: 0 2px 5px;
        scrollbar-width: none;
      }

      .preset-group-grid::-webkit-scrollbar {
        display: none;
      }

      /* The other grid. A shelf runs sideways off the edge; this one wraps and
         keeps going down, so it overrides the column flow rather than being a
         separate component with its own card sizing to keep in step. */
      .preset-group-grid.is-infinite {
        grid-auto-columns: auto;
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        overflow-x: visible;
      }

      .preset-infinite-sentinel {
        align-items: center;
        display: flex;
        justify-content: center;
        padding: 28px 0 8px;
      }

      .preset-infinite-sentinel[hidden] {
        display: none;
      }

      .preset-infinite-spinner {
        animation: preset-infinite-spin 620ms linear infinite;
        border: 2px solid color-mix(in srgb, var(--workspace-ink) 16%, transparent);
        border-radius: 50%;
        border-top-color: color-mix(in srgb, var(--workspace-ink) 52%, transparent);
        height: 18px;
        width: 18px;
      }

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

      @media (prefers-reduced-motion: reduce) {
        .preset-infinite-spinner {
          animation-duration: 2.4s;
        }
      }

      .preset-card {
        padding: 0;
      }

      /* Reads over whatever the tile's art happens to be, so it carries its own
         backdrop rather than relying on the image being dark at that corner. */
      .preset-card-visual-count {
        align-items: center;
        backdrop-filter: blur(6px);
        background: rgba(12, 12, 14, 0.62);
        border-radius: 999px;
        color: #fff;
        display: inline-flex;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        gap: 3px;
        inset-block-start: 8px;
        inset-inline-end: 8px;
        line-height: 1;
        padding: 4px 7px;
        pointer-events: none;
        position: absolute;
        z-index: 2;
      }

      .preset-card-visual-count .ui-icon {
        height: 11px;
        width: 11px;
      }

      /* The template opened up. It reuses the workspace's modal geometry so a
         template reads as the same weight of surface as the character creator,
         not as a lighter popover hanging off a tile. */
      .template-detail {
        align-items: center;
        display: flex;
        inset: 0;
        justify-content: center;
        padding: 20px;
        position: fixed;
        z-index: 165;
      }

      .template-detail[hidden] {
        display: none;
      }

      .template-detail-dialog {
        background: #ffffff;
        border-radius: 26px;
        box-shadow:
          0 18px 46px rgba(0, 0, 0, 0.16),
          0 48px 120px rgba(0, 0, 0, 0.18);
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 40px);
        overflow: hidden;
        position: relative;
        width: min(880px, calc(100vw - 40px));
      }

      .template-detail-header {
        align-items: flex-start;
        display: flex;
        gap: 16px;
        justify-content: space-between;
        padding: 24px 24px 16px;
      }

      .template-detail-copy h2 {
        color: var(--workspace-ink);
        font-size: var(--web-type-heading);
        font-weight: var(--font-ui-medium);
        letter-spacing: -0.01em;
        margin: 0;
      }

      .template-detail-copy p {
        color: color-mix(in srgb, var(--workspace-ink) 58%, transparent);
        font-size: var(--web-type-body);
        margin: 4px 0 0;
      }

      .template-detail-close {
        background: transparent;
        border-radius: 999px;
        color: color-mix(in srgb, var(--workspace-ink) 62%, transparent);
        display: inline-flex;
        flex: none;
        padding: 6px;
      }

      .template-detail-close:hover {
        background: rgba(20, 20, 22, 0.06);
      }

      .template-detail-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        overflow-y: auto;
        padding: 0 24px 24px;
      }

      .template-visual-card {
        background: transparent;
        display: grid;
        gap: 8px;
        padding: 0;
        text-align: left;
      }

      .template-visual-media {
        aspect-ratio: 4 / 5;
        background: #ececec;
        border-radius: 12px;
        display: block;
        overflow: hidden;
        position: relative;
      }

      .template-visual-card:hover .template-visual-media {
        outline: 2px solid var(--rg-accent, #18181b);
        outline-offset: 2px;
      }

      .template-visual-title {
        color: var(--workspace-ink);
        font-size: var(--web-type-body);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body.template-detail-open {
        overflow: hidden !important;
      }

      .preset-card-media {
        aspect-ratio: 4 / 3;
      }

      /* Keep the workspace on one white plane. The brief is the only raised
         action surface and carries the page's quiet gray layer. */
      :root {
        --workspace-bg: var(--surface);
        --workspace-control-surface: var(--surface-soft);
        --workspace-page: var(--surface);
      }

      body,
      .video-workspace,
      .project-view,
      .workspace-library {
        background: #ffffff;
      }

      .workspace-library {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
      }

      .brief-panel {
        background: #ffffff;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .brief-panel::after {
        display: none;
      }

      .workspace-library {
        position: relative;
      }

      .workspace-library::before {
        background: var(--line);
        bottom: 0;
        content: "";
        left: -18px;
        pointer-events: none;
        position: absolute;
        top: -48px;
        width: 1px;
      }

      .workspace-library {
        border-radius: 0;
      }

      .tool-shelf {
        padding-bottom: 24px;
      }

      .trending-tools {
        padding-bottom: 28px;
      }

      .tool-trend-group + .tool-trend-group {
        margin-top: 24px;
        padding-top: 24px;
      }

      .tool-trend-header {
        margin: 0 2px 12px;
      }

      .tool-trend-header h3 {
        align-items: center;
        display: flex;
        gap: 7px;
        font-size: 15px;
        font-weight: var(--font-ui-medium);
        letter-spacing: -0.01em;
        margin: 0;
      }

      .tool-mode-mark {
        align-items: center;
        color: var(--workspace-muted);
        display: inline-flex;
        flex: 0 0 auto;
        justify-content: center;
      }

      .tool-mode-mark svg {
        height: 15px;
        width: 15px;
      }

      .tool-picker-option .tool-mode-mark svg {
        height: 13px;
        width: 13px;
      }

      .tool-trend-change {
        color: var(--workspace-muted);
        flex: 0 0 auto;
        font-size: var(--web-type-control);
        padding: 4px 0;
      }

      .tool-trend-row {
        display: grid;
        gap: 12px;
        grid-auto-columns: minmax(190px, 230px);
        grid-auto-flow: column;
        overflow-x: auto;
        padding: 0 2px 4px;
        scrollbar-width: none;
      }

      .tool-explainer-flow {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
      }

      .tool-explainer-step {
        aspect-ratio: 16 / 9;
        background: var(--workspace-control-surface);
        border-radius: var(--workspace-media-radius);
        margin: 0;
        min-width: 0;
        overflow: hidden;
        outline: 0;
        position: relative;
      }

      .tool-explainer-media,
      .tool-explainer-media img,
      .tool-explainer-media video {
        display: block;
        height: 100%;
        width: 100%;
      }

      .tool-explainer-media img,
      .tool-explainer-media video {
        object-fit: cover;
      }

      .tool-explainer-step figcaption {
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.88);
        border-radius: var(--workspace-pill-radius);
        bottom: 10px;
        color: var(--workspace-ink);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        left: 10px;
        line-height: 1;
        padding: 7px 10px;
        position: absolute;
        -webkit-backdrop-filter: blur(12px);
      }

      .tool-card-row {
        display: grid;
        grid-auto-columns: minmax(150px, 190px);
        grid-auto-flow: column;
        grid-template-rows: repeat(2, auto);
        overflow-x: auto;
        padding: 0 0 18px;
        scrollbar-width: none;
      }

      .tool-card-row::-webkit-scrollbar {
        display: none;
      }

      .feature-button {
        background: transparent;
        border-radius: var(--workspace-control-radius);
        display: grid;
        gap: 7px;
        min-width: 0;
        padding: 0 4px;
        text-align: left;
      }

      .feature-button:hover {
        background: var(--workspace-control-surface);
      }

      .feature-copy {
        align-items: center;
        justify-content: flex-start;
      }

      .feature-copy i {
        align-items: center;
        color: var(--workspace-muted);
        display: inline-flex;
        flex: 0 0 auto;
      }

      .feature-copy i svg {
        height: 14px;
        width: 14px;
      }

      .tool-trend-row::-webkit-scrollbar {
        display: none;
      }

      .preset-group + .preset-group {
        padding-top: 24px;
      }

      .selected-preset,
      .brief-composer,
      .resource-pill,
      .brief-option,
      .library-search,
      .workspace-global-search,
      .workspace-tabs {
        background: var(--workspace-control-surface);
        box-shadow: none;
      }

      .selected-preset:hover,
      .resource-pill:hover,
      .workspace-global-search:focus-within {
        background: var(--workspace-control-surface);
      }

      .workspace-tabs button[aria-selected="true"] {
        background: #e3e3e0;
        color: var(--workspace-ink);
      }

      .workspace-tabs {
        background: #fafaf9;
      }

      .resource-pill {
        min-height: 34px;
        padding-inline: 6px;
      }

      .resource-pill svg {
        height: 13px;
        width: 13px;
      }

      .brief-composer > .prompt-resources {
        padding-block: 8px;
      }

      .brief-option select,
      .brief-option > button {
        font-size: var(--web-type-control);
      }

      .brief-option > button > .ui-icon:last-child {
        height: 12px;
        width: 12px;
      }

      .workspace-tabs button[aria-selected="true"] span {
        color: var(--workspace-muted);
      }

      .model-menu {
        background: var(--workspace-control-surface);
      }

      .model-menu button:hover,
      .model-menu button[aria-selected="true"] {
        background: #ffffff;
      }

      @media (max-width: 1200px) {
        .tool-card-row {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .preset-group-grid {
          grid-auto-columns: minmax(200px, 230px);
        }
      }

      @media (max-width: 760px) {
        .library-header {
          grid-template-columns: minmax(0, 1fr) minmax(140px, 42%);
        }

        .workspace-tabs {
          width: 100%;
        }

        .workspace-tabs button {
          flex: 1 1 0;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .tool-card-row {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .preset-grid {
          gap: 22px;
        }

        .preset-group-grid {
          gap: 10px;
          grid-auto-columns: minmax(180px, 210px);
        }

        .tool-explainer-flow {
          grid-auto-columns: minmax(220px, 72vw);
          grid-auto-flow: column;
          grid-template-columns: none;
          overflow-x: auto;
          padding: 0 2px 4px;
          scrollbar-width: none;
        }

        .tool-explainer-flow::-webkit-scrollbar {
          display: none;
        }
      }

      @media (max-width: 520px) {
        .library-header {
          gap: 8px;
          grid-template-columns: 1fr;
        }

        .workspace-global-search {
          grid-row: 2;
        }

        .tool-trend-header {
          align-items: start;
          display: block;
        }

        .tool-trend-change {
          display: inline-block;
          margin-top: 4px;
        }
      }

      /* Project editor: dominant playback canvas with a focused edit rail. */
      .project-layout {
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 4fr) minmax(248px, 1fr);
        height: calc(100vh - var(--workspace-nav-height) - 64px);
        min-height: 0;
        overflow: hidden;
      }

      .project-canvas,
      .project-inspector {
        margin-bottom: 0;
        min-width: 0;
      }

      .project-inspector {
        background: #ffffff;
        border-radius: var(--workspace-panel-radius) 0 0 var(--workspace-panel-radius);
        gap: 18px;
        padding: 20px 18px;
      }

      .project-edit-section {
        display: grid;
        gap: 12px;
      }

      .project-edit-section h2 {
        font-size: 18px;
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
      }

      .project-edit-tools {
        display: grid;
        gap: 8px;
      }

      .project-edit-tool {
        align-items: center;
        background: var(--workspace-control-surface);
        border-radius: var(--workspace-control-radius);
        display: grid;
        gap: 10px;
        grid-template-columns: 24px minmax(0, 1fr) 14px;
        min-height: 54px;
        padding: 0 13px;
        text-align: left;
        transition: background-color 100ms var(--workspace-ease), scale 100ms var(--workspace-ease);
        width: 100%;
      }

      .project-edit-tool:hover {
        background: #e4e4e1;
      }

      .project-edit-tool:active {
        scale: 0.95;
      }

      .project-edit-tool strong {
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .project-edit-tool-icon {
        align-items: center;
        color: var(--workspace-muted);
        display: flex;
        justify-content: center;
      }

      .project-edit-tool-icon .ui-icon {
        height: 18px;
        width: 18px;
      }

      .project-edit-tool > .ui-icon:last-child {
        color: var(--workspace-muted);
        height: 14px;
        stroke-width: 1.25;
        width: 14px;
      }

      @media (max-width: 860px) {
        body.project-active {
          height: auto;
          overflow-y: auto;
        }

        .project-view {
          height: auto;
          min-height: 100vh;
          overflow: visible;
        }

        .project-layout {
          display: block;
          height: auto;
          overflow: visible;
        }

        .project-canvas {
          min-height: 640px;
        }

        .project-inspector {
          border-radius: var(--workspace-panel-radius);
          margin: 0 10px 14px;
        }

        .project-edit-tools {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 560px) {
        .project-canvas {
          min-height: 520px;
          padding-inline: 10px;
        }

        .project-edit-tools {
          grid-template-columns: 1fr;
        }
      }

      .workspace-top-tabs.workspace-tabs {
        flex: 0 0 auto;
        max-width: 44vw;
        width: max-content;
      }

      .workspace-canvas-nav .tool-picker {
        box-shadow:
          0 30px 72px rgba(24, 24, 27, 0.22),
          0 10px 24px rgba(24, 24, 27, 0.14),
          0 1px 4px rgba(24, 24, 27, 0.1);
        scrollbar-width: none;
      }

      .workspace-canvas-nav .tool-picker::-webkit-scrollbar {
        display: none;
      }

      .ui-icon.icon-chevron-down {
        height: 14px !important;
        stroke-width: 1.25 !important;
        width: 14px !important;
      }

      /* Create workspace: canonical 1458px reference layout. */
      :root {
        --workspace-bg: #ffffff;
        --workspace-control-surface: var(--surface-soft);
        --workspace-nav-height: 70px;
        --workspace-page: #ffffff;
      }

      body,
      .video-workspace,
      .workspace-library {
        background: #ffffff;
      }

      .workspace-topbar {
        background: rgba(255, 255, 255, 0.985);
        border-bottom: 1px solid rgba(24, 24, 27, 0.065);
        border-top: 3px solid #303034;
        column-gap: 46px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        height: var(--workspace-nav-height);
        padding: 3px 35px 0 39px;
      }

      .workspace-topbar .workspace-brand {
        gap: 8px;
      }

      .workspace-topbar .workspace-brand-mark {
        color: #b0b0b3;
        height: 20px;
        width: 20px;
      }

      .workspace-topbar .workspace-brand-mark svg {
        height: 19px;
        stroke-width: 1.7;
        width: 19px;
      }

      .workspace-topbar .workspace-brand strong {
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
      }

      .workspace-primary-nav {
        gap: 29px;
        margin-left: 0;
      }

      .workspace-primary-nav :is(a, button) {
        align-items: center;
        background: transparent !important;
        border: 0;
        border-radius: 0;
        color: #343438;
        cursor: pointer;
        display: inline-flex;
        font-family: inherit;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        gap: 7px;
        padding: 8px 0;
      }

      .workspace-primary-nav :is(a, button):hover,
      .workspace-primary-nav a[aria-current="page"],
      .workspace-primary-nav button[aria-expanded="true"] {
        color: #111113;
      }

      .workspace-primary-nav .ui-icon {
        color: var(--icon-secondary);
        height: 12px !important;
        stroke-width: 1.25 !important;
        width: 12px !important;
      }

      .workspace-topbar .nav-actions {
        gap: 8px;
        grid-column: auto;
      }

      .workspace-topbar .auth-button,
      .workspace-topbar .pricing-link {
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        height: 36px;
        padding-inline: 15px;
      }

      .workspace-topbar .auth-button.sign-in {
        background: rgba(0, 0, 0, 0.025);
      }

      .workspace-topbar .auth-button.sign-up {
        padding-inline: 18px;
      }

      .video-workspace {
        display: grid;
        gap: 0;
        grid-template-columns: 440px minmax(0, 1fr);
        height: calc(100vh - var(--workspace-nav-height));
        min-height: calc(720px - var(--workspace-nav-height));
        overflow: hidden;
        padding: 0;
      }

      .brief-panel,
      .workspace-library {
        height: 100%;
        position: relative;
        top: 0;
      }

      .brief-panel {
        background: #ffffff;
        border-radius: 0;
        border-right: 1px solid rgba(24, 24, 27, 0.1);
        box-shadow: none;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow-x: visible;
        overflow-y: auto;
        padding: 16px 23px 16px 31px;
        scrollbar-width: none;
        z-index: 30;
      }

      .brief-panel::-webkit-scrollbar,
      .workspace-library::-webkit-scrollbar,
      .brief-tool-selector .tool-picker::-webkit-scrollbar,
      .preset-group-grid::-webkit-scrollbar {
        display: none;
      }

      .brief-tool-selector {
        flex: 0 0 auto;
        position: relative;
        z-index: 50;
      }

      .brief-tool-selector .workspace-canvas-tool {
        background: transparent;
        border-radius: 0;
        color: #343438;
        font-size: 25px;
        font-weight: var(--font-ui-medium);
        gap: 14px;
        height: 52px;
        max-width: none;
        padding: 0;
        text-transform: none;
        width: 100%;
      }

      #selected-preset-title {
        text-transform: capitalize;
      }

      .brief-tool-selector .workspace-canvas-tool:hover {
        background: transparent;
        color: #18181b;
      }

      .brief-tool-selector .workspace-canvas-tool:focus-visible {
        box-shadow: none;
      }

      .brief-tool-selector .workspace-canvas-tool .selected-preset-media {
        align-items: center;
        border-radius: 8px;
        color: #ffffff;
        display: inline-flex;
        flex: 0 0 32px;
        height: 32px;
        justify-content: center;
        width: 32px;
      }

      .brief-tool-selector .workspace-canvas-tool > .ui-icon:last-child {
        color: var(--icon-secondary);
        height: 13px !important;
        margin-left: 0;
        stroke-width: 2.4 !important;
        width: 13px !important;
      }

      .brief-tool-selector .tool-picker {
        animation: workspace-pop 100ms var(--workspace-ease);
        background: rgba(255, 255, 255, 0.995);
        border: 1px solid rgba(24, 24, 27, 0.08);
        border-radius: 22px;
        box-shadow:
          0 28px 70px rgba(24, 24, 27, 0.16),
          0 3px 12px rgba(24, 24, 27, 0.07);
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        left: 0;
        max-height: min(700px, calc(100vh - 150px));
        overflow-x: hidden;
        overflow-y: auto;
        padding: 18px;
        position: fixed;
        right: auto;
        top: calc(100% + 10px);
        transform-origin: top left;
        width: min(720px, calc(100vw - 48px));
        z-index: 100;
      }

      .brief-tool-selector .tool-picker[hidden] {
        display: none;
      }

      .brief-tool-selector .tool-picker-option {
        align-items: center;
        border-radius: 14px;
        gap: 14px;
        grid-template-columns: 82px minmax(0, 1fr);
        min-height: 96px;
        padding: 10px;
        transition: background-color 100ms ease;
      }

      .brief-tool-selector .tool-picker-media {
        aspect-ratio: 1;
        background: rgba(24, 24, 27, 0.055);
        border-radius: 13px;
        overflow: hidden;
        position: relative;
        width: 82px;
      }

      .brief-tool-selector .tool-picker-icon {
        align-items: center;
        border-radius: 9px;
        bottom: 7px;
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.14);
        color: #ffffff;
        display: flex;
        height: 28px;
        justify-content: center;
        left: 7px;
        position: absolute;
        width: 28px;
        z-index: 2;
      }

      .brief-tool-selector .tool-picker-icon .ui-icon {
        height: 15px;
        width: 15px;
      }

      .brief-tool-selector .tool-picker-option > .tool-picker-copy {
        align-items: start;
        display: grid;
        gap: 3px;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        overflow: visible;
        padding: 0;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
      }

      .brief-tool-selector .tool-picker-copy strong {
        color: #202024;
        font-size: 15px;
        font-weight: var(--font-ui-medium);
        letter-spacing: 0;
        line-height: 1.25;
      }

      .brief-tool-selector .tool-picker-copy small {
        color: #85858b;
        font-size: var(--web-type-body);
        line-height: 1.4;
      }

      .brief-selected-preset {
        background: transparent;
        border: 0;
        border-radius: 19px;
        flex: 0 0 auto;
        margin-top: 16px;
        overflow: hidden;
        position: relative;
        transition: scale 100ms var(--workspace-ease);
      }

      .brief-selected-preset[hidden] {
        display: none;
      }

      .brief-selected-preset .model-option {
        background: transparent;
        border-radius: inherit;
        position: relative;
      }

      .brief-selected-preset .model-option > button {
        background: transparent;
        border-radius: inherit;
        color: #ffffff;
        display: block;
        min-height: 180px;
        overflow: hidden;
        padding: 0;
        position: relative;
        text-align: left;
        width: 100%;
      }

      .workspace-model-preview {
        display: block;
        height: 100%;
        inset: 0;
        object-fit: cover;
        position: absolute;
        width: 100%;
      }

      .workspace-model-shade {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 16%, rgba(0, 0, 0, 0.83) 100%);
        inset: 0;
        pointer-events: none;
        position: absolute;
      }

      .workspace-model-copy {
        bottom: 17px;
        display: grid;
        gap: 2px;
        left: 18px;
        min-width: 0;
        position: absolute;
        z-index: 1;
      }

      .workspace-model-eyebrow {
        color: #ffffff;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        letter-spacing: 0.025em;
        line-height: 1.1;
        margin: 0;
        text-transform: uppercase;
      }

      .workspace-model-copy h2 {
        color: #ffffff;
        font-size: var(--web-type-heading);
        font-weight: var(--font-ui-regular);
        letter-spacing: -0.03em;
        line-height: 1.1;
        margin: 0;
      }

      .workspace-model-change {
        align-items: center;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background: rgba(17, 17, 18, 0.68);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 999px;
        color: #ffffff;
        display: inline-flex;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        gap: 6px;
        padding: 7px 10px;
        position: absolute;
        right: 11px;
        top: 11px;
        z-index: 1;
      }

      .workspace-model-change .ui-icon {
        height: 15px;
        stroke-width: 1.75;
        width: 15px;
      }

      .brief-selected-preset .model-option > button:hover .workspace-model-change {
        background: rgba(17, 17, 18, 0.87);
      }

      .workspace-model-mark,
      .workspace-model-mark > img,
      .workspace-model-mark > .model-option-mark {
        border-radius: 9px;
        display: block;
        height: 38px;
        overflow: hidden;
        width: 38px;
      }

      .workspace-model-mark > img {
        object-fit: cover;
      }

      .workspace-model-mark > .model-option-mark {
        align-items: center;
        background: var(--model-accent, #18181b);
        color: #ffffff;
        display: flex;
        justify-content: center;
      }

      .workspace-model-copy strong,
      .workspace-model-copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .workspace-model-copy strong {
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-regular);
      }

      .workspace-model-copy small {
        color: #a0a0a5;
        font-size: var(--web-type-control);
      }

      .brief-selected-preset .model-option > button > .ui-icon:last-child {
        color: var(--icon-secondary);
        height: 13px !important;
        stroke-width: 1.25 !important;
        width: 13px !important;
      }

      .model-modal[hidden] {
        display: none;
      }

      .model-dialog {
        height: auto;
        max-height: min(720px, calc(100dvh - 48px));
        min-height: 0;
        width: min(920px, calc(100vw - 40px));
      }

      .model-library-view {
        box-sizing: border-box;
        height: auto;
        max-height: min(720px, calc(100dvh - 48px));
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 24px;
        width: 100%;
      }

      .model-library-view .model-menu {
        /* The dialog owns the open transition — the menu's dropdown pop
           animation must not replay inside it. */
        animation: none;
        background: transparent;
        box-shadow: none;
        display: grid;
        column-gap: 16px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 16px;
        max-height: none;
        min-width: 0;
        overflow: visible;
        padding: 0;
        position: static;
        row-gap: 18px;
        transform: none;
        visibility: visible;
        width: 100%;
      }

      .model-library-view .model-menu button {
        background: transparent;
        border-radius: 18px;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        overflow: hidden;
        padding: 8px;
        position: relative;
        text-align: left;
        transition: background-color 100ms var(--workspace-ease);
      }

      .model-library-view .model-menu button:hover,
      .model-library-view .model-menu button:focus-visible {
        background: var(--surface-soft);
      }

      .model-library-view .model-menu button[aria-selected="true"] {
        background: var(--surface-soft);
      }

      .model-library-view .model-menu button:focus-visible {
        box-shadow: none;
      }

      .model-menu-card-media {
        aspect-ratio: 16 / 9;
        background: var(--workspace-control-surface);
        border-radius: 10px;
        display: block;
        min-width: 0;
        overflow: hidden;
        transition: box-shadow 100ms ease;
        width: 100%;
      }

      .model-menu-card-media > img,
      .model-menu-card-media > video {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .model-menu-option-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
        padding: 0 4px 5px;
      }

      .model-library-view .model-menu strong,
      .model-library-view .model-menu small {
        display: block;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
      }

      .model-library-view .model-menu strong {
        color: #202024;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
      }

      .model-library-view .model-menu small {
        color: #9ca3af;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
        line-height: 1.35;
      }

      @media (max-width: 760px) {
        .model-library-view .model-menu {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 560px) {
        .model-library-view .model-menu {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      .brief-assets {
        flex: 0 0 auto;
        margin-top: 11px;
        padding: 0;
      }

      .brief-assets .sidebar-resources {
        padding: 0;
      }

      #brief-upload-slots {
        display: grid;
        gap: 8px;
        width: 100%;
      }

      #brief-upload-slots.has-paired-slots {
        grid-template-columns: minmax(0, 1fr);
      }

      .brief-asset-box,
      .brief-asset-box-universal {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(24, 24, 27, 0.075);
        border-radius: 19px;
        display: grid;
        gap: 14px;
        grid-template-columns: 46px minmax(0, 1fr);
        justify-items: start;
        min-height: 90px;
        padding: 13px 15px;
        text-align: left;
        transition: background-color 100ms var(--workspace-ease), scale 100ms var(--workspace-ease);
        width: 100%;
      }

      .brief-asset-box:hover,
      .brief-asset-box-universal:hover {
        background: rgba(0, 0, 0, 0.018);
        border-color: rgba(24, 24, 27, 0.13);
      }

      .brief-asset-box:active,
      .brief-asset-box-universal:active {
        scale: 0.95;
      }

      .brief-asset-box > .ui-icon,
      .brief-asset-box-universal > .ui-icon {
        background: rgba(0, 0, 0, 0.022);
        border-radius: 12px;
        color: var(--icon-secondary);
        height: 46px;
        padding: 13px;
        width: 46px;
      }

      .brief-asset-box-visual {
        align-content: start;
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
        min-height: 174px;
        padding: 10px;
      }

      .brief-asset-box-visual.is-filled {
        align-content: center;
        align-items: center;
        gap: 14px;
        grid-template-columns: 78px minmax(0, 1fr);
        justify-items: start;
        min-height: 108px;
        padding: 14px 17px;
        text-align: left;
      }

      .brief-asset-box-visual.is-filled > .brief-asset-upload-preview {
        border-radius: 17px;
        height: 78px;
        width: 78px;
      }

      .brief-asset-box-visual.is-filled > span:last-child {
        align-content: center;
        gap: 3px;
        min-width: 0;
        padding: 0;
        text-align: left;
      }

      .brief-asset-box-visual.is-filled strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }

      .brief-asset-box-visual.is-filled small {
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
      }

      .brief-asset-illustration {
        align-items: center;
        background: #f3f3f1;
        border-radius: 12px;
        display: flex;
        height: 82px;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .brief-asset-illustration > i {
        background: rgba(24, 24, 27, 0.055);
        border-radius: 9px;
        height: 46px;
        position: absolute;
        transform: rotate(-6deg);
        width: 68px;
      }

      .brief-asset-illustration > .ui-icon {
        color: var(--icon-secondary);
        height: 22px;
        position: relative;
        stroke-width: 1.35;
        width: 22px;
      }

      .brief-asset-illustration.is-character > i {
        border-radius: 999px 999px 12px 12px;
        height: 62px;
        transform: none;
        width: 52px;
      }

      .brief-asset-illustration.is-video > i {
        border-radius: 7px;
        transform: rotate(3deg);
      }

      .brief-asset-box-visual > span:last-child {
        gap: 2px;
        padding: 0 2px 2px;
      }

      .brief-asset-box-visual strong {
        font-size: var(--web-type-body);
      }

      .brief-asset-box-visual small {
        color: #9ca3af;
        font-size: var(--web-type-caption);
        line-height: 1.35;
      }

      .brief-asset-box-universal > span,
      .brief-asset-box > span {
        display: grid;
        gap: 2px;
        min-width: 0;
        text-align: left;
        width: 100%;
      }

      .brief-asset-box-universal strong,
      .brief-asset-box strong {
        font-size: 15px;
        font-weight: var(--font-ui-regular);
      }

      .brief-asset-box-universal small,
      .brief-asset-box small {
        color: #a0a0a5;
        font-size: var(--web-type-control);
        line-height: 1.35;
      }

      .brief-asset-box-universal {
        align-content: center;
        align-items: center;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        min-height: 142px;
        padding: 16px;
        text-align: center;
      }

      .brief-asset-box-universal > .ui-icon {
        background: rgba(0, 0, 0, 0.022);
        border-radius: 999px;
        box-sizing: border-box;
        color: var(--icon-secondary);
        display: block;
        height: 28px;
        overflow: hidden;
        padding: 7px;
        width: 28px;
      }

      .brief-asset-box-universal > strong {
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-regular);
      }

      .brief-asset-box-universal > small {
        color: #9ca3af;
        display: block;
        font-size: var(--web-type-control);
        line-height: 1.4;
        overflow: visible;
        max-width: 360px;
        text-align: center;
        text-overflow: clip;
        white-space: normal;
      }

      .workspace-generate:disabled {
        background: color-mix(in srgb, var(--bg-primary, var(--workspace-accent)) 80%, transparent);
        box-shadow: none;
        cursor: not-allowed;
        opacity: 1;
      }

      .workspace-generate:disabled:hover {
        background: color-mix(in srgb, var(--bg-primary, var(--workspace-accent)) 80%, transparent);
        box-shadow: none;
      }

      .brief-composer {
        background: #ffffff;
        border: 1px solid rgba(24, 24, 27, 0.075);
        border-radius: 19px;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        margin-top: 11px;
        min-height: 224px;
        padding: 0;
        transition: box-shadow 100ms var(--workspace-ease);
      }

      .brief-composer:focus-within {
        box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.045);
      }

      .brief-prompt {
        flex: 1 1 auto;
      }

      .brief-prompt .prompt-editor {
        font-size: var(--web-type-body);
        line-height: 1.45;
        min-height: 174px;
        padding: 16px 16px 10px;
      }

      .brief-prompt .prompt-editor.is-empty::before {
        color: #a2a2a7;
      }

      .prompt-reference-dock {
        border-top: 1px solid rgba(24, 24, 27, 0.065);
        flex: 0 0 auto;
        margin: 0;
        padding: 8px 14px 10px;
      }

      .prompt-reference-dock[hidden] {
        display: none;
      }

      .prompt-reference-trigger {
        align-items: center;
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 12px;
        color: var(--text-primary);
        display: grid;
        gap: 10px;
        grid-template-columns: 32px minmax(0, 1fr) 24px;
        min-height: 52px;
        padding: 6px 7px 6px 6px;
        text-align: left;
        transition-duration: 140ms;
        transition-property: background-color, scale;
        transition-timing-function: var(--workspace-ease);
        width: 100%;
      }

      .prompt-reference-trigger:hover,
      .prompt-reference-trigger[aria-expanded="true"] {
        background: rgba(24, 24, 27, 0.035);
      }

      .prompt-reference-trigger:active {
        scale: 0.96;
      }

      .prompt-reference-trigger-icon {
        align-items: center;
        background: rgba(24, 24, 27, 0.045);
        border-radius: 12px;
        color: #8d8d93;
        display: flex;
        height: 32px;
        justify-content: center;
        width: 32px;
      }

      .prompt-reference-trigger-icon .ui-icon {
        height: 16px;
        stroke-width: 1.6;
        width: 16px;
      }

      .prompt-reference-trigger-copy {
        min-width: 0;
      }

      .prompt-reference-trigger-copy strong,
      .prompt-reference-trigger-copy small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .prompt-reference-trigger-copy strong {
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
      }

      .prompt-reference-trigger-copy small {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        margin-top: 2px;
      }

      .prompt-reference-trigger-chevron {
        align-items: center;
        color: #a1a1a6;
        display: flex;
        height: 24px;
        justify-content: center;
        transition-duration: 160ms;
        transition-property: transform;
        transition-timing-function: var(--workspace-ease);
        width: 24px;
      }

      .prompt-reference-trigger[aria-expanded="true"] .prompt-reference-trigger-chevron {
        transform: rotate(180deg);
      }

      .prompt-reference-trigger-chevron .ui-icon {
        height: 13px !important;
        width: 13px !important;
      }

      .prompt-reference-selected {
        align-items: start;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 4px 0;
      }

      .prompt-reference-add,
      .prompt-reference-item-preview {
        appearance: none;
        border: 0;
        color: var(--text-secondary);
        padding: 0;
        position: relative;
        transition:
          background-color 120ms var(--workspace-ease),
          scale 100ms var(--workspace-ease);
      }

      .prompt-reference-add {
        align-items: center;
        background: rgba(24, 24, 27, 0.045);
        border-radius: 14px;
        display: flex;
        height: 56px;
        justify-content: center;
        width: 56px;
      }

      .prompt-reference-add:hover,
      .prompt-reference-add[aria-expanded="true"] {
        background: rgba(24, 24, 27, 0.075);
      }

      .prompt-reference-add:active,
      .prompt-reference-item-preview:active {
        scale: 0.96;
      }

      .prompt-reference-add:focus-visible,
      .prompt-reference-item-preview:focus-visible,
      .prompt-reference-item-remove:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--text-primary) 48%, transparent);
        outline-offset: 2px;
      }

      .prompt-reference-add .ui-icon {
        height: 20px;
        stroke-width: 2;
        width: 20px;
      }

      /* The thumbs join the attach button in one wrapping flow, so overflow
         rows fill the space under the attach icon instead of leaving a
         dead first column. */
      .prompt-reference-items {
        display: contents;
      }

      /* Sized so the attach button plus four references share one 357px
         dock row. */
      .prompt-reference-item {
        align-items: center;
        display: flex;
        flex-direction: column;
        min-height: 64px;
        justify-content: flex-start;
        overflow: visible;
        position: relative;
        width: 64px;
      }

      .prompt-reference-item-preview {
        align-items: center;
        background: transparent;
        display: flex;
        flex-direction: column;
        min-height: 64px;
        justify-content: flex-start;
        width: 64px;
      }

      /* Audio has no artwork to fill its tile, so the faint default surface
         reads smaller than the image tiles beside it — give it a solid step
         of contrast to hold the same visual footprint. */
      .prompt-reference-item-preview > .brief-asset-upload-preview.is-audio {
        background: rgba(24, 24, 27, 0.09);
      }

      /* Every attached reference is the same 64px box, whichever renderer drew
         it: an image tile, a video frame and an audio card differ in what they
         paint, not in the space they take. Audio came through a preview built
         for a wider row and sat a different size next to the rest. */
      .prompt-reference-item-preview > .brief-asset-upload-preview,
      .prompt-reference-item-preview > .media-audio-preview,
      .prompt-reference-item-preview > .media-video-preview,
      .prompt-reference-item-preview > img,
      .prompt-reference-item-preview > video {
        border-radius: 14px;
        box-sizing: border-box;
        flex: 0 0 auto;
        height: 64px;
        min-height: 0;
        min-width: 0;
        outline: 0;
        width: 64px;
      }

      /* The label is the @ token, and half a token is useless — "@Ima…" tells
         you nothing about which reference this is. It renders in full and is
         allowed to be wider than the tile it belongs to rather than being
         clipped to it. The chip is the translucent blurred one every label
         over media uses, not white-on-accent: this thumbnail and the pill in
         the prompt are the same reference, so they read as the same thing. */
      .prompt-reference-item-label {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        background: rgba(24, 24, 27, 0.72);
        border-radius: 999px;
        bottom: 5px;
        color: #ffffff;
        display: block;
        font-size: 9px;
        font-variant-numeric: tabular-nums;
        /* Regular cut: weights >=500 load the bold woff2, which reads as a
           foreign face at this tiny size. */
        font-weight: var(--font-ui-regular);
        line-height: 1;
        left: 50%;
        margin-top: 0;
        max-width: none;
        overflow: visible;
        padding: 3px 5px;
        pointer-events: none;
        position: absolute;
        text-align: center;
        text-overflow: clip;
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 2;
      }

      .prompt-reference-item::before {
        background: rgba(24, 24, 27, 0.88);
        border-radius: 7px;
        bottom: calc(100% + 8px);
        color: #ffffff;
        content: attr(data-reference-name);
        font-size: var(--web-type-caption);
        left: 50%;
        max-width: 180px;
        opacity: 0;
        overflow: hidden;
        padding: 5px 7px;
        pointer-events: none;
        position: absolute;
        text-overflow: ellipsis;
        transform: translate(-50%, 3px);
        transition:
          opacity 100ms var(--workspace-ease),
          transform 120ms var(--workspace-ease);
        white-space: nowrap;
        z-index: 4;
      }

      .prompt-reference-item:hover::before,
      .prompt-reference-item:focus-within::before {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      .prompt-reference-item-remove {
        appearance: none;
        align-items: center;
        background: var(--surface);
        border: 0;
        border-radius: 999px;
        box-shadow: 0 1px 5px rgba(24, 24, 27, 0.16);
        color: var(--text-secondary);
        display: flex;
        filter: blur(4px);
        height: 20px;
        justify-content: center;
        opacity: 0;
        padding: 0;
        pointer-events: none;
        position: absolute;
        right: 1px;
        scale: 0.25;
        top: -7px;
        transition-duration: 180ms;
        transition-property: background-color, filter, opacity, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 20px;
        z-index: 3;
      }

      .prompt-reference-item:hover .prompt-reference-item-remove,
      .prompt-reference-item:focus-within .prompt-reference-item-remove {
        background: #ffffff;
        filter: blur(0);
        opacity: 1;
        pointer-events: auto;
        scale: 1;
      }

      .prompt-reference-item-remove:active {
        scale: 0.96;
      }

      .prompt-reference-item-remove .ui-icon {
        height: 11px;
        width: 11px;
      }

      .brief-composer > .prompt-resources {
        border-top: 0;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, max-content));
        margin: 0 14px;
        padding: 10px 0 11px;
      }

      .inline-link-entry {
        align-items: center;
        background: var(--workspace-control-surface);
        border-radius: 10px;
        display: grid;
        gap: 7px;
        grid-template-columns: 16px minmax(0, 1fr) auto 22px;
        margin: 0 14px;
        min-height: 36px;
        padding: 3px 4px 3px 10px;
      }

      .inline-link-entry[hidden] {
        display: none;
      }

      /* Our own rejection copy, in the place the browser's bubble used to
         appear. It spans the row so the field keeps its width and the message
         does not squeeze the input as it appears. */
      .inline-link-entry.has-error {
        box-shadow: inset 0 0 0 1px rgba(216, 75, 75, 0.55);
      }

      .inline-link-error {
        color: var(--danger);
        font-size: var(--web-type-caption);
        grid-column: 1 / -1;
        padding: 0 0 4px 2px;
      }

      .inline-link-error[hidden] {
        display: none;
      }

      .inline-link-icon {
        color: #8f8f95;
        display: inline-flex;
      }

      .inline-link-icon .ui-icon {
        height: 14px;
        width: 14px;
      }

      .inline-link-entry label {
        min-width: 0;
      }

      .inline-link-entry input {
        background: transparent;
        border: 0;
        color: #222226;
        font: inherit;
        font-size: var(--web-type-control);
        height: 28px;
        min-width: 0;
        outline: 0;
        padding: 0;
        width: 100%;
      }

      .inline-link-entry input::placeholder {
        color: #919198;
      }

      .inline-link-add {
        background: #222226;
        border-radius: 8px;
        color: #ffffff;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        height: 28px;
        min-width: 44px;
        padding: 0 10px;
      }

      .inline-link-close {
        align-items: center;
        background: transparent;
        color: #8f8f95;
        display: inline-flex;
        height: 22px;
        justify-content: center;
        padding: 0;
        width: 22px;
      }

      .inline-link-close .ui-icon {
        height: 13px;
        width: 13px;
      }

      .prompt-resources .resource-pill {
        background: rgba(24, 24, 27, 0.06);
        border-radius: var(--workspace-pill-radius);
        color: #4a4a4f;
        gap: 6px;
        min-height: 29px;
        padding: 0 8px;
        transition: background-color 100ms var(--workspace-ease), color 100ms var(--workspace-ease);
        white-space: nowrap;
      }

      .prompt-resources .resource-pill:hover {
        background: rgba(24, 24, 27, 0.095);
        color: #18181b;
      }

      .prompt-resources .resource-pill.is-selected {
        background: #18181b;
        color: #ffffff;
      }

      .prompt-resources .resource-pill.is-selected:hover {
        background: rgba(24, 24, 27, 0.92);
        color: #ffffff;
      }

      .prompt-resources .resource-pill.is-selected .ui-icon {
        color: #ffffff;
      }

      .prompt-resources .resource-pill .ui-icon {
        color: var(--icon-secondary);
        height: 13px;
        stroke-width: 1.4;
        width: 13px;
      }

      /* :last-of-type, not :last-child — the busy spinner sits after the
         trailing plus while a link is being read. */
      .prompt-resources .resource-pill .ui-icon:last-of-type {
        height: 11px;
        width: 11px;
      }

      .prompt-resources .resource-pill.is-loading {
        background: rgba(24, 24, 27, 0.06);
        color: #6f6f74;
        cursor: progress;
      }

      .prompt-resources .resource-pill.is-loading:hover {
        background: rgba(24, 24, 27, 0.06);
        color: #6f6f74;
      }

      .brief-sources:empty,
      .composer-requirement:empty {
        display: none;
      }

      .brief-options {
        display: grid;
        flex: 0 0 auto;
        gap: 7px;
        grid-template-columns: minmax(0, 1fr) !important;
        margin-top: 14px;
        width: 100%;
      }

      .brief-options .brief-control {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: var(--workspace-pill-radius);
        display: flex;
        min-height: 34px;
        min-width: 0;
        padding: 0;
        position: relative;
      }

      .brief-control-label {
        color: #77777d;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        min-width: 0;
      }

      .brief-control > button {
        align-items: center;
        background: #f2f2f0;
        border-radius: 999px;
        color: #343438;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        gap: 6px;
        justify-content: center;
        margin-left: auto;
        min-height: 28px;
        padding: 0 9px 0 10px;
        width: auto;
      }

      .brief-control > button:hover {
        background: #e9e9e7;
      }

      .brief-control > button:active {
        scale: 0.95;
      }

      .brief-control > button .ui-icon {
        color: var(--icon-secondary);
        height: 13px;
        stroke-width: 1.5;
        width: 13px;
      }

      .brief-control-menu {
        background: #ffffff;
        border: 1px solid rgba(24, 24, 27, 0.09);
        border-radius: 10px;
        box-shadow: 0 14px 28px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.08);
        display: grid;
        gap: 2px;
        max-height: min(520px, calc(100dvh - 24px));
        min-width: 154px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 4px;
        z-index: 20;
      }

      .brief-control-menu.duration-slider-menu {
        display: block;
        min-width: 248px;
        overflow: visible;
        padding: 14px 16px 12px;
      }

      .duration-slider-header,
      .duration-slider-labels {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }

      .duration-slider-header {
        color: #18181b;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        margin-bottom: 16px;
      }

      .duration-slider-header output {
        color: #55555a;
        font-variant-numeric: tabular-nums;
        font-weight: var(--font-ui-regular);
      }

      .duration-slider-menu input[type="range"] {
        appearance: none;
        background: linear-gradient(
          to right,
          #18181b 0 var(--duration-progress),
          #dededb var(--duration-progress) 100%
        );
        border-radius: 999px;
        cursor: pointer;
        display: block;
        height: 4px;
        margin: 0;
        outline: none;
        padding: 0;
        width: 100%;
      }

      .duration-slider-menu input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        background: #ffffff;
        border: 1px solid rgba(24, 24, 27, 0.18);
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(24, 24, 27, 0.2);
        height: 18px;
        width: 18px;
      }

      .duration-slider-menu input[type="range"]::-moz-range-thumb {
        background: #ffffff;
        border: 1px solid rgba(24, 24, 27, 0.18);
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(24, 24, 27, 0.2);
        height: 18px;
        width: 18px;
      }

      .duration-slider-menu input[type="range"]:focus-visible::-webkit-slider-thumb {
        outline: 2px solid #18181b;
        outline-offset: 2px;
      }

      .duration-slider-menu input[type="range"]:focus-visible::-moz-range-thumb {
        outline: 2px solid #18181b;
        outline-offset: 2px;
      }

      .duration-slider-labels {
        color: #8a8a90;
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        margin-top: 12px;
      }

      .brief-control-menu[data-side="top"] {
        animation: brief-control-menu-up 100ms cubic-bezier(0.2, 0.8, 0.2, 1);
        transform-origin: bottom left;
      }

      @keyframes brief-control-menu-up {
        from {
          opacity: 0;
          transform: translateY(3px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .brief-control-menu button {
        align-items: center;
        background: transparent;
        border-radius: 7px;
        color: #55555a;
        display: grid;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        gap: 9px;
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 42px;
        padding: 4px 8px;
        text-align: left;
      }

      .brief-option-hint {
        color: var(--text-muted);
        font-weight: var(--font-ui-regular);
      }

      .brief-option-visual {
        align-items: center;
        background: rgba(24, 24, 27, 0.045);
        border-radius: 7px;
        display: flex;
        height: 30px;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 30px;
      }

      .brief-option-visual.is-aspect:not(.is-auto)::before {
        border: 1.5px solid #74747a;
        border-radius: 2px;
        box-sizing: border-box;
        content: "";
      }

      /* Zero-specificity fallback frame so an unmapped ratio never collapses
         into a dot; the per-ratio sizes below always win. */
      :where(.brief-option-visual.is-aspect:not(.is-auto))::before {
        height: 15px;
        width: 15px;
      }

      .brief-option-visual.is-aspect.is-auto .ui-icon {
        color: var(--icon-secondary);
        height: 19px;
        stroke-width: 1.75;
        width: 19px;
      }

      /* Each frame matches its ratio's real proportions. */
      [data-value="21:9"] > .is-aspect::before { height: 9px; width: 21px; }
      [data-value="16:9"] > .is-aspect::before { height: 10px; width: 19px; }
      [data-value="3:2"] > .is-aspect::before { height: 12px; width: 18px; }
      [data-value="4:3"] > .is-aspect::before { height: 12px; width: 16px; }
      [data-value="5:4"] > .is-aspect::before { height: 12px; width: 15px; }
      [data-value="1:1"] > .is-aspect::before { height: 15px; width: 15px; }
      [data-value="4:5"] > .is-aspect::before { height: 17px; width: 14px; }
      [data-value="3:4"] > .is-aspect::before { height: 16px; width: 12px; }
      [data-value="2:3"] > .is-aspect::before { height: 18px; width: 12px; }
      [data-value="9:16"] > .is-aspect::before { height: 19px; width: 10px; }

      /* Quality rows read like YouTube's: resolution plus a spelled-out tier,
         no icon column, because a per-resolution glyph carried no meaning. */
      .quality-control-menu button {
        grid-template-columns: minmax(0, 1fr);
      }

      .brief-option-visual.is-quantity {
        color: #74747a;
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        font-weight: var(--font-ui-medium);
      }

      .brief-control-menu button:hover,
      .brief-control-menu button[aria-selected="true"] {
        background: #f1f1ef;
        color: #18181b;
      }

      .asset-library-view {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
      }

      .asset-library-view .avatar-library-header {
        display: grid;
        gap: 4px;
      }

      .asset-popover-tabs {
        align-items: center;
        gap: 14px;
      }

      .asset-grid {
        flex: 1 1 auto;
        grid-auto-rows: minmax(108px, 1fr);
        max-height: none;
        min-height: 0;
        padding: 16px 0 0;
      }

      /* Avatar, link, product, and reference pickers share one primary action
         and one library section. Link keeps a URL field, but follows the same
         surface, spacing, icon, and hierarchy as the media pickers. */
      .popover-primary-action {
        align-items: center;
        background: #f7f7f8;
        border: 0;
        border-radius: 14px;
        color: #222226;
        display: grid;
        gap: 13px;
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 108px;
        padding: 16px;
        text-align: left;
        transition: background-color 100ms var(--workspace-ease), transform 100ms var(--workspace-ease);
        width: 100%;
      }

      .popover-primary-action:hover { background: #f0f0f1; }

      .popover-primary-action-icon {
        align-items: center;
        background: #ffffff;
        border-radius: 12px;
        color: #8d8d93;
        display: flex;
        height: 42px;
        justify-content: center;
        width: 42px;
      }

      .popover-primary-action-icon .ui-icon {
        height: 18px;
        stroke-width: 1.6;
        width: 18px;
      }

      .popover-primary-action > span:last-child {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .popover-primary-action strong {
        color: #242428;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
      }

      .popover-primary-action small {
        color: #9999a0;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        line-height: 1.4;
      }

      .popover-library-section {
        border-top: 1px solid rgba(24, 24, 27, 0.06);
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        margin-top: 18px;
        min-height: 0;
        padding-top: 17px;
      }

      .popover-library-header { align-items: baseline; display: flex; justify-content: space-between; }
      .popover-library-header h3 { color: #414146; font-size: var(--web-type-body); font-weight: var(--font-ui-medium); }

      .asset-upload-section {
        flex: 0 0 20%;
        min-height: 126px;
        padding-top: 16px;
      }

      .asset-primary-upload { height: 100%; }

      .avatar-primary-action,
      .link-picker-entry { margin-top: 18px; }

      .avatar-library-grid {
        display: grid;
        gap: var(--workspace-media-grid-gap);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 16px;
      }

      .avatar-library-grid .avatar-card {
        aspect-ratio: 0.72;
        height: auto;
        min-width: 0;
        width: 100%;
      }

      .link-picker-entry {
        grid-template-columns: 42px minmax(0, 1fr) auto;
      }

      .link-picker-entry label { min-width: 0; }

      .link-picker-entry input {
        background: #ffffff;
        border: 0;
        border-radius: 10px;
        color: #202024;
        font-size: var(--web-type-control);
        height: 42px;
        outline: none;
        padding: 0 12px;
        width: 100%;
      }

      .link-picker-entry input:focus { box-shadow: 0 0 0 1px rgba(24, 24, 27, 0.14); }

      .link-picker-entry button {
        background: #18181b;
        border-radius: 10px;
        color: #ffffff;
        font-size: var(--web-type-control);
        height: 42px;
        min-width: 58px;
        padding: 0 14px;
      }

      .link-library-section .link-history-list { margin-top: 16px; }

      .composer-requirement {
        margin: 7px 4px 0;
      }

      .workspace-generate {
        background: #343438;
        border-radius: var(--workspace-pill-radius);
        bottom: 0;
        flex: 0 0 auto;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        min-height: 46px;
        margin-top: auto;
        padding: 0 14px;
        position: sticky;
        z-index: 45;
      }

      .workspace-generate:hover {
        background: #262629;
        box-shadow: none;
      }

      .workspace-generate:active {
        scale: 0.95;
      }

      .generate-cost {
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--workspace-pill-radius);
        color: rgba(255, 255, 255, 0.92);
        padding: 3px 7px;
      }

      .brief-options:not(:has(> .brief-control:not([hidden]))) {
        display: none;
      }

      .workspace-generate-row {
        align-items: stretch;
        background: var(--bg-primary, var(--workspace-accent));
        border-radius: var(--workspace-pill-radius);
        bottom: 0;
        display: grid;
        flex: 0 0 auto;
        gap: 0;
        grid-template-columns: minmax(0, 1fr) 76px;
        margin-top: auto;
        position: sticky;
        transition: background-color 120ms var(--workspace-ease);
        z-index: 45;
      }

      /* Disabled reads as an inert control on the app's standard greys:
         the shared soft surface and the same muted text as inactive tabs. */
      .workspace-generate-row:has(.workspace-generate:disabled) {
        background: var(--surface-soft);
      }

      .workspace-generate-row:has(.workspace-generate:disabled) .workspace-generate,
      .workspace-generate-row:has(.workspace-generate:disabled) .workspace-quantity > button {
        color: var(--text-muted);
        opacity: 1;
      }

      .workspace-generate-row:has(.workspace-generate:disabled) .generate-cost {
        background: rgba(24, 24, 27, 0.05);
        color: var(--text-muted);
      }

      .workspace-generate-row:has(.workspace-generate:disabled) .workspace-quantity > button .ui-icon {
        color: var(--text-muted);
      }

      .workspace-generate-row:has(.workspace-generate:disabled) .workspace-quantity::before {
        background: rgba(24, 24, 27, 0.16);
      }

      /* Hovering the inert button says why it is inert. */
      .workspace-generate-row[data-disabled-reason]:hover::after {
        background: rgba(24, 24, 27, 0.88);
        border-radius: 7px;
        bottom: calc(100% + 8px);
        color: #ffffff;
        content: attr(data-disabled-reason);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        left: 50%;
        line-height: 1.45;
        max-width: 300px;
        padding: 5px 8px;
        pointer-events: none;
        position: absolute;
        text-align: center;
        transform: translateX(-50%);
        white-space: normal;
        width: max-content;
        z-index: 30;
      }

      .workspace-generate-row > .workspace-generate.workspace-generate {
        background: transparent;
        border-radius: var(--workspace-pill-radius) 0 0 var(--workspace-pill-radius);
        bottom: auto;
        margin-top: 0;
        position: static;
        width: 100%;
      }

      .workspace-generate-row > .workspace-generate.workspace-generate:not(:disabled):hover {
        background: rgba(0, 0, 0, 0.055);
        box-shadow: none;
      }

      .workspace-quantity {
        min-width: 0;
        position: relative;
      }

      .workspace-quantity::before {
        background: rgba(255, 255, 255, 0.24);
        bottom: 11px;
        content: "";
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 11px;
        width: 1px;
        z-index: 1;
      }

      .workspace-quantity > button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 0 var(--workspace-pill-radius) var(--workspace-pill-radius) 0;
        color: #ffffff;
        display: inline-flex;
        font-size: var(--web-type-body);
        font-variant-numeric: tabular-nums;
        font-weight: var(--font-ui-medium);
        gap: 5px;
        height: 46px;
        justify-content: center;
        margin: 0;
        min-height: 46px;
        padding: 0 12px;
        transition:
          background-color 120ms var(--workspace-ease),
          scale 100ms var(--workspace-ease);
        width: 100%;
      }

      .workspace-quantity > button:hover,
      .workspace-quantity > button[aria-expanded="true"] {
        background: rgba(0, 0, 0, 0.055);
      }

      .workspace-quantity > button:active {
        scale: 0.96;
      }

      .workspace-quantity > button .ui-icon {
        color: rgba(255, 255, 255, 0.72);
        height: 12px;
        stroke-width: 1.5;
        width: 12px;
      }

      .workspace-quantity .brief-control-menu {
        min-width: 168px;
      }

      .workspace-library {
        background: #ffffff;
        border-radius: 0;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 27px 0 56px 47px;
        scrollbar-width: none;
      }

      .workspace-library::before {
        display: none;
      }

      .workspace-library-toolbar {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: flex-start;
        /* Full content width: the row's trailing controls line up with the
           right edge of the gallery under it, not 45px short of it. */
        margin: 0 0 32px;
        min-height: 36px;
      }

      /* Both trailing controls sit at the right end of the row, away from the
         tabs — the first one to appear takes the gap, the other follows it. */
      .workspace-library-toolbar .how-it-works-trigger,
      .workspace-library-toolbar .examples-edit-trigger {
        margin-left: auto;
      }

      /* Only when that button is actually on screen — it ships hidden on most
         tools, and a hidden sibling was still taking the gap away. */
      .workspace-library-toolbar
        .how-it-works-trigger:not([hidden])
        ~ .examples-edit-trigger {
        margin-left: 0;
      }

      .generation-preview-toggle {
        align-items: center;
        background: var(--surface-soft);
        border: 1px solid transparent;
        border-radius: 999px;
        color: var(--text-muted);
        display: inline-flex;
        gap: 8px;
        height: 30px;
        padding: 0 10px 0 7px;
        transition: background-color 120ms var(--workspace-ease), border-color 120ms var(--workspace-ease), color 120ms var(--workspace-ease);
      }

      .generation-preview-toggle:hover,
      .generation-preview-toggle:focus-visible {
        background: #eeeeef;
        color: var(--text-secondary);
      }

      .generation-preview-toggle[aria-pressed="true"] {
        background: #e9e9eb;
        border-color: #dddddf;
        color: var(--text-primary);
      }

      .generation-preview-toggle-tag {
        background: #ffffff;
        border-radius: 999px;
        color: #929297;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        line-height: 18px;
        padding: 0 6px;
        text-transform: uppercase;
      }

      .generation-preview-toggle .project-card-state {
        color: currentColor;
        font-size: var(--web-type-caption);
      }

      /* Tab travel: 16px of shared motion split across the swap — the
         leaving panel accelerates out (quick ease-in), the arriving panel
         decelerates the same journey in from the opposite side. Transform
         and opacity only; reduced motion skips it in the script. */
      .workspace-panel.is-tab-leaving,
      .workspace-panel.is-tab-entering {
        --panel-shift: -16px;
      }

      .workspace-panel.is-motion-backward {
        --panel-shift: 16px;
      }

      .workspace-panel.is-tab-leaving {
        animation: workspace-panel-leave 110ms cubic-bezier(0.4, 0, 1, 1) both;
        pointer-events: none;
      }

      .workspace-panel.is-tab-entering {
        animation: workspace-panel-enter 220ms var(--workspace-ease) both;
      }

      @keyframes workspace-panel-leave {
        from {
          opacity: 1;
          transform: translateX(0);
        }

        to {
          opacity: 0;
          transform: translateX(var(--panel-shift, -16px));
        }
      }

      @keyframes workspace-panel-enter {
        from {
          opacity: 0;
          transform: translateX(calc(-1 * var(--panel-shift, -16px)));
        }

        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .workspace-panel.is-tab-leaving,
        .workspace-panel.is-tab-entering {
          animation: none;
        }
      }

      /* Tool travel: switching tools lifts the content up and out, then
         the next tool's content drops down and fades into place. The tool
         title and the Discover/Generations tabs are persistent chrome and
         stay put — only what's below them moves, and only gently. */
      .video-workspace.is-tool-leaving {
        pointer-events: none;
      }

      .video-workspace.is-tool-leaving .brief-panel > :not(.brief-tool-selector, .mobile-panel-header),
      .video-workspace.is-tool-leaving .workspace-library > .workspace-panel {
        animation: workspace-tool-leave 130ms cubic-bezier(0.4, 0, 0.6, 1) both;
      }

      .video-workspace.is-tool-entering .brief-panel > :not(.brief-tool-selector, .mobile-panel-header),
      .video-workspace.is-tool-entering .workspace-library > .workspace-panel {
        animation: workspace-tool-enter 260ms var(--workspace-ease) both;
      }

      @keyframes workspace-tool-leave {
        from {
          opacity: 1;
          transform: translateY(0);
        }

        to {
          opacity: 0;
          transform: translateY(-8px);
        }
      }

      @keyframes workspace-tool-enter {
        from {
          opacity: 0;
          transform: translateY(-8px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .video-workspace.is-tool-leaving .brief-panel > :not(.brief-tool-selector, .mobile-panel-header),
        .video-workspace.is-tool-leaving .workspace-library > .workspace-panel,
        .video-workspace.is-tool-entering .brief-panel > :not(.brief-tool-selector, .mobile-panel-header),
        .video-workspace.is-tool-entering .workspace-library > .workspace-panel {
          animation: none;
        }
      }

      .workspace-view-tabs {
        align-items: center;
        background: rgba(24, 24, 27, 0.035);
        border-radius: var(--workspace-pill-radius);
        display: inline-flex;
        /* Matches the track inset, so the selected pill keeps the same 3px of
           trough on every side instead of butting into its neighbour. */
        gap: 3px;
        margin: 0;
        max-width: 100%;
        padding: 3px;
        width: max-content;
      }

      .workspace-view-tabs button {
        align-items: center;
        background: transparent;
        border-radius: var(--workspace-pill-radius);
        color: #77777d;
        display: inline-flex;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        justify-content: center;
        min-height: 26px;
        min-width: 96px;
        padding: 0 10px;
        transition-duration: 100ms;
        transition-property: background-color, box-shadow, color, scale;
        transition-timing-function: var(--workspace-ease);
        white-space: nowrap;
      }

      .workspace-view-tabs button:hover {
        background: rgba(255, 255, 255, 0.64);
        color: #4f4f54;
      }

      .workspace-view-tabs button[aria-selected="true"] {
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05);
        color: #343438;
      }

      .workspace-view-tabs button:active {
        scale: 0.97;
      }

      /* Only the library's Discover/Generations switcher renders as text
         tabs in the composer title's own type, active tab underlined by a
         slim rounded bar. Other reuses of .workspace-view-tabs (e.g. the lipsync
         Script/Upload switcher) keep the pill track above. */
      .workspace-library-toolbar .workspace-view-tabs {
        background: transparent;
        border-radius: 0;
        gap: 26px;
        padding: 0;
      }

      .workspace-library-toolbar .workspace-view-tabs button {
        background: transparent;
        border-radius: 0;
        color: #aaaab0;
        font-size: var(--web-type-display);
        min-height: 0;
        min-width: 0;
        padding: 1px 0 5px;
        position: relative;
        transition-property: color;
      }

      .workspace-library-toolbar .workspace-view-tabs button::after {
        background: currentColor;
        border-radius: 999px;
        bottom: 0;
        content: "";
        height: 2px;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
      }

      .workspace-library-toolbar .workspace-view-tabs button:hover {
        background: transparent;
        color: #4f4f54;
      }

      .workspace-library-toolbar .workspace-view-tabs button[aria-selected="true"] {
        background: transparent;
        box-shadow: none;
        color: #343438;
      }

      .workspace-library-toolbar .workspace-view-tabs button[aria-selected="true"]::after {
        opacity: 1;
      }

      .workspace-library-toolbar .workspace-view-tabs button:active {
        scale: 1;
      }

      .how-it-works-trigger {
        background: rgba(0, 0, 0, 0.03);
        border-radius: var(--workspace-pill-radius);
        color: #626267;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        min-height: 36px;
        padding: 0 14px;
        transition-duration: 100ms;
        transition-property: background-color, color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .how-it-works-trigger:hover {
        background: rgba(0, 0, 0, 0.055);
        color: #343438;
      }

      .how-it-works-trigger:active {
        scale: 0.95;
      }

      .workspace-panel {
        min-width: 0;
      }

      .trending-tools {
        margin: 0 45px 29px 4px;
        padding: 0;
      }

      /* Keep the discover media wall on the same content rails as the explainer. */
      .preset-group[data-preset-group="discover"] {
        margin-left: 4px;
        margin-right: 45px;
      }

      .tool-trend-group {
        background: rgba(0, 0, 0, 0.03);
        border-radius: 30px;
        min-height: 640px;
        padding: 48px 48px 44px;
        position: relative;
      }

      .tool-trend-header {
        display: block;
        margin: 0;
      }

      .tool-trend-header span {
        color: #a7a7ab;
        display: block;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        letter-spacing: 0;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .tool-trend-header h1 {
        color: #27272b;
        font-size: clamp(38px, 4vw, 62px);
        font-weight: var(--font-ui-medium);
        letter-spacing: 0;
        line-height: 1.02;
        margin: 14px 0 0;
        max-width: 900px;
        text-transform: uppercase;
        text-wrap: balance;
      }

      .tool-trend-header p {
        color: #8c8c92;
        font-size: clamp(15px, 1.25vw, 19px);
        line-height: 1.45;
        margin: 18px 0 0;
        max-width: 980px;
        text-wrap: pretty;
      }

      .tool-explainer-flow {
        align-items: start;
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 42px;
        min-width: 0;
      }

      .tool-explainer-step {
        aspect-ratio: auto;
        background: transparent;
        border-radius: 0;
        margin: 0;
        min-width: 0;
        outline: 0;
        overflow: visible;
        position: relative;
      }

      .tool-explainer-media {
        background: rgba(255, 255, 255, 0.58);
        border-radius: 20px;
        display: block;
        height: clamp(240px, 21vw, 330px);
        outline: 0;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .tool-explainer-media img,
      .tool-explainer-media video {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .tool-demo-input {
        border-radius: 11px;
        box-shadow: 0 10px 30px rgba(24, 24, 27, 0.12);
        height: 66%;
        left: 7%;
        overflow: hidden;
        position: absolute;
        top: 17%;
        transform: rotate(17deg);
        width: 43%;
        z-index: 2;
      }

      .tool-demo-upload {
        align-content: center;
        background: rgba(255, 255, 255, 0.9);
        border: 1px dashed rgba(24, 24, 27, 0.11);
        border-radius: 10px;
        color: #aaaab0;
        display: grid;
        height: 54%;
        justify-items: center;
        padding: 8px;
        position: absolute;
        right: 8%;
        text-align: center;
        top: 23%;
        width: 47%;
      }

      .tool-demo-upload .ui-icon {
        background: rgba(0, 0, 0, 0.025);
        border-radius: 6px;
        height: 24px;
        padding: 7px;
        width: 24px;
      }

      .tool-demo-upload strong {
        color: #a5a5a9;
        font-size: 7px;
        font-weight: var(--font-ui-regular);
        line-height: 1.2;
      }

      .tool-demo-upload small {
        color: #c0c0c4;
        font-size: 5px;
      }

      .tool-demo-carousel {
        align-items: center;
        display: flex;
        gap: 6px;
        inset: 25px -10px;
        justify-content: center;
        position: absolute;
      }

      .tool-demo-carousel i {
        border-radius: 8px;
        flex: 0 0 23%;
        height: 96px;
        opacity: 0.28;
        overflow: hidden;
      }

      .tool-demo-carousel i:nth-child(3) {
        box-shadow: 0 8px 20px rgba(24, 24, 27, 0.14);
        flex-basis: 28%;
        height: 112px;
        opacity: 1;
        outline: 2px solid rgba(255, 255, 255, 0.95);
      }

      .tool-demo-result {
        border-radius: 11px;
        box-shadow: 0 12px 32px rgba(24, 24, 27, 0.15);
        height: 68%;
        left: 22%;
        overflow: hidden;
        position: absolute;
        top: 16%;
        width: 56%;
      }

      .tool-demo-upscale {
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
        inset: 18px;
        position: absolute;
      }

      .tool-demo-upscale > span {
        border-radius: 9px;
        box-shadow: 0 8px 22px rgba(24, 24, 27, 0.1);
        display: block;
        height: 112px;
        overflow: hidden;
        position: relative;
      }

      .tool-demo-upscale > span:last-child {
        box-shadow: 0 8px 22px rgba(24, 24, 27, 0.18);
      }

      .tool-demo-upscale em {
        background: rgba(24, 24, 27, 0.7);
        border-radius: 999px;
        color: #ffffff;
        font-size: 7px;
        font-style: normal;
        left: 6px;
        padding: 3px 5px;
        position: absolute;
        top: 6px;
        z-index: 1;
      }

      .tool-demo-upscale > .ui-icon {
        color: var(--icon-secondary);
        height: 14px;
        width: 14px;
      }

      .tool-explainer-step figcaption {
        align-items: start;
        backdrop-filter: none;
        background: transparent;
        border-radius: 0;
        bottom: auto;
        color: #4a4a4f;
        display: block;
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-regular);
        left: auto;
        line-height: 1.35;
        margin-top: 24px;
        padding: 0;
        position: relative;
        -webkit-backdrop-filter: none;
      }

      .tool-step-number {
        align-items: center;
        background: rgba(24, 24, 27, 0.9);
        border-radius: 12px;
        color: #ffffff;
        display: flex;
        font-size: 15px;
        font-weight: var(--font-ui-medium);
        height: 42px;
        justify-content: center;
        left: 16px;
        position: absolute;
        top: 16px;
        width: 42px;
        z-index: 2;
      }

      .tool-explainer-step figcaption > span:last-child {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .tool-explainer-step figcaption strong {
        color: #2e2e32;
        font-size: clamp(17px, 1.45vw, 22px);
        font-weight: var(--font-ui-medium);
        line-height: 1.15;
        text-transform: uppercase;
      }

      .tool-explainer-step figcaption small {
        color: #8c8c92;
        font-size: clamp(14px, 1.1vw, 17px);
        line-height: 1.4;
      }

      body.how-it-works-open {
        overflow: hidden !important;
      }

      .how-it-works-modal {
        align-items: center;
        display: flex;
        inset: 0;
        justify-content: center;
        opacity: 0;
        padding: 24px;
        pointer-events: none;
        position: fixed;
        transition-duration: 150ms;
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        z-index: 160;
      }

      .how-it-works-modal[hidden] {
        display: none;
      }

      .how-it-works-modal.is-open {
        opacity: 1;
        pointer-events: auto;
      }

      .how-it-works-scrim {
        background: rgba(22, 22, 24, 0.2);
        inset: 0;
        position: absolute;
      }

      .how-it-works-dialog {
        background: #ffffff;
        border-radius: 28px;
        box-shadow:
          0 18px 48px rgba(24, 24, 27, 0.12),
          0 42px 100px rgba(24, 24, 27, 0.13);
        max-height: calc(100dvh - 48px);
        overflow: hidden;
        position: relative;
        scale: 0.985;
        transform: translateY(8px);
        transition-duration: 150ms;
        transition-property: scale, transform;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: min(1560px, calc(100vw - 48px));
      }

      .how-it-works-modal.is-open .how-it-works-dialog {
        scale: 1;
        transform: translateY(0);
      }

      .how-it-works-close {
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        border-radius: var(--workspace-pill-radius);
        color: #737378;
        display: flex;
        height: 40px;
        justify-content: center;
        position: absolute;
        right: 18px;
        top: 18px;
        transition-duration: 100ms;
        transition-property: background-color, color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 40px;
        z-index: 2;
      }

      .how-it-works-close:hover {
        background: #ffffff;
        color: #343438;
      }

      .how-it-works-close:active {
        scale: 0.95;
      }

      .how-it-works-close svg {
        height: 18px;
        width: 18px;
      }

      .how-it-works-content {
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        padding: 18px;
        scrollbar-width: none;
      }

      .how-it-works-content::-webkit-scrollbar {
        display: none;
      }

      .how-it-works-content .tool-trend-group.is-modal {
        margin: 0;
        min-height: min(760px, calc(100dvh - 84px));
      }

      .preset-grid {
        display: grid;
        gap: 36px;
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 120px;
      }

      .preset-group + .preset-group {
        padding-top: 0;
      }

      .preset-group {
        scroll-margin-top: 18px;
      }

      .preset-group-header {
        align-items: center;
        margin: 0 47px 22px 0;
      }

      .preset-group-title {
        color: #18181b;
        font-size: var(--web-type-section);
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
      }

      .preset-group-see-all {
        align-items: center;
        background: transparent;
        color: #a0a0a4;
        display: inline-flex;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
        gap: 5px;
        padding: 6px 0;
      }

      .preset-group-see-all .ui-icon {
        height: 12px;
        stroke-width: 1.25;
        width: 12px;
      }

      .preset-group-grid {
        display: grid;
        gap: 9px;
        grid-auto-columns: clamp(144px, 10.3vw, 188px);
        grid-auto-flow: column;
        margin-left: 2px;
        overflow-x: auto;
        padding: 0;
        scrollbar-width: none;
      }

      .preset-card,
      .preset-card-media {
        border-radius: 10px;
      }

      .preset-card,
      .preset-card:hover,
      .preset-card:active {
        box-shadow: none !important;
      }

      .preset-card-media {
        aspect-ratio: 150 / 259;
        outline: 0;
      }

      .preset-card-media img,
      .preset-card-media video {
        object-fit: cover;
      }

      .project-grid {
        gap: var(--workspace-media-grid-gap);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-right: 45px;
      }

      @media (max-width: 1180px) {
        .workspace-topbar {
          column-gap: 34px;
          padding-inline: 25px;
        }

        .video-workspace {
          grid-template-columns: 404px minmax(0, 1fr);
        }

        .reference-modal {
          padding-left: 396px;
        }

        .brief-panel {
          padding-left: 24px;
          padding-right: 20px;
        }

        .workspace-library {
          padding-left: 36px;
        }

        .trending-tools {
          margin-right: 32px;
        }

        .preset-group[data-preset-group="discover"] {
          margin-right: 32px;
        }

        .tool-explainer-flow {
          gap: 20px;
        }

        .tool-trend-group {
          min-height: 560px;
          padding: 38px 36px 40px;
        }

        .tool-explainer-media {
          height: 250px;
        }

        .preset-group-grid {
          grid-auto-columns: 154px;
        }
      }

      @media (max-width: 940px) {
        .workspace-primary-nav {
          gap: 18px;
        }

        .workspace-primary-nav :is(a, button) {
          font-size: var(--web-type-body);
        }

        .workspace-topbar {
          column-gap: 24px;
          padding-inline: 20px;
        }

        .video-workspace {
          grid-template-columns: 380px minmax(0, 1fr);
        }

        .reference-modal {
          padding-left: 372px;
        }

        .brief-panel {
          padding-left: 20px;
          padding-right: 18px;
        }

        .workspace-library {
          padding-left: 28px;
        }

        .tool-trend-group {
          min-height: 570px;
          padding: 34px 28px 38px;
        }

        .tool-explainer-flow {
          gap: 14px;
          grid-auto-columns: clamp(300px, 44vw, 390px);
          grid-auto-flow: column;
          grid-template-columns: none;
          overflow-x: auto;
          overscroll-behavior-inline: contain;
          padding-bottom: 4px;
          scroll-snap-type: inline proximity;
          scrollbar-width: none;
        }

        .tool-explainer-flow::-webkit-scrollbar {
          display: none;
        }

        .tool-explainer-step {
          scroll-snap-align: start;
        }

        .tool-explainer-step figcaption {
          margin-top: 20px;
        }

        .tool-explainer-media {
          height: 250px;
        }

        .preset-group-grid {
          grid-auto-columns: 148px;
        }
      }

      @media (max-width: 760px) {
        body {
          overflow-y: auto;
        }

        .workspace-topbar {
          height: 70px;
        }

        .workspace-primary-nav {
          display: none;
        }

        .workspace-topbar .pricing-link,
        .workspace-topbar .auth-button.sign-in {
          display: none;
        }

        .video-workspace {
          display: block;
          height: auto;
          min-height: 100vh;
          min-height: 100dvh;
          overflow: visible;
          padding-top: 0;
        }

        .brief-panel,
        .workspace-library {
          height: auto;
          overflow: visible;
        }

        .brief-panel {
          border-bottom: 1px solid rgba(24, 24, 27, 0.065);
          border-right: 0;
          min-height: 760px;
          padding: 16px 20px 30px;
        }

        body.workspace-projects-active .brief-panel {
          display: none;
        }

        body.workspace-projects-active .workspace-library {
          min-height: calc(100vh - var(--workspace-nav-height));
          min-height: calc(100dvh - var(--workspace-nav-height));
        }

        .workspace-generate {
          bottom: auto;
          margin-top: 32px;
          position: static;
        }

        .workspace-library {
          padding: 24px 16px 40px;
        }

        .workspace-library-toolbar {
          margin: 0 0 22px;
        }

        .trending-tools {
          margin-right: 0;
        }

        .preset-group[data-preset-group="discover"] {
          margin-right: 0;
        }

        .tool-trend-group {
          min-height: 0;
          padding: 32px 22px 30px;
        }

        .tool-trend-header h1 {
          font-size: 34px;
        }

        .tool-trend-header p {
          font-size: 15px;
          margin-top: 14px;
        }

        .tool-explainer-flow {
          gap: 16px;
          grid-auto-columns: clamp(270px, 80vw, 340px);
          grid-auto-flow: column;
          grid-template-columns: none;
          margin-top: 30px;
          overflow-x: auto;
          padding-bottom: 4px;
          scrollbar-width: none;
        }

        .how-it-works-modal {
          padding: 10px;
        }

        .how-it-works-dialog {
          border-radius: 22px;
          max-height: calc(100dvh - 20px);
          width: calc(100vw - 20px);
        }

        .how-it-works-content {
          max-height: calc(100dvh - 20px);
          padding: 10px;
        }

        .how-it-works-content .tool-trend-group.is-modal {
          min-height: calc(100dvh - 40px);
          padding-top: 32px;
        }

        .tool-explainer-media {
          height: 230px;
        }

        .how-it-works-close {
          right: 14px;
          top: 14px;
        }

        .preset-group-header {
          margin-right: 0;
        }

        .preset-group-grid {
          grid-auto-columns: minmax(150px, 41vw);
        }

        .project-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          padding-right: 0;
        }

        .avatar-library-view {
          padding-inline: 16px;
        }

        .avatar-template-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .avatar-template-header {
          align-items: start;
          flex-direction: column;
          gap: 12px;
        }

        .avatar-create {
          display: block;
          overflow-y: auto;
        }

        .avatar-create-fields {
          border-right: 0;
          min-height: 680px;
        }

        .avatar-create-output {
          min-height: 300px;
        }

        .asset-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      @media (max-width: 520px) {
        .workspace-topbar {
          padding-inline: 15px;
        }

        .workspace-topbar .workspace-brand strong {
          display: inline;
        }

        .workspace-topbar .auth-button.sign-up {
          height: 34px;
          padding-inline: 14px;
        }

        .brief-panel {
          min-height: 740px;
          padding-inline: 16px;
        }

        .avatar-modal {
          padding: 10px;
        }

        .avatar-dialog {
          border-radius: 20px;
          height: calc(100dvh - 20px);
          max-height: calc(100dvh - 20px);
          width: calc(100vw - 20px);
        }

        .reference-modal {
          align-items: center;
          justify-content: center;
          padding: 10px;
        }

        .reference-dialog {
          height: auto;
          max-height: calc(100dvh - 20px);
          min-height: 0;
          width: calc(100vw - 20px);
        }

        .brief-tool-selector .workspace-canvas-tool {
          font-size: 22px;
        }

        .brief-tool-selector .tool-picker {
          grid-template-columns: minmax(0, 1fr);
          left: 0;
          width: calc(100vw - 32px);
        }

        .brief-options {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        }

        .brief-options .brief-option:nth-child(3) {
          width: 126px;
        }

        .tool-trend-header h1 {
          font-size: 19px;
        }

        .preset-group-title {
          font-size: 21px;
        }

        .preset-group-grid {
          grid-auto-columns: minmax(142px, 43vw);
        }

        .project-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
        }
      }

      /* Generation fallbacks belong to the studio stylesheet, not landing.
         Keep missing previews deliberately quiet and fully contained. */
      #project-grid .project-card-media.is-error {
        background: var(--surface-soft);
        outline: 0;
      }

      #project-grid .project-card-media.is-error > .project-card-error {
        align-items: center;
        color: #a1a1aa;
        display: flex;
        flex-direction: column;
        gap: 10px;
        inset: 0;
        justify-content: center;
        margin: 0;
        padding: 0;
        position: absolute;
        text-align: center;
      }

      #project-grid .project-card-media.is-error > .project-card-error strong {
        color: #77777d;
        display: block;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
        line-height: 1.25;
        margin: 0;
      }

      #project-grid .project-card-media.is-error > .project-card-error small {
        color: #a1a1aa;
        display: block;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        line-height: 1.25;
        margin: 0;
      }

      #project-grid .project-card--history .project-card-media,
      #project-grid .project-card--history .project-card-media > img,
      #project-grid .project-card--history .project-card-media > video {
        outline: 0;
      }

      /* The selected model is a single card: illustration above, details below. */
      .brief-selected-preset {
        background: transparent;
        border-radius: 18px;
        overflow: hidden;
        width: 100%;
      }

      #project-grid .project-card--history .project-card-hover-gif {
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity 120ms var(--workspace-ease);
      }

      #project-grid .project-card--history:hover .project-card-hover-gif[src],
      #project-grid .project-card--history:focus-visible .project-card-hover-gif[src] {
        opacity: 1;
      }

      .brief-selected-preset .model-option > button {
        background: transparent;
        color: var(--text-primary);
        display: grid;
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 4fr) minmax(54px, 1fr);
        height: 218px;
        justify-content: stretch;
        min-height: 0;
        width: 100%;
      }

      .workspace-model-media {
        display: block;
        grid-column: 1;
        height: 100%;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .workspace-model-media .workspace-model-preview,
      .workspace-model-media .workspace-model-shade {
        inset: 0;
      }

      .workspace-model-shade {
        display: none;
      }

      .workspace-model-details {
        align-items: center;
        background: transparent;
        border-top: 1px solid var(--line);
        display: flex;
        grid-column: 1;
        justify-content: space-between;
        min-width: 0;
        padding: 12px 15px;
        width: 100%;
      }

      .workspace-model-detail-copy {
        display: grid;
        flex: 1 1 auto;
        gap: 2px;
        min-width: 0;
        text-align: left;
      }

      .workspace-model-detail-copy h2 {
        color: #2d2d31;
        font-size: 15px;
        font-weight: var(--font-ui-regular);
        letter-spacing: -0.02em;
        line-height: 1.1;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .workspace-model-detail-copy small {
        color: #9a9aa1;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .workspace-model-selector {
        align-items: center;
        align-self: stretch;
        color: var(--icon-secondary);
        display: flex;
        flex: 0 0 20px;
        flex-direction: column;
        gap: 3px;
        justify-content: center;
        margin-left: auto;
        padding: 0;
        width: 20px;
      }

      .workspace-model-selector .ui-icon {
        color: var(--icon-secondary);
        display: block;
        fill: currentColor;
        /* !important keeps the stacked pair uniform: the global
           .ui-icon.icon-chevron-down 14px !important rule would otherwise
           inflate only the down caret and knock it out of column alignment. */
        height: 12px !important;
        stroke: none;
        width: 12px !important;
      }

      /* These controls are shared by the gallery and the Create generations
         grid. Keep them out of the media sizing rules and lock the VK icons
         to their compact action size. */
      .project-card-actions {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        gap: 4px;
        opacity: 0;
        position: absolute;
        right: 7px;
        top: 7px;
        transition: opacity 100ms var(--workspace-ease);
        z-index: 2;
      }

      .project-card:hover .project-card-actions,
      .project-card:focus-within .project-card-actions {
        opacity: 1;
      }

      .project-card-action {
        align-items: center;
        background: rgba(52, 52, 54, 0.74);
        border-radius: 999px;
        color: #ffffff;
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 auto;
        height: 24px;
        justify-content: center;
        min-width: 24px;
        overflow: hidden;
        padding: 0 5px;
        transition: background-color 150ms var(--workspace-ease), color 150ms var(--workspace-ease), gap 150ms var(--workspace-ease), padding 150ms var(--workspace-ease);
      }

      .project-card-action:hover,
      .project-card-action:focus-visible {
        background: rgba(52, 52, 54, 0.88);
        color: #ffffff;
        gap: 5px;
        padding-left: 8px;
        padding-right: 5px;
      }

      .project-card-action.is-active {
        background: rgba(52, 52, 54, 0.92);
        color: #ffffff;
      }

      .project-card-action[data-project-card-action="favorite"] .ui-icon {
        transform: scale(1);
        transition: transform 140ms var(--workspace-ease);
      }

      .project-card-action[data-project-card-action="favorite"].is-liking .ui-icon {
        transform: scale(0.9);
      }

      .project-card-action-recreate {
        font-size: var(--web-type-control);
      }

      .project-card-action-label {
        flex: 0 1 0;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        line-height: 1;
        max-width: 0;
        min-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width 150ms var(--workspace-ease), opacity 150ms var(--workspace-ease);
        white-space: nowrap;
        width: 0;
      }

      .project-card-action:hover .project-card-action-label,
      .project-card-action:focus-visible .project-card-action-label {
        flex-basis: auto;
        max-width: 84px;
        opacity: 1;
        width: auto;
      }

      .project-card-action .ui-icon {
        color: #ffffff;
        flex: 0 0 13px;
        height: 13px;
        max-height: 13px;
        max-width: 13px;
        width: 13px;
      }

      .project-card-action .ui-icon-manual {
        stroke-width: 1.5;
      }

      .project-card-action[data-project-card-action="download"] .ui-icon {
        scale: 1.35;
      }

      .project-card-action[data-project-card-action="delete"] .ui-icon {
        scale: 1.1;
      }

      /* Keep the desktop creator's document at viewport height. The library
         owns scrolling; wheel input over the fixed action rail must not leak
         into an outer page scroll range. */
      @media (min-width: 761px) {
        body.workspace-shell {
          height: 100vh;
          overflow: hidden;
          overscroll-behavior-y: none;
        }

        body.workspace-shell .app-frame {
          height: calc(100vh - var(--workspace-nav-height));
          min-height: 0;
          overflow: hidden;
        }

        body.workspace-shell .video-workspace {
          overscroll-behavior: none;
        }

        body.workspace-shell .brief-panel,
        body.workspace-shell .workspace-library {
          overscroll-behavior-y: contain;
        }
      }

      .project-card-media.is-generating {
        background: var(--surface-soft);
        outline: 0;
        overflow: hidden;
      }

      :where(
        button:not(:disabled):not(.how-it-works-scrim):not(.modal-scrim):not(.rg-modal-overlay-hit),
        a[href],
        [role="button"]:not([aria-disabled="true"]):not(.workspace-nav-menu-backdrop),
        [role="option"]:not([aria-disabled="true"])
      ) {
        transition-duration: 100ms !important;
        transition-property: background-color, border-color, box-shadow, color, filter, opacity, scale !important;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      :where(
        button:not(:disabled):not(.how-it-works-scrim):not(.modal-scrim):not(.rg-modal-overlay-hit),
        a[href],
        [role="button"]:not([aria-disabled="true"]):not(.workspace-nav-menu-backdrop),
        [role="option"]:not([aria-disabled="true"])
      ):active {
        scale: 0.99 !important;
      }

      .modal-scrim,
      .rg-modal-overlay-hit,
      .workspace-nav-menu-backdrop {
        scale: 1 !important;
        transform: none !important;
      }


      /* Filled, not outlined, like every other secondary control, and with
         room to breathe: it sat cramped against the view tabs. */
      .examples-edit-trigger {
        background: var(--surface-soft);
        border: 0;
        border-radius: var(--radius-pill, 999px);
        color: var(--text-secondary);
        cursor: pointer;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        min-height: 32px;
        padding: 8px 16px;
      }

      .examples-edit-trigger:hover {
        background: var(--surface-hover);
        color: var(--text-primary);
      }
      .examples-edit-trigger[hidden] { display: none; }

      .examples-editor {
        inset: 0;
        position: fixed;
        /* A real modal: it owns the screen over the nav, like every other
           dialog in this app. */
        z-index: var(--layer-modal, 160);
      }

      .examples-editor[hidden] { display: none; }

      .examples-editor-scrim {
        background: rgba(20, 20, 22, 0.55);
        border: 0;
        cursor: default;
        inset: 0;
        padding: 0;
        position: absolute;
      }

      .examples-editor-panel {
        background: var(--surface);
        border-radius: 20px;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
        display: flex;
        flex-direction: column;
        height: min(820px, calc(100dvh - 48px));
        left: 50%;
        overflow: hidden;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(1080px, calc(100vw - 48px));
      }

      .examples-editor-head {
        align-items: center;
        border-bottom: 1px solid var(--line-strong);
        display: flex;
        gap: 14px;
        padding: 16px 18px;
      }

      .examples-editor-head h2 {
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
        margin: 0;
      }

      .examples-editor-head p {
        color: var(--text-muted);
        font-size: var(--web-type-control);
        margin: 2px 0 0;
      }

      .examples-editor-status {
        color: var(--text-muted);
        font-size: var(--web-type-control);
        margin-left: auto;
        text-align: right;
      }
      .examples-editor-status[data-tone="ok"] { color: #1f9d63; }
      .examples-editor-status[data-tone="error"] { color: var(--bg-primary, #ff3850); }

      .examples-editor-close {
        background: var(--surface-hover);
        border: 0;
        border-radius: 50%;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 17px;
        height: 30px;
        line-height: 1;
        width: 30px;
      }

      .examples-editor-foot {
        align-items: center;
        border-top: 1px solid var(--line-strong);
        display: flex;
        gap: 8px;
        padding-top: 12px;
      }

      .examples-editor-foot input[type="text"] {
        background: var(--surface-soft, #f5f5f6);
        border: 0;
        border-radius: 10px;
        color: var(--text-primary);
        font: inherit;
        font-size: var(--web-type-control);
        padding: 9px 11px;
      }

      .examples-editor-new-title { width: 200px; }
      .examples-editor-new-prompt { flex: 1 1 auto; min-width: 0; }

      .examples-editor-foot button {
        background: var(--surface-soft, #f5f5f6);
        border: 0;
        border-radius: 999px;
        color: var(--text-primary);
        cursor: pointer;
        font-family: inherit;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        padding: 9px 13px;
      }

      .examples-editor-new-generate {
        background: var(--text-primary);
        color: var(--text-inverse);
      }

      .examples-editor-new-add {
        background: var(--bg-primary, #ff3850);
        color: var(--text-inverse);
      }

      /* The examples are a grid on the page, so they are a grid here: a column
         of full-width rows made twelve examples feel like a hundred. */
      .examples-editor-body {
        align-content: start;
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px 18px 22px;
        scrollbar-width: none;
      }

      .examples-editor-body::-webkit-scrollbar { display: none; }

      /* One row per example: media on the left, its fields beside it. */
      /* A card: media on top, fields under it, the way the example itself is
         drawn on the page. */
      .examples-editor-row {
        background: var(--surface-soft);
        border: 0;
        border-radius: 16px;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
      }

      .examples-editor-media {
        aspect-ratio: 16 / 10;
        background: var(--surface-soft);
        border-radius: 10px;
        cursor: copy;
        display: block;
        object-fit: cover;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .examples-editor-media img,
      .examples-editor-media video {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .examples-editor-media.is-file-over { box-shadow: inset 0 0 0 2px #2d7ff9; }

      .examples-editor-media-hint {
        background: rgba(20, 20, 22, 0.62);
        bottom: 0;
        color: #fff;
        font-size: var(--web-type-caption);
        left: 0;
        padding: 4px 6px;
        position: absolute;
        right: 0;
        text-align: center;
      }

      .examples-editor-fields { display: grid; gap: 8px; }

      .examples-editor-fields label {
        color: var(--text-muted);
        display: grid;
        font-size: var(--web-type-caption);
        gap: 3px;
      }

      .examples-editor-fields input,
      .examples-editor-fields textarea {
        background: var(--surface);
        border: 0;
        border-radius: 10px;
        color: var(--text-primary);
        font: inherit;
        font-size: var(--web-type-body);
        padding: 7px 9px;
        width: 100%;
      }

      .examples-editor-fields textarea {
        min-height: 60px;
        resize: vertical;
      }

      .examples-editor-fields input:focus,
      .examples-editor-fields textarea:focus {
        border-color: var(--line-strong);
        outline: 0;
      }

      .examples-editor-row-actions {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }

      .examples-editor-row-actions .examples-editor-row-status {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        margin-right: auto;
      }

      .examples-editor-save,
      .examples-editor-remove {
        border-radius: 999px;
        cursor: pointer;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        padding: 6px 14px;
      }

      .examples-editor-save { background: var(--text-primary); border: 0; color: var(--surface); }
      .examples-editor-remove { background: transparent; border: 1px solid var(--line-strong); color: var(--bg-primary, #ff3850); }

      @media (max-width: 720px) {
        .examples-editor-panel { border-radius: 0; height: 100dvh; width: 100vw; }
        .examples-editor-body { grid-template-columns: minmax(0, 1fr); }
      }


      /* Generated project viewer: media canvas plus one tabbed inspector. */
      body.project-active {
        background: #f8f9fa;
      }

      body.project-active .project-view {
        background: #f8f9fa;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        padding: var(--workspace-nav-height) 0 0;
      }

      body.project-active .project-header {
        display: none;
      }

      .history-project-back {
        -webkit-tap-highlight-color: transparent;
        align-items: center;
        background: transparent;
        border-radius: 0;
        color: #343438;
        display: inline-flex;
        height: 36px;
        justify-content: center;
        left: 39px;
        position: fixed;
        text-decoration: none;
        top: calc(var(--workspace-nav-height) + 14px);
        transition: scale 100ms var(--workspace-ease);
        width: 36px;
        z-index: 8;
      }

      .history-project-back:hover {
        background: transparent;
        color: #343438;
        transform: none;
      }

      .history-project-back:active {
        scale: 0.95;
      }

      .history-project-back:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
      }

      .history-project-back .ui-icon {
        height: 20px;
        width: 20px;
      }

      .project-stage-back {
        align-items: center;
        background: rgba(255, 255, 255, 0.82);
        border-radius: 999px;
        color: #343438;
        display: none;
        height: 36px;
        justify-content: center;
        left: 8px;
        position: absolute;
        top: 8px;
        transition: background-color 100ms var(--workspace-ease);
        width: 36px;
        z-index: 5;
      }

      body.project-active .project-stage-back {
        display: inline-flex;
      }

      .project-stage-back:hover {
        background: rgba(0, 0, 0, 0.06);
      }

      .project-stage-back .ui-icon {
        height: 20px;
        width: 20px;
      }

      body.project-active .project-layout {
        --project-stage-radius: 24px;
        display: grid;
        gap: 28px;
        grid-template-columns: minmax(0, 1fr) 358px;
        height: calc(100vh - var(--workspace-nav-height));
        height: calc(100dvh - var(--workspace-nav-height));
        min-height: 0;
        overflow: hidden;
        padding: 18px 24px 24px 20px;
      }

      body.project-active .project-canvas {
        background: transparent;
        border-radius: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) 80px;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
      }

      body.project-active .project-canvas.is-generating {
        grid-template-rows: minmax(0, 1fr);
      }

      .project-media-area {
        align-items: center;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        justify-items: center;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        padding: 24px 0;
        position: relative;
      }

      .project-download-cta {
        -webkit-tap-highlight-color: transparent;
        align-items: center;
        background: #18181b;
        border-radius: 999px;
        box-shadow: none;
        color: #ffffff;
        display: inline-flex;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        gap: 9px;
        height: 46px;
        justify-content: center;
        min-width: 0;
        padding: 0 20px;
        transition: background-color 100ms var(--workspace-ease), scale 100ms var(--workspace-ease);
        width: 100%;
      }

      .project-download-cta:hover {
        background: #000000;
      }

      .project-download-cta:active {
        scale: 0.95;
      }

      .project-download-cta:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 3px;
      }

      .project-download-cta:disabled,
      .project-download-cta[hidden] {
        display: none;
      }

      .project-download-cta .ui-icon {
        /* Follow the pill's white label, not the grey svg default. */
        color: inherit;
        height: 16px;
        stroke-width: 1.5;
        width: 16px;
      }

      .project-download-cta span {
        display: inline;
      }

      body.project-active .project-stage {
        align-items: center;
        align-self: flex-start;
        aspect-ratio: var(--project-media-ratio, auto);
        /* Morph target for the gallery-card hero transition. */
        view-transition-name: generation-hero;
        background: transparent;
        border-radius: var(--project-stage-radius, 24px);
        clip-path: none;
        display: flex;
        height: auto;
        isolation: isolate;
        justify-content: center;
        /* The media must stay inside its grid row and never bleed into the
           compact transport below it. */
        max-height: calc(100% - 24px);
        max-width: calc(100% - 170px);
        overflow: hidden;
        position: relative;
        width: auto;
      }

      body.project-active .project-stage[data-aspect="portrait"] {
        height: min(68vh, calc(100vh - var(--workspace-nav-height) - 228px));
        transform: translateX(14px);
      }

      body.project-active .project-stage[data-aspect="square"] {
        height: min(61vh, calc(100vh - var(--workspace-nav-height) - 238px));
      }

      body.project-active .project-stage[data-aspect="landscape"] {
        height: auto;
        transform: none;
        width: min(calc(100% - 64px), 1040px);
      }

      /* Still images do not have playback controls. Collapse that row
         defensively while the client swaps media types. */
      body.project-active .project-canvas[data-media-type="image"],
      body.project-active .project-canvas[data-media-type="gif"] {
        grid-template-rows: minmax(0, 1fr);
      }

      body.project-active .project-canvas[data-media-type="image"] .player-transport,
      body.project-active .project-canvas[data-media-type="gif"] .player-transport,
      body.project-active .project-canvas[data-media-type="gif"] .player-transport {
        display: none !important;
      }

      body.project-active .project-stage > video,
      body.project-active .project-stage > .project-poster {
        border-radius: 0;
        clip-path: none;
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      body.project-active .project-stage > .project-stage-message,
      body.project-active .project-stage > .project-stage-empty,
      body.project-active .project-stage > .project-stage-message > img {
        border-radius: 0;
        clip-path: none;
      }

      body.project-active .player-transport {
        align-self: stretch;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 24px 48px;
        justify-self: stretch;
        min-width: 0;
        padding: 0;
        width: 100%;
      }

      body.project-active .player-transport > .transport-seek {
        grid-row: 1;
      }

      body.project-active .player-transport > .transport-controls {
        grid-row: 2;
      }

      body.project-active .transport-seek {
        --seek-progress: 0%;
        -webkit-appearance: none;
        appearance: none;
        align-self: center;
        background: transparent;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        height: 24px;
        margin: 0;
        outline: 0;
        touch-action: none;
        width: 100%;
      }

      body.project-active .transport-seek::-webkit-slider-runnable-track {
        background: linear-gradient(to right, #ff514f 0 var(--seek-progress), rgba(24, 24, 27, 0.16) var(--seek-progress) 100%);
        border: 0;
        height: 1px;
      }

      body.project-active .transport-seek::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: #ff514f;
        border: 0;
        border-radius: 999px;
        box-shadow: none;
        height: 18px;
        margin-top: -8.5px;
        width: 4px;
      }

      body.project-active .transport-seek::-moz-range-track {
        background: linear-gradient(to right, #ff514f 0 var(--seek-progress), rgba(24, 24, 27, 0.16) var(--seek-progress) 100%);
        border: 0;
        height: 1px;
      }

      body.project-active .transport-seek::-moz-range-thumb {
        background: #ff514f;
        border: 0;
        border-radius: 999px;
        box-shadow: none;
        height: 18px;
        width: 4px;
      }

      .transport-controls {
        align-items: center;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        min-height: 48px;
      }

      .transport-readout {
        color: #a3a3a7;
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        justify-self: start;
      }

      .transport-readout > span:first-child {
        color: #2e2e31;
      }

      body.project-active .transport-play,
      body.project-active .transport-fullscreen {
        align-items: center;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 999px;
        color: #37373a;
        display: inline-flex;
        height: 42px;
        justify-content: center;
        padding: 0;
        transition: background-color 100ms var(--workspace-ease), scale 100ms var(--workspace-ease);
        width: 42px;
      }

      body.project-active .transport-play {
        justify-self: center;
        transform: translateX(10px);
      }

      body.project-active .transport-fullscreen {
        background: var(--surface-soft);
        height: 34px;
        justify-self: end;
        width: 34px;
      }

      body.project-active .transport-play:hover,
      body.project-active .transport-fullscreen:hover {
        background: rgba(0, 0, 0, 0.055);
      }

      body.project-active .transport-play .ui-icon {
        height: 16px;
        width: 16px;
      }

      body.project-active .transport-fullscreen .ui-icon {
        height: 14px;
        stroke-width: 1.4;
        width: 14px;
      }

      body.project-active .transport-end-controls {
        align-items: center;
        display: flex;
        gap: 5px;
        justify-self: end;
        min-width: 0;
      }

      body.project-active .transport-volume {
        --volume-progress: 100%;
        align-items: center;
        border-radius: var(--workspace-pill-radius);
        display: inline-flex;
        height: 34px;
        padding: 0;
        position: relative;
        width: 34px;
      }

      body.project-active .transport-volume > button {
        align-items: center;
        background: var(--surface-soft);
        border: 0;
        border-radius: var(--workspace-pill-radius);
        color: #55555a;
        display: inline-flex;
        flex: 0 0 34px;
        height: 34px;
        justify-content: center;
        outline: 0;
        padding: 0;
        position: relative;
      }

      body.project-active .transport-volume > button:hover {
        background: rgba(24, 24, 27, 0.055);
      }

      body.project-active .transport-volume > button:focus-visible {
        box-shadow: 0 0 0 2px var(--focus);
      }

      body.project-active .transport-volume > button.is-muted::after {
        background: currentColor;
        border-radius: 999px;
        content: "";
        height: 1px;
        position: absolute;
        rotate: -42deg;
        width: 17px;
      }

      body.project-active .transport-volume > button .ui-icon {
        height: 14px;
        stroke-width: 1.45;
        width: 14px;
      }

      body.project-active .transport-volume > input {
        -webkit-appearance: none;
        appearance: none;
        background: rgba(255, 255, 255, 0.96);
        border-radius: 999px;
        bottom: 40px;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.055),
          0 8px 24px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        direction: rtl;
        height: 92px;
        left: 0;
        margin: 0;
        opacity: 0;
        outline: 0;
        padding: 10px 0;
        pointer-events: none;
        position: absolute;
        transform: translateY(6px) scale(0.96);
        transform-origin: bottom center;
        transition-duration: 140ms;
        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 34px;
        writing-mode: vertical-lr;
        z-index: 4;
      }

      body.project-active .transport-volume:hover > input,
      body.project-active .transport-volume:focus-within > input {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      body.project-active .transport-volume > input::-webkit-slider-runnable-track {
        background: linear-gradient(
          to top,
          #55555a 0 var(--volume-progress),
          rgba(24, 24, 27, 0.14) var(--volume-progress) 100%
        );
        border: 0;
        border-radius: 999px;
        height: 100%;
        width: 2px;
      }

      body.project-active .transport-volume > input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: #55555a;
        border: 0;
        border-radius: 999px;
        height: 9px;
        margin-left: -3.5px;
        width: 9px;
      }

      body.project-active .transport-volume > input::-moz-range-track {
        background: linear-gradient(
          to top,
          #55555a 0 var(--volume-progress),
          rgba(24, 24, 27, 0.14) var(--volume-progress) 100%
        );
        border: 0;
        border-radius: 999px;
        height: 100%;
        width: 2px;
      }

      body.project-active .transport-volume > input::-moz-range-thumb {
        background: #55555a;
        border: 0;
        border-radius: 999px;
        height: 9px;
        width: 9px;
      }

      body.project-active .transport-volume > input:focus-visible {
        filter: drop-shadow(0 0 2px var(--focus));
      }

      body.project-active .project-inspector {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 16px 44px rgba(24, 24, 27, 0.08), 0 0 0 1px rgba(24, 24, 27, 0.03);
        display: flex;
        flex-direction: column;
        gap: 0;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding: 20px;
      }

      .project-inspector-top {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 14px;
        justify-content: space-between;
      }

      .project-inspector-tabs {
        background: #f4f4f5;
        border-radius: 999px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 4px;
        width: 100%;
      }

      .project-inspector-tabs button {
        background: transparent;
        border-radius: 999px;
        color: #a6a6ac;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        height: 38px;
        padding: 0 18px;
        transition: background-color 100ms var(--workspace-ease), color 100ms var(--workspace-ease);
      }

      .project-inspector-tabs button[aria-selected="true"] {
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(24, 24, 27, 0.1), 0 0 0 1px rgba(24, 24, 27, 0.05);
        color: #18181b;
      }

      .project-inspector-tabs button:disabled {
        background: transparent;
        box-shadow: none;
        color: #c8c8cc;
        cursor: not-allowed;
        opacity: 0.62;
      }

      .project-inspector-tabs button[data-tooltip] {
        position: relative;
      }

      .project-inspector-tabs button[data-tooltip]::after {
        background: #18181b;
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(24, 24, 27, 0.14);
        color: #ffffff;
        content: attr(data-tooltip);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        left: 50%;
        line-height: 1.25;
        opacity: 0;
        padding: 7px 10px;
        pointer-events: none;
        position: absolute;
        top: calc(100% + 8px);
        transform: translate(-50%, -2px);
        transition: opacity 120ms var(--workspace-ease), transform 120ms var(--workspace-ease);
        white-space: nowrap;
        z-index: 30;
      }

      .project-inspector-tabs button[data-tooltip]:hover::after,
      .project-inspector-tabs button[data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      .project-inspector-actions {
        align-items: center;
        display: grid;
        flex: 0 0 auto;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) 46px 46px;
        padding-top: 14px;
      }

      .project-inspector-icon-action {
        align-items: center;
        background: #f4f4f5;
        border: 0;
        border-radius: 999px;
        color: #85858b;
        display: inline-flex;
        height: 46px;
        justify-content: center;
        padding: 0;
        position: relative;
        transition: background-color 100ms var(--workspace-ease), color 100ms var(--workspace-ease), scale 100ms var(--workspace-ease);
        width: 46px;
      }

      .project-inspector-icon-action[data-tooltip]::after {
        background: rgba(24, 24, 27, 0.92);
        border-radius: 999px;
        color: #ffffff;
        bottom: calc(100% + 7px);
        content: attr(data-tooltip);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        left: 50%;
        line-height: 1;
        opacity: 0;
        padding: 7px 9px;
        pointer-events: none;
        position: absolute;
        transform: translate(-50%, 2px) scale(0.96);
        transition: opacity 120ms var(--workspace-ease), transform 120ms var(--workspace-ease);
        white-space: nowrap;
        z-index: 20;
      }

      .project-inspector-icon-action[data-tooltip]:hover::after,
      .project-inspector-icon-action[data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
      }

      .project-inspector-icon-action:hover {
        background: #ececee;
        color: #4a4a4f;
      }

      .project-inspector-icon-action:active {
        scale: 0.95;
      }

      .project-inspector-icon-action:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
      }

      .project-inspector-icon-action.is-active,
      .project-inspector-icon-action[aria-pressed="true"] {
        color: var(--accent);
      }

      .project-inspector-icon-action[data-project-action="delete"] {
        background: rgba(224, 82, 82, 0.09);
        color: #e05252;
      }

      .project-inspector-icon-action[data-project-action="delete"]:hover {
        background: rgba(224, 82, 82, 0.14);
        color: #d54646;
      }

      .project-inspector-icon-action .ui-icon {
        height: 16px;
        width: 16px;
      }

      .project-inspector-icon-action[data-project-action="favorite"] .ui-icon {
        transform: scale(1);
        transition: transform 140ms var(--workspace-ease);
      }

      /* The comp's favorite star is an outline until it's active. */
      .project-inspector-icon-action[data-project-action="favorite"]:not(.is-active) .ui-icon,
      .project-inspector-icon-action[data-project-action="favorite"]:not(.is-active) .ui-icon path {
        fill: none !important;
        stroke: currentColor !important;
        stroke-linejoin: round;
        stroke-width: 1.6;
      }

      .project-inspector-icon-action[data-project-action="favorite"]:active .ui-icon {
        transform: scale(0.9);
        transition-duration: 0ms;
      }

      .project-inspector-icon-action[data-project-action="favorite"].is-liking .ui-icon {
        transform: scale(0.9);
      }

      .project-inspector-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 28px 8px 18px;
        scrollbar-width: none;
      }

      .project-inspector-content::-webkit-scrollbar {
        display: none;
      }

      .project-info-section + .project-info-section {
        margin-top: 24px;
      }

      .project-info-section h2 {
        color: #18181b;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.3;
        margin: 0 0 12px;
      }

      .project-prompt-card {
        background: #f7f7f8;
        border-radius: 16px;
        color: #3f3f46;
        font-size: var(--web-type-label);
        line-height: 1.55;
        margin: 0;
        min-height: 0;
        overflow: hidden;
        padding: 16px;
        position: relative;
      }

      .project-prompt-card p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        margin: 0;
        overflow: hidden;
        overflow-wrap: anywhere;
      }

      .project-prompt-card.is-expanded > p {
        display: block;
        -webkit-line-clamp: unset;
      }

      .project-prompt-view-more {
        background: transparent;
        color: #6f6f74;
        display: inline-flex;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        margin-top: 6px;
        padding: 0;
      }

      .project-prompt-view-more:hover,
      .project-prompt-view-more:focus-visible {
        color: #18181b;
      }

      .project-prompt-recreate {
        align-items: center;
        background: transparent;
        border-radius: 999px;
        color: #626267;
        display: inline-flex;
        height: 30px;
        justify-content: center;
        overflow: visible;
        padding: 0;
        position: absolute;
        right: 10px;
        top: 10px;
        transition-duration: 120ms;
        transition-property: color, scale;
        transition-timing-function: var(--workspace-ease);
        width: 30px;
      }

      .project-prompt-recreate .ui-icon {
        flex: 0 0 auto;
        height: 14px;
        stroke-width: 1.45;
        width: 14px;
      }

      .project-prompt-recreate[data-tooltip]::after {
        background: rgba(24, 24, 27, 0.92);
        border-radius: 999px;
        color: #ffffff;
        content: attr(data-tooltip);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        line-height: 1;
        opacity: 0;
        padding: 7px 9px;
        pointer-events: none;
        position: absolute;
        right: calc(100% + 6px);
        top: 50%;
        transform: translate(2px, -50%) scale(0.96);
        transition: opacity 120ms var(--workspace-ease), transform 120ms var(--workspace-ease);
        white-space: nowrap;
        z-index: 20;
      }

      .project-prompt-recreate:hover,
      .project-prompt-recreate:focus-visible {
        background: transparent;
        color: #2f2f32;
      }

      .project-prompt-recreate[data-tooltip]:hover::after,
      .project-prompt-recreate[data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%) scale(1);
      }

      .project-prompt-recreate:active {
        scale: 0.96;
      }

      /* Input references sit in their own labeled section below the prompt,
         mirroring the reference comp's Avatar section. */
      .project-prompt-elements {
        border-top: 0;
        margin-top: 24px;
        padding-top: 0;
      }

      .project-prompt-elements > strong {
        color: #18181b;
        display: block;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.3;
        margin-bottom: 12px;
      }

      .project-prompt-elements > div {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .project-element-pill,
      .project-element-more {
        align-items: center;
        background: #f4f4f5;
        border-radius: 12px;
        color: #5b5b60;
        display: inline-flex;
        font-size: var(--web-type-caption);
        gap: 6px;
        height: 44px;
        max-width: 100%;
        min-width: 0;
        padding: 0;
        white-space: nowrap;
      }

      .project-element-preview {
        background: #ededf0;
        border-radius: 12px;
        display: block;
        flex: 0 0 44px;
        height: 44px;
        object-fit: cover;
        overflow: hidden;
        width: 44px;
      }

      /* Visual elements read as bare thumbnails like the comp's Avatar tile;
         audio elements keep their label chip. */
      .project-element-pill:has(.project-element-preview:not(.is-audio)) .project-element-label {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }

      .project-element-pill:has(.project-element-preview.is-audio) {
        padding-right: 12px;
      }

      .project-element-pill {
        border: 0;
        cursor: pointer;
        font: inherit;
        text-align: left;
        transition: background-color 120ms var(--workspace-ease);
        user-select: none;
      }

      .project-element-pill:hover {
        background: #ececee;
      }

      .project-element-preview.is-audio {
        align-items: center;
        color: #7f7f85;
        display: inline-flex;
        justify-content: center;
      }

      .project-element-preview.is-audio .ui-icon {
        height: 13px;
        width: 13px;
      }

      .project-element-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .project-element-more {
        background: transparent;
        color: #98989d;
        height: 30px;
        padding-block: 0;
        padding-inline: 3px;
      }

      @media (max-width: 420px) {
        .project-prompt-elements > div {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .project-element-pill {
          width: 100%;
        }

        .project-element-more {
          justify-self: start;
        }
      }

      .cursor-copy-tooltip {
        background: rgba(24, 24, 27, 0.92);
        border-radius: 999px;
        color: #ffffff;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        left: 0;
        line-height: 1;
        opacity: 0;
        padding: 7px 9px;
        pointer-events: none;
        position: fixed;
        top: 0;
        transform: translate(-50%, -100%) translateY(-6px) scale(0.96);
        transition-duration: 140ms;
        transition-property: opacity, transform;
        transition-timing-function: var(--workspace-ease);
        white-space: nowrap;
        z-index: 120;
      }

      .cursor-copy-tooltip.is-visible {
        opacity: 1;
        transform: translate(-50%, -100%) translateY(-10px) scale(1);
      }

      .project-avatar {
        align-items: center;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 13px;
        display: flex;
        height: 56px;
        justify-content: center;
        object-fit: cover;
        overflow: hidden;
        width: 56px;
      }

      .project-avatar-empty .ui-icon {
        color: var(--icon-secondary);
        height: 20px;
        width: 20px;
      }

      .project-information-list {
        background: #f7f7f8;
        border-radius: 16px;
        overflow: hidden;
        padding: 0 16px;
      }

      .project-information-row {
        align-items: center;
        color: #a1a1aa;
        display: grid;
        font-size: var(--web-type-label);
        gap: 12px;
        grid-template-columns: 16px minmax(0, 1fr) auto;
        min-height: 54px;
      }

      .project-information-row + .project-information-row {
        border-top: 1px solid rgba(24, 24, 27, 0.055);
      }

      .project-information-row .ui-icon {
        fill: none !important;
        height: 15px;
        stroke: currentColor !important;
        stroke-width: 1.35;
        width: 15px;
      }

      .project-information-row .ui-icon * {
        fill: none !important;
        stroke: currentColor !important;
      }

      .project-information-icon {
        align-items: center;
        color: #a1a1a6;
        display: inline-flex;
        height: 16px;
        justify-content: center;
        width: 16px;
      }

      .project-information-row strong {
        color: #18181b;
        font-weight: var(--font-ui-regular);
        max-width: 158px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .project-tools-list {
        align-content: start;
        display: flex;
        flex-direction: column;
        padding: 18px 12px 4px;
      }

      .project-tool-row {
        align-items: center;
        background: transparent;
        display: grid;
        gap: 14px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        min-height: 72px;
        padding: 12px 4px;
        position: relative;
        text-align: left;
        transition: background-color 100ms var(--workspace-ease);
        width: 100%;
      }

      .project-tool-row:not(:last-child)::after {
        background: rgba(24, 24, 27, 0.07);
        bottom: 0;
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        right: 0;
      }

      .project-tool-row:hover {
        background: rgba(24, 24, 27, 0.025);
      }

      .history-project-view .project-tools-list .project-tool-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
      }

      .project-tool-media {
        background: transparent;
        border-radius: 11px;
        display: block;
        height: 44px;
        overflow: hidden;
        width: 44px;
      }

      .project-tool-media img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .project-tool-icon {
        align-items: center;
        border-radius: 12px;
        display: inline-flex;
        height: 42px;
        justify-content: center;
        width: 42px;
      }

      .project-tool-icon--blue {
        background: linear-gradient(145deg, #20c4f4, #0870f5);
        color: #ffffff;
      }

      .project-tool-icon--violet {
        background: linear-gradient(145deg, #535357, #08080a);
        color: #ffffff;
      }

      .project-tool-icon--orange {
        background: linear-gradient(145deg, #e85cf1, #c82fd7);
        color: #ffffff;
      }

      .project-tool-icon--amber {
        background: linear-gradient(145deg, #ffca2c, #ff9e09);
        color: #ffffff;
      }

      .project-tool-icon--rose {
        background: linear-gradient(145deg, #59c5ff, #3269ed);
        color: #ffffff;
      }

      .project-tool-icon .ui-icon {
        height: 18px;
        stroke-width: 1.45;
        width: 18px;
      }

      .project-tool-chevron {
        align-items: center;
        color: #aaaab0;
        display: inline-flex;
        justify-content: center;
      }

      .project-tool-chevron .ui-icon {
        height: 14px;
        stroke-width: 1.3;
        width: 14px;
      }

      .project-tool-panel {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding: 0;
      }

      .project-tool-panel.project-tool-action {
        gap: 0;
        padding: 0;
      }

      /* Back floats left; the icon + title pair is centered, per the comp. */
      .project-tool-panel-header {
        align-items: center;
        display: grid;
        flex: 0 0 auto;
        gap: 12px;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        min-height: 52px;
        padding: 0 0 12px;
      }

      .project-tool-panel-heading {
        align-items: center;
        display: inline-flex;
        gap: 10px;
        justify-content: center;
        min-width: 0;
      }

      .project-tool-panel-back {
        align-items: center;
        background: var(--surface-soft);
        border-radius: 999px;
        color: #9a9aa0;
        display: inline-flex;
        height: 36px;
        justify-content: center;
        padding: 0;
        width: 36px;
      }

      .project-tool-panel-back:hover {
        background: var(--surface-hover);
        color: #626267;
      }

      .project-tool-panel-back .ui-icon {
        height: 14px;
        stroke-width: 1.4;
        width: 14px;
      }

      .project-tool-panel-icon {
        align-items: center;
        border-radius: 8px;
        display: inline-flex;
        height: 28px;
        justify-content: center;
        overflow: hidden;
        width: 28px;
      }

      .project-tool-panel-icon img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .project-tool-panel-icon .ui-icon {
        height: 17px;
        stroke-width: 1.45;
        width: 17px;
      }

      .project-tool-panel-header h2 {
        color: #18181b;
        font-size: var(--web-type-heading);
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
        margin: 0;
      }

      .project-tool-panel-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        overflow-y: auto;
        padding-top: 10px;
        scrollbar-width: none;
      }

      .project-tool-panel-body::-webkit-scrollbar {
        display: none;
      }

      .project-tool-panel-footer {
        flex: 0 0 auto;
        padding: 24px 4px 2px;
      }

      .project-motion-upload {
        align-items: center;
        background: var(--surface-soft);
        border-radius: 18px;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        min-height: 154px;
        padding: 20px;
        text-align: center;
        width: 100%;
      }

      .project-motion-upload:hover {
        background: var(--surface-hover);
      }

      .project-motion-background {
        display: grid;
        flex: 0 0 auto;
        gap: 10px;
      }

      .project-motion-background > strong {
        color: #18181b;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.3;
      }

      .project-motion-background-options {
        background: #f4f4f5;
        border-radius: 999px;
        display: grid;
        gap: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 4px;
      }

      .project-motion-background-options button {
        background: transparent;
        border-radius: 999px;
        color: #a6a6ac;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        height: 36px;
        padding: 0 12px;
        transition: background-color 100ms var(--workspace-ease), color 100ms var(--workspace-ease);
      }

      .project-motion-background-options button.is-selected {
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(24, 24, 27, 0.1), 0 0 0 1px rgba(24, 24, 27, 0.05);
        color: #18181b;
      }

      .project-motion-upload-icon {
        align-items: center;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 10px;
        color: #a3a3a8;
        display: inline-flex;
        height: 40px;
        justify-content: center;
        overflow: hidden;
        width: 40px;
      }

      .project-motion-upload.has-reference .project-motion-upload-icon {
        background: #e8f3ff;
        color: #3978d8;
      }

      .project-motion-upload-icon .ui-icon {
        height: 18px;
        stroke-width: 1.45;
        width: 18px;
      }

      .project-motion-upload-copy {
        display: grid;
        gap: 4px;
        max-width: 100%;
      }

      .project-motion-upload-copy strong {
        color: #454549;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-regular);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .project-motion-upload-copy small {
        color: #aaaab0;
        font-size: var(--web-type-control);
        line-height: 1.3;
      }

      .project-motion-quality {
        align-items: center;
        display: flex;
        justify-content: space-between;
        min-height: 48px;
      }

      .project-motion-quality-label {
        align-items: center;
        color: #aaaab0;
        display: inline-flex;
        font-size: var(--web-type-control);
        gap: 8px;
      }

      .project-motion-quality-label .ui-icon {
        height: 15px;
        stroke-width: 1.35;
        width: 15px;
      }

      .project-motion-quality-control {
        min-width: 72px;
      }

      .project-motion-quality-control .project-tool-select-trigger {
        min-width: 78px;
      }

      .project-motion-generate {
        gap: 8px;
      }

      .project-tool-generate-cost {
        align-items: center;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 7px;
        display: inline-flex;
        gap: 3px;
        padding: 3px 6px;
      }

      .project-tool-generate-cost .ui-icon {
        height: 11px;
        width: 11px;
      }

      .project-tool-action {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding-top: 21px;
      }

      .project-tool-back {
        align-self: flex-start;
        background: transparent;
        color: #8f8f95;
        font-size: var(--web-type-caption);
        padding: 0;
      }

      .project-tool-action h2 {
        color: #38383c;
        font-size: var(--web-type-label);
      }

      .project-tool-action-description {
        color: #8f8f95;
        font-size: var(--web-type-control);
        line-height: 1.45;
      }

      .project-tool-prompt {
        background: rgba(0, 0, 0, 0.03);
        border: 0;
        border-radius: 14px;
        color: #38383c;
        min-height: 114px;
        outline: 0;
        padding: 13px;
        resize: none;
      }

      .project-tool-generate {
        align-items: center;
        align-self: stretch;
        background: #18181b;
        border-radius: 999px;
        color: #ffffff;
        display: flex;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        gap: 8px;
        height: 46px;
        justify-content: center;
        padding: 0 16px;
        width: 100%;
      }

      .project-tool-generate:hover {
        background: #000000;
      }

      .project-motion-generate.project-tool-generate {
        background: #18181b;
        height: 46px;
      }

      .project-motion-generate.is-previewing {
        background: #18181b;
      }

      .project-motion-generate:disabled {
        background: #18181b;
        cursor: not-allowed;
        opacity: 0.42;
      }

      .project-motion-local-status {
        color: #9a9aa0;
        display: block;
        font-size: var(--web-type-caption);
        line-height: 1.35;
        min-height: 17px;
        padding-top: 8px;
        text-align: center;
      }

      .project-tool-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .project-tool-copy strong {
        color: #18181b;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.3;
      }

      .project-tool-copy span {
        color: #a1a1aa;
        display: -webkit-box;
        font-size: var(--web-type-body);
        line-height: 1.35;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      @media (max-width: 1120px) {
        body.project-active .project-layout {
          gap: 14px;
          grid-template-columns: minmax(0, 1fr) 310px;
          padding-inline: 14px;
        }

        body.project-active .project-stage {
          max-width: calc(100% - 100px);
        }

      }

      @media (max-width: 760px) {
        .history-project-back {
          left: 10px;
          top: calc(var(--workspace-nav-height) + 10px);
        }

        body.project-active {
          height: auto;
          overflow-y: auto;
        }

        body.project-active .project-view {
          height: auto;
          min-height: 100vh;
          min-height: 100dvh;
          overflow: visible;
        }

        body.project-active .project-layout {
          display: flex;
          flex-direction: column;
          height: auto;
          min-height: calc(100vh - var(--workspace-nav-height));
          min-height: calc(100dvh - var(--workspace-nav-height));
          overflow: visible;
          padding: 10px;
        }

        body.project-active .project-canvas {
          min-height: min(720px, calc(100vh - var(--workspace-nav-height) - 20px));
          min-height: min(720px, calc(100dvh - var(--workspace-nav-height) - 20px));
        }

        body.project-active .project-canvas[data-media-type="image"][data-aspect="landscape"] {
          min-height: 330px;
        }

        body.project-active .project-canvas[data-media-type="image"][data-aspect="square"] {
          min-height: 610px;
        }

        body.project-active .project-stage {
          max-width: 94%;
        }

        body.project-active .project-stage[data-aspect="portrait"] {
          height: min(64vh, 610px);
          transform: none;
        }

        body.project-active .project-stage[data-aspect="landscape"] {
          width: 100%;
        }

        body.project-active .transport-play {
          transform: none;
        }

        body.project-active .project-inspector {
          border-radius: var(--project-stage-radius);
          height: min(760px, calc(100vh - 20px));
          height: min(760px, calc(100dvh - 20px));
          margin: 0;
          min-height: 640px;
        }
      }

      /* Discover presets are a browseable media wall, not horizontal rails. */
      .preset-group-grid {
        display: grid;
        gap: var(--workspace-media-grid-gap);
        grid-auto-columns: auto;
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        overflow: visible;
        padding: 0;
      }

      /* A section shelf is the exception the wall rule above does not cover: it
         is a rail, and it has to say so after that rule rather than before it.
         Everything the wall sets has to be undone here — the flow, the fixed
         three columns, and the visible overflow that stops it scrolling at all
         — or a shelf silently renders as a short, wrapping mini grid. */
      .preset-group-grid.is-shelf {
        grid-auto-columns: clamp(180px, 13.5vw, 232px);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        /* Room for the card's focus ring and hover lift, which a clipped
           scroller would otherwise cut off along the top and bottom edges. */
        padding-bottom: 4px;
        scrollbar-width: none;
        scroll-padding-inline: 2px;
      }

      .preset-group-grid.is-shelf::-webkit-scrollbar {
        display: none;
      }

      /* Auto rows would stretch the single row to whatever the tallest card
         wants; a rail keeps every card the same height as its neighbours. */
      .preset-group-grid.is-shelf > .preset-card {
        height: 100%;
      }

      .preset-card {
        display: block;
        min-width: 0;
        padding: 0;
        text-align: left;
        width: 100%;
      }

      .preset-card,
      .preset-card-media {
        border-radius: 16px;
      }

      .preset-card-media {
        aspect-ratio: 4 / 3;
        background: #ececec;
        display: block;
        isolation: isolate;
        outline: 0;
        overflow: hidden;
        position: relative;
      }

      /* Curated examples are authored as complete 4:5 compositions. Preserve
         the frame so faces, full-body motion, edit context, and poster type do
         not get cropped by the older landscape tool-card geometry. */
      .preset-card[data-preset-category="template"] .preset-card-media {
        aspect-ratio: 4 / 5;
      }

      .preset-card-media::after {
        background: linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.62));
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 1;
      }

      /* The selected ring rides the title scrim rather than an outline of its
         own: the frame isolates a stacking context and scales the media to
         fill it, so an inset outline is painted under the image and never
         seen. Same accent as the check badge, drawn inside the frame so the
         media stays full-bleed and the grid never reflows on select. */
      .preset-card.is-selected .preset-card-media::after {
        border: 2px solid var(--bg-primary);
        border-radius: inherit;
      }

      .preset-card-media img,
      .preset-card-media video {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .preset-card-media strong {
        bottom: 13px;
        color: #ffffff;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
        left: 14px;
        line-height: 1.1;
        position: absolute;
        right: 14px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        z-index: 2;
      }

      /* A shelf is browsed as a row, and the row header already names it. An
         overlaid title on every tile there repeats that label once per card and
         crowds the art the trend is being sold on. The infinite grid has no such
         header — its tiles are the only thing naming themselves — so the title
         stays wherever the grid is the layout. */
      .preset-shelf .preset-card-media strong {
        display: none;
      }

      .preset-card-lipsync {
        position: relative;
      }

      .preset-card-lipsync .preset-card-select {
        background: transparent;
        border: 0;
        border-radius: inherit;
        cursor: pointer;
        display: block;
        padding: 0;
        text-align: left;
        width: 100%;
      }

      .preset-lipsync-audio-toggle {
        align-items: center;
        backdrop-filter: blur(12px);
        background: rgba(20, 20, 22, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 50%;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        height: 40px;
        justify-content: center;
        opacity: 0;
        padding: 0;
        pointer-events: none;
        position: absolute;
        right: 10px;
        scale: 1;
        top: 10px;
        transition-duration: 120ms;
        transition-property: background-color, opacity, scale;
        transition-timing-function: ease-out;
        width: 40px;
        z-index: 3;
      }

      .preset-card-lipsync:hover .preset-lipsync-audio-toggle,
      .preset-card-lipsync:focus-within .preset-lipsync-audio-toggle,
      .preset-lipsync-audio-toggle:focus-visible {
        opacity: 1;
        pointer-events: auto;
      }

      .preset-lipsync-audio-toggle:hover {
        background: rgba(20, 20, 22, 0.9);
      }

      .preset-lipsync-audio-toggle:active {
        scale: 0.96;
      }

      .preset-lipsync-audio-toggle:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
      }

      .preset-lipsync-audio-toggle .ui-icon {
        height: 18px;
        width: 18px;
      }

      .preset-lipsync-audio-toggle::after {
        background: currentColor;
        border-radius: 1px;
        content: "";
        height: 2px;
        left: 11px;
        position: absolute;
        rotate: -45deg;
        top: 19px;
        transition-duration: 120ms;
        transition-property: opacity;
        width: 18px;
      }

      .preset-lipsync-audio-toggle.is-audible::after {
        opacity: 0;
      }

      #preset-grid.is-between-frames-row-grid .preset-group-grid {
        display: grid;
        gap: var(--workspace-media-grid-gap);
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      @media (max-width: 640px) {
        .preset-group-grid {
          gap: var(--workspace-media-grid-gap);
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        #preset-grid.is-between-frames-row-grid .preset-group-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .preset-card,
        .preset-card-media {
          border-radius: 12px;
        }

        .preset-card-media strong {
          bottom: 10px;
          font-size: var(--web-type-control);
          left: 11px;
          right: 11px;
        }
      }

      /* Generation media uses one full-bleed, rounded frame everywhere. The
         column flow lets different media ratios stack like a Pinterest board
         without introducing empty row space or letterboxed card surfaces. */
      #project-grid.project-grid {
        align-content: start;
        column-count: 3;
        column-gap: var(--workspace-media-grid-gap);
        display: block;
      }

      /* The grid is multicol, so a plain block empty state fragments across all
         three columns and paints its surface once per fragment — reading as
         three empty cards. Span the columns and drop the surface so only the
         icon and label show. */
      #project-grid .library-empty {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
        column-span: all;
        min-height: 240px;
        width: 100%;
      }

      #project-grid.is-loading-generations {
        -webkit-mask-image: linear-gradient(to bottom, #000 0 42%, rgba(0, 0, 0, 0.18) 100%);
        mask-image: linear-gradient(to bottom, #000 0 42%, rgba(0, 0, 0, 0.18) 100%);
        pointer-events: none;
      }

      .workspace-generation-skeleton {
        -webkit-column-break-inside: avoid;
        animation: generation-skeleton-pulse 1.4s ease-in-out infinite;
        animation-delay: calc(var(--generation-skeleton-index) * 55ms);
        aspect-ratio: 16 / 9;
        background:
          linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.82) 46%, transparent 62%),
          var(--surface-soft);
        background-position: 180% 0, 0 0;
        background-size: 220% 100%, 100% 100%;
        border-radius: var(--workspace-media-radius);
        break-inside: avoid;
        display: block;
        margin-bottom: var(--workspace-media-grid-gap);
        min-width: 0;
        width: 100%;
      }

      @keyframes generation-skeleton-pulse {
        0% { background-position: 180% 0, 0 0; opacity: 0.72; }
        55% { opacity: 1; }
        100% { background-position: -120% 0, 0 0; opacity: 0.72; }
      }

      @media (prefers-reduced-motion: reduce) {
        .workspace-generation-skeleton {
          animation: none;
        }
      }

      #project-grid .project-card--history {
        --generation-media-aspect: 1.7778;
        max-width: none;
      }

      #project-grid .project-card--history .generation-media-frame {
        aspect-ratio: inherit;
        background: transparent;
        border-radius: var(--workspace-media-radius);
        height: 100%;
        outline: 0;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      #project-grid .project-card--history .generation-media-frame > img,
      #project-grid .project-card--history .generation-media-frame > video {
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        outline: 0;
        width: 100%;
      }

      #project-grid .project-card--portrait {
        --generation-media-aspect: 0.72;
      }

      #project-grid .project-card--square {
        --generation-media-aspect: 1;
      }

      #project-grid .project-card--landscape,
      #project-grid .project-card--history.is-empty-media {
        --generation-media-aspect: 1.7778;
      }

      #project-grid .project-card--history.is-empty-media .generation-media-frame,
      #project-grid .generation-media-frame.is-generating {
        background: var(--surface-soft);
      }

      /* Gallery media is a clean, edge-to-edge canvas. Failed previews use
         the same gray surface, with a small contained status instead of an
         outlined blank tile. */
      #gallery-project-grid .project-card-media {
        outline: 0;
      }

      #gallery-project-grid .project-card-media.is-error {
        background: var(--surface-soft);
      }

      #gallery-project-grid .project-card-error {
        gap: 8px;
        padding: 16px;
        text-align: center;
      }

      #gallery-project-grid .project-card-error small {
        max-width: 180px;
      }

      @media (max-width: 980px) {
        #project-grid.project-grid {
          column-count: 2;
        }
      }

      @media (max-width: 640px) {
        #project-grid.project-grid {
          column-count: 1;
        }
      }

      #project-grid .project-card {
        -webkit-column-break-inside: avoid;
        aspect-ratio: var(--generation-media-aspect, 1.7778);
        background: transparent;
        break-inside: avoid;
        display: inline-block;
        height: auto;
        margin: 0 0 var(--workspace-media-grid-gap);
        padding: 0;
        vertical-align: top;
        width: 100%;
      }

      #project-grid .generation-media-frame {
        aspect-ratio: inherit;
        background: transparent;
        border-radius: var(--workspace-media-radius);
        display: block;
        height: 100%;
        outline: 0;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      #project-grid .generation-media-frame > img,
      #project-grid .generation-media-frame > video {
        border-radius: inherit;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        outline: 0;
        width: 100%;
      }

      #project-grid .project-card-hover-gif {
        height: 100% !important;
        inset: 0;
        object-fit: cover;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity 120ms var(--workspace-ease);
      }

      #project-grid .project-card:hover .project-card-hover-gif[src],
      #project-grid .project-card:focus-visible .project-card-hover-gif[src] {
        opacity: 1;
      }

      #project-grid .project-card-media.is-generating {
        aspect-ratio: 16 / 9;
        background: var(--surface-soft);
      }

      /* Failed records still occupy a real grid cell. Without an intrinsic
         media element their absolutely positioned status collapsed to zero
         height, leaving invisible holes that pushed later generations into
         staggered rows. */
      #project-grid .project-card--history.is-empty-media,
      #project-grid .project-card--history.is-empty-media .project-card-media {
        aspect-ratio: 16 / 9;
        min-height: 0;
      }

      /* Composer refinements: white canvas, soft gray cards, compact model
         card, and one centered Generate + credits action. */
      .brief-panel {
        background: #ffffff;
        border-right: 0;
      }

      .brief-selected-preset {
        background: transparent;
        border-radius: 18px;
        overflow: hidden;
        width: 100%;
      }

      .brief-selected-preset .model-option > button {
        background: transparent;
        color: var(--text-primary);
        display: grid;
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 4fr) minmax(54px, 1fr);
        height: 218px;
        justify-content: stretch;
        min-height: 0;
        width: 100%;
      }

      .brief-asset-box,
      .brief-asset-box-universal,
      .brief-composer {
        background: var(--surface-soft);
        border-color: transparent;
      }

      .brief-asset-box:hover,
      .brief-asset-box-universal:hover {
        background: #eeeeef;
        border-color: transparent;
      }

      .brief-prompt .prompt-editor {
        background: transparent;
      }

      .workspace-model-media {
        display: block;
        grid-column: 1;
        height: 100%;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .workspace-model-media .workspace-model-preview,
      .workspace-model-media .workspace-model-shade {
        inset: 0;
      }

      .workspace-model-shade {
        display: none;
      }

      .workspace-model-details {
        align-items: center;
        background: transparent;
        border-top: 1px solid var(--line);
        display: flex;
        grid-column: 1;
        justify-content: space-between;
        min-width: 0;
        padding: 12px 15px;
        width: 100%;
      }

      .workspace-model-selector {
        align-items: center;
        align-self: stretch;
        color: var(--icon-secondary);
        display: flex;
        flex: 0 0 20px;
        flex-direction: column;
        gap: 3px;
        justify-content: center;
        margin-left: auto;
        padding: 0;
        width: 20px;
      }

      .workspace-model-selector .ui-icon,
      .brief-control > button .ui-icon {
        fill: currentColor;
        height: 12px;
        stroke: none;
        width: 12px;
      }

      .workspace-model-mark,
      .workspace-model-mark > img {
        background: #ffffff;
        border-radius: 12px;
        flex: 0 0 38px;
        height: 38px;
        width: 38px;
      }

      .workspace-model-mark > img {
        object-fit: cover;
      }

      .workspace-model-detail-copy {
        display: grid;
        flex: 1 1 auto;
        gap: 2px;
        min-width: 0;
        text-align: left;
      }

      .workspace-model-detail-copy h2 {
        color: #2d2d31;
        font-size: 15px;
        font-weight: var(--font-ui-regular);
        letter-spacing: -0.02em;
        line-height: 1.1;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .workspace-model-detail-copy small {
        color: #9a9aa1;
        font-size: 10px;
        font-weight: var(--font-ui-regular);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .workspace-generate {
        justify-content: center;
        gap: 8px;
      }

      .generate-cost {
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--workspace-pill-radius);
        color: rgba(255, 255, 255, 0.92);
        gap: 4px;
        padding: 3px 7px;
      }

      /* A viewer rail only exists once a generation has been selected. */
      body.project-active .history-project-view .project-inspector[hidden] {
        display: none !important;
      }

      body.project-active .history-project-view .project-layout:has(.project-inspector[hidden]) {
        grid-template-columns: minmax(0, 1fr);
        padding-right: 20px;
      }

      body.project-active .history-project-view .project-stage.is-empty {
        background: transparent;
        max-width: 100%;
      }

      body.project-active .history-project-view .project-stage[data-state="failed"] {
        background: transparent;
        border: 0;
        box-shadow: none;
      }

      body.project-active .history-project-view .history-stage-message.is-failed {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: var(--text-primary);
        gap: 0;
        height: auto;
        max-width: 340px;
        overflow: visible;
        padding: 0;
        text-align: center;
        width: min(340px, calc(100% - 40px));
      }

      body.project-active .history-project-view .history-stage-failure-copy {
        display: grid;
        gap: 5px;
        justify-items: center;
      }

      body.project-active .history-project-view .history-stage-message.is-failed strong {
        color: var(--text-primary);
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.3;
      }

      body.project-active .history-project-view .history-stage-message.is-failed p {
        color: var(--text-secondary);
        font-size: var(--web-type-control);
        line-height: 1.4;
        margin: 0;
        max-width: 300px;
        text-align: center;
        text-wrap: pretty;
      }

      body.project-active .history-project-view .history-stage-failure-mark {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: var(--text-muted);
        display: inline-flex;
        height: 22px;
        justify-content: center;
        margin-bottom: 10px;
        width: 22px;
      }

      body.project-active .history-project-view .history-stage-failure-mark svg {
        height: 18px;
        width: 18px;
      }

      .history-stage-empty {
        align-items: center;
        background: var(--workspace-control-surface);
        border-radius: 18px;
        color: #303034;
        display: grid;
        gap: 7px;
        justify-items: center;
        min-width: min(360px, calc(100vw - 48px));
        padding: 28px 32px;
        text-align: center;
      }

      .history-stage-empty-icon {
        align-items: center;
        background: rgba(255, 255, 255, 0.72);
        border-radius: 10px;
        color: #929298;
        display: flex;
        height: 34px;
        justify-content: center;
        width: 34px;
      }

      .history-stage-empty-icon .ui-icon {
        height: 17px;
        width: 17px;
      }

      .history-stage-empty strong {
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
      }

      .history-stage-empty p {
        color: #97979d;
        font-size: var(--web-type-caption);
        line-height: 1.35;
        margin: 0;
      }

      /* The selected model reads as one banner card: its preview simply ends,
         then the model name sits in the same soft-gray surface beneath it. */
      .brief-selected-preset {
        background: var(--workspace-control-surface);
        border-radius: 18px;
        padding: 0;
      }

      .brief-selected-preset .model-option > button {
        background: transparent;
        grid-template-rows: minmax(0, 1fr) auto;
        height: 232px;
      }

      .workspace-model-details {
        background: transparent;
        border-top: 0;
        margin-top: 0;
        padding: 14px 16px 16px;
      }

      .preset-group-header {
        margin-bottom: 14px;
      }

      .preset-group-title {
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
      }

      .avatar-create-header button {
        background: transparent;
        border-radius: 999px;
      }

      /* Dragging darkens the surface rather than lightening it, matching
         .reference-upload-tile.is-dragging so every drop target reads the
         same way. */
      [data-upload-dropzone].is-dragging {
        background: #e8e8ea !important;
        box-shadow: inset 0 0 0 2px rgba(24, 24, 27, 0.12);
      }

      /* The prompt box already holds text, so it names the action outright
         instead of relying on the tint alone. The label sits above the
         editor and never intercepts the drop. The mobile composer gets the
         same treatment from its own sheet, where it is already positioned. */
      .brief-prompt {
        position: relative;
      }

      .brief-prompt.is-dragging::after {
        align-items: center;
        background: rgba(232, 232, 234, 0.92);
        border-radius: inherit;
        color: var(--text-secondary);
        content: "Drop to add reference media";
        display: flex;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        inset: 0;
        justify-content: center;
        pointer-events: none;
        position: absolute;
        z-index: 3;
      }

      .avatar-primary-action {
        align-content: center;
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 142px;
        padding: 16px;
        text-align: center;
        width: 100%;
      }

      .avatar-primary-action > span:last-child {
        justify-items: center;
        text-align: center;
      }

      .avatar-primary-action .popover-primary-action-icon {
        color: #77777d;
      }

      .asset-primary-upload { min-height: 126px; }

      .avatar-primary-action,
      .asset-primary-upload {
        background: var(--workspace-control-surface);
        border: 1px dashed rgba(24, 24, 27, 0.22);
      }

      .avatar-primary-action {
        border-color: rgba(24, 24, 27, 0.32);
      }

      .avatar-primary-action:hover,
      .asset-primary-upload:hover {
        background: color-mix(in srgb, var(--workspace-control-surface) 86%, #ffffff);
        border-color: rgba(24, 24, 27, 0.32);
      }

      .avatar-primary-action .popover-primary-action-icon,
      .asset-primary-upload .popover-primary-action-icon {
        background: transparent;
      }

      .avatar-library-grid .avatar-card,
      .avatar-library-grid .avatar-template-card,
      .avatar-library-grid .avatar-create-card {
        aspect-ratio: 0.72;
        min-width: 0;
        width: 100%;
      }

      .avatar-create-card {
        align-content: center;
        background: var(--workspace-control-surface);
        border: 1px dashed rgba(24, 24, 27, 0.22);
        border-radius: 10px;
        color: #29292e;
        display: grid;
        gap: 7px;
        justify-items: center;
        overflow: hidden;
        padding: 16px 10px;
        text-align: center;
      }

      .avatar-create-card:hover {
        background: color-mix(in srgb, var(--workspace-control-surface) 86%, #ffffff);
        border-color: rgba(24, 24, 27, 0.32);
      }

      .avatar-create-card-icon {
        align-items: center;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        color: #77777d;
        display: flex;
        height: 34px;
        justify-content: center;
        width: 27px;
      }

      .avatar-create-card-icon .ui-icon {
        height: 16px;
        stroke-width: 1.6;
        width: 16px;
      }

      .avatar-create-card strong {
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
      }

      .avatar-create-card small {
        color: #888890;
        font-size: var(--web-type-caption);
        line-height: 1.3;
        max-width: 120px;
      }

      .avatar-card .avatar-use-button {
        opacity: 0;
      }

      #avatar-modal .avatar-card.is-selected {
        box-shadow: none;
      }

      #avatar-modal .avatar-card.is-selected .avatar-use-button {
        background: #18181b;
        color: #ffffff;
        opacity: 1;
      }

      .avatar-card:hover .avatar-use-button,
      .avatar-card:focus-within .avatar-use-button {
        opacity: 1;
      }

      .product-link-entry {
        align-items: center;
        display: grid;
        gap: 9px;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        margin-top: 15px;
      }

      .product-link-icon {
        color: #8d8d94;
        display: flex;
      }

      .product-link-icon .ui-icon {
        height: 17px;
        stroke-width: 1.5;
        width: 17px;
      }

      .product-link-entry label { min-width: 0; }

      .product-link-entry input {
        background: var(--workspace-control-surface);
        border: 0;
        border-radius: 10px;
        color: #25252a;
        font: inherit;
        font-size: var(--web-type-control);
        height: 42px;
        outline: none;
        padding: 0 12px;
        width: 100%;
      }

      .product-link-entry input::placeholder { color: #97979f; }

      .product-link-entry button {
        background: #222226;
        border-radius: 10px;
        color: #ffffff;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        height: 42px;
        padding: 0 13px;
      }

      .asset-upload-section {
        flex-basis: auto;
        min-height: 104px;
        padding-top: 12px;
      }

      .asset-primary-upload { min-height: 104px; }

      .asset-grid-empty {
        align-content: center;
        background: var(--workspace-control-surface);
        border-radius: 12px;
        color: #707077;
        display: grid;
        gap: 6px;
        grid-column: 1 / -1;
        justify-items: center;
        min-height: 164px;
        padding: 22px;
        text-align: center;
      }

      .asset-grid-empty .ui-icon {
        color: var(--icon-secondary);
        height: 19px;
        stroke-width: 1.45;
        width: 19px;
      }

      .asset-grid-empty strong {
        color: #4a4a50;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
      }

      .asset-grid-empty small {
        color: #8f8f97;
        font-size: 10px;
        line-height: 1.4;
        max-width: 270px;
      }

      .asset-link-card {
        align-content: center;
        color: #64646b;
        display: grid;
        gap: 6px;
        justify-items: center;
        padding: 12px;
        text-align: center;
      }

      .asset-link-card .ui-icon {
        height: 18px;
        stroke-width: 1.5;
        width: 18px;
      }

      .asset-link-card span {
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }

      #avatar-modal .avatar-dialog {
        height: auto;
        max-height: calc(100dvh - 40px);
        min-height: 390px;
      }

      #avatar-modal .avatar-library-view {
        height: auto;
        max-height: calc(100dvh - 40px);
      }

      .link-picker-entry {
        align-items: center;
        background: transparent;
        display: grid;
        gap: 10px;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        margin-top: 12px;
        min-height: 56px;
        padding: 7px 10px;
        width: 100%;
      }

      .link-picker-entry .popover-primary-action-icon {
        background: transparent;
        border-radius: 0;
        color: #8b8b91;
        height: 20px;
        width: 20px;
      }

      .link-picker-entry .popover-primary-action-icon .ui-icon {
        height: 17px;
        width: 17px;
      }

      .link-picker-entry label {
        min-width: 0;
      }

      .link-picker-entry input {
        background: var(--workspace-control-surface) !important;
        border: 0;
        border-radius: 10px;
        color: #222226;
        font: inherit;
        height: 40px;
        outline: none;
        padding: 0 12px;
        width: 100%;
      }

      .link-picker-entry input::placeholder {
        color: #a1a1aa;
      }

      /* Same height as the field it sits beside — the button was sized by its
         content, so it never lined up with the 40px input. */
      .link-picker-entry button {
        align-items: center;
        background: #222226;
        border: 0;
        border-radius: 10px;
        color: #ffffff;
        display: inline-flex;
        font-size: var(--web-type-body);
        font-weight: 600;
        height: 40px;
        justify-content: center;
        min-width: 58px;
        padding: 0 14px;
      }

      /* The desktop studio has one continuous canvas. Keep the tool rail
         separated from Discover/Generations with a real hairline, even after
         the white-panel refinements above. */
      @media (min-width: 761px) {
        .video-workspace > .brief-panel {
          border-right: 1px solid rgba(24, 24, 27, 0.04);
        }
      }

      /* Keep the first-use explainer in the same restrained visual system as
         the rest of Discover: concise hierarchy, compact media, and no large
         instructional badges competing with the examples. */
      .tool-trend-group {
        background: rgba(0, 0, 0, 0.03);
        border-radius: 30px;
        min-height: 640px;
        padding: 48px 48px 44px;
      }

      .tool-trend-header span {
        color: #9a9aa0;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .tool-trend-header h1 {
        color: #27272b;
        font-size: clamp(40px, 4vw, 62px);
        font-weight: var(--font-ui-medium);
        letter-spacing: 0;
        line-height: 1.02;
        margin-top: 14px;
        max-width: 900px;
        text-transform: uppercase;
      }

      .tool-trend-header p {
        color: #85858c;
        font-size: clamp(15px, 1.25vw, 19px);
        font-weight: var(--font-ui-regular);
        line-height: 1.45;
        margin-top: 18px;
        max-width: 980px;
      }

      .tool-explainer-flow {
        gap: 22px;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 42px;
      }

      .tool-explainer-hero {
        margin: 0;
        min-width: 0;
      }

      .tool-explainer-media {
        background: transparent;
        border-radius: 20px;
        height: clamp(320px, 36vw, 520px);
        outline: 0;
      }

      .tool-explainer-step figcaption {
        margin-top: 0;
      }

      .tool-explainer-step figcaption strong {
        color: #2e2e32;
        font-size: clamp(17px, 1.45vw, 22px);
        font-weight: var(--font-ui-medium);
        line-height: 1.15;
        text-transform: uppercase;
      }

      .tool-guide-treatment {
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        z-index: 1;
      }

      .tool-guide-prompt,
      .tool-guide-instruction,
      .tool-guide-model,
      .tool-guide-scale {
        backdrop-filter: blur(18px);
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        bottom: 18px;
        box-shadow: 0 16px 36px rgba(24, 24, 27, 0.16);
        display: grid;
        gap: 5px;
        left: 18px;
        max-width: calc(100% - 36px);
        padding: 14px 16px;
        position: absolute;
        -webkit-backdrop-filter: blur(18px);
      }

      .tool-guide-prompt small,
      .tool-guide-instruction small,
      .tool-guide-model small,
      .tool-guide-scale small {
        color: #8c8c92;
        font-size: var(--web-type-caption);
        line-height: 1.2;
      }

      .tool-guide-prompt strong,
      .tool-guide-instruction strong,
      .tool-guide-model strong,
      .tool-guide-scale strong {
        color: #2e2e32;
        display: -webkit-box;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.35;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .tool-guide-model {
        bottom: 50%;
        left: 50%;
        min-width: 58%;
        text-align: left;
        transform: translate(-50%, 50%);
      }

      .tool-guide-scale {
        align-content: center;
        aspect-ratio: 1;
        bottom: 18px;
        left: auto;
        min-width: 92px;
        right: 18px;
        text-align: center;
      }

      .tool-guide-scale strong {
        font-size: 30px;
        line-height: 1;
      }

      .tool-guide-audio {
        align-items: center;
        backdrop-filter: blur(18px);
        background: rgba(24, 24, 27, 0.82);
        border-radius: 999px;
        bottom: 22px;
        color: #ffffff;
        display: flex;
        gap: 12px;
        left: 50%;
        max-width: calc(100% - 36px);
        padding: 12px 16px;
        position: absolute;
        transform: translateX(-50%);
        -webkit-backdrop-filter: blur(18px);
      }

      .tool-guide-audio strong {
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        white-space: nowrap;
      }

      .tool-guide-wave {
        align-items: center;
        display: flex;
        gap: 2px;
        height: 20px;
      }

      .tool-guide-wave i {
        background: currentColor;
        border-radius: 999px;
        display: block;
        height: 30%;
        width: 2px;
      }

      .tool-guide-wave i:nth-child(2n) { height: 80%; }
      .tool-guide-wave i:nth-child(3n) { height: 55%; }

      .tool-guide-light {
        background: conic-gradient(from 218deg at 72% 22%, rgba(255, 245, 205, 0.85), rgba(255, 255, 255, 0) 34%);
        filter: blur(6px);
        inset: -20%;
        mix-blend-mode: screen;
        position: absolute;
      }

      .tool-guide-chip {
        backdrop-filter: blur(14px);
        background: rgba(24, 24, 27, 0.78);
        border-radius: 999px;
        bottom: 18px;
        color: #ffffff;
        font-size: var(--web-type-caption);
        left: 18px;
        padding: 9px 12px;
        position: absolute;
        -webkit-backdrop-filter: blur(14px);
      }

      .tool-guide-style {
        align-items: center;
        backdrop-filter: blur(18px);
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 999px;
        bottom: 18px;
        display: flex;
        gap: 7px;
        left: 18px;
        max-width: calc(100% - 36px);
        padding: 10px 14px;
        position: absolute;
        -webkit-backdrop-filter: blur(18px);
      }

      .tool-guide-style i {
        background: #f06a55;
        border-radius: 50%;
        height: 13px;
        width: 13px;
      }

      .tool-guide-style i:nth-child(2) { background: #f2c35b; }
      .tool-guide-style i:nth-child(3) { background: #5a84d8; }

      .tool-guide-style strong {
        color: #2e2e32;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .how-it-works-content .tool-trend-group.is-modal {
        min-height: 0;
      }

      @media (max-width: 940px) {
        .tool-trend-group {
          min-height: 0;
          padding: 32px;
        }

        .tool-explainer-flow {
          gap: 18px;
          grid-auto-columns: auto;
          grid-auto-flow: row;
          grid-template-columns: minmax(0, 1fr);
          margin-top: 20px;
          overflow: visible;
          padding-bottom: 0;
        }

        .tool-explainer-media {
          height: clamp(280px, 43vw, 420px);
        }

      }

      @media (max-width: 760px) {
        .tool-trend-group {
          padding: 24px;
        }

        .tool-trend-header h1 {
          font-size: 34px;
        }

        .tool-explainer-flow {
          gap: 14px;
          grid-auto-columns: auto;
          grid-auto-flow: row;
          grid-template-columns: minmax(0, 1fr);
          overflow: visible;
          padding-bottom: 4px;
        }

        .tool-explainer-media {
          height: clamp(220px, 60vw, 320px);
        }

        .how-it-works-content .tool-trend-group.is-modal {
          min-height: 0;
          padding-top: 22px;
        }
      }

      /* The generated-media viewer owns playback chrome. Browser and
         Cloudflare-native controls stay hidden so there is only one transport. */
      body.project-active .project-stage video::-webkit-media-controls,
      body.project-active .project-stage video::-webkit-media-controls-enclosure {
        display: none !important;
      }

      body.project-active .project-canvas {
        grid-template-rows: minmax(0, 1fr) 80px;
      }

      body.project-active .project-media-area {
        align-items: center;
        padding: 12px 0;
      }

      body.project-active .project-stage {
        align-self: center;
        max-height: 100%;
      }

      body.project-active .project-stage[data-aspect="portrait"] {
        height: min(72vh, calc(100vh - var(--workspace-nav-height) - 132px));
        transform: none;
      }

      body.project-active .project-stage > video,
      body.project-active .project-stage > .project-poster {
        object-fit: cover;
      }

      body.project-active .project-canvas[data-aspect="portrait"] {
        column-gap: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 80px;
      }

      body.project-active .project-canvas[data-aspect="portrait"] .project-media-area {
        grid-column: 1;
        grid-row: 1;
      }

      body.project-active .project-canvas[data-aspect="portrait"] .player-transport {
        grid-column: 1;
        grid-row: 2;
      }

      .brief-composer {
        position: relative;
      }

      .brief-prompt {
        min-height: 0;
        position: relative;
      }

      .brief-prompt .prompt-editor {
        position: relative;
        z-index: 2;
      }

      .prompt-pill,
      .prompt-mention-draft {
        border-radius: 6px;
        /* Same cut and weight as the typed text around the chip — only the
           background sets it apart. */
        font-weight: var(--font-ui-regular);
        /* Tight enough to read as a chip, tall enough that descenders in
           the label are not clipped by the overflow. */
        line-height: 1.2;
        vertical-align: -0.28em;
      }

      .prompt-pill {
        align-items: center;
        background: rgba(24, 24, 27, 0.055);
        color: var(--text-primary);
        cursor: default;
        display: inline-flex;
        gap: 3px;
        max-width: min(240px, 70%);
        padding: 2px 5px;
        white-space: nowrap;
      }

      .prompt-pill.is-selected {
        background: rgba(24, 24, 27, 0.105);
      }

      .prompt-pill.is-invalid {
        background: rgba(255, 56, 80, 0.08);
        color: var(--text-muted);
      }

      .prompt-mention-draft {
        align-items: center;
        background: rgba(255, 56, 80, 0.14);
        box-shadow: 0 0 0 1px rgba(255, 56, 80, 0.28);
        box-sizing: border-box;
        color: #ff3850;
        /* Built exactly like the committed pill's box — inline-flex, fixed
           20px, text centered — so both chips share one geometry and the
           draft doesn't sit lower on the line. */
        display: inline-flex;
        height: 20px;
        padding: 0 5px;
        /* The pill's exposed baseline is its thumbnail's bottom edge (18px
           into the box); the draft's is its text baseline (~14px). Plain
           baseline alignment here lands the draft box exactly where the
           pill's -0.28em does. */
        vertical-align: baseline;
        white-space: nowrap;
      }

      .prompt-pill-body {
        align-items: center;
        display: inline-flex;
        gap: 4px;
        min-width: 0;
      }

      .prompt-pill-preview {
        align-items: center;
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 4px;
        color: inherit;
        cursor: pointer;
        display: inline-flex;
        font: inherit;
        font-weight: inherit;
        gap: 4px;
        min-width: 0;
        outline: 0;
        padding: 0;
      }

      .prompt-pill-preview:focus-visible {
        box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.14);
      }

      .prompt-pill-media {
        border-radius: 4px;
        flex: 0 0 auto;
        height: 16px;
        object-fit: cover;
        width: 16px;
      }

      .prompt-pill-icon {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        justify-content: center;
      }

      .prompt-pill-icon .ui-icon {
        height: 13px;
        width: 13px;
      }

      .prompt-pill-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Start and end are two fields with a dash drawn between them, not one
         string the person has to punctuate themselves. The pair reads as one
         control: the group carries the surface, the fields sit flush in it. */
      .prompt-pill-range {
        align-items: center;
        background: rgba(24, 24, 27, 0.05);
        border-radius: 5px;
        display: inline-flex;
        flex: 0 0 auto;
        gap: 1px;
        padding: 1px 3px;
      }

      .prompt-pill-range-dash,
      .prompt-pill-range-colon {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        line-height: 1;
        pointer-events: none;
      }

      .prompt-pill-range-dash {
        padding: 0 3px;
      }

      /* One side of the range: its hours, minutes and seconds with the colons
         drawn between them. Each interval is its own field, so the arrows and
         Tab reach them one at a time and nothing has to be punctuated by hand. */
      .prompt-pill-range-edge {
        align-items: center;
        display: inline-flex;
        gap: 0;
      }

      .prompt-pill-range-part,
      .prompt-pill-range-input {
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 4px;
        box-sizing: content-box;
        caret-color: var(--text-primary);
        color: var(--text-secondary);
        cursor: text;
        flex: 0 0 auto;
        font-family: inherit;
        /* On the type scale like every other control, rather than an em
           fraction of whatever the prompt happens to be set in. */
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        font-weight: var(--font-ui-regular);
        letter-spacing: 0;
        line-height: 1;
        max-width: 2ch;
        min-width: 2ch;
        outline: 0;
        overflow: visible;
        padding: 2px 1px;
        text-align: center;
        width: 2ch;
      }

      .prompt-pill-range-part::placeholder,
      .prompt-pill-range-input::placeholder {
        color: var(--text-muted);
      }

      /* The focused segment is the one lit, not the whole range: it is the
         only one a keystroke lands in. */
      .prompt-pill-range-part:focus,
      .prompt-pill-range-part:focus-visible,
      .prompt-pill-range-input:focus,
      .prompt-pill-range-input:focus-visible {
        background: #ffffff;
        box-shadow: 0 0 0 1px rgba(24, 24, 27, 0.14);
        color: var(--text-primary);
      }

      .prompt-pill-range-part::selection {
        background: rgba(24, 24, 27, 0.16);
      }

      .prompt-pill-range-part[aria-invalid="true"],
      .prompt-pill-range-input[aria-invalid="true"] {
        box-shadow: 0 0 0 2px rgba(255, 56, 80, 0.24);
        color: #d92d45;
      }

      .prompt-pill.has-invalid-range {
        background: rgba(255, 56, 80, 0.08);
        position: relative;
      }

      /* The rejection reason rides with the pill while the range is invalid,
         so red never has to explain itself. */
      .prompt-pill.has-invalid-range::after {
        background: #d92d45;
        border-radius: 7px;
        color: #ffffff;
        content: attr(data-range-error);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        left: 50%;
        max-width: 260px;
        padding: 5px 8px;
        pointer-events: none;
        position: absolute;
        top: calc(100% + 6px);
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 30;
      }

      /* Collapsed until the pill is hovered or focused, so the chip is
         never wider than its visible content. */
      .prompt-pill-remove {
        appearance: none;
        background: transparent;
        border: 0;
        color: var(--text-muted);
        cursor: pointer;
        display: inline-grid;
        flex: 0 0 auto;
        font-size: 0.9em;
        height: 14px;
        margin-left: -3px;
        overflow: hidden;
        place-items: center;
        padding: 0;
        line-height: 1;
        opacity: 0;
        transition:
          color 100ms var(--workspace-ease),
          margin-left 100ms var(--workspace-ease),
          opacity 100ms var(--workspace-ease),
          width 100ms var(--workspace-ease);
        width: 0;
      }

      .prompt-pill:hover .prompt-pill-remove,
      .prompt-pill:focus-within .prompt-pill-remove,
      .prompt-pill-remove:focus-visible {
        margin-left: 0;
        opacity: 1;
        width: 14px;
      }

      .prompt-pill-remove:hover {
        color: var(--text-primary);
      }

      body.media-picker-modal-open {
        overflow: hidden;
      }

      .media-picker-backdrop {
        appearance: none;
        background: rgba(38, 38, 41, 0.72);
        border: 0;
        inset: 0;
        opacity: 0;
        padding: 0;
        pointer-events: none;
        position: fixed;
        transition: opacity 160ms cubic-bezier(0.2, 0, 0, 1);
        z-index: 189;
      }

      .media-picker-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
      }

      .media-picker-backdrop[hidden] {
        display: none;
      }

      .prompt-mention-menu {
        background: #ffffff;
        border-radius: 22px;
        box-shadow: 0 26px 76px rgba(24, 24, 27, 0.18), 0 0 0 1px rgba(24, 24, 27, 0.035);
        left: 0;
        opacity: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        transform: translateY(8px) scale(0.98);
        transform-origin: top left;
        transition-duration: 160ms;
        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: min(520px, calc(100vw - 24px));
        /* Above the phone layer (composer 120, backdrop 121, sheet 122):
           this opens from controls inside the sheet, so anything at or below
           it renders behind the sheet it was opened from. */
        z-index: 130;
      }

      .prompt-mention-menu.is-reference-library {
        border-radius: 24px;
        box-shadow: 0 32px 90px rgba(0, 0, 0, 0.28);
        height: min(840px, calc(100dvh - 48px));
        transform-origin: center;
        width: min(956px, calc(100vw - 48px));
        z-index: 190;
      }

      body.media-picker-modal-open .prompt-mention-menu:not(.is-mention-list) {
        z-index: 190;
      }

      /* No scrim to sit on, so it clears the studio chrome on its own: above
         the panels and rails it expands out of, below the global nav and the
         modal layer. It keeps the base transform-origin (top left) so it grows
         out of the control that opened it rather than fading in over the
         middle. */
      .prompt-mention-menu.is-anchored-panel {
        z-index: var(--layer-small-popover, 130);
      }

      .prompt-mention-menu.is-mention-list {
        border-radius: 16px;
        width: min(320px, calc(100vw - 24px));
      }

      .prompt-mention-menu.is-character-library {
        width: min(560px, calc(100vw - 24px));
      }

      .prompt-mention-menu.is-open {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      .prompt-mention-menu[hidden] {
        display: none;
      }

      .prompt-mention-tabs {
        border-bottom: 1px solid rgba(24, 24, 27, 0.065);
        display: grid;
        grid-template-columns: repeat(var(--media-picker-tab-count, 4), minmax(0, 1fr));
        min-height: 46px;
        padding: 0 10px;
      }

      .prompt-mention-tabs button {
        align-items: center;
        background: transparent;
        border: 0;
        color: var(--text-muted);
        display: inline-flex;
        font-size: var(--web-type-body);
        gap: 7px;
        justify-content: center;
        min-width: 0;
        padding: 0 7px;
        position: relative;
        white-space: nowrap;
      }

      .prompt-mention-tabs button[aria-selected="true"] {
        color: var(--text-primary);
      }

      .prompt-mention-tabs button[aria-selected="true"]::after {
        background: var(--text-primary);
        bottom: -1px;
        content: "";
        height: 1.5px;
        left: 12px;
        position: absolute;
        right: 12px;
      }

      .prompt-mention-titlebar {
        align-items: center;
        border-bottom: 1px solid rgba(24, 24, 27, 0.065);
        color: var(--text-primary);
        display: flex;
        gap: 8px;
        min-height: 46px;
        padding: 0 18px;
      }

      .prompt-mention-titlebar h2 {
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
      }

      .prompt-mention-titlebar .ui-icon {
        color: var(--icon-secondary);
        height: 15px;
        width: 15px;
      }

      .prompt-mention-tabs .ui-icon {
        height: 15px;
        width: 15px;
      }

      .prompt-mention-grid {
        align-content: start;
        display: grid;
        gap: 10px;
        /* Every row keeps the three-up card height and overflow rows scroll.
           1fr template rows collapse to zero once content overflows, which
           stacked overflow candidates into a deck — so rows are sized by
           grid-auto-rows alone. */
        grid-auto-rows: calc((100% - 20px) / 3);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: 396px;
        overflow-x: hidden;
        overflow-y: auto;
        /* The grid is its own scroller: reaching either end stops there rather
           than handing the rest of the gesture to the page behind the panel. */
        overscroll-behavior: contain;
        padding: 16px;
        /* The panel is a small floating surface with rounded corners; a
           scrollbar gutter cuts a grey strip through them and shortens the
           last column. It still scrolls — the bar is just not drawn. */
        scrollbar-width: none;
      }

      .prompt-mention-grid::-webkit-scrollbar {
        display: none;
      }

      .prompt-mention-menu.is-character-library .prompt-mention-grid {
        display: block;
        height: min(520px, calc(100dvh - 118px));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 18px;
        /* Same rounded floating surface as every other small popover, so it
           scrolls without drawing a bar down its corner. */
        scrollbar-width: none;
      }

      .prompt-mention-character-section + .prompt-mention-character-section {
        margin-top: 24px;
      }

      .prompt-mention-character-section h3 {
        color: var(--text-primary);
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
        margin: 0 0 10px;
      }

      .prompt-mention-character-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      /* The dialog's navbar: filters on the left, close on the right, and a
         hairline separating it from the upload section — the tabs' underline
         lands on that hairline, which is what makes the bar read as a parent
         section rather than a floating row. */
      .prompt-mention-library-header {
        align-items: stretch;
        border-bottom: 1px solid rgba(24, 24, 27, 0.09);
        display: flex;
        gap: 10px;
        min-height: 52px;
        padding: 0 20px 0 24px;
      }

      /* The gap carries the breathing room rather than the buttons' padding:
         widening the padding would drag the first label off the grid's left
         edge and stretch every underline with it. */
      .prompt-mention-menu.is-reference-library .prompt-mention-tabs {
        align-items: stretch;
        border-bottom: 0;
        display: flex;
        flex: 1 1 auto;
        gap: 12px;
        grid-template-columns: none;
        min-height: 0;
        padding: 0;
      }

      /* Full bar height so the underline sits on the divider. There is no fill
         behind the label, so this reads as a tab rather than the fat blob the
         pill treatment produced. */
      .prompt-mention-menu.is-reference-library .prompt-mention-tabs button {
        flex: 0 0 auto;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        gap: 6px;
        min-height: 52px;
        padding: 0 12px;
      }

      .prompt-mention-menu.is-reference-library .prompt-mention-tabs button:focus-visible {
        box-shadow: none;
        outline: 0;
      }

      .prompt-mention-menu.is-reference-library .prompt-mention-tabs button[aria-selected="true"]::after {
        background: var(--accent, #ff3850);
        bottom: -1px;
        height: 2px;
        left: 0;
        right: 0;
      }

      /* Sits in the navbar opposite the filters, not floating over the body. */
      .prompt-mention-menu.is-reference-library .prompt-mention-library-close {
        align-self: center;
        flex: 0 0 auto;
        margin-left: auto;
      }

      /* A tab bar, not pills: selection is an underline sitting on the section
         divider, so the tabs stretch the full height of the bar and carry no
         fill of their own. */
      .prompt-mention-tabs.is-library-nav {
        align-items: stretch;
        border-bottom: 0;
        display: flex;
        gap: 12px;
        grid-template-columns: none;
        min-height: 0;
        padding: 0;
      }

      .prompt-mention-tabs.is-library-nav button {
        background: transparent;
        border-radius: 0;
        color: #8b8b91;
        flex: 0 0 auto;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        gap: 6px;
        justify-content: center;
        padding: 0 12px;
        transition: color 120ms var(--workspace-ease);
      }

      .prompt-mention-tabs.is-library-nav button:hover {
        background: transparent;
        color: #414146;
      }

      .prompt-mention-tabs.is-library-nav button[aria-selected="true"] {
        background: transparent;
        color: #141417;
      }

      /* -1px so the mark straddles the divider rather than floating above it. */
      .prompt-mention-tabs.is-library-nav button[aria-selected="true"]::after {
        background: var(--accent, #ff3850);
        bottom: -1px;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        right: 0;
      }

      .prompt-mention-tabs.is-library-nav .ui-icon {
        height: 15px;
        width: 15px;
      }

      .prompt-mention-library-close {
        align-items: center;
        align-self: center;
        background: var(--surface-soft);
        border: 0;
        border-radius: 999px;
        color: var(--text-muted);
        display: inline-flex;
        flex: 0 0 auto;
        height: 34px;
        justify-content: center;
        margin-left: auto;
        padding: 0;
        scale: 1;
        transition-duration: 120ms;
        transition-property: background-color, color, scale;
        transition-timing-function: var(--workspace-ease);
        width: 34px;
      }

      .prompt-mention-library-close:hover {
        background: var(--surface-hover);
        color: var(--text-primary);
      }

      .prompt-mention-library-close:active {
        scale: 0.96;
      }

      .prompt-mention-library-close .ui-icon {
        height: 15px;
        width: 15px;
      }

      /* The body scrolls as one column so the upload section and the library
         move together beneath the pinned 52px navbar and the Attach footer. */
      .prompt-mention-menu.is-reference-library .prompt-mention-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        height: calc(100% - 52px);
        overflow-y: auto;
        padding: 14px 32px 76px;
        scrollbar-width: thin;
      }

      /* The link field is the first thing under the navbar, so it drops the
         margin it carries when it follows other content — the body's padding
         is the whole gap. */
      .prompt-mention-menu.is-reference-library .link-picker-entry {
        margin-top: 0;
      }

      .prompt-mention-menu.is-reference-library .prompt-mention-upload-section {
        display: grid;
        gap: 8px;
      }

      /* The hairline splitting "add something" from "pick something you
         already have" comes from the shared .popover-library-section, so this
         popover and "Add a product" stay literally the same treatment. */
      /* On "All" there is nothing above it to split from — the way in is a card
         in the grid — so the library leads the body and its hairline would land
         a few pixels under the navbar's, reading as a doubled divider. */
      .prompt-mention-menu.is-reference-library
        .prompt-mention-body
        > .popover-library-section:first-child {
        border-top: 0;
        margin-top: 0;
        padding-top: 4px;
      }

      /* The library section carries no visible heading — the navbar filters
         name it — so the divider leads straight into the grid. */
      .prompt-mention-menu.is-reference-library .popover-library-header {
        margin-bottom: 12px;
      }

      .prompt-mention-menu.is-reference-library .prompt-mention-grid {
        align-content: start;
        grid-auto-rows: max-content;
        gap: 14px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: none;
        height: auto;
        overflow: visible;
        padding: 0;
      }

      .media-picker-drop-notice {
        align-items: center;
        backdrop-filter: blur(18px) saturate(125%);
        -webkit-backdrop-filter: blur(18px) saturate(125%);
        background: rgba(245, 245, 247, 0.72);
        display: flex;
        inset: 0;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition-duration: 160ms;
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        z-index: 9;
      }

      .media-picker-drop-notice-card {
        align-items: center;
        background: rgba(255, 255, 255, 0.88);
        border-radius: 24px;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.055),
          0 10px 24px rgba(0, 0, 0, 0.08),
          0 24px 60px rgba(0, 0, 0, 0.1);
        color: var(--text-primary);
        display: flex;
        flex-direction: column;
        min-width: 270px;
        padding: 30px 36px 28px;
        transform: translateY(8px) scale(0.98);
        transition-duration: 180ms;
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .media-picker-drop-notice-card .ui-icon {
        color: var(--text-secondary);
        height: 30px;
        margin-bottom: 16px;
        stroke-width: 1.7;
        width: 30px;
      }

      .media-picker-drop-notice-card strong {
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
      }

      .media-picker-drop-notice-card small {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        margin-top: 7px;
      }

      .prompt-mention-menu.is-reference-library.is-file-dragging .media-picker-drop-notice {
        opacity: 1;
      }

      .prompt-mention-menu.is-reference-library.is-file-dragging .media-picker-drop-notice-card {
        transform: translateY(0) scale(1);
      }

      .prompt-mention-library-footer {
        align-items: center;
        /* A solid strip, not a fade — tiles scroll cleanly under it. */
        background: #ffffff;
        bottom: 0;
        display: flex;
        justify-content: flex-end;
        left: 0;
        padding: 8px 26px 12px;
        pointer-events: none;
        position: absolute;
        right: 0;
        /* Floats above tile chrome (duration pills, selection marks). */
        z-index: 6;
      }

      .prompt-mention-library-attach {
        align-items: center;
        background: #18181b;
        border: 0;
        border-radius: 999px;
        color: #ffffff;
        display: inline-flex;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        gap: 9px;
        height: 46px;
        justify-content: center;
        min-width: 148px;
        padding: 0 18px 0 24px;
        pointer-events: auto;
      }

      .prompt-mention-library-count {
        color: rgba(255, 255, 255, 0.6);
        font-style: normal;
        font-variant-numeric: tabular-nums;
      }

      .prompt-mention-library-attach:disabled .prompt-mention-library-count {
        color: inherit;
      }

      .prompt-mention-library-attach:hover {
        background: #000000;
      }

      .prompt-mention-library-attach:disabled {
        background: var(--surface-soft);
        color: var(--text-muted);
        opacity: 1;
      }

      .prompt-mention-library-attach span {
        align-items: center;
        background: rgba(255, 255, 255, 0.12);
        border-radius: 6px;
        display: inline-flex;
        font-size: var(--web-type-control);
        height: 22px;
        justify-content: center;
        /* The return glyph's ink rides high in its line box; center it
           optically. */
        line-height: 1;
        padding-top: 2px;
        width: 22px;
      }

      .prompt-mention-card-wrap {
        aspect-ratio: 1;
        min-width: 0;
        position: relative;
      }

      .prompt-mention-upload,
      .prompt-mention-card {
        aspect-ratio: 1;
        background: rgba(24, 24, 27, 0.035);
        border: 0;
        border-radius: 14px;
        color: var(--text-muted);
        cursor: pointer;
        font: inherit;
        min-width: 0;
        overflow: hidden;
        position: relative;
        text-align: left;
        transition-duration: 120ms;
        transition-property: box-shadow, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .prompt-mention-card-wrap > .prompt-mention-card {
        height: 100%;
        width: 100%;
      }

      .prompt-mention-card:not(.is-audio):not(.is-video) {
        background: transparent;
        padding: 0;
      }

      /* An image tile goes transparent so the picture is the tile. A tile with
         no picture to show must not: the rule above outweighs the design
         system's own [data-media-state] background (three classes to one
         attribute), so a loading or missing card lost its surface and read as
         a hole in the grid rather than a tile waiting on media. Restated here,
         scoped to this picker, at a specificity that wins. */
      .prompt-mention-card:not(.is-audio):not(.is-video)[data-media-state="loading"],
      .prompt-mention-card:not(.is-audio):not(.is-video)[data-media-state="missing"] {
        background: rgba(24, 24, 27, 0.035);
      }

      .prompt-mention-upload {
        align-items: center;
        display: flex;
        flex-direction: column;
        font-size: var(--web-type-display);
        font-weight: var(--font-ui-regular);
        gap: 8px;
        justify-content: center;
        transition-duration: 120ms;
        transition-property: background-color, scale;
        transition-timing-function: var(--workspace-ease);
      }

      .prompt-mention-upload:hover {
        background: rgba(24, 24, 27, 0.06);
      }

      .prompt-mention-upload:active,
      .prompt-mention-card:active {
        scale: 0.99;
      }

      .prompt-mention-upload small {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      /* Create/upload tiles use the shared plus SVG without a second
         circular surface inside the already-defined tile. */
      .prompt-mention-upload-icon {
        align-items: center;
        background: transparent;
        color: var(--text-secondary);
        display: inline-flex;
        height: 24px;
        justify-content: center;
        width: 24px;
      }

      .prompt-mention-upload-icon .ui-icon {
        height: 22px;
        stroke-width: 1.8;
        width: 22px;
      }

      .prompt-mention-menu.is-reference-library .prompt-mention-upload {
        gap: 12px;
      }

      .prompt-mention-menu.is-reference-library .prompt-mention-upload small {
        font-size: var(--web-type-body);
      }

      .prompt-mention-card.is-selected {
        box-shadow: none;
      }

      /* Uploading tiles borrow the generating project card's language: a soft
         surface swept by a shimmer with a quiet centered label. */
      .prompt-mention-card-wrap.is-uploading .prompt-mention-card-uploading {
        align-items: center;
        background: var(--surface-soft);
        cursor: default;
        display: flex;
        height: 100%;
        isolation: isolate;
        justify-content: center;
        width: 100%;
      }

      .prompt-mention-card-uploading.is-shimmering::before {
        animation: media-picker-upload-shimmer 1.45s ease-in-out infinite;
        background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, 0.68) 48%, transparent 72%);
        content: "";
        inset: 0;
        position: absolute;
        transform: translateX(-110%);
        z-index: 0;
      }

      .prompt-mention-uploading-label {
        align-items: center;
        color: #96969d;
        display: inline-flex;
        flex-direction: column;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
        gap: 4px;
        line-height: 1;
        position: relative;
        z-index: 1;
      }

      /* Generating borrows the same shimmering surface as uploading — both are
         "not ready yet" — and is told apart by its label and percentage. */
      .prompt-mention-card-wrap.is-generating .prompt-mention-card-uploading {
        align-items: center;
        background: var(--surface-soft);
        cursor: default;
        display: flex;
        height: 100%;
        isolation: isolate;
        justify-content: center;
        width: 100%;
      }

      .prompt-mention-uploading-label strong {
        color: #6f6f77;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
      }

      /* A link reads as a tile like every other card: the page's own image
         fills it and the title states itself in a pill, the way a video
         states its duration. Everything else the read produced waits behind
         the corner chevron rather than growing a body no other card has. */
      /* A link tile is an ordinary .prompt-mention-card now — it already
         supplies the surface, the radius, and the positioning the title pill
         anchors to — so only the page image needs styling of its own. */
      .prompt-mention-weblink-media {
        align-items: center;
        background: #e7e7e4;
        color: var(--workspace-muted);
        display: flex;
        height: 100%;
        justify-content: center;
        overflow: hidden;
        width: 100%;
      }

      .prompt-mention-weblink-media img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      /* Same geometry as .media-video-duration-pill so a link and a video sit
         on the same baseline in a mixed grid. */
      .prompt-mention-card-pill {
        align-items: center;
        backdrop-filter: blur(8px);
        background: rgba(24, 24, 27, 0.56);
        border-radius: 999px;
        bottom: 8px;
        color: #ffffff;
        display: flex;
        font-size: var(--web-type-caption);
        gap: 4px;
        left: 8px;
        line-height: 1;
        max-width: calc(100% - 44px);
        padding: 5px 8px;
        pointer-events: none;
        position: absolute;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
        z-index: 2;
      }

      .prompt-mention-card-pill-icon {
        display: inline-flex;
        flex: none;
      }

      .prompt-mention-card-pill-icon svg {
        height: 11px;
        width: 11px;
      }

      .prompt-mention-card-pill-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* A link's pill is the way to the page itself, so it takes the pointer
         back that the plain readout pill gives up. */
      .prompt-mention-card-pill.is-interactive {
        cursor: pointer;
        pointer-events: auto;
        text-decoration: none;
        transition: background-color 120ms var(--workspace-ease);
      }

      .prompt-mention-card-pill.is-interactive:hover {
        background: rgba(24, 24, 27, 0.82);
      }

      .prompt-mention-card-pill.is-interactive:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 1px;
      }

      /* Failure is the one state that stops rather than waits, so it drops the
         shimmer entirely and shows what went wrong plus a way out. */
      /* Sized once here so the label, reason and actions all inherit it —
         the tile has no business minting new off-scale sizes per element. */
      .prompt-mention-card-failed {
        align-items: center;
        background: rgba(216, 75, 75, 0.07);
        cursor: default;
        display: flex;
        flex-direction: column;
        font-size: var(--web-type-caption);
        gap: 6px;
        height: 100%;
        justify-content: center;
        padding: 10px;
        text-align: center;
        width: 100%;
      }

      .prompt-mention-failed-icon {
        align-items: center;
        color: var(--danger);
        display: inline-flex;
      }

      .prompt-mention-failed-icon .ui-icon {
        height: 17px;
        width: 17px;
      }

      .prompt-mention-failed-copy {
        display: grid;
        gap: 1px;
        min-width: 0;
        width: 100%;
      }

      .prompt-mention-failed-copy strong,
      .prompt-mention-failed-copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .prompt-mention-failed-copy strong {
        color: var(--text-primary);
        font-weight: var(--font-ui-medium);
      }

      .prompt-mention-failed-copy small {
        color: var(--danger);
      }

      .prompt-mention-failed-actions {
        align-items: center;
        display: inline-flex;
        gap: 4px;
      }

      .prompt-mention-failed-actions button {
        align-items: center;
        background: #ffffff;
        border-radius: 999px;
        color: #4a4a4f;
        display: inline-flex;
        font-weight: var(--font-ui-medium);
        gap: 3px;
        height: 24px;
        justify-content: center;
        padding: 0 9px;
      }

      .prompt-mention-failed-actions button:hover {
        color: var(--text-primary);
      }

      .prompt-mention-failed-actions button:last-child {
        padding: 0;
        width: 24px;
      }

      .prompt-mention-failed-actions .ui-icon {
        height: 11px;
        width: 11px;
      }

      @keyframes media-picker-upload-shimmer {
        to {
          transform: translateX(110%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .prompt-mention-card-uploading.is-shimmering::before {
          animation: none;
          opacity: 0;
        }
      }

      .prompt-mention-card-check {
        align-items: center;
        background: rgba(255, 255, 255, 0.92);
        border: 0;
        border-radius: 5px;
        color: #18181b;
        display: flex;
        height: 18px;
        justify-content: center;
        left: 8px;
        pointer-events: none;
        position: absolute;
        top: 8px;
        transition-duration: 120ms;
        transition-property: background-color, color;
        transition-timing-function: var(--workspace-ease);
        width: 18px;
        z-index: 4;
      }

      .prompt-mention-card.is-selected .prompt-mention-card-check {
        background: var(--accent, #ff3850);
        box-shadow: none;
        color: #ffffff;
      }

      /* Library checkboxes stay hidden until the tile is hovered, focused, or
         selected — matching the reference comp. */
      .prompt-mention-menu.is-reference-library .prompt-mention-card-check {
        background: rgba(255, 255, 255, 0.96);
        border: 0;
        border-radius: 6px;
        box-shadow: 0 1px 5px rgba(24, 24, 27, 0.18);
        height: 20px;
        left: 10px;
        opacity: 0;
        top: 10px;
        transition-property: background-color, color, opacity;
        width: 20px;
      }

      .prompt-mention-menu.is-reference-library .prompt-mention-card:hover .prompt-mention-card-check,
      .prompt-mention-menu.is-reference-library .prompt-mention-card:focus-visible .prompt-mention-card-check,
      .prompt-mention-menu.is-reference-library
        .prompt-mention-card.is-selected
        .prompt-mention-card-check {
        opacity: 1;
      }

      .prompt-mention-menu.is-reference-library
        .prompt-mention-card.is-selected
        .prompt-mention-card-check {
        background: var(--accent, #ff3850);
        box-shadow: 0 1px 5px rgba(24, 24, 27, 0.25);
        color: #ffffff;
      }

      .prompt-mention-menu.is-reference-library .prompt-mention-card-check .ui-icon {
        height: 11px;
        width: 11px;
      }

      .prompt-mention-card-check .ui-icon {
        height: 11px;
        stroke-width: 2.5;
        width: 11px;
      }

      .prompt-mention-card img,
      .prompt-mention-card video {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .prompt-mention-card.is-video video {
        object-position: center center;
      }

      .prompt-mention-card-label {
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.48));
        bottom: 0;
        color: #ffffff;
        font-size: var(--web-type-control);
        left: 0;
        overflow: hidden;
        padding: 22px 9px 8px;
        position: absolute;
        right: 0;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .prompt-mention-card-label:empty {
        display: none;
      }

      .prompt-mention-more {
        align-items: center;
        backdrop-filter: blur(8px);
        background: rgba(42, 42, 45, 0.58);
        border: 0;
        border-radius: 999px;
        color: #ffffff;
        display: flex;
        height: 22px;
        justify-content: center;
        opacity: 0;
        padding: 0;
        position: absolute;
        right: 7px;
        top: 7px;
        transition:
          background-color 100ms ease,
          opacity 100ms ease;
        width: 22px;
        z-index: 3;
      }

      .prompt-mention-more:hover {
        background: rgba(24, 24, 27, 0.78);
      }

      .prompt-mention-more .ui-icon {
        color: inherit;
        height: 13px;
        stroke-width: 2;
        width: 13px;
      }

      /* Hover, focus, or an open menu — nothing else. Image cards used to
         carry the button permanently, which put a control over every picture
         in the grid whether or not it was being considered. */
      .prompt-mention-card-wrap:hover > .prompt-mention-more,
      .prompt-mention-card-wrap:focus-within > .prompt-mention-more,
      .prompt-mention-card-wrap.is-menu-open > .prompt-mention-more {
        opacity: 1;
      }

      /* Touch has no hover to reveal it, so there it stays visible. */
      @media (hover: none) {
        .prompt-mention-card-wrap > .prompt-mention-more {
          opacity: 1;
        }
      }

      .prompt-mention-card-menu {
        background: var(--surface);
        border: 1px solid rgba(24, 24, 27, 0.09);
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);
        padding: 4px;
        position: absolute;
        right: 7px;
        top: 36px;
        width: 112px;
        z-index: 4;
      }

      .prompt-mention-card-menu button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 7px;
        color: #c52d3b;
        display: flex;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        gap: 8px;
        min-height: 34px;
        padding: 0 9px;
        text-align: left;
        width: 100%;
      }

      .prompt-mention-card-menu button:hover,
      .prompt-mention-card-menu button:focus-visible {
        background: rgba(197, 45, 59, 0.08);
      }

      .prompt-mention-card-menu .ui-icon {
        color: inherit;
        height: 15px;
        width: 15px;
      }

      .prompt-mention-card.is-audio {
        background: #f7f7f8;
        padding: 0;
        text-align: left;
      }

      /* Single-select pickers (source slot, character, audio) mark the chosen
         card with an ink outline instead of a selection checkbox. */
      .prompt-mention-menu:not(.is-mention-list):not(.is-reference-library) .prompt-mention-card.is-selected {
        outline: 1px solid #000000;
        outline-offset: -1px;
      }

      .prompt-mention-card.is-video {
        display: block;
      }

      .media-audio-preview {
        box-sizing: border-box;
        color: var(--text-primary);
        display: grid;
        gap: 7px;
        grid-template-rows: minmax(0, 1fr) auto auto;
        height: 100%;
        min-height: 0;
        padding: 11px;
        width: 100%;
      }

      .media-audio-preview-waveform {
        align-items: center;
        background: transparent;
        border: 0;
        cursor: pointer;
        display: flex;
        gap: 2.5px;
        justify-content: space-between;
        min-height: 0;
        overflow: hidden;
        padding: 5px 0 3px;
        width: 100%;
      }

      /* Picker tiles select on click, so their waveform is a passive readout:
         the pointer falls through to the card underneath. */
      .media-audio-preview-waveform.is-static {
        cursor: inherit;
        pointer-events: none;
      }

      .media-audio-preview-waveform:focus-visible {
        border-radius: 6px;
        outline: 1px solid rgba(0, 0, 0, 0.22);
        outline-offset: 3px;
      }

      .media-audio-preview-waveform i {
        background: #c2c2c6;
        border-radius: 999px;
        display: block;
        flex: 1 1 0;
        max-width: 2px;
        min-height: 2px;
        min-width: 1px;
        transition: background-color 100ms var(--workspace-ease);
      }

      .media-audio-preview-waveform i.is-played {
        background: #ff3b30;
      }

      /* The bar the playhead is crossing fills by fraction, so the red edge
         advances continuously instead of snapping one whole bar at a time.
         The color transition is dropped here: it would smear an edge that is
         already animated frame by frame. */
      .media-audio-preview-waveform i.is-playing-edge {
        background-color: #ff3b30;
        background-image: linear-gradient(
          90deg,
          transparent var(--bar-fill, 0%),
          #c2c2c6 var(--bar-fill, 0%)
        );
        transition: none;
      }

      .media-audio-preview-title {
        display: block;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-regular);
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Picker videos are passive animated thumbnails: full-bleed, looping,
         and labeled only with their duration. */
      .media-video-preview {
        box-sizing: border-box;
        color: #ffffff;
        display: block;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        position: relative;
        width: 100%;
      }

      .media-video-frame {
        display: block;
        inset: 0;
        overflow: hidden;
        position: absolute;
      }

      .media-video-frame video,
      .media-video-loop {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      /* The gif carries the loop; the master sits behind it, unloaded, until
         the sound toggle asks for it and the card swaps which one is shown. */
      .media-video-loop {
        inset: 0;
        position: absolute;
        z-index: 1;
      }

      .prompt-mention-card-wrap.is-tile-video-live .media-video-loop {
        opacity: 0;
      }

      .prompt-mention-card-wrap.is-tile-video-live .media-video-frame video {
        position: relative;
        z-index: 2;
      }

      .media-video-duration-pill {
        backdrop-filter: blur(8px);
        background: rgba(24, 24, 27, 0.56);
        border-radius: 999px;
        bottom: 8px;
        color: #ffffff;
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        left: 8px;
        line-height: 1;
        padding: 5px 7px;
        pointer-events: none;
        position: absolute;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
        z-index: 2;
      }

      /* Idle audio cards show only the total duration; playback reveals the
         live current/total readout. The lipsync memo always shows both. */
      .media-audio-preview:not(.is-playing):not(.lipsync-voice-memo) .media-audio-preview-time time:first-child,
      .media-audio-preview:not(.is-playing):not(.lipsync-voice-memo) .media-audio-preview-time > span {
        display: none;
      }

      .media-audio-preview-time time:first-child {
        color: #8f8f94;
      }

      .media-audio-preview-controls {
        align-items: center;
        display: flex;
        gap: 7px;
        min-width: 0;
      }

      .media-audio-preview-toggle {
        align-items: center;
        background: #d8d8da;
        border: 0;
        border-radius: 999px;
        color: #ffffff;
        display: inline-flex;
        flex: 0 0 auto;
        height: 28px;
        justify-content: center;
        padding: 0;
        position: relative;
        scale: 1;
        transition-duration: 100ms;
        transition-property: background-color, scale;
        transition-timing-function: var(--workspace-ease);
        width: 28px;
      }

      .media-audio-preview-toggle::after {
        content: "";
        height: 40px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
      }

      .media-audio-preview-toggle:hover,
      .media-audio-preview-toggle:focus-visible,
      .media-audio-preview-toggle.is-playing {
        background: #c8c8cb;
      }

      .media-audio-preview-toggle:active {
        scale: 0.96;
      }

      .media-audio-preview-toggle.is-unavailable {
        cursor: not-allowed;
        opacity: 0.5;
      }

      /* A clip that is still buffering shows no transport at all: the button
         holds its seat so the readout beside it never shifts, but a play
         glyph only appears once the clip can start on the first click. */
      .media-audio-preview-toggle.is-pending {
        pointer-events: none;
        visibility: hidden;
      }

      .media-audio-preview-toggle .ui-icon {
        height: 11px;
        stroke-width: 2.4;
        width: 11px;
      }

      /* The play glyph is a hard-cornered triangle; a hairline stroke on the
         same fill color softens its points without changing its weight. */
      .media-audio-preview-toggle .ui-icon path {
        paint-order: stroke fill;
        stroke: currentColor;
        stroke-linejoin: round;
        stroke-width: 1.1;
      }

      /* The play glyph's path sits right of its viewBox center (bbox x 8-19 in
         a 24 grid), so an unadjusted icon renders with a wider left gap. Pull
         it back so the triangle sits equidistant inside the circle. */
      .media-audio-preview-toggle:not(.is-playing):not(.media-audio-corner-toggle) .ui-icon {
        transform: translateX(-0.7px);
      }

      /* Single-select audio tiles expose playback as a speaker toggle pinned
         to the tile's top-right corner; the tile itself stays the selection
         target. */
      .media-audio-corner-toggle {
        position: absolute;
        right: 8px;
        top: 8px;
        z-index: 2;
      }

      .media-audio-preview.is-corner-mode .media-audio-preview-controls {
        min-height: 24px;
      }

      .media-audio-corner-toggle.is-playing {
        background: #18181b;
      }

      .media-audio-preview-time {
        color: #c7c7ca;
        display: inline-flex;
        flex: 1 1 auto;
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
        min-width: 0;
        white-space: nowrap;
      }

      /* Reference-library audio tiles use the waveform as a scrubber: the
         listened portion fills progressively instead of recoloring every bar. */
      .prompt-mention-menu.is-reference-library .media-audio-preview {
        gap: 8px;
        padding: 14px;
      }

      .prompt-mention-menu.is-reference-library .media-audio-preview-waveform {
        padding: 14px 2px 8px;
      }

      .prompt-mention-menu.is-reference-library .media-audio-preview-waveform i {
        background: #a9a9ae;
      }

      .prompt-mention-menu.is-reference-library .media-audio-preview-waveform i.is-played {
        background: var(--accent, #ff3850);
      }

      .prompt-mention-menu.is-reference-library .media-audio-preview-waveform i.is-playing-edge {
        background-color: var(--accent, #ff3850);
        background-image: linear-gradient(
          90deg,
          transparent var(--bar-fill, 0%),
          #a9a9ae var(--bar-fill, 0%)
        );
      }

      /* Regular cut: weights >=500 load the bold woff2, which reads as a
         different face on the tile. */
      .prompt-mention-menu.is-reference-library .media-audio-preview-title {
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
      }

      /* A quiet control, not an ink dot: soft wash with a muted glyph,
         darkening only while active. */
      .prompt-mention-menu.is-reference-library .media-audio-preview-toggle {
        background: rgba(24, 24, 27, 0.07);
        color: var(--text-secondary);
        height: 20px;
        width: 20px;
      }

      .prompt-mention-menu.is-reference-library .media-audio-preview-toggle:hover,
      .prompt-mention-menu.is-reference-library .media-audio-preview-toggle:focus-visible {
        background: rgba(24, 24, 27, 0.12);
        color: var(--text-primary);
      }

      .prompt-mention-menu.is-reference-library .media-audio-preview-toggle.is-playing {
        background: #18181b;
        color: #ffffff;
      }

      .prompt-mention-menu.is-reference-library .media-audio-preview-toggle .ui-icon {
        height: 8px;
        width: 8px;
      }

      .prompt-mention-menu.is-reference-library .media-audio-preview-time {
        color: var(--text-muted);
      }

      .prompt-mention-menu.is-reference-library
        .media-audio-preview:not(.is-playing)
        .media-audio-preview-time
        [data-inline-audio-current],
      .prompt-mention-menu.is-reference-library
        .media-audio-preview:not(.is-playing)
        .media-audio-preview-time
        > span[aria-hidden] {
        display: none;
      }

      .prompt-mention-menu.is-mention-list .prompt-mention-tabs {
        min-height: 42px;
        overflow-x: auto;
        padding: 0 6px;
        scrollbar-width: none;
      }

      .prompt-mention-menu.is-mention-list .prompt-mention-tabs::-webkit-scrollbar {
        display: none;
      }

      .prompt-mention-menu.is-mention-list .prompt-mention-tabs button {
        font-size: var(--web-type-control);
        gap: 5px;
        min-width: 68px;
        padding: 0 6px;
      }

      .prompt-mention-menu.is-mention-list .prompt-mention-grid {
        display: flex;
        flex-direction: column;
        gap: 2px;
        grid-template-columns: none;
        grid-template-rows: none;
        height: auto;
        max-height: min(384px, calc(100dvh - 96px));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px;
        scrollbar-width: none;
      }

      .prompt-mention-menu.is-mention-list .prompt-mention-card-wrap {
        aspect-ratio: auto;
        flex: 0 0 60px;
        height: 60px;
      }

      .prompt-mention-menu.is-mention-list .prompt-mention-card,
      .prompt-mention-menu.is-mention-list .prompt-mention-card.is-audio,
      .prompt-mention-menu.is-mention-list .prompt-mention-card.is-video,
      .prompt-mention-menu.is-mention-list .prompt-mention-card:not(.is-audio) {
        align-items: center;
        aspect-ratio: auto;
        background: transparent;
        border-radius: 10px;
        display: grid;
        gap: 10px;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: none;
        padding: 6px;
        text-align: left;
        transition-property: background-color, scale;
      }

      .prompt-mention-menu.is-mention-list .prompt-mention-card:hover,
      .prompt-mention-menu.is-mention-list .prompt-mention-card:focus-visible,
      .prompt-mention-menu.is-mention-list
        .prompt-mention-card[aria-selected="true"] {
        background: rgba(24, 24, 27, 0.055);
        outline: 0;
      }

      .prompt-mention-menu.is-mention-list .prompt-mention-card > img {
        background: rgba(24, 24, 27, 0.04);
        border-radius: 8px;
        grid-column: 1;
        height: 48px;
        overflow: hidden;
        width: 48px;
      }

      /* A row, not a banner. Left as display: block the preview took the full
         width of the popover and the row collapsed to the height of a letterbox
         — the same two-column card an audio row uses is what this needs: a
         square thumbnail, the name against the top of it, the duration under
         that. */
      .prompt-mention-menu.is-mention-list .prompt-mention-card.is-video {
        column-gap: 10px;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: 24px 24px;
        padding: 6px;
      }

      /* The preview wrapper steps out of the way so the frame and the duration
         land in the row's own grid rather than stacking inside it. */
      .prompt-mention-menu.is-mention-list
        .prompt-mention-card.is-video
        .media-video-preview {
        display: contents;
      }

      .prompt-mention-menu.is-mention-list .media-video-preview {
        border-radius: 8px;
      }

      .prompt-mention-menu.is-mention-list .media-video-frame {
        background: rgba(24, 24, 27, 0.04);
      }

      .prompt-mention-menu.is-mention-list
        .prompt-mention-card.is-video
        .media-video-frame {
        aspect-ratio: 1;
        border-radius: 8px;
        grid-column: 1;
        grid-row: 1 / 3;
        height: 48px;
        inset: auto;
        position: relative;
        width: 48px;
      }

      .prompt-mention-menu.is-mention-list
        .prompt-mention-card.is-video
        .prompt-mention-card-label {
        align-self: end;
        grid-column: 2;
        grid-row: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* In a row the duration is the subtitle, so it drops the floating chip
         treatment it wears over a tile. */
      .prompt-mention-menu.is-mention-list
        .prompt-mention-card.is-video
        .media-video-duration-pill {
        align-self: start;
        backdrop-filter: none;
        background: transparent;
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        grid-column: 2;
        grid-row: 2;
        inset: auto;
        padding: 0;
        position: static;
        text-shadow: none;
      }

      /* One label voice for every row: the body size on the regular cut
         (>=500 loads the bold woff2, which reads as a different face). */
      .prompt-mention-menu.is-mention-list .prompt-mention-card-label {
        background: transparent;
        color: var(--text-primary);
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
        grid-column: 2;
        padding: 0;
        position: static;
      }

      .prompt-mention-menu.is-mention-list .prompt-mention-card.is-audio {
        display: block;
        padding: 6px;
      }

      /* Audio rows read exactly like image rows: one 48px tile and one
         label on a single line, playback tucked in as quiet meta at the
         row's end. */
      .prompt-mention-menu.is-mention-list .media-audio-preview {
        align-items: center;
        column-gap: 10px;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-rows: none;
        padding: 0;
      }

      .prompt-mention-menu.is-mention-list .media-audio-preview-waveform {
        background: rgba(24, 24, 27, 0.04);
        border-radius: 8px;
        grid-column: 1;
        grid-row: 1;
        height: 48px;
        padding: 9px 7px;
      }

      /* The list's waveform is a static thumbnail, not a scrubber — a
         played-red readout is noise here. */
      .prompt-mention-menu.is-mention-list .media-audio-preview-waveform i,
      .prompt-mention-menu.is-mention-list .media-audio-preview-waveform i.is-played {
        background: #c2c2c6;
      }

      .prompt-mention-menu.is-mention-list .media-audio-preview-title {
        align-self: center;
        font-size: var(--web-type-body);
        grid-column: 2;
        grid-row: 1;
      }

      .prompt-mention-menu.is-mention-list .media-audio-preview-controls {
        align-self: center;
        grid-column: 3;
        grid-row: 1;
        padding-right: 4px;
      }

      .prompt-mention-menu.is-mention-list .media-audio-preview-toggle {
        height: 20px;
        width: 20px;
      }

      .prompt-mention-menu.is-mention-list .media-audio-preview-toggle .ui-icon {
        height: 10px;
        width: 10px;
      }

      .prompt-mention-menu.is-mention-list .media-audio-preview-time {
        font-size: var(--web-type-caption);
      }

      .prompt-mention-empty {
        align-self: center;
        color: var(--text-muted);
        font-size: var(--web-type-control);
        grid-column: 1 / -1;
        margin: 0;
        padding: 28px 14px;
        text-align: center;
      }

      .prompt-mention-empty-attach {
        background: rgba(0, 0, 0, 0.03);
        border-radius: var(--radius-pill);
        color: #626267;
        display: block;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        height: 30px;
        margin: 12px auto 0;
        padding: 0 16px;
      }

      .prompt-mention-empty-attach:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #4a4a50;
      }

      @media (max-width: 900px) {
        .prompt-mention-menu.is-reference-library {
          height: min(620px, calc(100dvh - 48px));
          width: calc(100vw - 32px);
        }

        .prompt-mention-menu.is-reference-library .prompt-mention-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }

      @media (max-width: 560px) {
        .prompt-mention-menu.is-character-library {
          width: calc(100vw - 20px);
        }

        .prompt-mention-menu.is-character-library .prompt-mention-grid {
          height: min(540px, calc(100dvh - 96px));
          padding: 14px;
        }

        .prompt-mention-character-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .prompt-mention-menu.is-reference-library {
          border-radius: 20px;
          height: calc(100dvh - 32px);
        }

        .prompt-mention-library-header {
          min-height: 52px;
          padding: 0 10px;
        }

        /* Five tabs will not fit a phone width, so the row scrolls sideways
           rather than wrapping and breaking the underline off the divider. */
        .prompt-mention-menu.is-reference-library .prompt-mention-tabs {
          overflow-x: auto;
          scrollbar-width: none;
        }

        .prompt-mention-menu.is-reference-library .prompt-mention-tabs::-webkit-scrollbar {
          display: none;
        }

        .prompt-mention-menu.is-reference-library .prompt-mention-tabs button {
          font-size: var(--web-type-control);
          padding: 0 10px;
        }

        .prompt-mention-menu.is-reference-library .prompt-mention-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          height: calc(100% - 52px);
          padding: 12px;
          padding-bottom: 86px;
        }
      }

      @media (max-width: 520px) {
        .prompt-mention-tabs {
          padding: 0 7px;
        }

        .prompt-mention-tabs button {
          font-size: var(--web-type-control);
          gap: 5px;
          padding: 0 3px;
        }

        .prompt-mention-grid {
          gap: 8px;
          height: 280px;
          padding: 12px;
        }
      }

      /* Gallery detail uses the same compact player transport as the studio
         viewer, without a second thumbnail timeline. */
      body.project-active .history-project-view {
        height: calc(100vh - var(--workspace-nav-height));
        height: calc(100dvh - var(--workspace-nav-height));
        padding-top: 0;
      }

      body.project-active .history-project-view .project-canvas,
      body.project-active .history-project-view .project-canvas[data-aspect="portrait"] {
        column-gap: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 80px;
      }

      body.project-active .history-project-view .project-media-area,
      body.project-active .history-project-view .project-canvas[data-aspect="portrait"] .project-media-area {
        align-items: flex-start;
        grid-column: 1;
        grid-row: 1;
        padding: 36px 0 12px;
      }

      body.project-active .history-project-view .project-stage > video {
        cursor: pointer;
      }

      body.project-active .history-project-view .project-stage > video:focus-visible {
        box-shadow: 0 0 0 3px var(--focus);
        outline: 0;
      }

      body.project-active .history-project-view .player-transport,
      body.project-active .history-project-view .project-canvas[data-aspect="portrait"] .player-transport {
        align-self: stretch;
        display: grid;
        gap: 8px;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 24px 48px;
        margin: 0;
        min-width: 0;
        padding: 0;
        padding-left: 0;
      }

      body.project-active .history-project-view .player-transport > .transport-seek {
        grid-row: 1;
      }

      body.project-active .history-project-view .player-transport > .transport-controls {
        grid-row: 2;
      }

      .history-project-view .transport-speed {
        align-items: center;
        background: var(--surface-soft);
        border-radius: var(--workspace-pill-radius);
        color: var(--text-secondary);
        display: inline-flex;
        margin-left: auto;
        min-height: 30px;
        padding: 0 4px;
        position: relative;
      }

      .history-project-view .transport-end-controls {
        align-items: center;
        display: flex;
        gap: 5px;
        justify-self: end;
        min-width: 0;
      }

      .history-project-view .transport-end-controls .transport-speed {
        margin-left: 0;
      }

      .history-project-view .transport-end-controls .transport-fullscreen {
        flex: 0 0 34px;
      }

      .history-project-view .transport-speed > button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: var(--workspace-pill-radius);
        color: var(--text-primary);
        cursor: pointer;
        display: inline-flex;
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        font-weight: var(--font-ui-medium);
        gap: 5px;
        justify-content: center;
        min-height: 24px;
        outline: 0;
        padding: 0 5px;
      }

      .history-project-view .transport-speed > button:hover,
      .history-project-view .transport-speed > button[aria-expanded="true"] {
        background: rgba(24, 24, 27, 0.055);
      }

      .history-project-view .transport-speed > button:focus-visible {
        box-shadow: 0 0 0 2px var(--focus);
      }

      .history-project-view .transport-speed > button .ui-icon {
        height: 11px;
        transition: rotate 100ms var(--workspace-ease);
        stroke-width: 1.35;
        width: 11px;
      }

      .history-project-view .transport-speed > button[aria-expanded="true"] .ui-icon {
        rotate: 180deg;
      }

      .history-project-view .transport-speed-menu {
        animation: transport-speed-menu-up 100ms cubic-bezier(0.2, 0.8, 0.2, 1);
        background: #ffffff;
        border: 1px solid rgba(24, 24, 27, 0.09);
        border-radius: 10px;
        bottom: calc(100% + 6px);
        box-shadow: 0 14px 28px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.08);
        display: grid;
        gap: 2px;
        min-width: 92px;
        padding: 4px;
        position: absolute;
        right: 0;
        transform-origin: bottom right;
        z-index: 30;
      }

      @keyframes transport-speed-menu-up {
        from {
          opacity: 0;
          transform: translateY(3px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .history-project-view .transport-speed-menu > button {
        background: transparent;
        border: 0;
        border-radius: 7px;
        color: #55555a;
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        font-weight: var(--font-ui-regular);
        min-height: 30px;
        padding: 0 9px;
        text-align: left;
        width: 100%;
      }

      .history-project-view .transport-speed-menu > button:hover,
      .history-project-view .transport-speed-menu > button:focus-visible,
      .history-project-view .transport-speed-menu > button[aria-selected="true"] {
        background: #f1f1ef;
        color: #18181b;
        outline: 0;
      }

      @media (max-width: 960px) {
        body.history-shell {
          height: auto;
          overflow-y: auto;
        }

        body.project-active .history-project-view {
          height: auto;
          min-height: calc(100dvh - var(--workspace-nav-height));
          overflow: visible;
        }

        body.project-active .history-project-view .project-layout {
          display: flex;
          flex-direction: column;
          height: auto;
          min-height: calc(100dvh - var(--workspace-nav-height));
          overflow: visible;
          padding: 10px;
        }

        body.project-active .history-project-view .project-canvas {
          flex: 0 0 auto;
          min-height: min(720px, calc(100dvh - var(--workspace-nav-height) - 20px));
          width: 100%;
        }

        body.project-active .history-project-view .project-inspector {
          height: auto;
          min-height: 620px;
          width: 100%;
        }
      }

      @media (max-width: 760px) {
        /* Phone layout: the media sits at the top at its own aspect ratio and
           the inspector card follows immediately — no forced viewport-height
           stage or 620px inspector floor, which left the media floating in a
           sea of empty page. */
        body.project-active .history-project-view .project-layout {
          gap: 16px;
          min-height: 0;
          padding: 4px 16px 24px;
        }

        body.project-active .history-project-view .project-canvas,
        body.project-active .history-project-view .project-canvas[data-aspect="portrait"] {
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: auto;
          min-height: 0;
        }

        body.project-active .history-project-view .project-canvas[data-media-type="video"] {
          grid-template-rows: auto 80px;
        }

        body.project-active .history-project-view .project-canvas[data-media-type="video"].is-generating {
          grid-template-rows: auto;
        }

        body.project-active .history-project-view .project-media-area {
          padding: 40px 0 0;
        }

        body.project-active .history-project-view .project-stage,
        body.project-active .history-project-view .project-stage[data-aspect="landscape"] {
          max-height: none;
          max-width: 100%;
          transform: none;
          width: 100%;
        }

        body.project-active .history-project-view .project-stage[data-aspect="portrait"],
        body.project-active .history-project-view .project-stage[data-aspect="square"] {
          height: auto;
          max-height: min(62vh, 520px);
          transform: none;
          width: auto;
        }

        body.project-active .history-project-view .project-inspector {
          min-height: 0;
        }

        body.project-active .transport-volume {
          padding-right: 7px;
          width: 98px;
        }
      }

      /* The tool menu uses the same compact, editorial list language as the
         global Generate menu: photography first, then direct copy. */
      .brief-tool-selector .workspace-canvas-tool {
        gap: 11px;
        justify-content: flex-start;
        width: max-content;
      }

      .brief-tool-selector .workspace-canvas-tool .selected-preset-media {
        display: none;
      }

      .brief-tool-selector .tool-picker {
        background: #ffffff;
        border: 0;
        border-radius: 20px;
        box-shadow:
          0 20px 55px rgba(24, 24, 27, 0.1),
          0 3px 12px rgba(24, 24, 27, 0.05);
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
        scrollbar-width: none;
        width: min(344px, calc(100vw - 32px));
      }

      .brief-tool-selector .tool-picker-option {
        align-items: center;
        background: transparent;
        border-radius: 10px;
        gap: 12px;
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 58px;
        padding: 4px;
      }

      .brief-tool-selector .tool-picker-option:hover,
      .brief-tool-selector .tool-picker-option:focus-visible {
        background: #f7f7f8;
        box-shadow: none;
        outline: 0;
      }

      /* Product icons carry their own rounded-square artwork, so the tile is a
         transparent square that lets the icon show at full bleed. */
      .brief-tool-selector .tool-picker-media {
        aspect-ratio: 1;
        background: transparent;
        border-radius: 10px;
        box-shadow: none;
        height: 46px;
        width: 46px;
      }

      .brief-tool-selector .tool-picker-media img {
        height: 100%;
        object-fit: contain;
        transform: none;
        width: 100%;
      }

      .brief-tool-selector .tool-picker-option > .tool-picker-copy {
        gap: 3px;
      }

      .brief-tool-selector .tool-picker-copy strong {
        font-size: var(--web-type-label);
        line-height: 1.25;
      }

      .brief-tool-selector .tool-picker-copy small {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: #96969c;
        display: -webkit-box;
        font-size: var(--web-type-control);
        line-height: 1.35;
        overflow: hidden;
      }

      /* Avatar library and prompt creation share one modal shell. */
      #avatar-modal .avatar-dialog {
        height: min(700px, calc(100dvh - 40px));
        max-height: calc(100dvh - 40px);
        width: min(880px, calc(100vw - 40px));
      }

      #avatar-modal .avatar-library-view {
        height: 100%;
        max-height: none;
        padding: 28px 30px 34px;
      }

      #avatar-modal .avatar-library-header h2 {
        font-size: var(--web-type-heading);
        line-height: 1.2;
      }

      #avatar-modal .avatar-template-header h3 {
        font-size: var(--web-type-title);
        line-height: 1.25;
      }

      #avatar-modal .avatar-library-header p {
        font-size: var(--web-type-body);
        margin-top: 5px;
      }

      #avatar-modal .avatar-template-header p {
        font-size: var(--web-type-body);
        margin-top: 4px;
      }

      /* Owned avatars wrap as a grid matching the template grid below; the
         modal body scrolls vertically instead of the row panning sideways. */
      #avatar-modal .avatar-owned-row {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
        margin-top: 20px;
        min-height: 0;
        overflow-x: visible;
      }

      #avatar-modal .avatar-owned-row .avatar-create-card,
      #avatar-modal .avatar-owned-row .avatar-card {
        aspect-ratio: 4 / 5;
        border-radius: 14px;
        height: auto;
        min-width: 0;
        width: 100%;
      }

      /* Soft fill + hand-drawn dash rhythm (12px dashes, 6px gaps) that
         follows the rounded corners — border-style: dashed can't tune dash
         length, so the outline is an inline-SVG background layer. */
      #avatar-modal .avatar-owned-row .avatar-create-card {
        background-color: #f7f7f8;
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='14' ry='14' stroke='%2318181b' stroke-opacity='0.24' stroke-width='2' stroke-dasharray='12%2c 6' stroke-linecap='butt'/%3e%3c/svg%3e");
        border: 0;
      }

      #avatar-modal .avatar-owned-row .avatar-create-card:hover {
        background-color: #f2f2f3;
      }

      #avatar-modal .avatar-owned-row .avatar-create-card-icon {
        border-radius: 50%;
        height: 42px;
        width: 42px;
      }

      #avatar-modal .avatar-owned-row .avatar-create-card strong {
        font-size: var(--web-type-label);
      }

      #avatar-modal .avatar-template-section {
        margin-top: 32px;
      }

      #avatar-modal .avatar-template-header {
        margin-top: 0;
      }

      #avatar-modal .avatar-template-grid {
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
        margin-top: 16px;
      }

      #avatar-modal .avatar-template-card {
        aspect-ratio: 4 / 5;
        border-radius: 12px;
      }

      #avatar-modal .avatar-template-use {
        background: rgba(255, 255, 255, 0.94);
        border-radius: var(--workspace-pill-radius);
        bottom: 8px;
        color: #242428;
        font-size: var(--web-type-caption);
        left: 8px;
        opacity: 0;
        padding: 7px 10px;
        position: absolute;
        right: 8px;
        transition: opacity 100ms var(--workspace-ease);
      }

      #avatar-modal .avatar-template-card:hover .avatar-template-use,
      #avatar-modal .avatar-template-card:focus-visible .avatar-template-use {
        opacity: 1;
      }

      #avatar-modal.is-creating .avatar-dialog {
        height: min(620px, calc(100dvh - 40px));
        width: min(780px, calc(100vw - 40px));
      }

      #avatar-modal .avatar-create {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }

      #avatar-modal .avatar-create-fields {
        gap: 12px;
        padding: 34px 30px 28px;
      }

      #avatar-modal .avatar-create-header {
        margin-bottom: 4px;
      }

      #avatar-modal .avatar-create-header h2 {
        font-size: var(--web-type-title);
      }

      #avatar-modal .avatar-drop {
        min-height: 66px;
      }

      #avatar-modal .avatar-prompt textarea {
        font-size: var(--web-type-label);
        min-height: 210px;
      }

      #avatar-modal .avatar-name input {
        font-size: var(--web-type-label);
        height: 46px;
      }

      #avatar-modal .avatar-create-generate {
        font-size: var(--web-type-control);
        gap: 8px;
        height: 44px;
      }

      #avatar-modal .avatar-create-generate > span:last-child {
        position: static;
      }

      #avatar-modal .avatar-create-output {
        overflow: hidden;
        position: relative;
      }

      #avatar-modal .avatar-generated-preview {
        border-radius: 20px;
        box-shadow: 0 18px 44px rgba(24, 24, 27, 0.12);
        max-height: 72%;
        max-width: 72%;
        object-fit: cover;
      }

      #avatar-modal .avatar-generated-preview[hidden] {
        display: none;
      }

      #avatar-modal .avatar-create.is-generating .avatar-create-output::after {
        animation: avatar-output-shimmer 1.8s linear infinite;
        background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.56) 48%, transparent 62%);
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
        transform: translateX(-100%);
      }

      #avatar-modal .avatar-generating-pill {
        position: absolute;
        z-index: 2;
      }

      @keyframes avatar-output-shimmer {
        to { transform: translateX(100%); }
      }

      @media (max-width: 760px) {
        .brief-tool-selector .tool-picker {
          gap: 8px;
          padding: 10px;
        }

        .brief-tool-selector .tool-picker-option {
          gap: 11px;
          grid-template-columns: 42px minmax(0, 1fr);
          min-height: 54px;
        }

        .brief-tool-selector .tool-picker-media {
          height: 42px;
          width: 42px;
        }

        .brief-tool-selector .tool-picker-copy strong { font-size: var(--web-type-label); }
        .brief-tool-selector .tool-picker-copy small { font-size: var(--web-type-control); }

        #avatar-modal .avatar-dialog,
        #avatar-modal.is-creating .avatar-dialog {
          height: calc(100dvh - 20px);
          width: calc(100vw - 20px);
        }

        #avatar-modal .avatar-library-view {
          padding: 26px 18px 32px;
        }

        #avatar-modal .avatar-library-header h2 { font-size: var(--web-type-title); }
        #avatar-modal .avatar-template-header h3 { font-size: var(--web-type-title); }
        #avatar-modal .avatar-library-header p,
        #avatar-modal .avatar-template-header p { font-size: var(--web-type-body); }

        #avatar-modal .avatar-owned-row {
          grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        }

        #avatar-modal .avatar-template-header {
          align-items: start;
          gap: 16px;
        }

        #avatar-modal .avatar-template-grid {
          grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        }

        #avatar-modal .avatar-create {
          display: block;
          overflow-y: auto;
        }

        #avatar-modal .avatar-create-fields {
          min-height: 610px;
          padding: 28px 20px 24px;
        }

        #avatar-modal .avatar-create-output {
          min-height: 420px;
        }
      }

      /* Create-avatar flow: a quiet two-pane method picker with a live
         preview, matching the visual hierarchy of the supplied reference. */
      #avatar-modal.is-creating .avatar-dialog {
        height: calc(100dvh - 48px);
        width: min(900px, calc(100vw - 48px));
      }

      #avatar-modal.is-creating .avatar-dialog-close {
        background: rgba(255, 255, 255, 0.46);
        height: 34px;
        right: 14px;
        top: 14px;
        width: 34px;
        z-index: 5;
      }

      #avatar-modal.is-creating .avatar-create {
        grid-template-columns: minmax(0, 51%) minmax(0, 49%);
      }

      #avatar-modal.is-creating .avatar-create-fields {
        background: #ffffff;
        border-right: 1px solid rgba(24, 24, 27, 0.055);
        gap: 16px;
        overflow-y: auto;
        padding: 28px 28px 24px;
        scrollbar-width: none;
      }

      #avatar-modal.is-creating .avatar-create-fields::-webkit-scrollbar {
        display: none;
      }

      #avatar-modal.is-creating .avatar-create-header {
        align-items: center;
        gap: 8px;
        margin: 0 0 6px;
        min-height: 40px;
        padding-right: 0;
      }

      #avatar-modal.is-creating .avatar-create-header h2 {
        color: #222226;
        /* Matches the character-library header size next door. */
        font-size: var(--web-type-heading);
        font-weight: var(--font-ui-medium);
        letter-spacing: -0.02em;
      }

      #avatar-modal.is-creating .avatar-create-header .avatar-create-back {
        display: none;
      }

      #avatar-modal.is-creating .avatar-name {
        display: grid;
        gap: 7px;
      }

      #avatar-modal.is-creating .avatar-name > span,
      #avatar-modal.is-creating .avatar-method-label {
        color: #3d3d42;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
      }

      #avatar-modal.is-creating .avatar-name input {
        background: #f6f6f7;
        border-radius: 12px;
        color: #26262a;
        font-size: var(--web-type-control);
        height: 44px;
        padding: 0 14px;
      }

      #avatar-modal.is-creating .avatar-name input::placeholder,
      #avatar-modal.is-creating .avatar-prompt textarea::placeholder {
        color: #aaaab0;
      }

      #avatar-modal.is-creating .avatar-method-label {
        margin: 8px 0 0;
      }

      #avatar-modal.is-creating .avatar-method-card {
        background: #f6f6f7;
        border: 1px solid transparent;
        border-radius: 14px;
        display: grid;
        gap: 14px;
        padding: 16px;
        transition:
          background-color 120ms var(--workspace-ease),
          border-color 120ms var(--workspace-ease),
          box-shadow 120ms var(--workspace-ease),
          opacity 140ms var(--workspace-ease);
      }

      #avatar-modal.is-creating .avatar-method-card.is-selected {
        background: #f8f8f9;
        border-color: rgba(24, 24, 27, 0.16);
        box-shadow: 0 4px 14px rgba(24, 24, 27, 0.055);
      }

      /* Once a method is chosen the other card recedes; hovering or
         focusing it restores full strength so switching stays easy. */
      #avatar-modal.is-creating .avatar-create[data-create-method="upload"] .avatar-method-card:not(.is-selected),
      #avatar-modal.is-creating .avatar-create[data-create-method="prompt"] .avatar-method-card:not(.is-selected) {
        opacity: 0.45;
      }

      #avatar-modal.is-creating .avatar-create[data-create-method="upload"] .avatar-method-card:not(.is-selected):hover,
      #avatar-modal.is-creating .avatar-create[data-create-method="prompt"] .avatar-method-card:not(.is-selected):hover,
      #avatar-modal.is-creating .avatar-create[data-create-method="upload"] .avatar-method-card:not(.is-selected):focus-within,
      #avatar-modal.is-creating .avatar-create[data-create-method="prompt"] .avatar-method-card:not(.is-selected):focus-within {
        opacity: 1;
      }

      #avatar-modal.is-creating .avatar-method-header {
        align-items: center;
        display: grid;
        gap: 12px;
        grid-template-columns: 32px minmax(0, 1fr) auto;
      }

      #avatar-modal.is-creating .avatar-method-header > span:nth-child(2) {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      #avatar-modal.is-creating .avatar-method-header strong {
        color: #303034;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
      }

      #avatar-modal.is-creating .avatar-method-header small {
        color: #9a9aa1;
        font-size: var(--web-type-control);
        line-height: 1.25;
      }

      #avatar-modal.is-creating .avatar-method-icon {
        align-items: center;
        background: #e9e9eb;
        border-radius: 9px;
        color: var(--icon-secondary);
        display: inline-flex;
        font-size: var(--web-type-caption);
        height: 32px;
        justify-content: center;
        width: 32px;
      }

      #avatar-modal.is-creating .avatar-method-icon .ui-icon {
        height: 15px;
        width: 15px;
      }

      #avatar-modal.is-creating .avatar-method-icon.is-ai {
        font-weight: var(--font-ui-medium);
      }

      #avatar-modal.is-creating .avatar-method-badge {
        align-items: center;
        background: #36363a;
        border-radius: 6px;
        color: #ffffff;
        display: inline-flex;
        font-size: var(--web-type-caption);
        /* Regular cut on purpose: 500+ swaps in the display-bold woff2,
           which reads as a foreign font at caption size. Tracking gives
           the uppercase chip its weight instead. */
        font-weight: var(--font-ui-regular);
        gap: 3px;
        height: 23px;
        letter-spacing: 0.04em;
        padding: 0 8px;
        text-transform: uppercase;
      }

      #avatar-modal.is-creating .avatar-method-badge.is-free {
        background: #e9e9eb;
        color: #58585e;
      }

      #avatar-modal.is-creating .avatar-method-badge .ui-icon {
        height: 9px;
        width: 9px;
      }

      /* Voice picker row: a distinct preview player beside the shared
         dropdown trigger and its provider-backed option surface. */
      .avatar-voice-row {
        align-items: center;
        background: #f6f6f7;
        border-radius: 16px;
        display: grid;
        gap: 12px;
        grid-template-columns: 44px minmax(0, 1fr);
        min-height: 68px;
        padding: 12px 14px 12px 12px;
      }

      .avatar-voice-play {
        align-items: center;
        background: #e9e9eb;
        border: 0;
        border-radius: 12px;
        color: var(--icon-secondary);
        display: inline-flex;
        height: 44px;
        justify-content: center;
        transition:
          background-color 100ms var(--workspace-ease),
          color 100ms var(--workspace-ease),
          scale 100ms var(--workspace-ease);
        width: 44px;
      }

      .avatar-voice-play:hover,
      .avatar-voice-play:focus-visible {
        background: #dfdfe2;
      }

      .avatar-voice-play:active {
        scale: 0.98;
      }

      .avatar-voice-play.is-playing {
        background: #18181b;
        color: #ffffff;
      }

      .avatar-voice-play.is-loading {
        cursor: progress;
        opacity: 0.68;
      }

      .avatar-voice-play .ui-icon {
        height: 20px;
        width: 20px;
      }

      .avatar-voice-dropdown {
        min-width: 0;
        position: relative;
      }

      .avatar-voice-trigger {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 12px;
        box-shadow: none;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) 28px;
        min-height: 44px;
        outline: 0;
        padding: 0;
        text-align: left;
        transition:
          background-color 100ms var(--workspace-ease),
          box-shadow 100ms var(--workspace-ease),
          scale 100ms var(--workspace-ease);
        width: 100%;
      }

      .avatar-voice-trigger:hover,
      .avatar-voice-trigger[aria-expanded="true"] {
        background: transparent;
        box-shadow: none;
      }

      .avatar-voice-trigger:focus-visible {
        box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.18);
      }

      .avatar-voice-trigger:active {
        scale: 0.99;
      }

      .avatar-voice-trigger-icon {
        align-items: center;
        color: var(--icon-secondary);
        display: inline-flex;
        flex-direction: column;
        gap: 3px;
        height: 28px;
        justify-content: center;
        width: 28px;
      }

      .avatar-voice-trigger-icon .ui-icon {
        display: block;
        fill: currentColor;
        /* !important keeps the stacked pair uniform: the global
           .ui-icon.icon-chevron-down 14px !important rule would otherwise
           inflate only the down caret and knock it out of column alignment. */
        height: 12px !important;
        stroke: none;
        width: 12px !important;
      }

      .avatar-voice-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .avatar-voice-copy strong {
        color: #303034;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .avatar-voice-copy small {
        color: #9a9aa1;
        font-size: var(--web-type-control);
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .avatar-voice-menu {
        background: #ffffff;
        border: 0;
        border-radius: 16px;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.055),
          0 12px 32px rgba(0, 0, 0, 0.13),
          0 2px 7px rgba(0, 0, 0, 0.06);
        max-height: min(420px, calc(100dvh - 32px));
        opacity: 0;
        overscroll-behavior: contain;
        overflow-y: auto;
        padding: 8px;
        scale: 0.98;
        scrollbar-width: thin;
        transform-origin: bottom right;
        transition:
          opacity 100ms var(--workspace-ease),
          scale 100ms var(--workspace-ease);
        z-index: 420;
      }

      .avatar-voice-menu[data-side="bottom"] {
        transform-origin: top right;
      }

      .avatar-voice-menu.open,
      .avatar-voice-menu[data-state="open"] {
        opacity: 1;
        scale: 1;
      }

      .avatar-voice-menu > button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 10px;
        display: grid;
        gap: 10px;
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 56px;
        padding: 8px 12px 8px 8px;
        position: relative;
        text-align: left;
        width: 100%;
      }

      /* Hairline separators between voices, inset past the play chip so the
         rule aligns with the text column like the reference list. */
      .avatar-voice-menu > button + button::before {
        background: var(--line);
        content: "";
        height: 1px;
        left: 58px;
        position: absolute;
        right: 0;
        top: 0;
      }

      .avatar-voice-menu > button:hover,
      .avatar-voice-menu > button:focus-visible,
      .avatar-voice-menu > button[aria-selected="true"] {
        background: #f5f5f6;
      }

      .avatar-voice-menu > button:hover::before,
      .avatar-voice-menu > button:hover + button::before,
      .avatar-voice-menu > button:focus-visible::before,
      .avatar-voice-menu > button:focus-visible + button::before,
      .avatar-voice-menu > button[aria-selected="true"]::before,
      .avatar-voice-menu > button[aria-selected="true"] + button::before {
        opacity: 0;
      }

      .avatar-voice-option-play {
        align-items: center;
        background: #f2f2f3;
        border-radius: 10px;
        color: #56565c;
        display: inline-flex;
        height: 40px;
        justify-content: center;
        transition:
          background-color 100ms var(--workspace-ease),
          color 100ms var(--workspace-ease),
          scale 100ms var(--workspace-ease);
        width: 40px;
      }

      .avatar-voice-option-play:hover {
        background: #e9e9eb;
      }

      .avatar-voice-option-play:active {
        scale: 0.96;
      }

      .avatar-voice-option-play.is-playing {
        background: #18181b;
        color: #ffffff;
      }

      .avatar-voice-option-play.is-loading {
        cursor: progress;
        opacity: 0.68;
      }

      .avatar-voice-option-play .ui-icon {
        height: 18px;
        width: 18px;
      }

      .avatar-voice-option-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .avatar-voice-option-copy strong {
        color: #303034;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .avatar-voice-option-copy small {
        color: #8e8e93;
        font-size: var(--web-type-control);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #avatar-modal.is-creating .avatar-drop {
        /* align-content packs the auto rows: without it the leftover
           min-height stretches every row and drives the pair apart. */
        align-content: center;
        background: #ffffff;
        border: 1px dashed rgba(24, 24, 27, 0.16);
        border-radius: 12px;
        gap: 2px;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        min-height: 138px;
        padding: 22px;
        text-align: center;
      }

      #avatar-modal.is-creating .avatar-drop > span {
        background: #e9e9eb;
        grid-row: auto;
        height: 34px;
        width: 34px;
      }

      #avatar-modal.is-creating .avatar-drop strong {
        align-self: auto;
        color: #414146;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
      }

      #avatar-modal.is-creating .avatar-drop small {
        align-self: auto;
        color: #a2a2a8;
        font-size: var(--web-type-caption);
      }

      #avatar-modal.is-creating .avatar-create.is-verifying-face .avatar-drop {
        display: none;
      }

      /* An upload shows as a plain attachment: the thumb with a floating
         cross on its corner — no verify step. */
      #avatar-modal.is-creating .avatar-face-verification {
        background: transparent;
        border-radius: 12px;
        display: grid;
        padding: 0;
        position: relative;
      }

      #avatar-modal.is-creating .avatar-drop > span:first-child {
        margin-bottom: 8px;
      }

      #avatar-modal.is-creating .avatar-upload-remove {
        align-items: center;
        background: rgba(18, 18, 20, 0.78);
        border: 0;
        border-radius: 999px;
        color: #ffffff;
        display: inline-flex;
        height: 26px;
        justify-content: center;
        position: absolute;
        right: 8px;
        top: 8px;
        width: 26px;
        z-index: 2;
      }

      #avatar-modal.is-creating .avatar-upload-remove:hover,
      #avatar-modal.is-creating .avatar-upload-remove:focus-visible {
        background: rgba(18, 18, 20, 0.9);
      }

      #avatar-modal.is-creating .avatar-upload-remove .ui-icon {
        color: inherit;
        height: 12px;
        width: 12px;
      }

      #avatar-modal.is-creating .avatar-face-verification[hidden] {
        display: none;
      }

      #avatar-modal.is-creating .avatar-upload-preview {
        grid-template-columns: minmax(0, 1fr);
      }

      /* A fixed-height cover frame: forcing an aspect ratio against the
         height cap left videos painting black letterbox bars around a
         squeezed picture. Cover crops instead of distorting. */
      #avatar-modal.is-creating .avatar-upload-preview img,
      #avatar-modal.is-creating .avatar-upload-preview video {
        border-radius: 10px;
        height: 150px;
        object-fit: cover;
        outline: 1px solid rgba(0, 0, 0, 0.1);
        outline-offset: -1px;
        width: 100%;
      }

      #avatar-modal.is-creating .avatar-face-verification-copy {
        display: grid;
        gap: 3px;
      }

      #avatar-modal.is-creating .avatar-face-verification-copy strong {
        color: #303034;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
      }

      #avatar-modal.is-creating .avatar-face-verification-copy small {
        color: #8f8f96;
        font-size: var(--web-type-caption);
        line-height: 1.35;
        text-wrap: pretty;
      }

      #avatar-modal.is-creating .avatar-face-verification-actions {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
      }

      #avatar-modal.is-creating .avatar-face-verification-actions button {
        align-items: center;
        background: #f3f3f4;
        border: 0;
        border-radius: 9px;
        color: #525258;
        display: inline-flex;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        gap: 5px;
        height: 36px;
        justify-content: center;
        transition:
          background-color 100ms var(--workspace-ease),
          color 100ms var(--workspace-ease),
          scale 100ms var(--workspace-ease);
      }

      #avatar-modal.is-creating .avatar-face-verification-actions button:active {
        scale: 0.99;
      }

      #avatar-modal.is-creating .avatar-face-verification-actions .is-primary {
        background: #2f2f33;
        color: #ffffff;
      }

      #avatar-modal.is-creating .avatar-face-verification-actions .is-primary:disabled {
        background: #e7f4ea;
        color: #28733a;
        cursor: default;
      }

      #avatar-modal.is-creating .avatar-face-verification-actions .ui-icon {
        height: 13px;
        width: 13px;
      }

      #avatar-modal.is-creating .avatar-method-divider {
        align-items: center;
        color: #aaaab0;
        display: flex;
        font-size: var(--web-type-caption);
        gap: 10px;
        justify-content: center;
        text-transform: uppercase;
      }

      #avatar-modal.is-creating .avatar-method-divider::before,
      #avatar-modal.is-creating .avatar-method-divider::after {
        background: rgba(24, 24, 27, 0.08);
        content: "";
        flex: 1;
        height: 1px;
      }

      #avatar-modal.is-creating .avatar-prompt textarea {
        background: #ffffff;
        border-radius: 11px;
        font-size: var(--web-type-caption);
        line-height: 1.45;
        min-height: 105px;
        padding: 12px;
      }

      /* Identical recipe to the workspace Generate pill: ink pill, body
         size, cost chip on the right, standard soft-grey disabled state. */
      #avatar-modal.is-creating .avatar-create-generate {
        background: #18181b;
        border: 0;
        border-radius: var(--workspace-pill-radius);
        color: #ffffff;
        flex: 0 0 auto;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        gap: 8px;
        height: 46px;
        justify-content: center;
        margin-top: auto;
        padding: 0 14px;
      }

      #avatar-modal.is-creating .avatar-create-generate:not(:disabled):hover {
        background: #000000;
      }

      #avatar-modal.is-creating .avatar-create-generate:disabled {
        background: var(--surface-soft);
        color: var(--text-muted);
        cursor: not-allowed;
        opacity: 1;
      }

      #avatar-modal.is-creating .avatar-create-generate > span:last-child {
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--workspace-pill-radius);
        color: rgba(255, 255, 255, 0.92);
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        gap: 5px;
        padding: 3px 7px;
        position: static;
      }

      #avatar-modal.is-creating .avatar-create-generate:disabled > span:last-child {
        background: rgba(24, 24, 27, 0.05);
        color: var(--text-muted);
      }

      #avatar-modal.is-creating .avatar-create-generate .ui-icon {
        color: inherit;
        height: 13px;
        width: 13px;
      }

      #avatar-modal.is-creating .avatar-create-output {
        background: #f1f1f2;
      }

      #avatar-modal.is-creating .avatar-output-placeholder {
        width: 72%;
      }

      #avatar-modal.is-creating .avatar-output-placeholder svg,
      #avatar-modal.is-creating .avatar-output-placeholder img {
        max-height: 82%;
      }

      #avatar-modal.is-creating .avatar-generated-preview {
        border-radius: 16px;
        box-shadow: 0 18px 46px rgba(24, 24, 27, 0.1);
        max-height: 84%;
        max-width: 82%;
      }

      .upscale-settings {
        display: grid;
        gap: 12px;
        margin-top: 0;
      }

      .upscale-settings[hidden] {
        display: none;
      }

      .upscale-provider {
        align-items: center;
        background: var(--workspace-control-surface);
        border: 0;
        border-radius: 18px;
        display: grid;
        gap: 12px;
        grid-template-columns: 48px minmax(0, 1fr);
        margin-bottom: 0;
        min-height: 76px;
        padding: 12px;
      }

      .upscale-provider[hidden] {
        display: none;
      }

      .upscale-provider-icon {
        background: #171719;
        border-radius: 12px;
        display: grid;
        height: 48px;
        overflow: hidden;
        place-items: center;
        width: 48px;
      }

      .upscale-provider-icon .ui-icon {
        color: #ffffff;
        height: 22px;
        stroke-width: 1.6;
        width: 22px;
      }

      .upscale-provider-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .upscale-provider-copy strong {
        color: var(--text);
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
      }

      .upscale-provider-copy small {
        color: var(--text-soft);
        font-size: var(--web-type-caption);
        line-height: 1.35;
      }

      .upscale-scale {
        background: var(--workspace-control-surface);
        border: 0;
        border-radius: 18px;
        margin: 0;
        min-width: 0;
        padding: 10px 12px 12px;
      }

      .upscale-scale legend {
        color: var(--text);
        float: left;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
        line-height: 1.2;
        margin-bottom: 7px;
        padding: 0;
        width: 100%;
      }

      .upscale-scale-options {
        background: var(--surface-hover);
        border-radius: 13px;
        clear: both;
        display: grid;
        gap: 2px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 3px;
      }

      .upscale-scale-options button {
        background: transparent;
        border: 0;
        border-radius: 10px;
        color: var(--text-soft);
        cursor: pointer;
        font: inherit;
        font-size: var(--web-type-body);
        height: 30px;
        transition:
          background 140ms ease,
          box-shadow 140ms ease,
          color 140ms ease,
          transform 100ms ease;
      }

      .upscale-scale-options button.is-selected {
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(24, 24, 27, 0.08);
        color: var(--text);
      }

      .upscale-scale-options button:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 1px;
      }

      @media (max-width: 760px) {
        #avatar-modal.is-creating .avatar-dialog {
          height: calc(100dvh - 20px);
          width: calc(100vw - 20px);
        }

        #avatar-modal.is-creating .avatar-create {
          display: block;
        }

        #avatar-modal.is-creating .avatar-create-fields {
          min-height: 680px;
          padding: 24px 18px 20px;
        }

        #avatar-modal.is-creating .avatar-create-output {
          min-height: 440px;
        }
      }

      
      .brief-panel {
        --brief-section-gap: 8px;
        --brief-input-pair-gap: 8px;
        --brief-prompt-divider-color: rgba(24, 24, 27, 0.065);
        --brief-prompt-divider-inset: 14px;
        --brief-prompt-inline-inset: 14px;
        --brief-prompt-max-height: 320px;
        --brief-prompt-min-height: 250px;
        --brief-prompt-top-inset: 10px;
        --brief-reference-top-inset: 10px;
        --brief-upload-banner-height: 180px;
        background: var(--surface);
        gap: var(--brief-section-gap);
        height: calc(100vh - var(--workspace-nav-height));
        max-height: calc(100vh - var(--workspace-nav-height));
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* 19px top centers the 52px tool title row on the library toolbar
           across the divide (27px library padding + 36px toolbar / 2). */
        padding: 19px 18px 14px;
        position: sticky;
        scrollbar-color: rgba(18, 18, 20, 0.2) transparent;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        top: 0;
      }

      .brief-panel::-webkit-scrollbar {
        display: block;
        width: 8px;
      }

      .brief-panel::-webkit-scrollbar-track {
        background: transparent;
      }

      .brief-panel::-webkit-scrollbar-thumb {
        background: rgba(18, 18, 20, 0.2);
        background-clip: padding-box;
        border: 2px solid transparent;
        border-radius: 999px;
      }

      .brief-panel::-webkit-scrollbar-thumb:hover {
        background: rgba(18, 18, 20, 0.32);
        background-clip: padding-box;
      }

      .mobile-panel-header,
      .mobile-composer,
      .mobile-composer-backdrop {
        display: none;
      }

      /* Primary-brief tools share roomier prompt insets. The tall ten-line
         empty prompt itself is the panel-wide default above. */
      .brief-panel[data-active-feature="create_video"],
      .brief-panel[data-active-feature="create_image"],
      .brief-panel[data-active-feature="animate"] {
        --brief-prompt-inline-inset: 18px;
        --brief-prompt-top-inset: 14px;
        --brief-reference-top-inset: 16px;
      }

      .brief-tool-selector,
      .brief-selected-preset,
      .brief-assets,
      .brief-composer,
      .brief-options,
      .workspace-generate {
        flex: 0 0 auto;
      }

      .brief-selected-preset,
      .brief-composer {
        background: var(--workspace-control-surface);
        border: 0;
        border-radius: var(--radius-panel);
      }

      .brief-assets,
      .brief-composer,
      .brief-options {
        margin-top: 0;
      }

      .brief-asset-box,
      .brief-asset-box-universal {
        background: var(--workspace-control-surface);
        border: 0;
        border-radius: var(--radius-panel);
        transition-duration: 100ms;
        transition-property: background-color, border-color;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .brief-selected-preset .model-option > button {
        height: 220px;
      }

      .workspace-model-media,
      .workspace-model-details {
        background: var(--workspace-control-surface);
      }

      .workspace-model-details {
        padding: 10px 14px 12px;
      }

      .workspace-model-detail-copy h2,
      .brief-asset-box strong,
      .brief-asset-box-universal strong,
      .workspace-generate,
      .generate-cost {
        font-weight: var(--font-ui-medium);
      }

      #brief-upload-slots {
        gap: var(--brief-section-gap);
      }

      .brief-input-pair {
        align-items: stretch;
        display: flex;
        flex-direction: row;
        gap: var(--brief-input-pair-gap);
        width: 100%;
      }

      .brief-asset-box,
      .brief-asset-box-universal,
      .brief-asset-box-visual {
        align-content: center;
        align-items: center;
        gap: 12px;
        grid-template-columns: 48px minmax(0, 1fr);
        justify-items: start;
        min-height: 86px;
        padding: 10px 14px;
        text-align: left;
      }

      .brief-asset-box-universal {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 52px auto;
        justify-items: center;
        min-height: 112px;
        padding: var(--brief-reference-top-inset) 16px 10px;
        text-align: center;
      }

      /* Empty source uploads share one vertical hierarchy across image,
         video, and character inputs. */
      #brief-upload-slots > .brief-asset-box-visual:not(.is-filled) {
        gap: 12px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 52px auto;
        justify-items: center;
        padding: var(--brief-reference-top-inset) 16px 10px;
        text-align: center;
      }

      #brief-upload-slots > .brief-asset-box-visual:not(.is-filled) > .brief-asset-illustration {
        height: 52px;
        justify-self: center;
        width: 52px;
      }

      #brief-upload-slots > .brief-asset-box-visual:not(.is-filled) > .brief-asset-copy {
        justify-items: center;
        text-align: center;
      }

      #brief-upload-slots > .brief-asset-box-visual:not(.is-filled) > .brief-asset-copy small {
        max-width: 320px;
        text-wrap: pretty;
      }

      #brief-upload-slots .brief-asset-box {
        height: var(--brief-upload-banner-height);
        min-height: var(--brief-upload-banner-height);
      }

      .brief-panel .brief-asset-box:hover,
      .brief-panel .brief-asset-box-universal:hover,
      .brief-panel .brief-asset-box:focus-visible,
      .brief-panel .brief-asset-box-universal:focus-visible {
        background: color-mix(in srgb, var(--surface) 96%, var(--text-primary));
        border-color: color-mix(in srgb, var(--line-strong) 95%, var(--text-primary));
      }

      .brief-panel .brief-asset-box-universal:hover .brief-reference-kinds .ui-icon,
      .brief-panel .brief-asset-box-universal:focus-visible .brief-reference-kinds .ui-icon {
        background: var(--surface-hover);
      }

      .brief-asset-box:active,
      .brief-asset-box-universal:active {
        scale: 0.99;
      }

      .brief-asset-box > span:last-child,
      .brief-asset-box-universal > span:last-child,
      .brief-asset-box-visual > span:last-child {
        display: grid;
        gap: 2px;
        min-width: 0;
        padding: 0;
        text-align: left;
        width: 100%;
      }

      .brief-asset-box-universal > span:last-child {
        justify-items: center;
        text-align: center;
      }

      .brief-asset-box strong,
      .brief-asset-box-universal strong {
        color: var(--text-primary);
        font-size: var(--web-type-body);
        line-height: 1.2;
      }

      .brief-asset-box small,
      .brief-asset-box-universal small,
      .brief-prompt .prompt-editor.is-empty::before,
      .workspace-model-detail-copy small {
        color: var(--text-muted);
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
        line-height: 1.35;
      }

      .brief-control-label {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        line-height: 1.35;
      }

      .brief-asset-box strong,
      .brief-asset-box small,
      .brief-asset-box-universal strong,
      .brief-asset-box-universal small {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
      }

      .brief-asset-illustration {
        background: var(--surface-hover);
        border: 0;
        border-radius: var(--radius-control);
        box-shadow: none;
        height: 48px;
        width: 48px;
      }

      .brief-asset-illustration > .ui-icon {
        color: var(--icon-secondary);
        height: 24px;
        stroke-width: 1.65;
        width: 24px;
      }

      .brief-asset-box-template {
        position: relative;
      }

      #brief-upload-slots > .brief-asset-box-template:not(.is-filled) {
        gap: 12px;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: 86px;
        justify-items: start;
        min-height: 86px;
        padding: 10px 14px;
        text-align: left;
      }

      #brief-upload-slots > .brief-asset-box-template:not(.is-filled) > .brief-asset-illustration {
        height: 48px;
        justify-self: start;
        width: 48px;
      }

      #brief-upload-slots > .brief-asset-box-template:not(.is-filled) > .brief-asset-copy {
        justify-items: start;
        text-align: left;
      }

      .brief-asset-box-template.is-filled {
        background: var(--surface);
        border-color: transparent;
        box-shadow: none;
      }

      .brief-panel .brief-asset-box-template.is-filled:hover {
        background: color-mix(in srgb, var(--surface) 97%, var(--text-primary));
        border-color: transparent;
        box-shadow: none;
      }

      .brief-panel .brief-asset-box-template.is-filled:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--text-primary) 32%, transparent);
        outline-offset: 2px;
      }

      .brief-asset-box.is-filled {
        border-style: solid;
      }

      #brief-upload-slots > .brief-asset-box.is-filled {
        align-content: center;
        align-items: center;
        background: var(--surface);
        border: 0;
        border-radius: 20px;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.055),
          0 1px 2px -1px rgba(0, 0, 0, 0.08),
          0 8px 24px rgba(0, 0, 0, 0.055);
        gap: 12px;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        height: 88px;
        justify-items: start;
        min-height: 88px;
        padding: 8px;
        /* Anchors the floating remove control — without this it escapes to
           the panel and drifts over the tool title. */
        position: relative;
        text-align: left;
        transition-duration: 140ms;
        transition-property: background-color, box-shadow, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      /* A chosen character reads exactly like the paired media tiles: a
         cover thumbnail with hover-revealed Change and a dark cross. */
      /* The chosen character sits as a square thumbnail with safe space
         around it on the slot's soft card — never a stretched banner. */
      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media {
        align-content: center;
        background: var(--surface-soft);
        border: 0;
        border-radius: var(--radius-panel);
        box-shadow: none;
        display: grid;
        /* One full-height cell: the compact-row 64px column grid would
           otherwise trap and shrink the square thumbnail. */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 100%;
        height: var(--brief-upload-banner-height);
        isolation: isolate;
        justify-items: center;
        min-height: var(--brief-upload-banner-height);
        overflow: hidden;
        padding: 12px;
        position: relative;
        text-align: left;
        transition-duration: 140ms;
        transition-property: background-color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .brief-panel #brief-upload-slots > .brief-asset-box.is-filled.is-character-media:hover,
      .brief-panel #brief-upload-slots > .brief-asset-box.is-filled.is-character-media:focus-visible {
        background: var(--surface-hover);
        box-shadow: none;
      }

      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media:active {
        scale: 0.99;
      }

      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media .brief-asset-upload-preview {
        aspect-ratio: 1;
        border-radius: 14px;
        /* Block, not the generic span grid: an auto grid row keeps the
           image's percentage height from resolving to the tile. */
        display: block;
        height: 100%;
        outline: 0;
        overflow: hidden;
        position: relative;
        width: auto;
        z-index: 0;
      }

      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media .brief-asset-upload-preview img,
      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media .brief-asset-upload-preview video {
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
      }

      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media .brief-asset-copy {
        display: none;
      }

      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media .brief-asset-selection-action {
        /* Auto placement: with the inherited grid-row the absolute pill
           resolves its offsets against the grid area (12px below the
           padding box) and sits lower than the cross. */
        align-self: auto;
        background: rgba(18, 18, 20, 0.78);
        color: #ffffff;
        display: inline-flex;
        filter: blur(4px);
        grid-area: auto;
        min-height: 30px;
        opacity: 0;
        padding: 0 10px;
        pointer-events: none;
        position: absolute;
        /* Anchored inside the centered square: its right edge sits at
           50% + half the square (banner height minus the 12px insets). */
        right: calc(50% - (var(--brief-upload-banner-height) - 24px) / 2 + 46px);
        scale: 0.25;
        top: 20px;
        transition-duration: 180ms;
        transition-property: background-color, filter, opacity, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: auto;
        z-index: 2;
      }

      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media:hover .brief-asset-selection-action,
      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media:focus-visible .brief-asset-selection-action {
        background: rgba(18, 18, 20, 0.9);
        color: #ffffff;
        filter: blur(0);
        opacity: 1;
        scale: 1;
      }

      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media .brief-asset-remove {
        background: rgba(18, 18, 20, 0.78);
        box-shadow: none;
        color: #ffffff;
        filter: blur(4px);
        height: 30px;
        opacity: 0;
        right: calc(50% - (var(--brief-upload-banner-height) - 24px) / 2 + 8px);
        top: 20px;
        width: 30px;
        z-index: 2;
      }

      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media:hover .brief-asset-remove,
      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media:focus-visible .brief-asset-remove,
      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media .brief-asset-remove:focus-visible {
        filter: blur(0);
        opacity: 1;
      }

      #brief-upload-slots > .brief-asset-box.is-filled.is-character-media .brief-asset-remove:hover {
        background: rgba(18, 18, 20, 0.9);
        color: #ffffff;
      }

      .brief-panel #brief-upload-slots > .brief-asset-box.is-filled:hover,
      .brief-panel #brief-upload-slots > .brief-asset-box.is-filled:focus-visible {
        background: var(--surface);
        border-color: transparent;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.085),
          0 2px 4px -1px rgba(0, 0, 0, 0.09),
          0 12px 30px rgba(0, 0, 0, 0.075);
      }

      #brief-upload-slots > .brief-asset-box.is-filled .brief-asset-upload-preview {
        border-radius: 12px;
        grid-column: 1;
        grid-row: 1;
        height: 64px;
        outline: 0;
        width: 64px;
      }

      /* A media-filled single slot becomes the upload itself: the media
         fills the whole panel edge to edge, adopting the panel's radius,
         with a floating remove control inside the top-right corner. */
      #brief-upload-slots > .brief-asset-box.is-filled[data-upload-slot-filled] {
        background: var(--workspace-control-surface);
        border: 0;
        border-radius: var(--radius-panel);
        box-sizing: border-box;
        box-shadow: none;
        display: block;
        height: var(--brief-upload-banner-height);
        min-height: var(--brief-upload-banner-height);
        overflow: hidden;
        padding: 0;
        position: relative;
        text-align: center;
        width: 100%;
      }

      .brief-panel #brief-upload-slots > .brief-asset-box.is-filled[data-upload-slot-filled]:hover,
      .brief-panel #brief-upload-slots > .brief-asset-box.is-filled[data-upload-slot-filled]:focus-visible {
        background: var(--workspace-control-surface);
        border-color: transparent;
        box-shadow: none;
      }

      /* Outranks the generic .brief-asset-box > span:last-child grid rule. */
      #brief-upload-slots .brief-asset-media-frame {
        display: block;
        gap: 0;
        height: 100%;
        position: relative;
        text-align: initial;
        width: 100%;
      }

      #brief-upload-slots > .brief-asset-box.is-filled[data-upload-slot-filled] .brief-asset-upload-preview {
        border-radius: 0;
        height: 100%;
        outline: 0;
        width: 100%;
      }

      /* Id-scoped so the generic ".brief-asset-box span" grid rule cannot
         stretch the control. */
      #brief-upload-slots .brief-asset-remove {
        align-items: center;
        background: #ffffff;
        border-radius: 999px;
        box-shadow:
          0 1px 2px rgba(24, 24, 27, 0.14),
          0 6px 18px rgba(24, 24, 27, 0.16);
        color: var(--text-secondary);
        cursor: pointer;
        display: inline-flex;
        height: 34px;
        justify-content: center;
        position: absolute;
        right: 12px;
        top: 12px;
        transition-duration: 120ms;
        transition-property: background-color, color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 34px;
        z-index: 2;
      }

      .brief-asset-remove:hover,
      .brief-asset-remove:focus-visible {
        color: var(--text-primary);
      }

      .brief-asset-remove:active {
        scale: 0.92;
      }

      .brief-asset-remove .ui-icon {
        height: 15px;
        width: 15px;
      }

      #brief-upload-slots > .brief-asset-box.is-filled > .brief-asset-copy {
        align-content: center;
        gap: 4px;
        grid-column: 2;
        grid-row: 1;
      }

      #brief-upload-slots > .brief-asset-box-universal.is-filled > .brief-asset-copy {
        justify-items: start;
        text-align: left;
      }

      #brief-upload-slots > .brief-asset-box.is-filled > .brief-asset-copy strong {
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
      }

      #brief-upload-slots > .brief-asset-box.is-filled > .brief-asset-copy small {
        color: var(--text-muted);
        font-size: var(--web-type-control);
        line-height: 1.2;
      }

      .brief-asset-selection-action {
        align-items: center;
        align-self: center;
        background: var(--surface-soft);
        border-radius: 999px;
        color: var(--text-secondary);
        display: inline-flex;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        grid-column: 3;
        grid-row: 1;
        min-height: 34px;
        padding: 0 11px;
        transition-duration: 140ms;
        transition-property: background-color, color;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        white-space: nowrap;
      }

      .brief-asset-box.is-filled:hover .brief-asset-selection-action,
      .brief-asset-box.is-filled:focus-visible .brief-asset-selection-action {
        background: var(--surface-hover);
        color: var(--text-primary);
      }

      .brief-asset-upload-preview {
        align-items: center;
        background: var(--surface-hover);
        border-radius: var(--radius-control);
        color: var(--text-secondary);
        display: flex;
        height: 48px;
        justify-content: center;
        overflow: hidden;
        width: 48px;
      }

      .brief-asset-upload-preview img,
      .brief-asset-upload-preview video {
        display: block;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
        width: 100%;
      }

      .brief-asset-upload-preview.is-video video {
        object-position: center center;
      }

      .brief-asset-upload-preview .ui-icon {
        height: 24px;
        stroke-width: 1.65;
        width: 24px;
      }

      #brief-upload-slots > .brief-asset-box.is-filled > .brief-reference-selection-preview {
        background: transparent;
        outline: 0;
        overflow: visible;
        position: relative;
      }

      /* .brief-asset-box prefixes outrank the generic
         ".brief-asset-box span { display: grid; width: 100%; }" layout rule. */
      .brief-asset-box .brief-reference-selection-thumb {
        align-items: center;
        background: var(--surface-hover);
        border-radius: 12px;
        color: var(--text-secondary);
        display: flex;
        height: 64px;
        justify-content: center;
        left: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 64px;
      }

      /* The first reference reads as the media itself: a full-bleed flat
         thumbnail, identical to a filled source slot. */
      .brief-asset-box .brief-reference-selection-thumb:first-child {
        outline: 0;
        z-index: 2;
      }

      /* Additional references peek out from behind the lead thumbnail as a
         quiet deck edge instead of a rotated polaroid pile. */
      .brief-asset-box .brief-reference-selection-thumb:nth-child(2) {
        border: 2px solid var(--surface);
        border-radius: 14px;
        height: 58px;
        left: 18px;
        top: 3px;
        width: 58px;
        z-index: 1;
      }

      .brief-reference-selection-thumb img,
      .brief-reference-selection-thumb video {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .brief-reference-selection-thumb .ui-icon {
        height: 22px;
        width: 22px;
      }

      .brief-asset-box .brief-reference-selection-count {
        align-items: center;
        background: var(--text-primary);
        border: 2px solid var(--surface);
        border-radius: 999px;
        bottom: -3px;
        color: var(--surface);
        display: flex;
        font-size: 10px;
        font-weight: var(--font-ui-medium);
        height: 22px;
        justify-content: center;
        left: auto;
        line-height: 1;
        min-width: 22px;
        padding: 0 5px;
        position: absolute;
        right: -3px;
        width: max-content;
        z-index: 3;
      }

      .brief-reference-kinds {
        align-items: center;
        display: flex;
        height: 52px;
        justify-content: center;
        max-width: 100%;
        position: relative;
        width: 136px;
      }

      .brief-asset-box-universal > .brief-reference-kinds {
        justify-self: center;
        width: min(136px, 100%);
      }

      .brief-reference-kinds .ui-icon {
        background: var(--surface-hover);
        border: 0;
        border-radius: 11px;
        box-shadow: none;
        color: var(--text-secondary);
        height: 38px;
        left: 50%;
        margin-left: -19px;
        margin-top: -19px;
        padding: 8px;
        position: absolute;
        top: 50%;
        transition: background-color 100ms cubic-bezier(0.2, 0, 0, 1);
        width: 38px;
      }

      .brief-reference-kinds .ui-icon:nth-child(1) {
        transform: translate(-20px, 2px) rotate(-7deg);
        z-index: 1;
      }

      .brief-reference-kinds .ui-icon:nth-child(2) {
        transform: translate(20px, 2px) rotate(7deg);
        z-index: 2;
      }

      .brief-input-pair > .brief-asset-box {
        align-content: center;
        /* An explicit half-width basis, not 0: a zero basis floors at each
           box's own padding, so the padded empty card ends up wider than
           its zero-padding filled twin and the pair jumps on fill. */
        flex: 1 1 calc(50% - var(--brief-input-pair-gap) / 2);
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 48px minmax(0, auto);
        height: var(--brief-upload-banner-height);
        justify-items: center;
        min-width: 0;
        min-height: var(--brief-upload-banner-height);
        padding: 14px 10px;
        text-align: center;
      }

      .brief-input-pair > .brief-asset-box > span:last-child {
        justify-items: center;
        text-align: center;
      }

      .brief-input-pair > .brief-asset-box > .brief-asset-illustration,
      .brief-input-pair > .brief-asset-box > .brief-asset-upload-preview {
        background: var(--surface-hover);
        border-radius: var(--radius-control);
        height: 48px;
        width: 48px;
      }

      .brief-input-pair > .brief-asset-box > .brief-asset-illustration > .ui-icon,
      .brief-input-pair > .brief-asset-box > .brief-asset-upload-preview > .ui-icon {
        color: var(--icon-secondary);
        height: 23px;
        width: 23px;
      }

      .brief-input-pair .brief-asset-box strong {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .brief-input-pair .brief-asset-box small {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        line-height: 1.34;
        max-width: 100%;
        overflow: hidden;
        text-wrap: pretty;
        white-space: normal;
      }

      /* Paired source inputs become self-contained media tiles once filled.
         This keeps the preview, metadata, and replace action from inheriting
         the horizontal layout used by full-width selected-media cards. */
      .brief-input-pair > .brief-asset-box.is-filled {
        align-content: end;
        background: var(--surface-hover);
        border: 0;
        border-radius: var(--radius-panel);
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.08),
          0 8px 24px rgba(0, 0, 0, 0.06);
        display: block;
        isolation: isolate;
        overflow: hidden;
        padding: 0;
        position: relative;
        text-align: left;
        transition-duration: 140ms;
        transition-property: box-shadow, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .brief-panel .brief-input-pair > .brief-asset-box.is-filled:hover,
      .brief-panel .brief-input-pair > .brief-asset-box.is-filled:focus-visible {
        background: var(--surface-hover);
        border-color: transparent;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.12),
          0 12px 30px rgba(0, 0, 0, 0.1);
      }

      .brief-input-pair > .brief-asset-box.is-filled:active {
        scale: 0.99;
      }

      .brief-input-pair > .brief-asset-box.is-filled .brief-asset-upload-preview {
        border-radius: inherit;
        height: 100%;
        inset: 0;
        outline: 0;
        position: absolute;
        width: 100%;
        z-index: 0;
      }

      .brief-input-pair > .brief-asset-box.is-filled .brief-asset-upload-preview img,
      .brief-input-pair > .brief-asset-box.is-filled .brief-asset-upload-preview video {
        object-fit: cover;
        object-position: center;
      }

      .brief-input-pair > .brief-asset-box.is-filled .brief-asset-selection-action {
        background: rgba(18, 18, 20, 0.78);
        color: #ffffff;
        display: inline-flex;
        filter: blur(4px);
        grid-column: auto;
        grid-row: auto;
        min-height: 30px;
        opacity: 0;
        padding: 0 10px;
        pointer-events: none;
        position: absolute;
        right: 48px;
        scale: 0.25;
        top: 10px;
        transition-duration: 180ms;
        transition-property: background-color, filter, opacity, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: auto;
        z-index: 2;
      }

      .brief-input-pair > .brief-asset-box.is-filled:hover .brief-asset-selection-action,
      .brief-input-pair > .brief-asset-box.is-filled:focus-visible .brief-asset-selection-action {
        background: rgba(18, 18, 20, 0.9);
        color: #ffffff;
        filter: blur(0);
        opacity: 1;
        scale: 1;
      }

      /* The clear-the-slot cross rides beside Change, in the same dark
         chrome, revealed by the same hover. */
      /* The cross glyph follows its chip's color (white on the dark pair
         chrome), not the slot's muted icon default. */
      .brief-asset-remove .ui-icon {
        color: inherit;
      }

      #brief-upload-slots .brief-input-pair > .brief-asset-box.is-filled .brief-asset-remove {
        background: rgba(18, 18, 20, 0.78);
        box-shadow: none;
        color: #ffffff;
        filter: blur(4px);
        height: 30px;
        opacity: 0;
        right: 10px;
        top: 10px;
        width: 30px;
        z-index: 2;
      }

      #brief-upload-slots .brief-input-pair > .brief-asset-box.is-filled:hover .brief-asset-remove,
      #brief-upload-slots .brief-input-pair > .brief-asset-box.is-filled:focus-visible .brief-asset-remove,
      #brief-upload-slots .brief-input-pair > .brief-asset-box.is-filled .brief-asset-remove:focus-visible {
        filter: blur(0);
        opacity: 1;
      }

      #brief-upload-slots .brief-input-pair > .brief-asset-box.is-filled .brief-asset-remove:hover {
        background: rgba(18, 18, 20, 0.9);
        color: #ffffff;
      }

      .lipsync-audio-panel,
      .relight-lighting-panel {
        background: var(--surface-soft);
        border-radius: var(--radius-surface, 16px);
        display: grid;
        gap: 10px;
        padding: 10px;
      }

      .relight-lighting-tabs {
        background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
        border-radius: 999px;
        display: flex;
        gap: 2px;
        padding: 3px;
      }

      .relight-lighting-tabs > button {
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 999px;
        color: var(--text-muted);
        flex: 1 1 0;
        font: inherit;
        font-size: var(--web-type-label);
        font-weight: 600;
        padding: 7px 10px;
        transition: background-color 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
      }

      .relight-lighting-tabs > button.is-active {
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(24, 24, 27, 0.12);
        color: var(--text-primary);
      }

      #brief-upload-slots .relight-lighting-panel .brief-asset-box-template {
        height: 86px;
        min-height: 86px;
        width: 100%;
      }

      #brief-upload-slots .relight-lighting-panel .brief-asset-box-template.is-filled {
        align-content: center;
        align-items: center;
        gap: 10px;
        grid-template-columns: 64px minmax(0, 1fr) 64px;
        justify-items: center;
        padding: 10px;
      }

      #brief-upload-slots .relight-lighting-panel .brief-asset-box-template.is-filled > .brief-asset-upload-preview {
        border-radius: 13px;
        grid-column: 1;
        height: 64px;
        width: 64px;
      }

      #brief-upload-slots .relight-lighting-panel .brief-asset-box-template.is-filled > .brief-asset-copy {
        align-content: center;
        grid-column: 2;
        justify-items: start;
        text-align: left;
      }

      #brief-upload-slots .relight-lighting-panel .brief-asset-box-template.is-filled > .brief-asset-copy strong,
      #brief-upload-slots .relight-lighting-panel .brief-asset-box-template.is-filled > .brief-asset-copy small {
        text-align: left;
      }

      .relight-lighting-tabs > button {
        align-items: center;
        display: flex;
        justify-content: center;
        line-height: 1;
        min-height: 40px;
        padding-block: 0;
      }

      .relight-custom-prompt {
        display: grid;
      }

      .relight-custom-prompt textarea {
        appearance: none;
        background: transparent;
        border: 0;
        color: var(--text-primary);
        font: inherit;
        font-size: var(--web-type-body);
        line-height: 1.45;
        min-height: 86px;
        outline: none;
        padding: 8px 6px 4px;
        resize: none;
        width: 100%;
      }

      .relight-custom-prompt textarea::placeholder {
        color: var(--text-muted);
      }

      /* Template mode picks a lighting look, so the prompt composer stays
         out of the way. Prompt mode uses the shared composer — same
         reference-media dock and @ mentions as every other tool. */
      .brief-panel[data-active-feature="relight"][data-relight-mode="template"] .brief-composer {
        display: none;
      }

      /* Replace Character: scope of the swap, wardrobe direction, and the
         composed character reference the video pass will actually receive. */
      .recast-panel {
        background: var(--surface-soft);
        border-radius: var(--radius-surface, 16px);
        display: grid;
        gap: 10px;
        margin-top: 10px;
        padding: 10px;
      }

      .recast-scope-tabs {
        background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
        border-radius: 14px;
        display: flex;
        gap: 2px;
        padding: 3px;
      }

      .recast-scope-tab {
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 12px;
        color: var(--text-muted);
        display: grid;
        flex: 1 1 0;
        font: inherit;
        gap: 2px;
        justify-items: center;
        min-height: 46px;
        padding: 6px 8px;
        text-align: center;
        transition: background-color 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
      }

      .recast-scope-tab strong {
        font-size: var(--web-type-label);
        font-weight: 600;
        line-height: 1.2;
      }

      .recast-scope-tab small {
        font-size: var(--web-type-caption, 11px);
        line-height: 1.2;
        opacity: 0.75;
      }

      .recast-scope-tab.is-active {
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(24, 24, 27, 0.12);
        color: var(--text-primary);
      }

      .recast-outfit-field {
        display: grid;
        gap: 4px;
        padding: 0 4px;
      }

      .recast-outfit-label {
        color: var(--text-muted);
        font-size: var(--web-type-caption, 11px);
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .recast-outfit-input {
        appearance: none;
        background: transparent;
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 24%, transparent);
        color: var(--text-primary);
        font: inherit;
        font-size: var(--web-type-body);
        outline: none;
        padding: 6px 0;
        width: 100%;
      }

      .recast-outfit-input::placeholder {
        color: var(--text-muted);
      }

      /* Disabled on a face-only swap, where the scene wardrobe is kept. The
         field still occupies its row so switching scope never shifts the
         composer below it. */
      .recast-outfit-input:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }

      .recast-composite {
        align-items: center;
        background: var(--surface-base, #ffffff);
        border-radius: 13px;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 64px;
        padding: 10px;
      }

      .recast-composite[data-recast-composite-state="ready"] {
        grid-template-columns: 56px minmax(0, 1fr) auto;
      }

      .recast-composite-preview {
        border-radius: 11px;
        display: block;
        height: 56px;
        overflow: hidden;
        width: 56px;
      }

      .recast-composite-preview img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .recast-composite-copy {
        display: grid;
        gap: 2px;
        justify-items: start;
        min-width: 0;
      }

      .recast-composite-copy strong {
        font-size: var(--web-type-label);
        font-weight: 600;
      }

      .recast-composite-copy small {
        color: var(--text-muted);
        font-size: var(--web-type-caption, 11px);
        line-height: 1.3;
      }

      .recast-composite[data-recast-composite-state="failed"] .recast-composite-copy small {
        color: var(--text-danger, #b42318);
      }

      .recast-composite-action {
        appearance: none;
        background: var(--surface-hover);
        border: 0;
        border-radius: 999px;
        color: var(--text-primary);
        font: inherit;
        font-size: var(--web-type-label);
        font-weight: 600;
        min-height: 34px;
        padding: 0 14px;
        white-space: nowrap;
      }

      .lipsync-audio-text {
        display: grid;
        gap: 6px;
      }

      .lipsync-script-input {
        appearance: none;
        background: transparent;
        border: 0;
        color: var(--text-primary);
        font: inherit;
        font-size: var(--web-type-body);
        line-height: 1.45;
        min-height: 118px;
        outline: none;
        padding: 4px 6px;
        resize: none;
        width: 100%;
      }

      .lipsync-script-input::placeholder {
        color: var(--text-muted);
      }

      .lipsync-audio-meta {
        color: var(--text-muted);
        font-size: var(--web-type-label);
        min-height: 1.2em;
        padding: 0 6px 2px;
        text-align: right;
      }

      /* Same recipe as the character creator's dropzone: white card,
         dashed hairline, centered stack — chip, then a tight type pair. */
      .lipsync-audio-upload {
        align-items: center;
        appearance: none;
        background: #ffffff;
        border: 1px dashed rgba(24, 24, 27, 0.16);
        border-radius: 12px;
        color: var(--text-secondary);
        display: flex;
        flex-direction: column;
        font: inherit;
        gap: 2px;
        justify-content: center;
        min-height: 138px;
        padding: 22px;
        text-align: center;
        width: 100%;
      }

      /* Outranks the design-system [data-upload-dropzone] hairline so the
         dash tone matches the character creator's dropzone exactly. */
      .lipsync-audio-panel .lipsync-audio-upload {
        border-color: rgba(24, 24, 27, 0.16);
      }

      .lipsync-audio-upload-chip {
        align-items: center;
        background: #e9e9eb;
        border-radius: 9px;
        display: inline-flex;
        height: 34px;
        justify-content: center;
        margin-bottom: 8px;
        width: 34px;
      }

      .lipsync-audio-upload .ui-icon {
        color: var(--icon-secondary);
        height: 15px;
        width: 15px;
      }

      .lipsync-audio-upload strong {
        color: #414146;
        display: block;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
      }

      .lipsync-audio-upload small {
        color: #a2a2a8;
        display: block;
        font-size: var(--web-type-caption);
      }

      /* A filled lipsync clip reads like an Apple voice memo: quiet gray
         card, the title alone up top, a real waveform strip, then a
         transport row — current time left, centered play/pause, total
         duration right — with the transcript as a light footnote. */
      .lipsync-voice-memo.media-audio-preview {
        background: var(--surface-soft);
        border-radius: var(--radius-control);
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        height: auto;
        padding: 14px 16px;
        position: relative;
        width: 100%;
      }

      /* Bars sit directly on the card — the extra wash and height made
         the memo read louder than it is. */
      .lipsync-voice-memo .media-audio-preview-waveform {
        background: transparent;
        border-radius: 0;
        height: 40px;
        padding: 4px 2px;
      }

      .lipsync-memo-transport {
        align-items: center;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      }

      .lipsync-memo-transport time {
        color: var(--text-muted);
        font-size: var(--web-type-control);
        font-variant-numeric: tabular-nums;
      }

      .lipsync-memo-transport time:last-child {
        justify-self: end;
        text-align: right;
      }

      .lipsync-voice-memo .media-audio-preview-toggle {
        background: #ffffff;
        box-shadow:
          0 1px 2px rgba(24, 24, 27, 0.1),
          0 4px 12px rgba(24, 24, 27, 0.08);
        color: var(--text-primary);
        height: 30px;
        justify-self: center;
        width: 30px;
      }

      .lipsync-voice-memo .media-audio-preview-toggle .ui-icon {
        height: 11px;
        width: 11px;
      }

      .lipsync-voice-memo .media-audio-preview-toggle:hover,
      .lipsync-voice-memo .media-audio-preview-toggle:focus-visible,
      .lipsync-voice-memo .media-audio-preview-toggle.is-playing {
        background: #ffffff;
        color: #000000;
      }

      .lipsync-memo-remove {
        align-items: center;
        background: transparent;
        border-radius: 999px;
        color: var(--text-muted);
        cursor: pointer;
        display: inline-flex;
        height: 28px;
        justify-content: center;
        position: absolute;
        right: 10px;
        top: 10px;
        transition: color 100ms var(--workspace-ease);
        width: 28px;
      }

      .lipsync-memo-remove:hover,
      .lipsync-memo-remove:focus-visible {
        color: var(--text-primary);
      }

      .lipsync-memo-remove .ui-icon {
        height: 13px;
        width: 13px;
      }

      .lipsync-memo-topline {
        align-items: baseline;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        padding-right: 28px;
      }

      .lipsync-memo-topline strong {
        color: #414146;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .lipsync-memo-transcript {
        align-items: center;
        color: #c2c2c6;
        display: flex;
        font-size: var(--web-type-control);
        gap: 6px;
        min-width: 0;
      }

      .lipsync-memo-transcript-text {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .lipsync-memo-transcript-pending {
        color: var(--text-muted);
      }

      /* "View more" stays quiet until the memo is hovered or the control is
         focused, then sits at the end of the truncated transcript line. */
      .lipsync-memo-more {
        background: transparent;
        border: 0;
        color: var(--text-muted);
        cursor: pointer;
        flex: 0 0 auto;
        font: inherit;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        opacity: 0;
        padding: 0;
        pointer-events: none;
        transition: opacity 120ms var(--workspace-ease);
      }

      .lipsync-voice-memo:hover .lipsync-memo-more,
      .lipsync-memo-more:focus-visible {
        opacity: 1;
        pointer-events: auto;
      }


      /* Full-transcript popover opened from "View more". */
      .lipsync-transcript-popover {
        align-items: center;
        display: flex;
        inset: 0;
        justify-content: center;
        position: fixed;
        /* Above the phone layer (composer 120, backdrop 121, sheet 122):
           this opens from controls inside the sheet, so anything at or below
           it renders behind the sheet it was opened from. */
        z-index: 130;
      }

      .lipsync-transcript-backdrop {
        background: rgba(18, 18, 20, 0.4);
        border: 0;
        cursor: default;
        inset: 0;
        padding: 0;
        position: absolute;
      }

      .lipsync-transcript-card {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: min(70vh, 560px);
        max-width: 460px;
        padding: 20px 22px;
        position: relative;
        width: calc(100vw - 48px);
      }

      .lipsync-transcript-card header {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }

      .lipsync-transcript-card h2 {
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
        margin: 0;
      }

      .lipsync-transcript-close {
        align-items: center;
        background: var(--surface-soft);
        border: 0;
        border-radius: 999px;
        cursor: pointer;
        display: inline-flex;
        height: 30px;
        justify-content: center;
        width: 30px;
      }

      .lipsync-transcript-close .ui-icon {
        height: 13px;
        width: 13px;
      }

      .lipsync-transcript-card p {
        color: var(--text-secondary);
        font-size: var(--web-type-body);
        line-height: 1.55;
        margin: 0;
        overflow-y: auto;
        white-space: pre-wrap;
      }

      .brief-composer {
        margin-top: 0;
        max-height: none;
        min-height: 120px;
        padding: 0;
      }

      .brief-composer .inline-link-entry {
        background: var(--surface);
      }

      /* The reference dock's divider spans the full card width; the trigger
         keeps its inset via padding instead of margin. */
      .brief-composer > .prompt-reference-dock {
        border-top: 1px solid var(--brief-prompt-divider-color);
        margin: 0;
        padding: 8px var(--brief-prompt-divider-inset) 10px;
      }

      .brief-prompt {
        flex: 0 0 auto;
        min-height: 0;
        overflow: hidden;
      }

      .brief-prompt.is-dragging {
        box-shadow: inset 0 0 0 2px rgba(24, 24, 27, 0.18);
      }

      .brief-prompt .prompt-editor {
        box-sizing: border-box;
        font-size: var(--web-type-body);
        height: auto;
        line-height: 1.45;
        max-height: var(--brief-prompt-max-height);
        min-height: var(--brief-prompt-min-height);
        overflow-y: hidden;
        padding: var(--brief-prompt-top-inset) var(--brief-prompt-inline-inset) 8px;
        scrollbar-width: none;
      }

      .brief-prompt .prompt-editor::-webkit-scrollbar {
        display: none;
      }

      .brief-prompt .prompt-editor.is-empty::before {
        font-size: inherit;
        line-height: inherit;
      }

      .prompt-resource-section {
        border-top: 0;
        display: grid;
        flex: 0 0 auto;
        gap: 6px;
        padding: 6px 14px 8px;
        width: 100%;
      }

      .prompt-resource-section[hidden],
      .prompt-elements-row[hidden],
      .prompt-specific-resources[hidden],
      .prompt-specific-resources > [hidden] {
        display: none !important;
      }

      .prompt-elements-row {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
        margin: 0;
        min-height: 28px;
        overflow: hidden;
        scrollbar-width: none;
        width: 100%;
      }

      .prompt-elements-row::-webkit-scrollbar {
        display: none;
      }

      .brief-composer .prompt-resources {
        border-top: 0;
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
        margin: 0;
        padding: 0;
      }

      .prompt-specific-resources {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
      }

      .prompt-specific-resources > .brief-sources {
        align-items: center;
        display: flex;
        flex: 0 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
        overflow: hidden;
        width: auto;
      }

      .prompt-elements-row .brief-sources {
        align-items: center;
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
        width: 100%;
      }

      .prompt-elements-row .source-chip,
      .prompt-specific-resources .source-chip {
        flex: 0 1 auto;
        max-width: min(160px, 100%);
        min-width: 0;
        width: fit-content;
      }

      .prompt-elements-row .source-chip-more,
      .prompt-specific-resources .source-chip-more {
        flex: 0 0 auto;
        height: 28px;
        min-height: 28px;
        padding: 0 10px;
      }

      .prompt-elements-row .source-chip,
      .prompt-specific-resources .source-chip {
        grid-template-columns: 20px minmax(0, 1fr) 24px;
        min-height: 28px;
        padding: 2px 4px;
        white-space: nowrap;
      }

      .prompt-elements-row .source-chip-media,
      .prompt-elements-row .source-chip > img,
      .prompt-specific-resources .source-chip-media,
      .prompt-specific-resources .source-chip > img {
        height: 20px;
        width: 20px;
      }

      .prompt-elements-row .source-chip-copy small,
      .prompt-specific-resources .source-chip-copy small {
        display: none;
      }

      .brief-options {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 0;
        width: 100%;
      }

      .brief-options .brief-control {
        flex: 0 0 auto;
        min-height: 0;
        width: auto;
      }

      .brief-options .brief-control > button {
        background: var(--workspace-control-surface);
        gap: 7px;
        margin-left: 0;
        min-height: 34px;
        padding: 0 12px;
      }

      .brief-options .brief-control > button:hover,
      .brief-options .brief-control > button:focus-visible {
        background: color-mix(in srgb, var(--surface) 96%, var(--text-primary));
      }

      .brief-options .brief-control > button .ui-icon {
        fill: currentColor;
        height: 16px;
        stroke: none;
        width: 16px;
      }

      .workspace-generate {
        font-variant-numeric: tabular-nums;
        min-height: 40px;
      }

      @media (min-width: 761px) and (max-height: 760px) {
        .brief-panel {
          --brief-section-gap: 2px;
          --brief-upload-banner-height: 116px;
          gap: var(--brief-section-gap);
        }

        /* Side-by-side cards keep their subtitles readable even in the
           short-viewport density mode: grow past the compact banner height
           instead of clipping the copy. */
        #brief-upload-slots .brief-input-pair > .brief-asset-box {
          height: auto;
          min-height: 124px;
        }

        .brief-selected-preset .model-option > button {
          height: 150px;
        }

        .brief-selected-preset,
        .brief-assets,
        .brief-composer,
        .brief-options {
          margin-top: 0;
        }

        .brief-options {
          gap: 5px;
        }
      }

      @media (max-width: 760px) {
        .brief-panel {
          --brief-section-gap: 10px;
          --brief-upload-banner-height: 154px;
          box-sizing: border-box;
          gap: var(--brief-section-gap);
          height: auto;
          max-height: none;
          min-height: calc(100dvh - var(--workspace-nav-height));
          overflow: visible;
          padding:
            12px max(16px, env(safe-area-inset-right))
            max(24px, env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
          position: relative;
          top: auto;
          width: 100%;
        }

        .brief-panel > .brief-tool-selector,
        .brief-panel > .brief-selected-preset,
        .brief-panel > .brief-assets,
        .brief-panel > .brief-composer,
        .brief-panel > .brief-options,
        .brief-panel > .composer-requirement,
        .brief-panel > .workspace-generate-row {
          margin-inline: auto;
          max-width: 560px;
          width: 100%;
        }

        .brief-tool-selector .workspace-canvas-tool {
          min-height: 48px;
        }

        .brief-tool-selector .tool-picker {
          border-radius: 18px;
          grid-template-columns: minmax(0, 1fr);
          overscroll-behavior: contain;
        }

        .brief-selected-preset .model-option > button {
          height: clamp(176px, 48vw, 220px);
        }

        #brief-upload-slots .brief-input-pair > .brief-asset-box {
          height: var(--brief-upload-banner-height);
          min-height: var(--brief-upload-banner-height);
        }

        /* Touch users cannot discover the desktop hover-only replacement
           action, so selected paired media keeps the action visible. */
        .brief-input-pair > .brief-asset-box.is-filled .brief-asset-selection-action {
          filter: blur(0);
          opacity: 1;
          pointer-events: auto;
          scale: 1;
        }

        .brief-composer {
          min-height: 156px;
        }

        .brief-prompt textarea {
          min-height: 84px;
        }

        .brief-options {
          gap: 8px;
        }

        .brief-options .brief-control > button {
          min-height: 38px;
          padding-inline: 13px;
        }

        .workspace-generate-row {
          bottom: max(12px, env(safe-area-inset-bottom));
          min-height: 52px;
          position: sticky;
        }

        .workspace-generate-row > .workspace-generate.workspace-generate,
        .workspace-quantity > button {
          height: 52px;
          min-height: 52px;
        }

        .workspace-generate-row > .workspace-generate.workspace-generate {
          margin-top: 0;
        }
      }

      @media (max-width: 460px) {
        .brief-panel {
          --brief-upload-banner-height: 96px;
        }

        .brief-input-pair {
          flex-direction: column;
        }

        #brief-upload-slots .brief-input-pair > .brief-asset-box:not(.is-filled) {
          gap: 12px;
          grid-template-columns: 48px minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr);
          justify-items: start;
          padding: 10px 14px;
          text-align: left;
        }

        .brief-input-pair > .brief-asset-box:not(.is-filled) > span:last-child {
          justify-items: start;
          text-align: left;
        }

        .brief-input-pair .brief-asset-box small {
          -webkit-line-clamp: 2;
          min-height: 0;
        }

        .brief-selected-preset .model-option > button {
          height: clamp(164px, 52vw, 196px);
        }

        .brief-composer {
          min-height: 168px;
        }

        .brief-prompt textarea {
          min-height: 96px;
        }

        .brief-options .brief-control > button {
          min-height: 40px;
        }

        .workspace-generate-row {
          grid-template-columns: minmax(0, 1fr) 72px;
        }
      }

      /* On phones, the creation rail becomes a lightweight prompt composer.
         The complete controls remain available as a bottom sheet, so the
         gallery gets the viewport while no capability is removed. */
      /* Matches the width at which client-facing-contract.ts removes the
         desktop rail. The two numbers have to be the same one: between them
         there was no rail and no composer, so from 761px to 1180px the studio
         had no prompt and no Generate button at all. The rail is still all-or-
         nothing — a compressed rail helps nobody — so everything below the
         desktop width gets the composer and the bottom sheet. */
      @media (max-width: 1180px) {
        body:not(.mobile-composer-expanded) .video-workspace > .brief-panel {
          display: none;
        }

        body.mobile-composer-expanded {
          overflow: hidden !important;
          overscroll-behavior: none;
        }

        body.mobile-composer-expanded .video-workspace > .brief-panel {
          animation: mobile-creator-sheet-in 180ms cubic-bezier(0.2, 0, 0, 1);
          background: var(--surface);
          border: 0;
          border-radius: 28px 28px 0 0;
          bottom: 0;
          box-shadow:
            0 -1px 0 rgba(24, 24, 27, 0.04),
            0 -18px 54px rgba(24, 24, 27, 0.16);
          display: flex;
          height: auto;
          left: 0;
          max-height: min(88dvh, 780px);
          min-height: 0;
          overflow-x: hidden;
          overflow-y: auto;
          overscroll-behavior: contain;
          padding:
            0 max(16px, env(safe-area-inset-right))
            max(22px, env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
          position: fixed;
          right: 0;
          top: auto;
          width: 100%;
          z-index: 122;
        }

        @keyframes mobile-creator-sheet-in {
          from {
            opacity: 0;
            transform: translateY(24px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* The sheet's own header already names the tool, so the panel's tool
           selector repeating it two lines below was the same words twice. The
           picker is still reachable from the settings row above the field. */
        body.mobile-composer-expanded .brief-tool-selector {
          display: none;
        }

        /* Sticky rather than floating: in flow it reserves its own space, so
           the last control row scrolls above it instead of under it, and the
           button stays reachable at the bottom of the sheet the whole time.
           The accent lives on the row, not on the button inside it, so this
           must never repaint the background — the surface halo is what hides
           content scrolling past the pill's edges. */
        body.mobile-composer-expanded .workspace-generate-row {
          bottom: 0;
          box-shadow:
            0 0 0 10px var(--surface),
            0 26px 0 10px var(--surface);
          position: sticky;
          z-index: 3;
        }

        /* In the rail the composer stretches to fill the column. In a sheet
           sized to its content that became a half-screen of empty field with
           the settings pushed off the bottom, so here it takes only the room
           it needs and grows with the text. */
        body.mobile-composer-expanded .brief-composer {
          flex: 0 0 auto;
          min-height: 0;
        }

        /* The rail's field is sized for a tall column. In a sheet the same
           250px of empty box pushed the settings and Generate off the screen,
           so the field starts small and grows with what is typed. */
        body.mobile-composer-expanded .video-workspace > .brief-panel {
          --brief-prompt-max-height: 30dvh;
          --brief-prompt-min-height: 112px;
        }

        .mobile-panel-header {
          align-items: center;
          background: rgba(255, 255, 255, 0.96);
          display: grid;
          flex: 0 0 auto;
          grid-template-columns: minmax(0, 1fr) 40px;
          margin-inline: -2px;
          min-height: 62px;
          padding: 10px 2px 6px;
          position: sticky;
          top: 0;
          z-index: 4;
        }

        .mobile-panel-handle {
          background: rgba(24, 24, 27, 0.16);
          border-radius: 999px;
          height: 4px;
          left: 50%;
          position: absolute;
          top: 7px;
          transform: translateX(-50%);
          width: 36px;
        }

        .mobile-panel-header strong {
          font-size: var(--web-type-body);
          font-weight: var(--font-ui-medium);
          padding-left: 4px;
        }

        .mobile-panel-header button {
          align-items: center;
          background: var(--workspace-control-surface);
          border-radius: 14px;
          color: var(--text-secondary);
          display: inline-flex;
          height: 40px;
          justify-content: center;
          transition:
            background-color 120ms cubic-bezier(0.2, 0, 0, 1),
            transform 100ms cubic-bezier(0.2, 0, 0, 1);
          width: 40px;
        }

        /* 40px reads better against the 62px header than a 44px block does,
           so the finger target is an overlay rather than the button's own box.
           Same trick as the composer pills. */
        .mobile-panel-header button {
          position: relative;
        }

        .mobile-panel-header button::after {
          content: "";
          inset: -2px;
          position: absolute;
        }

        /* The settings pills are drawn at rail scale (34px). In the sheet they
           are the primary way to change duration, ratio and quality, so they
           grow to a thumb-sized target without changing the visual rhythm. */
        body.mobile-composer-expanded .brief-options .brief-control > button {
          min-height: 40px;
          position: relative;
        }

        body.mobile-composer-expanded .brief-options .brief-control > button::after {
          content: "";
          inset: -2px 0;
          position: absolute;
        }

        .mobile-panel-header button .ui-icon {
          height: 17px;
          width: 17px;
        }

        /* A surface lent to the body by a chat-bar pill still has to clear the
           bar itself (120) and the sheet layer above it. */
        .is-mobile-anchored {
          z-index: 130;
        }

        /* Lending the picker to the body drops the rail's descendant styling
           with it, so the phone layout has to be restated here. */
        .tool-picker.is-mobile-anchored {
          border-radius: 18px;
          grid-template-columns: minmax(0, 1fr);
          overscroll-behavior: contain;
        }

        .mobile-composer-backdrop {
          backdrop-filter: blur(2px);
          background: rgba(24, 24, 27, 0.18);
          display: block;
          inset: 0;
          position: fixed;
          z-index: 121;
        }

        .mobile-composer {
          background: var(--surface);
          border-radius: 24px;
          bottom: max(18px, env(safe-area-inset-bottom));
          box-shadow:
            0 1px 2px rgba(24, 24, 27, 0.05),
            0 12px 34px rgba(24, 24, 27, 0.16);
          display: flex;
          flex-direction: column;
          gap: 8px;
          left: max(18px, env(safe-area-inset-left));
          opacity: 1;
          padding: 10px;
          position: fixed;
          right: max(18px, env(safe-area-inset-right));
          transform: translateY(0);
          transition:
            opacity 140ms cubic-bezier(0.2, 0, 0, 1),
            transform 180ms cubic-bezier(0.2, 0, 0, 1);
          z-index: 120;
        }

        .mobile-composer.is-dragging {
          background: color-mix(in srgb, var(--surface) 92%, var(--text-primary));
          transform: translateY(-2px);
        }

        /* Names the action the same way the desktop prompt does. The composer
           is already position: fixed, so it is its own containing block. */
        .mobile-composer.is-dragging::after {
          align-items: center;
          background: rgba(232, 232, 234, 0.92);
          border-radius: inherit;
          color: var(--text-secondary);
          content: "Drop to add reference media";
          display: flex;
          font-size: var(--web-type-control);
          font-weight: var(--font-ui-medium);
          inset: 0;
          justify-content: center;
          pointer-events: none;
          position: absolute;
          z-index: 3;
        }

        body.mobile-composer-expanded .mobile-composer {
          opacity: 0;
          pointer-events: none;
          transform: translateY(14px);
        }

        /* Settings sit above the field, scrolling horizontally. The mask fades
           the last pill out at the edge instead of guillotining it, which is
           what tells you the row keeps going — the scrollbar is hidden, so
           without it a clipped pill just looks like a rendering mistake. */
        /* Touch targets, same reasoning as the pills: the tab keeps its compact
           look and gains the 44px a finger needs. */
        .workspace-view-tabs button {
          position: relative;
        }

        /* ::before, not ::after: the library toolbar's Discover/Generations
           tabs already draw their active underline with ::after, and an inset
           here would move that 2px bar to the top of the button. */
        .workspace-view-tabs button::before {
          content: "";
          /* The tab draws at 37px; a finger gets 45. */
          inset: -4px 0;
          position: absolute;
        }

        .mobile-composer-pills {
          display: flex;
          gap: 6px;
          -webkit-mask-image: linear-gradient(
            to right,
            #000 calc(100% - 24px),
            transparent 100%
          );
          mask-image: linear-gradient(
            to right,
            #000 calc(100% - 24px),
            transparent 100%
          );
          max-width: 100%;
          overflow-x: auto;
          overscroll-behavior-inline: contain;
          padding-bottom: 2px;
          scroll-snap-type: inline proximity;
          scrollbar-width: none;
        }

        /* Nothing to fade once the row fits: the mask would dim a pill that is
           fully on screen. */
        .mobile-composer-pills:not(:hover):has(> button:last-child:nth-child(-n + 3)) {
          -webkit-mask-image: none;
          mask-image: none;
        }

        .mobile-composer-pills::-webkit-scrollbar {
          display: none;
        }

        .mobile-composer-pills button {
          align-items: center;
          background: var(--workspace-control-surface);
          border-radius: 14px;
          color: var(--text-secondary);
          display: inline-flex;
          flex: 0 0 auto;
          font-size: var(--web-type-control);
          font-variant-numeric: tabular-nums;
          font-weight: var(--font-ui-medium);
          gap: 6px;
          justify-content: center;
          max-width: 180px;
          min-height: 36px;
          padding: 0 12px;
          position: relative;
          scroll-snap-align: start;
          transition:
            background-color 120ms cubic-bezier(0.2, 0, 0, 1),
            color 120ms cubic-bezier(0.2, 0, 0, 1),
            transform 100ms cubic-bezier(0.2, 0, 0, 1);
        }

        /* The chip is 36px because it is secondary to the 44px row; the touch
           target is not. This extends the hit area to 44px without changing a
           pixel of what is drawn. */
        .mobile-composer-pills button::after {
          content: "";
          inset: -4px 0;
          position: absolute;
        }

        .mobile-composer-pills button:first-child {
          background: color-mix(
            in srgb,
            var(--workspace-control-surface) 60%,
            var(--text-primary) 8%
          );
          color: var(--text-primary);
        }

        .mobile-composer-pills button span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .mobile-composer-pills button .ui-icon {
          flex: 0 0 15px;
          height: 15px;
          width: 15px;
        }

        /* One line of equal controls with the field between them, so the row
           reads as a single bar rather than four objects of three sizes. The
           send button earns its emphasis from colour, not from being 4px
           taller than its neighbours. */
        .mobile-composer-row {
          align-items: stretch;
          display: grid;
          gap: 8px;
          grid-template-columns: 48px minmax(0, 1fr) 48px;
          min-width: 0;
        }

        .mobile-composer-attach,
        .mobile-composer-generate {
          align-items: center;
          border-radius: 20px;
          display: inline-flex;
          justify-content: center;
          transition:
            background-color 120ms cubic-bezier(0.2, 0, 0, 1),
            color 120ms cubic-bezier(0.2, 0, 0, 1),
            transform 100ms cubic-bezier(0.2, 0, 0, 1);
        }

        .mobile-composer-attach {
          background: var(--workspace-control-surface);
          color: var(--text-secondary);
          width: 48px;
        }

        .mobile-composer-generate {
          background: var(--text-primary);
          color: var(--surface);
          width: 48px;
        }

        .mobile-composer-generate:disabled {
          background: var(--workspace-control-surface);
          color: var(--text-secondary);
          opacity: 1;
        }

        .mobile-composer-row > button .ui-icon {
          height: 19px;
          width: 19px;
        }

        .mobile-composer-field {
          align-items: center;
          align-self: stretch;
          background: var(--workspace-control-surface);
          border-radius: 24px;
          display: flex;
          min-width: 0;
          /* No vertical padding: the textarea already carries it. Splitting it
             between the two made the field a few pixels taller than the round
             controls beside it, which reads as a misaligned bar. */
          padding: 0 16px;
        }

        .mobile-composer-field textarea {
          background: transparent;
          border: 0;
          color: var(--text-primary);
          display: block;
          font-size: 1rem;
          /* 22px of text in a 48px box: 13px above and below puts the first
             line on the same centre line as the icons beside it. */
          line-height: 22px;
          max-height: 110px;
          /* Two lines of room from the start: one-line-tall fields read as a
             search box, and the prompt is usually a sentence or two. */
          min-height: 70px;
          outline: 0;
          overflow-y: auto;
          padding: 13px 0;
          resize: none;
          scrollbar-width: none;
          width: 100%;
        }

        .mobile-composer-field textarea::-webkit-scrollbar {
          display: none;
        }

        .mobile-composer-field textarea::placeholder {
          color: var(--text-secondary);
          opacity: 1;
        }

        /* The composer stays on screen on both tabs — starting a generation
           while looking at the ones you have is the whole point of a chat bar
           — so both tabs owe it the same clearance. */
        .video-workspace > .workspace-library {
          padding-bottom: calc(160px + env(safe-area-inset-bottom));
        }

        body.mobile-composer-expanded .video-workspace > .workspace-library {
          pointer-events: none;
        }
      }

      
      .project-configured-tool-panel {
        overflow-x: hidden;
      }

      .project-configured-tool-form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        padding: 2px 6px 6px;
      }

      .project-configured-tool-surface {
        background: var(--workspace-control-surface);
        border-radius: 14px;
      }

      .project-upscale-model {
        align-items: center;
        display: grid;
        gap: 11px;
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 60px;
        padding: 8px;
        text-align: left;
        width: 100%;
      }

      .project-edit-tool-form .project-tool-action-description {
        margin: 0 0 2px;
      }

      .project-edit-model-picker {
        position: relative;
        z-index: 4;
      }

      .project-edit-model {
        align-items: center;
        cursor: pointer;
        display: grid;
        gap: 11px;
        grid-template-columns: 42px minmax(0, 1fr) 14px;
        min-height: 60px;
        padding: 8px 12px 8px 8px;
        position: relative;
        text-align: left;
        width: 100%;
      }

      .project-edit-model:hover {
        background: var(--surface-hover);
      }

      .project-edit-model:active {
        scale: 0.96;
      }

      .project-edit-model[aria-expanded="true"],
      .project-edit-model:focus-visible {
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(255, 61, 85, 0.18);
      }

      .project-edit-model .project-configured-tool-carets {
        transition-duration: 120ms;
        transition-property: transform;
        transition-timing-function: var(--workspace-ease);
      }

      .project-edit-model[aria-expanded="true"] .project-configured-tool-carets {
        transform: rotate(180deg);
      }

      .project-edit-model-menu {
        background: rgba(255, 255, 255, 0.98);
        border-radius: 14px;
        box-shadow: 0 0 0 1px rgba(24, 24, 27, 0.06), 0 12px 28px rgba(24, 24, 27, 0.14);
        display: grid;
        gap: 3px;
        left: 0;
        opacity: 0;
        position: absolute;
        pointer-events: none;
        right: 0;
        top: calc(100% + 7px);
        transform: translateY(-5px);
        transition-duration: 140ms;
        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        padding: 7px;
        width: 100%;
        z-index: 22;
      }

      .project-edit-model-menu[hidden] {
        display: none;
      }

      .project-edit-model-menu.open,
      .project-edit-model-menu[data-state="open"] {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .project-edit-model-option {
        align-items: center;
        background: transparent;
        border-radius: 10px;
        color: var(--text-primary);
        display: grid;
        gap: 10px;
        grid-template-columns: 36px minmax(0, 1fr) 16px;
        min-height: 52px;
        padding: 8px;
        text-align: left;
        transition-duration: 100ms;
        transition-property: background-color, scale;
        transition-timing-function: var(--workspace-ease);
        width: 100%;
      }

      .project-edit-model-option:hover,
      .project-edit-model-option:focus-visible,
      .project-edit-model-option[aria-selected="true"] {
        background: var(--surface-hover);
      }

      .project-edit-model-option:active {
        scale: 0.96;
      }

      .project-edit-model-option-icon,
      .project-edit-model-option-image {
        align-items: center;
        background: #27272a;
        border-radius: 9px;
        color: #ffffff;
        display: inline-flex;
        height: 36px;
        justify-content: center;
        object-fit: cover;
        outline: 1px solid rgba(0, 0, 0, 0.1);
        outline-offset: -1px;
        width: 36px;
      }

      .project-edit-model-option-icon .ui-icon {
        height: 17px;
        width: 17px;
      }

      .project-edit-model-option-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .project-edit-model-option-copy strong {
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
      }

      .project-edit-model-option-copy small {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .project-edit-model-option-check {
        color: var(--text-primary);
        display: inline-flex;
        opacity: 0;
      }

      .project-edit-model-option[aria-selected="true"] .project-edit-model-option-check {
        opacity: 1;
      }

      .project-edit-model-option-check .ui-icon {
        height: 14px;
        width: 14px;
      }

      .project-edit-prompt {
        flex: 0 0 auto;
        font: inherit;
        line-height: 1.5;
        min-height: 176px;
        width: 100%;
      }

      /* Optional visual-reference dropwell, per the reference comp. */
      .project-edit-reference {
        align-items: center;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        min-height: 150px;
        padding: 18px;
        position: relative;
        text-align: center;
        width: 100%;
      }

      .project-edit-reference-icon {
        align-items: center;
        background: rgba(24, 24, 27, 0.05);
        border-radius: 10px;
        color: #7b7b81;
        display: inline-flex;
        height: 38px;
        justify-content: center;
        width: 38px;
      }

      .project-edit-reference-icon .ui-icon {
        height: 16px;
        stroke-width: 1.5;
        width: 16px;
      }

      .project-edit-reference-copy {
        display: grid;
        gap: 3px;
      }

      .project-edit-reference-copy strong {
        color: #18181b;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.3;
      }

      .project-edit-reference-copy small {
        color: #a1a1aa;
        font-size: var(--web-type-body);
        line-height: 1.3;
      }

      .project-edit-reference-preview {
        border-radius: 10px;
        height: 44px;
        object-fit: cover;
        width: 44px;
      }

      .project-edit-settings {
        display: grid;
      }

      .project-edit-setting {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 48px;
      }

      .project-edit-setting + .project-edit-setting {
        border-top: 1px solid rgba(24, 24, 27, 0.06);
      }

      .project-edit-setting-label {
        align-items: center;
        color: #a1a1aa;
        display: inline-flex;
        font-size: var(--web-type-label);
        gap: 10px;
      }

      .project-edit-setting-label .ui-icon {
        fill: none !important;
        height: 15px;
        stroke: currentColor !important;
        stroke-width: 1.35;
        width: 15px;
      }

      .project-edit-setting-label .ui-icon * {
        fill: none !important;
        stroke: currentColor !important;
      }

      .project-upscale-model-icon {
        align-items: center;
        background: #27272a;
        border-radius: 10px;
        color: #ffffff;
        display: inline-flex;
        height: 42px;
        justify-content: center;
        width: 42px;
      }

      .project-upscale-model-icon .ui-icon {
        height: 19px;
        width: 19px;
      }

      .project-upscale-model-copy,
      .project-upscale-preset-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .project-upscale-model-copy strong,
      .project-upscale-preset-copy strong,
      .project-upscale-scale > strong,
      .project-reframe-ratios > strong {
        color: var(--text-primary);
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
      }

      .project-upscale-model-copy small,
      .project-upscale-preset-copy small,
      .project-upscale-scale > small,
      .project-reframe-ratios > small {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        line-height: 1.35;
        text-wrap: pretty;
      }

      .project-configured-tool-carets {
        align-items: center;
        color: var(--text-muted);
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .project-configured-tool-carets .ui-icon {
        height: 8px;
        width: 8px;
      }

      .project-upscale-scale {
        display: grid;
        gap: 2px;
        padding: 12px;
      }

      .project-upscale-scale-options {
        background: rgba(24, 24, 27, 0.035);
        border-radius: 10px;
        display: grid;
        gap: 3px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 8px;
        padding: 3px;
      }

      .project-upscale-scale-options button {
        background: transparent;
        border-radius: 7px;
        color: var(--text-muted);
        font-size: var(--web-type-control);
        height: 32px;
        padding: 0 6px;
        transition: background-color 120ms var(--workspace-ease), box-shadow 120ms var(--workspace-ease), color 120ms var(--workspace-ease);
      }

      .project-upscale-scale-options button.is-selected {
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(24, 24, 27, 0.08);
        color: var(--text-primary);
      }

      .project-upscale-preset {
        align-items: center;
        display: grid;
        gap: 11px;
        grid-template-columns: 36px minmax(0, 1fr) 14px;
        min-height: 58px;
        padding: 9px 12px;
      }

      .project-upscale-preset-icon {
        align-items: center;
        background: rgba(255, 255, 255, 0.58);
        border-radius: 10px;
        color: var(--text-muted);
        display: inline-flex;
        height: 36px;
        justify-content: center;
        width: 36px;
      }

      .project-upscale-preset-icon .ui-icon {
        height: 16px;
        width: 16px;
      }

      .project-upscale-range-field {
        display: grid;
        gap: 8px;
        padding: 4px 1px 0;
      }

      .project-upscale-range-heading {
        align-items: center;
        color: var(--text-primary);
        display: flex;
        font-size: var(--web-type-control);
        gap: 5px;
      }

      .project-upscale-range-info {
        align-items: center;
        background: transparent;
        color: var(--text-muted);
        display: inline-flex;
        height: 18px;
        justify-content: center;
        padding: 0;
        position: relative;
        width: 18px;
      }

      .project-upscale-range-info::after {
        background: rgba(24, 24, 27, 0.92);
        border-radius: 8px;
        bottom: calc(100% + 7px);
        color: #ffffff;
        content: attr(data-tooltip);
        font-size: var(--web-type-caption);
        left: 0;
        line-height: 1.35;
        max-width: 220px;
        opacity: 0;
        padding: 7px 9px;
        pointer-events: none;
        position: absolute;
        text-align: left;
        transform: translateY(3px);
        transition: opacity 120ms var(--workspace-ease), transform 120ms var(--workspace-ease);
        visibility: hidden;
        white-space: normal;
        width: max-content;
        z-index: 20;
      }

      .project-upscale-range-info:hover::after,
      .project-upscale-range-info:focus-visible::after {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
      }

      .project-upscale-range-info .ui-icon {
        height: 12px;
        width: 12px;
      }

      .project-upscale-range-control {
        align-items: center;
        background: var(--workspace-control-surface);
        border-radius: 11px;
        box-shadow: none;
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        height: 38px;
        overflow: hidden;
      }

      .project-upscale-range-number {
        appearance: textfield;
        background: transparent;
        border: 0;
        color: var(--text-primary);
        font: inherit;
        font-size: var(--web-type-control);
        height: 100%;
        outline: 0;
        padding: 0 0 0 12px;
        width: 100%;
      }

      .project-upscale-range-number::-webkit-inner-spin-button,
      .project-upscale-range-number::-webkit-outer-spin-button {
        appearance: none;
        margin: 0;
      }

      .project-upscale-range {
        appearance: none;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) var(--range-progress), rgba(24, 24, 27, 0.055) var(--range-progress));
        border-radius: 999px;
        height: 4px;
        margin: 0 14px 0 0;
        outline: 0;
        width: calc(100% - 14px);
      }

      .project-upscale-range::-webkit-slider-thumb {
        appearance: none;
        background: #ffffff;
        border: 0;
        border-radius: 999px;
        box-shadow: 0 1px 4px rgba(24, 24, 27, 0.2);
        height: 14px;
        width: 14px;
      }

      .project-upscale-range::-moz-range-thumb {
        background: #ffffff;
        border: 0;
        border-radius: 999px;
        box-shadow: 0 1px 4px rgba(24, 24, 27, 0.2);
        height: 14px;
        width: 14px;
      }

      .project-configured-tool-generate-wrap {
        display: grid;
        gap: 7px;
        margin-top: 10px;
      }

      .project-configured-tool-generate {
        align-items: center;
        background: #18181b;
        border-radius: var(--workspace-pill-radius);
        color: #ffffff;
        display: flex;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        gap: 8px;
        height: 46px;
        justify-content: center;
        padding: 0 16px;
        transition: background-color 120ms var(--workspace-ease), scale 120ms var(--workspace-ease);
        width: 100%;
      }

      .project-configured-tool-generate:hover,
      .project-configured-tool-generate:focus-visible {
        background: #000000;
      }

      .project-configured-tool-generate.is-confirmed {
        background: #18181b;
      }

      .project-configured-tool-credits {
        align-items: center;
        background: rgba(255, 255, 255, 0.07);
        border-radius: var(--workspace-pill-radius);
        display: inline-flex;
        font-variant-numeric: tabular-nums;
        gap: 3px;
        padding: 3px 7px;
      }

      .project-configured-tool-credits > span,
      .project-configured-tool-credits .ui-icon {
        display: inline-flex;
        height: 11px;
        width: 11px;
      }

      .project-configured-tool-local-status {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        min-height: 16px;
        text-align: center;
      }

      .project-reframe-ratios {
        display: grid;
        gap: 2px;
      }

      .project-reframe-ratio-grid {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 10px;
      }

      .project-reframe-ratio {
        align-items: center;
        background: rgba(24, 24, 27, 0.022);
        border-radius: 10px;
        color: var(--text-secondary);
        display: flex;
        flex-direction: column;
        height: 112px;
        justify-content: center;
        padding: 8px 5px;
        transition: background-color 120ms var(--workspace-ease), box-shadow 120ms var(--workspace-ease), color 120ms var(--workspace-ease);
      }

      .project-reframe-ratio:not(:disabled):hover,
      .project-reframe-ratio:focus-visible {
        background: var(--workspace-control-surface);
      }

      .project-reframe-ratio.is-selected {
        background: rgba(255, 61, 81, 0.025);
        box-shadow: inset 0 0 0 1px var(--accent);
        color: var(--text-primary);
      }

      .project-reframe-ratio-preview {
        background: linear-gradient(145deg, #ededee, #e5e5e7);
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.035);
        display: block;
        height: 32px;
        margin-bottom: 10px;
        width: 46px;
      }

      .project-reframe-ratio[data-reframe-aspect="9:16"] .project-reframe-ratio-preview {
        height: 42px;
        width: 24px;
      }

      .project-reframe-ratio[data-reframe-aspect="1:1"] .project-reframe-ratio-preview {
        height: 34px;
        width: 34px;
      }

      .project-reframe-ratio[data-reframe-aspect="2:3"] .project-reframe-ratio-preview {
        height: 38px;
        width: 26px;
      }

      .project-reframe-ratio[data-reframe-aspect="4:3"] .project-reframe-ratio-preview {
        height: 32px;
        width: 42px;
      }

      .project-reframe-ratio[data-reframe-aspect="3:4"] .project-reframe-ratio-preview {
        height: 40px;
        width: 30px;
      }

      .project-reframe-ratio.is-selected .project-reframe-ratio-preview {
        background: rgba(255, 61, 81, 0.035);
        box-shadow: inset 0 0 0 1px var(--accent);
      }

      .project-reframe-ratio:disabled {
        background: rgba(24, 24, 27, 0.012);
        box-shadow: none;
        color: var(--text-muted);
        cursor: not-allowed;
        opacity: 0.42;
      }

      .project-reframe-ratio:disabled .project-reframe-ratio-preview {
        background: linear-gradient(145deg, #f1f1f2, #ebebed);
        box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.025);
      }

      .project-reframe-ratio strong {
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
        line-height: 1.2;
      }

      .project-reframe-ratio small {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        line-height: 1.25;
        margin-top: 4px;
      }

      .project-tool-select {
        display: inline-flex;
        position: relative;
      }

      .project-tool-select-trigger {
        align-items: center;
        background: var(--workspace-control-surface);
        border: 0;
        border-radius: var(--workspace-pill-radius);
        color: var(--text-primary);
        cursor: pointer;
        display: inline-flex;
        font: inherit;
        font-size: var(--web-type-control);
        gap: 7px;
        height: 36px;
        justify-content: space-between;
        min-width: 78px;
        padding: 0 11px 0 13px;
      }

      .project-tool-select-trigger:hover {
        background: #ebebea;
      }

      .project-tool-select-caret,
      .project-tool-select-caret .ui-icon {
        color: var(--text-muted);
        display: inline-flex;
        height: 12px;
        width: 12px;
      }

      .project-tool-select-menu {
        background: #ffffff;
        border: 1px solid rgba(24, 24, 28, 0.08);
        border-radius: 12px;
        box-shadow: 0 14px 38px rgba(24, 24, 28, 0.14);
        display: grid;
        gap: 2px;
        opacity: 0;
        overflow: auto;
        padding: 4px;
        transform: translateY(-2px) scale(0.98);
        transition: opacity 120ms ease, transform 120ms ease;
        z-index: 190;
      }

      .project-tool-select-menu.open {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      .project-tool-select-menu[hidden] {
        display: none;
      }

      .project-tool-select-menu button {
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--text-primary);
        cursor: pointer;
        font: inherit;
        font-size: var(--web-type-control);
        min-height: 32px;
        padding: 0 10px;
        text-align: left;
        width: 100%;
      }

      .project-tool-select-menu button:hover,
      .project-tool-select-menu button:focus-visible,
      .project-tool-select-menu button[aria-selected="true"] {
        background: var(--workspace-control-surface);
        outline: 0;
      }

      .project-reframe-quality {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-top: 14px;
        min-height: 40px;
      }

      .project-reframe-quality > span:first-child {
        align-items: center;
        color: var(--text-muted);
        display: inline-flex;
        font-size: var(--web-type-control);
        gap: 8px;
      }

      .project-reframe-quality > span:first-child > span,
      .project-reframe-quality > span:first-child .ui-icon {
        display: inline-flex;
        height: 14px;
        width: 14px;
      }

      @media (max-width: 1120px) {
        .project-configured-tool-form {
          padding-inline: 0;
        }

        .project-reframe-ratio-grid {
          gap: 6px;
        }

        .project-reframe-ratio {
          height: 104px;
        }
      }

      
      .project-relight-panel .project-tool-panel-body {
        gap: 12px;
        padding-top: 4px;
      }

      .project-relight-preset-card,
      .project-relight-selected,
      .project-relight-prompt {
        background: var(--workspace-control-surface);
        border-radius: 18px;
      }

      .project-relight-preset-card {
        border: 0;
        color: inherit;
        cursor: pointer;
        display: block;
        flex: 0 0 auto;
        overflow: hidden;
        padding: 0;
        text-align: left;
        width: 100%;
      }

      .project-relight-preset-card:focus-visible {
        box-shadow: 0 0 0 2px rgba(255, 61, 85, 0.18);
        outline: 0;
      }

      .project-relight-preset-card:disabled {
        cursor: default;
      }

      .project-relight-preset-strip {
        display: grid;
        gap: 2px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: 132px;
      }

      .project-relight-preset,
      .project-relight-preset-placeholder {
        background: #ececef;
        border-radius: 0;
        display: block;
        min-width: 0;
        overflow: hidden;
        position: relative;
      }

      .project-relight-preset-placeholder {
        animation: project-relight-placeholder 1.4s ease-in-out infinite alternate;
      }

      @keyframes project-relight-placeholder {
        to { background: #e3e3e7; }
      }

      .project-relight-preset.is-compact {
        aspect-ratio: 0.82;
      }

      .project-relight-preset img {
        height: 100%;
        object-fit: cover;
        transition: filter 140ms ease, transform 140ms ease;
        width: 100%;
      }

      .project-relight-preset:hover img {
        transform: scale(1.025);
      }

      .project-relight-preset[aria-pressed="true"]::after {
        border: 2px solid rgba(255, 255, 255, 0.94);
        border-radius: inherit;
        box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.12);
        content: "";
        inset: 2px;
        pointer-events: none;
        position: absolute;
      }

      .project-relight-browse {
        align-items: center;
        background: transparent;
        display: flex;
        gap: 10px;
        min-height: 66px;
        padding: 12px 15px;
        text-align: left;
        width: 100%;
      }

      .project-relight-preset-card:hover .project-relight-browse {
        background: rgba(24, 24, 27, 0.025);
      }

      .project-relight-browse > span:first-child {
        display: grid;
        flex: 1;
        gap: 3px;
        min-width: 0;
      }

      .project-relight-browse strong {
        color: var(--text-primary);
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.25;
      }

      .project-relight-browse small {
        color: var(--text-muted);
        font-size: var(--web-type-control);
        line-height: 1.3;
      }

      .project-relight-browse > span:last-child,
      .project-relight-browse .ui-icon {
        color: var(--text-muted);
        display: inline-flex;
        height: 14px;
        width: 14px;
      }

      .project-relight-preset-error {
        align-self: center;
        color: var(--text-muted);
        font-size: var(--web-type-control);
        grid-column: 1 / -1;
        justify-self: center;
        margin: 0;
      }

      .project-relight-selected {
        align-items: center;
        background: var(--workspace-control-surface);
        border-radius: 14px;
        display: flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        min-height: 150px;
        overflow: hidden;
        padding: 18px;
      }

      .project-relight-selected[hidden] {
        display: none;
      }

      .project-relight-selected.is-empty {
        padding: 0;
      }

      /* Empty reference dropwell, matching the comp's upload surface. */
      .project-relight-reference-empty {
        align-items: center;
        background: transparent;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: center;
        min-height: 150px;
        padding: 18px;
        text-align: center;
        width: 100%;
      }

      .project-relight-reference-empty strong {
        color: #18181b;
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.3;
        margin-top: 8px;
      }

      .project-relight-reference-empty small {
        color: #a1a1aa;
        font-size: var(--web-type-body);
        line-height: 1.3;
      }

      .project-relight-reference-icon {
        align-items: center;
        background: rgba(24, 24, 27, 0.05);
        border-radius: 10px;
        color: #7b7b81;
        display: inline-flex;
        height: 38px;
        justify-content: center;
        width: 38px;
      }

      .project-relight-reference-icon .ui-icon {
        height: 16px;
        stroke-width: 1.5;
        width: 16px;
      }

      .project-relight-selected-add {
        align-items: center;
        background: rgba(24, 24, 27, 0.05);
        border-radius: 12px;
        color: #7b7b81;
        display: inline-flex;
        height: 74px;
        justify-content: center;
        width: 74px;
      }

      .project-relight-selected-add:hover {
        background: rgba(24, 24, 27, 0.09);
        color: #4a4a4f;
      }

      .project-relight-selected-add .ui-icon {
        height: 18px;
        stroke-width: 1.5;
        width: 18px;
      }

      .project-relight-selected-preview {
        aspect-ratio: 1;
        border-radius: 12px;
        height: 74px;
        overflow: hidden;
        position: relative;
      }

      .project-relight-selected-preview img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .project-relight-selected-remove {
        align-items: center;
        background: #ffffff;
        border-radius: 999px;
        box-shadow: 0 1px 5px rgba(12, 12, 14, 0.14);
        color: #525258;
        display: inline-flex;
        height: 23px;
        justify-content: center;
        position: absolute;
        right: 4px;
        top: 4px;
        width: 23px;
      }

      .project-relight-selected-remove .ui-icon {
        height: 11px;
        stroke-width: 2.35;
        width: 11px;
      }

      .project-relight-prompt {
        border: 0;
        color: var(--text-primary);
        flex: 0 0 auto;
        font: inherit;
        font-size: var(--web-type-control);
        line-height: 1.5;
        min-height: 118px;
        outline: 0;
        padding: 15px;
        resize: vertical;
        width: 100%;
      }

      .project-relight-prompt::placeholder {
        color: var(--text-muted);
      }

      .project-relight-prompt:focus-visible {
        box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.16);
      }

      .project-relight-panel .project-tool-panel-footer {
        padding-top: 16px;
      }

      .project-relight-generate-wrap {
        display: grid;
        gap: 5px;
      }

      .project-relight-generate.project-tool-generate {
        background: #18181b;
        gap: 8px;
        height: 46px;
      }

      .project-relight-generate.is-confirmed {
        background: #18181b;
      }

      .project-relight-local-status {
        color: var(--text-muted);
        font-size: 0;
        min-height: 0;
        text-align: center;
      }

      .project-relight-modal-overlay {
        align-items: center;
        background: rgba(20, 20, 22, 0.58);
        display: flex;
        inset: 0;
        justify-content: center;
        padding: 28px;
        position: fixed;
        z-index: 260;
      }

      .project-relight-modal {
        background: #ffffff;
        border-radius: 22px;
        box-shadow: 0 24px 70px rgba(15, 15, 18, 0.22);
        display: flex;
        flex-direction: column;
        max-height: min(720px, calc(100dvh - 56px));
        max-width: 760px;
        overflow: hidden;
        width: min(760px, 100%);
      }

      .project-relight-modal > header {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        justify-content: space-between;
        min-height: 72px;
        padding: 18px 22px 14px;
      }

      .project-relight-modal > header h2 {
        color: var(--text-primary);
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
        margin: 0;
      }

      .project-relight-modal > header button {
        align-items: center;
        background: var(--workspace-control-surface);
        border-radius: 999px;
        color: var(--text-muted);
        display: inline-flex;
        height: 36px;
        justify-content: center;
        width: 36px;
      }

      .project-relight-modal > header button:hover {
        background: var(--surface-hover);
        color: var(--text-primary);
      }

      .project-relight-modal > header .ui-icon {
        height: 14px;
        width: 14px;
      }

      .project-relight-modal-grid {
        display: grid;
        flex: 1 1 auto;
        gap: 10px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: 0;
        overflow-y: auto;
        padding: 0 22px 24px;
        scrollbar-width: thin;
      }

      .project-relight-modal-grid .project-relight-preset {
        aspect-ratio: 0.8;
        border-radius: 12px;
      }

      .project-relight-modal-grid .project-relight-preset > span {
        background: linear-gradient(transparent, rgba(8, 8, 10, 0.72));
        bottom: 0;
        color: #ffffff;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        left: 0;
        line-height: 1.25;
        padding: 22px 10px 9px;
        position: absolute;
        right: 0;
        text-align: left;
      }

      @media (max-width: 720px) {
        .project-relight-modal-overlay {
          align-items: flex-end;
          padding: 12px;
        }

        .project-relight-modal {
          border-radius: 20px;
          max-height: calc(100dvh - 24px);
        }

        .project-relight-modal-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      @media (max-width: 480px) {
        .project-relight-modal-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          padding-inline: 14px;
        }

        .project-relight-modal > header {
          padding-inline: 16px;
        }
      }

      
      .project-element-player-overlay {
        align-items: center;
        background: rgba(20, 20, 22, 0.58);
        display: flex;
        inset: 0;
        justify-content: center;
        opacity: 0;
        padding: 28px;
        position: fixed;
        transition: opacity 140ms var(--workspace-ease);
        z-index: 280;
      }

      .project-element-player-overlay.is-open {
        opacity: 1;
      }

      .project-element-player-dialog {
        align-items: center;
        background: #151517;
        border-radius: 22px;
        box-shadow: 0 24px 70px rgba(15, 15, 18, 0.22);
        display: flex;
        justify-content: center;
        max-height: calc(100dvh - 56px);
        max-width: 880px;
        min-height: 220px;
        opacity: 0;
        overflow: hidden;
        position: relative;
        scale: 0.98;
        transition: opacity 140ms var(--workspace-ease), scale 140ms var(--workspace-ease);
        width: min(880px, 100%);
      }

      .project-element-player-overlay.is-open .project-element-player-dialog {
        opacity: 1;
        scale: 1;
      }

      .project-element-player-media {
        display: block;
        height: auto;
        max-height: calc(100dvh - 56px);
        max-width: 100%;
        object-fit: contain;
        width: auto;
      }

      .project-element-player-media.is-video {
        background: #0b0b0d;
        height: 100%;
        max-height: none;
        min-height: 0;
        width: 100%;
      }


      .project-element-player-dialog.is-video {
        background: #111113;
        height: min(780px, calc(100dvh - 56px));
        max-width: 1040px;
        width: min(1040px, 100%);
      }

      .project-element-player-dialog.is-video .project-element-player-label {
        display: none;
      }

      .project-element-video-player {
        background: #0b0b0d;
        display: grid;
        grid-template-rows: minmax(0, 1fr) 82px;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        position: relative;
        width: 100%;
      }



      .project-element-video-controls {
        background: #171719;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: grid;
        grid-template-rows: 24px 48px;
        padding: 0 16px 10px;
      }

      .project-element-video-seek {
        --video-progress: 0%;
        -webkit-appearance: none;
        appearance: none;
        align-self: center;
        background: transparent;
        border: 0;
        cursor: pointer;
        height: 24px;
        margin: 0;
        outline: 0;
        width: 100%;
      }

      .project-element-video-seek::-webkit-slider-runnable-track {
        background: linear-gradient(
          to right,
          #ff514f 0 var(--video-progress),
          rgba(255, 255, 255, 0.22) var(--video-progress) 100%
        );
        border: 0;
        height: 2px;
      }

      .project-element-video-seek::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: #ff514f;
        border: 0;
        border-radius: 999px;
        box-shadow: none;
        height: 16px;
        margin-top: -7px;
        width: 4px;
      }

      .project-element-video-seek::-moz-range-track {
        background: linear-gradient(
          to right,
          #ff514f 0 var(--video-progress),
          rgba(255, 255, 255, 0.22) var(--video-progress) 100%
        );
        border: 0;
        height: 2px;
      }

      .project-element-video-seek::-moz-range-thumb {
        background: #ff514f;
        border: 0;
        border-radius: 999px;
        height: 16px;
        width: 4px;
      }

      .project-element-video-control-row {
        align-items: center;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      }

      .project-element-video-readout {
        color: rgba(255, 255, 255, 0.5);
        font-size: var(--web-type-caption);
        font-variant-numeric: tabular-nums;
        justify-self: start;
      }

      .project-element-video-readout > time:first-child {
        color: rgba(255, 255, 255, 0.92);
      }

      /* Centres the glyph inside the round button. Without it the icon sits on
         the text baseline and the control reads as misaligned against the
         readout and the volume slider beside it. */
      .project-element-video-play,
      .project-element-video-volume > button {
        align-items: center;
        background: transparent;
        border: 0;
        color: rgba(255, 255, 255, 0.86);
        display: inline-flex;
        justify-content: center;
        transition:
          background-color 100ms var(--workspace-ease),
          color 100ms var(--workspace-ease),
          scale 100ms var(--workspace-ease);
      }

      .project-element-video-play {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        height: 42px;
        width: 42px;
      }

      .project-element-video-play:hover,
      .project-element-video-play:focus-visible,
      .project-element-video-volume > button:hover,
      .project-element-video-volume > button:focus-visible {
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
      }

      .project-element-video-play:active,
      .project-element-video-volume > button:active {
        scale: 0.98;
      }

      .project-element-video-play .ui-icon {
        height: 20px;
        width: 20px;
      }

      .project-element-video-end-controls {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-self: end;
      }

      .project-element-video-volume {
        --video-volume: 100%;
        align-items: center;
        display: inline-flex;
        gap: 6px;
      }

      /* position: relative is load-bearing — the muted slash below is absolute
         and would otherwise be placed against the page, not the button. */
      .project-element-video-volume > button {
        border-radius: 999px;
        height: 36px;
        padding: 0;
        position: relative;
        width: 36px;
      }

      .project-element-video-volume > button.is-muted::after {
        background: currentColor;
        content: "";
        height: 1.5px;
        left: 9px;
        position: absolute;
        rotate: -42deg;
        top: 17px;
        width: 18px;
      }

      .project-element-video-volume .ui-icon {
        height: 18px;
        width: 18px;
      }

      .project-element-video-volume > input {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        cursor: pointer;
        height: 24px;
        margin: 0;
        width: 72px;
      }

      .project-element-video-volume > input::-webkit-slider-runnable-track {
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.82) 0 var(--video-volume),
          rgba(255, 255, 255, 0.22) var(--video-volume) 100%
        );
        border: 0;
        border-radius: 999px;
        height: 2px;
      }

      .project-element-video-volume > input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: #ffffff;
        border: 0;
        border-radius: 999px;
        height: 10px;
        margin-top: -4px;
        width: 10px;
      }

      .project-element-video-volume > input::-moz-range-track {
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.82) 0 var(--video-volume),
          rgba(255, 255, 255, 0.22) var(--video-volume) 100%
        );
        border: 0;
        border-radius: 999px;
        height: 2px;
      }

      .project-element-video-volume > input::-moz-range-thumb {
        background: #ffffff;
        border: 0;
        border-radius: 999px;
        height: 10px;
        width: 10px;
      }

      .project-element-player-dialog.is-audio {
        background: #ffffff;
        color: #1d1d1f;
        padding: 78px 30px 30px;
        width: min(680px, 100%);
      }

      .project-element-player-media.is-audio {
        height: 1px;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        width: 1px;
      }

      .project-element-player-dialog.is-audio .project-element-player-label {
        background: transparent;
        color: #1d1d1f;
        font-size: 17px;
        padding: 7px 0;
      }

      .project-element-audio-player {
        background: rgba(0, 0, 0, 0.03);
        border-radius: 18px;
        padding: 22px;
        width: 100%;
      }

      .project-element-audio-summary {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
      }

      .project-element-audio-type,
      .project-element-audio-status {
        align-items: center;
        color: #6e6e73;
        display: inline-flex;
        font-size: 13px;
        font-weight: var(--font-ui-medium);
        line-height: 1;
      }

      .project-element-audio-type {
        color: #3a3a3c;
        gap: 8px;
      }

      .project-element-audio-type i {
        background: #ff453a;
        border-radius: 999px;
        height: 8px;
        width: 8px;
      }

      .project-element-audio-waveform-shell {
        align-items: center;
        border-radius: 12px;
        display: flex;
        height: 120px;
        position: relative;
      }

      .project-element-audio-waveform-shell:focus-within {
        box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.16);
      }

      .project-element-audio-waveform {
        align-items: center;
        display: flex;
        gap: 3px;
        height: 88px;
        inset: 16px 0;
        justify-content: center;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
      }

      .project-element-audio-waveform-bar {
        background: #b8b8bd;
        border-radius: 999px;
        flex: 1 1 2px;
        height: 32px;
        max-width: 4px;
        min-width: 2px;
        transition: background-color 80ms linear;
      }

      .project-element-audio-waveform-bar.is-played {
        background: #ff453a;
      }

      .project-element-audio-scrubber {
        cursor: pointer;
        height: 100%;
        inset: 0;
        margin: 0;
        opacity: 0;
        position: absolute;
        width: 100%;
        z-index: 1;
      }

      .project-element-audio-controls {
        align-items: center;
        display: grid;
        grid-template-columns: minmax(58px, 1fr) auto minmax(58px, 1fr);
        margin-top: 12px;
      }

      .project-element-audio-playback {
        align-items: center;
        display: flex;
        gap: 10px;
      }

      .project-element-audio-play,
      .project-element-audio-speed {
        align-items: center;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
      }

      .project-element-audio-play {
        background: #ffffff;
        border-radius: 999px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
        color: #ff453a;
        height: 48px;
        transition: background-color 100ms var(--workspace-ease), scale 100ms var(--workspace-ease);
        width: 48px;
      }

      .project-element-audio-play:hover,
      .project-element-audio-play:focus-visible {
        background: #fafafa;
      }

      .project-element-audio-play:active {
        scale: 0.98;
      }

      .project-element-audio-play .ui-icon {
        height: 19px;
        width: 19px;
      }

      .project-element-audio-speed {
        background: rgba(0, 0, 0, 0.055);
        border-radius: 999px;
        color: #3a3a3c;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        font-weight: var(--font-ui-medium);
        height: 32px;
        min-width: 40px;
        padding: 0 10px;
      }

      .project-element-audio-speed:hover,
      .project-element-audio-speed:focus-visible {
        background: rgba(0, 0, 0, 0.09);
      }

      .project-element-audio-time {
        color: #8e8e93;
        font-size: 13px;
        font-variant-numeric: tabular-nums;
        line-height: 1;
      }

      .project-element-audio-time.is-current {
        color: #ff453a;
        justify-self: start;
      }

      .project-element-audio-time.is-duration {
        justify-self: end;
      }

      .project-element-player-label {
        background: rgba(21, 21, 23, 0.68);
        border-radius: 8px;
        color: #ffffff;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        left: 14px;
        line-height: 1.2;
        max-width: calc(100% - 82px);
        overflow: hidden;
        padding: 7px 9px;
        position: absolute;
        text-overflow: ellipsis;
        top: 14px;
        white-space: nowrap;
        z-index: 2;
      }

      .project-element-player-close {
        align-items: center;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 999px;
        box-shadow: 0 4px 18px rgba(15, 15, 18, 0.16);
        color: #303034;
        display: inline-flex;
        height: 40px;
        justify-content: center;
        position: absolute;
        right: 14px;
        top: 14px;
        transition: background-color 120ms var(--workspace-ease), scale 120ms var(--workspace-ease);
        width: 40px;
        z-index: 2;
      }

      .project-element-player-close:hover,
      .project-element-player-close:focus-visible {
        background: #ffffff;
      }

      .project-element-player-close:active {
        scale: 0.98;
      }

      .project-element-player-close .ui-icon {
        height: 16px;
        width: 16px;
      }

      @media (max-width: 640px) {
        .project-element-player-overlay {
          padding: 16px;
        }

        .project-element-player-dialog {
          border-radius: 18px;
          max-height: calc(100dvh - 32px);
        }

        .project-element-player-dialog.is-video {
          height: calc(100dvh - 32px);
        }

        .project-element-player-media {
          max-height: calc(100dvh - 32px);
        }

        .project-element-video-player {
          grid-template-rows: minmax(0, 1fr) 78px;
        }

        .project-element-video-controls {
          padding-inline: 12px;
        }

        .project-element-video-volume > input {
          display: none;
        }

        .project-element-player-dialog.is-audio {
          padding: 70px 16px 18px;
        }

        .project-element-audio-player {
          border-radius: 16px;
          padding: 18px 16px;
        }

        .project-element-audio-waveform {
          gap: 2px;
        }

        .project-element-audio-waveform-bar:nth-child(2n) {
          display: none;
        }

        .project-element-player-close {
          right: 10px;
          top: 10px;
        }
      }

      
  .project-grid .project-card--failed {
    --generation-media-aspect: 16 / 9;
    container-type: inline-size;
  }

  .project-grid .project-card--failed .project-card-media.is-error {
    aspect-ratio: 16 / 9;
    background: #f5f5f6;
    color: #2d2d31;
    min-height: 0;
  }

  .project-grid .project-card--failed .project-card-media.is-error::before,
  .project-grid .project-card--failed .project-card-media.is-error::after {
    display: none;
  }

  .project-card-failure {
    display: block;
    inset: 0;
    isolation: isolate;
    overflow: hidden;
    position: absolute;
  }

  .project-card-failure-badge {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    color: #343438;
    display: inline-flex;
    font-size: var(--web-type-control);
    font-weight: var(--font-ui-medium, 500);
    gap: 6px;
    height: 28px;
    left: 12px;
    line-height: 1;
    padding: 0 10px 0 7px;
    position: absolute;
    top: 12px;
    z-index: 3;
  }

  .project-card-failure-badge > span {
    align-items: center;
    background: #fff0f2;
    border-radius: 999px;
    color: #ff6678;
    display: inline-flex;
    font-size: var(--web-type-control);
    height: 16px;
    justify-content: center;
    line-height: 1;
    width: 16px;
  }

  /* The card holds nothing but the inputs, so they sit centred in the frame
     where the prompt copy used to run underneath them. */
  .project-card-failure-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    left: 50%;
    max-width: calc(100% - 48px);
    pointer-events: none;
    position: absolute;
    top: 48%;
    transform: translate(-50%, -50%);
    width: min(320px, calc(100% - 48px));
    z-index: 0;
  }

  .project-card-failure-media {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: center;
    max-width: 100%;
  }

  .project-card-failure-inputs {
    display: contents;
  }

  /* Only ever rendered for a generation with no prompt and no media on either
     side, where the input row would otherwise be an empty frame. */
  .project-card-failure-message {
    color: #6e6e76;
    font-size: var(--web-type-control);
    line-height: 1.35;
    text-align: center;
  }

  .project-card-failure-input {
    background: #e8e8eb;
    border-radius: 9px;
    display: block;
    flex: 0 0 42px;
    height: 42px;
    overflow: hidden;
    opacity: 0.52;
    position: relative;
    transition: opacity 140ms cubic-bezier(0.2, 0, 0, 1);
    width: 42px;
  }

  .project-card-failure-input > img,
  .project-card-failure-input > video {
    display: block;
    filter: grayscale(1) saturate(0) contrast(0.82);
    height: 100%;
    object-fit: cover;
    transition: filter 140ms cubic-bezier(0.2, 0, 0, 1);
    width: 100%;
  }

  .project-card-failure-output {
    opacity: 0.42;
  }

  .project-card-failure-input-audio {
    align-items: center;
    color: #9b9ba1;
    display: flex;
    filter: grayscale(1);
    height: 100%;
    justify-content: center;
    transition:
      color 140ms cubic-bezier(0.2, 0, 0, 1),
      filter 140ms cubic-bezier(0.2, 0, 0, 1);
    width: 100%;
  }

  .project-card-failure-input-audio .ui-icon {
    height: 21px;
    width: 21px;
  }

  .project-card-failure-input-count {
    align-items: center;
    background: rgba(45, 45, 49, 0.58);
    border-radius: 999px;
    color: #ffffff;
    display: none;
    font-size: var(--web-type-caption);
    font-variant-numeric: tabular-nums;
    height: 18px;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    position: absolute;
    right: 5px;
    top: 5px;
  }

  .project-card--failed:hover .project-card-failure-input,
  .project-card--failed:focus-visible .project-card-failure-input,
  .project-card--failed:focus-within .project-card-failure-input {
    opacity: 1;
  }

  .project-card--failed:hover .project-card-failure-input > img,
  .project-card--failed:hover .project-card-failure-input > video,
  .project-card--failed:focus-visible .project-card-failure-input > img,
  .project-card--failed:focus-visible .project-card-failure-input > video,
  .project-card--failed:focus-within .project-card-failure-input > img,
  .project-card--failed:focus-within .project-card-failure-input > video {
    filter: none;
  }

  .project-card--failed:hover .project-card-failure-input-audio,
  .project-card--failed:focus-visible .project-card-failure-input-audio,
  .project-card--failed:focus-within .project-card-failure-input-audio {
    color: #68686e;
    filter: none;
  }

  .project-card-failure-actions {
    align-items: center;
    bottom: 16px;
    display: flex;
    gap: 8px;
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, 4px);
    transition-duration: 140ms;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    z-index: 4;
  }

  .project-card--failed:hover .project-card-failure-actions,
  .project-card--failed:focus-visible .project-card-failure-actions,
  .project-card--failed:focus-within .project-card-failure-actions {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .project-card-failure-retry,
  .project-card-failure-delete {
    align-items: center;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    transition-duration: 100ms;
    transition-property: background-color, color, transform;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .project-card-failure-retry {
    background: #2d2d31;
    color: #ffffff;
    font-size: var(--web-type-control);
    font-weight: var(--font-ui-medium, 500);
    gap: 6px;
    padding: 0 12px;
  }

  /* Delete is the destructive half of the pair, so it carries the accent
     itself rather than a tint of it — a pale wash with a grey-pink glyph read
     as disabled next to the solid Retry beside it. */
  .project-card-failure-delete {
    background: var(--bg-primary, #ff3850);
    color: #ffffff;
    width: 28px;
  }

  .project-card-failure-retry .ui-icon,
  .project-card-failure-delete .ui-icon {
    height: 14px;
    width: 14px;
  }

  .project-card-failure-delete .ui-icon {
    color: #ffffff;
  }

  .project-card-failure-retry:hover,
  .project-card-failure-retry:focus-visible {
    background: #18181b;
    outline: 0;
  }

  .project-card-failure-delete:hover,
  .project-card-failure-delete:focus-visible {
    background: #e42741;
    outline: 0;
  }

  .project-card-failure-retry:active,
  .project-card-failure-delete:active {
    transform: scale(0.96);
  }

  @container (max-width: 380px) {
    .project-card-failure-badge {
      height: 26px;
      left: 10px;
      padding: 0 9px 0 6px;
      top: 10px;
    }

    .project-card-failure-badge > span {
      height: 15px;
      width: 15px;
    }

    .project-card-failure-content {
      max-width: calc(100% - 32px);
      width: min(280px, calc(100% - 32px));
    }

    .project-card-failure-input {
      border-radius: 8px;
      flex-basis: 36px;
      height: 36px;
      width: 36px;
    }

    .project-card-failure-actions {
      bottom: 12px;
    }

    .project-card-failure-retry,
    .project-card-failure-delete {
      height: 26px;
    }

    .project-card-failure-delete {
      width: 26px;
    }
  }

  @container (max-width: 230px) {
    .project-card-failure-badge {
      font-size: var(--web-type-caption);
      gap: 5px;
      height: 22px;
      left: 8px;
      top: 8px;
    }

    .project-card-failure-badge > span {
      font-size: var(--web-type-caption);
      height: 13px;
      width: 13px;
    }

    .project-card-failure-input:not(:first-child) {
      display: none;
    }

    .project-card-failure-output + .project-card-failure-inputs .project-card-failure-input:first-child {
      display: block;
    }

    .project-card-failure-input-count {
      display: inline-flex;
    }

    .project-card-failure-input {
      border-radius: 7px;
      flex-basis: 30px;
      height: 30px;
      width: 30px;
    }

    .project-card-failure-retry {
      padding: 0;
      width: 22px;
    }

    .project-card-failure-retry,
    .project-card-failure-delete {
      height: 22px;
    }

    .project-card-failure-delete {
      width: 22px;
    }

    .project-card-failure-retry > span {
      display: none;
    }
  }

  @media (hover: none) {
    .project-card-failure-actions {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .project-card-failure-input,
    .project-card-failure-input > img,
    .project-card-failure-input > video,
    .project-card-failure-input-audio {
      transition: none;
    }
  }

      :where(
        button:not(:disabled):not(.how-it-works-scrim):not(.modal-scrim):not(.rg-modal-overlay-hit),
        a[href],
        [role="button"]:not([aria-disabled="true"]):not(.workspace-nav-menu-backdrop),
        [role="option"]:not([aria-disabled="true"])
      ) {
        transition-duration: 100ms !important;
        transition-property: background-color, border-color, box-shadow, color, filter, opacity, scale !important;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      :where(
        button:not(:disabled):not(.how-it-works-scrim):not(.modal-scrim):not(.rg-modal-overlay-hit),
        a[href],
        [role="button"]:not([aria-disabled="true"]):not(.workspace-nav-menu-backdrop),
        [role="option"]:not([aria-disabled="true"])
      ):active {
        scale: 0.99 !important;
      }

      .modal-scrim,
      .rg-modal-overlay-hit,
      .workspace-nav-menu-backdrop {
        scale: 1 !important;
        transform: none !important;
      }



      html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      body {
        color: var(--text-primary);
        font-family: "ABC Diatype", "SF Pro Display", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
        line-height: 1.4;
      }

      /* Solid VK glyphs own their paint. Older route styles used .ui-icon as
         an outline primitive, so this final client-facing cascade prevents
         those legacy rules from turning solid icons back into strokes. */
      svg.ui-icon-solid {
        fill: currentColor !important;
        stroke: none !important;
      }

      :where(p, li, small, figcaption) {
        text-wrap: pretty;
      }

      :where(h1, h2, h3) {
        letter-spacing: 0;
        text-wrap: balance;
      }

      /* Full-bleed media owns the complete frame. Decorative hairlines belong
         to controls, not to the image or video pixels themselves. */
      :where(
        img:not([tabindex]):not(:focus-visible),
        video:not([tabindex]):not(:focus-visible)
      ) {
        border: 0;
        outline: 0 !important;
        outline-offset: 0 !important;
      }

      /* Selection is communicated with the card's compact check/action
         affordance, never by a drop shadow bleeding out around the media.
         Where a card does ring itself — the Examples grid marks its pick with
         an accent ring — it is drawn inside the frame and costs no layout. */
      .prompt-mention-card.is-selected,
      .reference-history-card.is-selected,
      .reference-history-card.is-added,
      #avatar-modal .avatar-card.is-selected,
      .preset-card.is-selected .preset-card-media {
        box-shadow: none;
      }

      :where(.brand, .brand-button) {
        color: var(--text-primary);
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
      }

      .top-nav .brand {
        font-size: var(--web-type-label);
      }

      .top-nav .nav-link,
      .top-nav .nav-models-trigger {
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
      }

      :where(.pricing-link, .auth-button) {
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
      }

      .workspace-nav-menu.mega-menu,
      .workspace-nav-menu.nav-models-popover {
        background: var(--surface);
        border: 0;
        border-radius: var(--radius-panel);
        box-shadow: var(--sp-shadow-float);
      }

      .workspace-nav-menu .workspace-nav-menu-group h2 {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      .workspace-nav-menu-links a {
        border-radius: var(--radius-control);
      }

      .workspace-nav-menu-link-title {
        color: var(--text-primary);
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
      }

      .workspace-nav-menu-link-subtitle {
        color: var(--text-secondary);
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
      }

      .landing-shell {
        --landing-feature-subtitle-size: var(--web-type-label);
        --landing-feature-title-size: var(--web-type-label);
        --landing-meta-size: var(--web-type-caption);
        --landing-section-title-size: var(--web-type-heading);
        --landing-tool-subtitle-size: var(--web-type-body);
        --landing-tool-title-size: var(--web-type-label);
        color: var(--text-primary);
      }

      .landing-section h1 {
        color: var(--text-primary);
        font-size: var(--web-type-heading);
        font-weight: var(--font-ui-medium);
      }

      .landing-model-copy > strong,
      .landing-tool-copy > strong {
        color: var(--text-primary);
        font-weight: var(--font-ui-medium);
      }

      .landing-model-copy > small,
      .landing-tool-copy > small,
      .landing-preset-copy > small {
        color: var(--text-muted);
        font-weight: var(--font-ui-regular);
      }

      .landing-model-media,
      .landing-tool-media,
      .landing-preset-card {
        background: var(--surface-soft);
      }

      .brief-heading h1,
      .tool-picker-heading h2,
      .asset-popover-header h2,
      .popover-library-header h3 {
        color: var(--text-primary);
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
      }

      .brief-tool-selector .workspace-canvas-tool,
      .workspace-canvas-nav .workspace-canvas-tool {
        font-size: var(--web-type-display);
        font-weight: var(--font-ui-medium);
      }

      #workspace-model-name {
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
      }

      .preset-group-title,
      .brief-asset-box-universal > strong,
      .brief-asset-box strong {
        font-weight: var(--font-ui-medium);
      }

      #workspace-model-description,
      .brief-asset-box-universal > small,
      .brief-asset-box small {
        font-weight: var(--font-ui-regular);
      }

      #avatar-dialog-title,
      #reference-dialog-title,
      #asset-dialog-title,
      #model-dialog-title,
      .avatar-create-header h2 {
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
      }

      .avatar-use-button,
      .avatar-generating-pill {
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      #project-title,
      #history-project-title {
        font-size: var(--web-type-heading);
        font-weight: var(--font-ui-medium);
      }

      .brief-control-label,
      .tool-kind-label,
      .workspace-model-eyebrow {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      .popover-primary-action small,
      .project-card-copy small,
      .project-tool-action-description,
      .library-empty p,
      .inspector-empty p {
        color: var(--text-muted);
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
      }

      .workspace-view-tabs button {
        color: var(--text-muted);
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
      }

      .workspace-view-tabs button[aria-selected="true"] {
        color: var(--text-primary);
      }

      /* The library's Discover/Generations text tabs mirror the composer's
         tool title (.workspace-canvas-tool): same display size and weight,
         and the active tab matches its exact ink so the two headers read as
         one line across the divide. Other .workspace-view-tabs reuses keep
         the compact pill type above. */
      .workspace-library-toolbar .workspace-view-tabs button {
        color: var(--text-muted);
        font-size: var(--web-type-display);
      }

      .workspace-library-toolbar .workspace-view-tabs button[aria-selected="true"] {
        color: #343438;
      }

      .how-it-works-trigger {
        background: var(--surface-soft);
        border-radius: var(--radius-pill);
        color: var(--text-secondary);
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
      }

      .tool-trend-group {
        background: var(--surface-soft);
        border-radius: var(--radius-panel);
        min-height: 0;
        padding: 24px;
      }

      /* The tutorial section is not a card: no fill, no outline, and no
         inset — its content sits flush with the surrounding sections. A
         container-width hairline separates it from the Examples shelf. */
      .tool-trend-group.tool-explainer-section {
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        padding: 0 0 28px;
      }

      .tool-explainer-section {
        container-name: tool-explainer;
        container-type: inline-size;
      }

      .tool-trend-header span {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        letter-spacing: 0.04em;
        line-height: 1.25;
        text-transform: uppercase;
      }

      .tool-trend-header h1 {
        color: var(--text-primary);
        font-size: var(--web-type-display);
        font-weight: var(--font-ui-medium);
        letter-spacing: 0;
        line-height: 1.15;
        margin-top: 6px;
        max-width: 680px;
        text-transform: none;
      }

      /* Same size as the Examples shelf title (.preset-group-title), so the
         two section headers read at one level — and both share the tool
         title's exact ink (.workspace-canvas-tool / active view tab). */
      .tool-explainer-section .tool-trend-header h1 {
        color: #343438;
        font-size: var(--web-type-title);
      }

      .preset-group-title {
        color: #343438;
      }

      .tool-trend-header p {
        color: var(--text-muted);
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
        line-height: 1.45;
        margin-top: 7px;
        max-width: 720px;
      }

      .tool-explainer-flow {
        --tool-explainer-banner-height: clamp(260px, 34cqw, 460px);
        gap: 16px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto;
        margin-top: 20px;
      }

      /* Each step spans the flow's two rows via subgrid, so every caption
         starts on one shared row no matter how tall its media frame is —
         mixed aspect ratios can't push the copy around. The step itself is
         not a card: no backdrop, no forced 16:9 box — just the clip. */
      .tool-explainer-step {
        aspect-ratio: auto;
        background: transparent;
        border-radius: 0;
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        outline: 0;
        overflow: visible;
      }

      .tool-explainer-step .tool-explainer-media {
        align-self: center;
      }

      .web-media-frame {
        border: 0;
        box-shadow: none;
        display: block;
        line-height: 0;
        outline: 0;
        overflow: hidden;
      }

      .web-media-frame > img,
      .web-media-frame > video {
        background: transparent;
        border: 0;
        box-shadow: none;
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center;
        outline: 0;
        transform: scale(1.04);
        transform-origin: center;
        width: 100%;
      }

      /* The frame adopts each step's saved media ratio, so it hugs the clip
         instead of reserving the full banner height around a short one. */
      /* Portrait clips fill the step column like the caption under them —
         the banner cap would otherwise shrink their width via the aspect
         ratio and leave the media narrower than the text. Height follows
         the saved ratio instead (the !important matches the base height
         declaration below). */
      .tool-explainer-media.is-portrait {
        height: auto !important;
        max-height: none;
        width: 100%;
      }

      .tool-explainer-media {
        aspect-ratio: var(--tool-explainer-aspect-ratio, 3 / 4);
        background: transparent;
        border: 0;
        border-radius: var(--radius-media);
        box-shadow: none;
        height: auto !important;
        max-height: var(--tool-explainer-banner-height);
        outline: 0;
        width: 100%;
      }

      /* Tutorial media always shows the full frame at its saved aspect
         ratio — never cover-crop or zoom the demo clips. The card is white
         and the clips carry their own backgrounds, so letterboxing is
         invisible. */
      .tool-explainer-media img,
      .tool-explainer-media video {
        aspect-ratio: auto;
        /* Radius sits on the media itself: when max-height letterboxes a
           tall clip, the visible edges still round. */
        border-radius: var(--radius-media);
        object-fit: contain;
        /* A uniform zoom keeps the saved aspect ratio while trimming the
           clips' baked-in white margins so the content reads larger. */
        transform: scale(1.1);
      }

      /* Portrait demo clips get a slightly stronger trim than landscape,
         but stay conservative: their baked-in padding varies per clip, and
         a bigger constant starts cutting real content. The durable fix is
         re-exporting the clips tightly cropped. */
      .tool-explainer-media.is-portrait img,
      .tool-explainer-media.is-portrait video {
        transform: scale(1.15);
      }

      /* Tools with no Examples grid below the banner (e.g. Upscale, Edit
         video) fill the freed space with a taller banner. */
      .trending-tools.has-no-examples .tool-explainer-flow {
        --tool-explainer-banner-height: clamp(340px, 48cqw, 640px);
      }

      .trending-tools.has-no-examples .tool-explainer-media {
        max-height: 640px;
      }

      .tool-explainer-asset.treatment-scale strong {
        font-size: var(--web-type-hero);
      }

      .tool-step-number {
        display: none;
      }

      /* The flow's row gap already separates media from caption; the small
         margin only tops it up. Title and subtitle sit tight together. */
      .tool-explainer-step figcaption {
        color: var(--text-primary);
        margin-top: 2px;
      }

      .tool-explainer-copy {
        display: grid;
        gap: 1px;
        min-width: 0;
      }

      .tool-explainer-step figcaption strong {
        color: var(--text-primary);
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-medium);
        line-height: 1.3;
        text-transform: none;
      }

      .tool-explainer-step figcaption small {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: var(--text-muted);
        display: -webkit-box;
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
        line-height: 1.4;
        overflow: hidden;
      }

      .how-it-works-dialog,
      .rg-modal,
      .asset-popover-dialog {
        background: var(--surface);
        border-radius: var(--radius-dialog);
      }

      .how-it-works-content .tool-trend-group.is-modal {
        min-height: 0;
      }

      @container tool-explainer (min-width: 520px) and (max-width: 619px) {
        .tool-explainer-flow {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          overflow: visible;
        }

        .tool-explainer-step:last-child {
          grid-column: 1 / -1;
          justify-self: center;
          width: calc((100% - 16px) / 2);
        }
      }

      @container tool-explainer (max-width: 519px) {
        .tool-explainer-flow {
          --tool-explainer-banner-height: clamp(220px, 58cqw, 320px);
          gap: 18px;
          grid-auto-flow: row;
          grid-template-columns: minmax(0, 1fr);
          overflow: visible;
          padding-bottom: 0;
          scroll-snap-type: none;
        }
      }

      @media (min-width: 1181px) and (max-width: 1480px) {
        .video-workspace {
          grid-template-columns: 440px minmax(0, 1fr);
        }

        .brief-panel {
          padding-left: 31px;
          padding-right: 23px;
        }

        .workspace-library {
          padding-left: 32px;
        }

        .reference-modal {
          padding-left: 432px;
        }
      }

      /* The creation rail has only two responsive states: its complete
         desktop width or fully removed. A compressed rail leaves neither the
         controls nor the canvas enough room, especially in narrow windows. */
      @media (max-width: 1180px) {
        .video-workspace {
          display: grid;
          /* The areas have to collapse with the columns. Left at the desktop
             "brief library" the named library area still resolved to a second,
             implicit column, so the gallery was laid out beside a phantom rail
             — with a short grid (an empty Generations tab) that auto column
             shrank to its content and the whole page hugged the right edge. */
          grid-template-areas: "library";
          grid-template-columns: minmax(0, 1fr);
        }

        .video-workspace > .brief-panel {
          display: none;
        }

        .workspace-library {
          padding-left: 28px;
        }

        .reference-modal {
          padding-left: 0;
        }
      }

      .gallery-page-title {
        color: var(--text-primary);
        font-size: var(--web-type-heading);
        font-weight: var(--font-ui-medium);
      }

      .gallery-project-grid .project-card-error strong,
      .history-stage-message strong {
        color: var(--text-secondary);
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
      }

      .gallery-project-grid .project-card-error small,
      .history-stage-message p,
      .gallery-load-state {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      .pricing-kicker,
      .plan-kicker {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      .pricing-hero h1 {
        color: var(--text-primary);
        font-size: var(--web-type-section);
        font-weight: var(--font-ui-medium);
      }

      .pricing-hero p:last-child,
      .pricing-section-heading p,
      .plan-meta,
      .plan-progress-caption {
        color: var(--text-muted);
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-regular);
      }

      .pricing-section-heading h2,
      .plan-section-head h2 {
        color: var(--text-primary);
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
      }

      .plan-credits strong {
        color: var(--text-primary);
        font-size: var(--web-type-hero);
        font-weight: var(--font-ui-medium);
        font-variant-numeric: tabular-nums;
      }

      .plan-credits .plan-allowance {
        color: var(--text-muted);
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-regular);
        font-variant-numeric: tabular-nums;
      }

      .rg-auth-title,
      .rg-paywall-title,
      .rg-success-title,
      .rg-ooc-title,
      .rg-topup-title {
        color: var(--text-primary);
        font-size: var(--web-type-heading);
        font-weight: var(--font-ui-medium);
      }

      .rg-auth-title .rg-auth-subtitle,
      .rg-paywall-sub,
      .rg-success-sub,
      .rg-plan-desc,
      .rg-ooc-terms {
        color: var(--text-muted);
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-regular);
      }

      .rg-auth-brand,
      .rg-google-button,
      .rg-primary-pill,
      .rg-plan-cta,
      .plan-topup-pill,
      .plan-manage-pill {
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
      }

      .rg-plan-name,
      .rg-plan-feature,
      .rg-pack-credits,
      .rg-pack-price,
      .rg-profile-menu-item,
      .rg-profile-credit-copy small {
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      .rg-plan-card,
      .rg-pack-card {
        border-radius: var(--radius-control);
      }

      /* Every primary CTA shares the Generate button's recipe: accent pill,
         inverse text, body size, medium weight. */
      .workspace-generate,
      .primary-button,
      .rg-primary-pill,
      .rg-plan-cta:not(.secondary):not(.current),
      .plan-topup-pill,
      .reference-add-button,
      .avatar-create-generate {
        background: var(--bg-primary);
        border-radius: var(--radius-pill);
        box-shadow: none;
        color: var(--text-inverse);
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-medium);
      }

      .workspace-generate:not(:disabled):hover {
        background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
        box-shadow: none;
      }

      .workspace-generate {
        background: #18181b;
        font-weight: var(--font-ui-medium);
      }

      .workspace-generate:not(:disabled):hover {
        background: #000000;
      }

      .workspace-generate:disabled,
      .primary-button:disabled,
      .rg-primary-pill:disabled,
      .avatar-create-generate:disabled {
        opacity: 0.8;
      }

      .reference-add-button:disabled {
        opacity: 1;
      }

      .secondary-button,
      .plan-manage-pill,
      .rg-plan-cta.secondary,
      .rg-plan-cta.current {
        background: var(--surface-soft);
        border-radius: var(--radius-control);
        box-shadow: none;
        color: var(--text-primary);
        font-size: var(--web-type-body);
        font-weight: var(--font-ui-regular);
      }

      .popover-primary-action,
      .avatar-drop,
      .avatar-create-card {
        background: var(--surface-soft);
        border: 1px dashed var(--line-strong);
        border-radius: var(--radius-control);
        box-shadow: none;
      }

      /* The mobile composer accepts drops too, but it is a chat bar — the
         dropzone dash drew a second, squarer outline around the whole thing.
         It still says it is a drop target while a file is over it. */
      [data-upload-dropzone]:not(.mobile-composer) {
        border: 1px dashed var(--line-strong);
        border-radius: var(--radius-control);
      }

      [data-upload-dropzone]:not(.mobile-composer):hover {
        border-color: color-mix(in srgb, var(--line-strong) 50%, var(--text-muted));
      }

      /* The rail's upload slots are plain soft cards, not outlined wells —
         the dropzone dash stays on other surfaces — and they share the
         composer's panel radius rather than the dropzone control radius. */
      .brief-asset-box,
      .brief-asset-box-universal {
        border: 0;
        border-radius: var(--radius-panel);
      }

      /* The reference picker's upload tile and the prompt composer are drop
         targets without dashed-card chrome. */
      [data-upload-dropzone].reference-upload-tile,
      [data-upload-dropzone].brief-prompt {
        border: 0;
      }

      .popover-primary-action-icon,
      .avatar-drop > span,
      .avatar-create-card-icon {
        background: transparent;
        color: var(--text-muted);
      }

      .popover-primary-action strong,
      .avatar-drop strong,
      .avatar-create-card strong {
        color: var(--text-primary);
        font-size: var(--web-type-label);
        font-weight: var(--font-ui-regular);
      }

      .popover-primary-action small,
      .avatar-drop small,
      .avatar-create-card small {
        color: var(--text-muted);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      .library-empty,
      .inspector-empty,
      .asset-grid-empty,
      .reference-history-empty,
      .link-history-empty,
      .project-card-error,
      .history-stage-message {
        background: var(--surface-soft);
        border: 0;
        border-radius: var(--radius-media);
        box-shadow: none;
        color: var(--text-muted);
        outline: 0;
      }

      .reference-history-empty.reference-history-empty-assets {
        background: transparent;
        border-radius: 0;
        padding: 0;
      }

      .rg-text-input,
      .rg-code-box,
      .rg-period-toggle,
      .rg-period-toggle button,
      .plan-manage-pill {
        border-radius: var(--radius-control);
      }

      .rg-period-toggle button {
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
        }

        :where(button, a[href], [role="button"]):active {
          scale: 1 !important;
          transform: none !important;
        }
      }

      @media (max-width: 760px) {
        .tool-trend-group {
          padding: 18px;
        }

        .tool-trend-header h1 {
          font-size: var(--web-type-heading);
        }

        .gallery-page-title {
          font-size: var(--web-type-heading);
        }
      }

      /* Default every UI glyph to the shared secondary icon color. :where()
         keeps this at zero specificity so any explicit icon color rule still
         wins. */
      :where(svg.ui-icon) {
        color: var(--icon-secondary);
      }

      /* Icons on accent, ink, or media surfaces follow their surface color:
         a zero-specificity color declaration still beats inheritance, so
         these contexts opt back into inheriting. */
      .workspace-generate .ui-icon,
      .mobile-composer-generate .ui-icon,
      .primary-button .ui-icon,
      .rg-primary-pill .ui-icon,
      .rg-plan-cta .ui-icon,
      .plan-topup-pill .ui-icon,
      .avatar-create-generate .ui-icon,
      .transport-play .ui-icon,
      .preset-lipsync-audio-toggle .ui-icon,
      .avatar-voice-play .ui-icon,
      .media-audio-preview-toggle .ui-icon,
      .prompt-mention-card-check .ui-icon,
      .landing-footer-brand .ui-icon,
      .dev-feature-launcher .ui-icon {
        color: inherit;
      }
    

      /* Zero specificity on purpose. A frame that positions itself — the
         landing banner's backdrop is absolute inside its card — must keep its
         own positioning; the placeholder only needs *a* containing block, and
         an already-positioned frame is one. */
      :where([data-media-state]) {
        position: relative;
      }

      /* The placeholder is a real element rather than a ::before/::after on
         the frame. Frames spend their own pseudo-elements on scrims, selection
         rings and hover washes, so painting state into one of them replaced
         whichever the frame owned — a missing preset tile lost the scrim its
         white title needs to stay readable. */
      .web-media-fallback {
        inset: 0;
        pointer-events: none;
        position: absolute;
      }

      [data-media-state="ready"] > .web-media-fallback {
        display: none;
      }

      /* Sits under the media, so anything opaque that loads simply covers it.
         No layout of its own: the frame already holds the aspect ratio. */
      [data-media-state="loading"] > .web-media-fallback {
        animation: web-media-shimmer 1.5s ease-in-out infinite;
        background:
          linear-gradient(
            112deg,
            transparent 30%,
            rgba(255, 255, 255, 0.7) 46%,
            transparent 62%
          ),
          var(--surface-soft, #f5f5f6);
        background-position: 180% 0, 0 0;
        background-size: 220% 100%, 100% 100%;
        z-index: 0;
      }

      @keyframes web-media-shimmer {
        to { background-position: -80% 0, 0 0; }
      }

      [data-media-state="missing"] {
        background: var(--surface-soft, #f5f5f6);
      }

      /* The broken element is hidden rather than removed: a retry, a soft
         navigation, or a poll that swaps the src can still bring it back. */
      [data-media-state="missing"] > img,
      [data-media-state="missing"] > video,
      [data-media-state="missing"] > picture {
        visibility: hidden;
      }

      [data-media-state="missing"] > .web-media-fallback {
        z-index: 1;
      }

      [data-media-state="missing"] > .web-media-fallback::after {
        background: currentColor;
        color: var(--text-muted, #9a999e);
        content: "";
        height: min(26px, 32%);
        inset: 0;
        margin: auto;
        -webkit-mask-image: var(--web-media-missing-glyph);
        mask-image: var(--web-media-missing-glyph);
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        opacity: 0.55;
        position: absolute;
        width: min(26px, 32%);
      }

      :root {
        --web-media-missing-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-4.5-4.5L7 21'/%3E%3C/svg%3E");
      }

      @media (prefers-reduced-motion: reduce) {
        [data-media-state="loading"] > .web-media-fallback {
          animation: none;
        }
      }


      :root {
        --gnav-accent: #ff3850;
        --gnav-bar-height: 50px;
        --gnav-gutter-end: 28px;
        --gnav-gutter-start: 45px;
        --gnav-font-medium: var(--font-ui-medium, 500);
        --gnav-font-title: var(--font-ui-medium, 500);
        --nav-height: 50px;
        --nav-menu-top: 50px;
        --nav-visible-height: 50px;
        --regen-nav-height: 50px;
        --studio-nav-menu-top: 50px;
        --studio-nav-visible-height: 50px;
        --workspace-nav-height: var(--gnav-bar-height);
      }

      body.studio-active {
        --gnav-bar-height: 50px;
        --nav-height: 50px;
        --nav-menu-top: 50px;
        --nav-visible-height: 50px;
        --regen-nav-height: 50px;
        --studio-nav-menu-top: 50px;
        --studio-nav-visible-height: 50px;
      }

      .top-nav {
        align-items: center;
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        background: rgba(255, 255, 255, 0.94);
        /* Same token as the workspace rail's vertical divider so the two
           hairlines meet at one weight. */
        border-bottom: 1px solid var(--line);
        box-shadow: none;
        display: flex;
        height: var(--gnav-bar-height);
        justify-content: space-between;
        left: 0;
        /* --gnav-gutter-* is the shared bar inset. Pages that need their own
           heading to sit on the brand's edge read the same two values instead
           of re-declaring the numbers. */
        padding: 0 var(--gnav-gutter-end) 0 var(--gnav-gutter-start);
        position: sticky;
        right: 0;
        top: 0;
        /* Above the small popovers that expand out of controls on the page —
           a picker opening under the bar tucks beneath it rather than covering
           the nav items. Modals (150+) still own the screen over the bar. */
        z-index: var(--layer-global-nav, 140);
      }

      body.studio-active .top-nav {
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        background: rgba(255, 255, 255, 0.94);
        box-shadow: none;
      }

      @media (prefers-reduced-motion: reduce) {
        .top-nav {
          transition: none;
        }
      }

      .brand,
      .brand-button {
        align-items: center;
        background: transparent;
        color: #252529;
        display: inline-flex;
        font-size: var(--web-type-label, 14px);
        font-weight: var(--gnav-font-title);
        gap: 10px;
        min-height: 28px;
        padding: 0;
        position: relative;
        text-decoration: none;
        transition-duration: 40ms;
        transition-property: opacity, scale;
        transition-timing-function: ease-out;
      }

      .brand:active,
      .brand-button:active {
        scale: 0.98;
      }

      .brand svg,
      .brand-mark {
        color: #a9a9ad;
        height: 21px;
        width: 15px;
      }

      .nav-left,
      .nav-links,
      .nav-actions {
        align-items: center;
        display: flex;
      }

      .nav-left {
        flex: 1 1 auto;
        gap: 72px;
        justify-content: flex-start;
        min-width: 0;
      }

      .nav-left > .brand {
        flex: 0 0 auto;
      }

      .nav-links {
        flex: 1 1 auto;
        gap: 8px;
      }

      .nav-links .generations-link {
        margin-left: auto;
        margin-right: 12px;
      }

      .nav-actions {
        flex: 0 0 auto;
        gap: 15px;
        margin-left: auto;
      }

      .nav-link {
        align-items: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--sp-radius-pill, 999px);
        color: #141416;
        display: inline-flex;
        font-size: var(--web-type-control, 12px);
        font-weight: var(--gnav-font-medium);
        gap: 6px;
        min-height: 34px;
        padding: 0 16px;
        position: relative;
        text-decoration: none;
        transition-duration: 40ms;
        transition-property: background-color, border-color, color, opacity, scale;
        transition-timing-function: ease-out;
      }

      .nav-models-trigger::after {
        content: "";
        height: 44px;
        left: 50%;
        min-width: 44px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }

      button.nav-link {
        cursor: pointer;
      }

      .nav-link svg {
        color: var(--icon-secondary);
        height: 14px;
        width: 14px;
      }

      .nav-link:hover {
        background: var(--surface-soft, #f5f5f6);
        color: #000;
      }

      .nav-link.active {
        background: var(--surface-soft, #f5f5f6);
      }

      .nav-link[aria-expanded="true"] {
        background: var(--surface-soft, #f5f5f6);
      }

      .nav-link[data-menu-key]:hover,
      .nav-link[data-menu-key][aria-expanded="true"] {
        background: transparent;
      }

      .nav-new-badge {
        background: var(--gnav-accent);
        border-radius: var(--sp-radius-control, 12px);
        color: #fff;
        font-size: var(--web-type-caption, 11px);
        font-weight: var(--gnav-font-title, 400);
        letter-spacing: 0.02em;
        line-height: 1;
        padding: 3px 6px;
      }

      .nav-models-trigger {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: var(--sp-radius-control, 12px);
        color: #141416;
        cursor: pointer;
        display: inline-flex;
        font-family: inherit;
        font-size: var(--web-type-control, 12px);
        font-weight: var(--gnav-font-medium);
        gap: 6px;
        min-height: 32px;
        padding: 0 11px;
        position: relative;
        transition-duration: 40ms;
        transition-property: background-color, color, opacity, scale;
        transition-timing-function: ease-out;
      }

      .nav-models-trigger svg {
        color: #aaaab0;
        height: 14px;
        width: 14px;
      }

      .nav-models-trigger:hover {
        background: #f4f4f5;
        color: #000;
      }

      .nav-models-trigger[aria-expanded="true"] {
        background: #f7f7f8;
      }

      .nav-models-trigger:hover,
      .nav-models-trigger[aria-expanded="true"] {
        background: transparent;
      }

      .nav-models-trigger:active {
        scale: 0.98;
      }

      .nav-link:active,
      .auth-button:active {
        scale: 0.98;
      }

      .trends-link,
      .login-compact {
        display: none;
      }

      .pricing-link {
        color: #111113;
        font-size: var(--web-type-control, 12px);
        font-weight: var(--gnav-font-medium);
        position: relative;
        text-decoration: none;
      }

      .nav-credits-pill {
        align-items: center;
        background: var(--surface-soft, #f5f5f6);
        border-radius: var(--sp-radius-control, 12px);
        display: inline-flex;
        gap: 6px;
        justify-content: center;
        min-height: 28px;
        min-width: 54px;
        padding: 0 12px;
        transition-duration: 40ms;
        transition-property: background-color, scale;
        transition-timing-function: ease-out;
      }

      .nav-credits-pill:hover {
        background: var(--surface-hover, #eeeeef);
      }

      .nav-credits-pill:active {
        scale: 0.98;
      }

      .nav-credits-pill .ui-icon {
        color: #111113;
        height: 14px;
        width: 14px;
      }

      .nav-credits-pill [data-nav-credit-balance] {
        font-weight: var(--gnav-font-title);
        font-variant-numeric: tabular-nums;
      }

      .auth-button {
        align-items: center;
        border-radius: var(--sp-radius-pill, 999px);
        display: inline-flex;
        font-size: var(--web-type-control, 12px);
        font-weight: var(--gnav-font-title);
        justify-content: center;
        min-height: 34px;
        padding: 0 16px;
        position: relative;
        text-decoration: none;
        transition-duration: 40ms;
        transition-property: background-color, color, scale;
        transition-timing-function: ease-out;
      }

      .auth-button.sign-in {
        background: #f8f8f8;
        color: #242428;
      }

      .auth-button.sign-up {
        background: var(--bg-primary, #ff3850);
        color: #fff;
      }

      body.studio-active .brand,
      body.studio-active .brand-button {
        min-height: 28px;
      }

      body.studio-active .nav-link {
        min-height: 34px;
      }

      body.studio-active .auth-button {
        min-height: 34px;
        padding: 0 16px;
      }

      .mobile-nav-shell {
        display: none;
        position: relative;
      }

      .mobile-menu-trigger {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 999px;
        color: #18181b;
        display: inline-flex;
        height: 40px;
        justify-content: center;
        transition-duration: 40ms;
        transition-property: color, opacity, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        width: 40px;
      }

      .mobile-menu-trigger:active {
        scale: 0.98;
      }

      .mobile-menu-trigger:focus-visible {
        outline: 2px solid rgba(24, 24, 27, 0.28);
        outline-offset: 2px;
      }

      .mobile-menu-trigger .ui-icon {
        height: 20px;
        width: 20px;
      }

      .mobile-nav-popover {
        background: rgba(255, 255, 255, 0.98);
        border-radius: var(--sp-radius-control, 12px);
        box-shadow: var(--sp-shadow-float, 0 24px 70px rgba(0, 0, 0, 0.13));
        filter: blur(5px);
        opacity: 0;
        padding: 8px;
        pointer-events: none;
        position: fixed;
        transform: translateY(-6px) scale(0.98);
        transform-origin: top right;
        transition-duration: 40ms;
        transition-property: filter, opacity, transform;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        /* Above the studio's phone layer (composer 120, backdrop 121, sheet
           122), or the nav menu drops behind the bottom bar on /create. */
        z-index: 130;
      }

      .mobile-nav-popover.open,
      .mobile-nav-popover[data-state="open"] {
        filter: blur(0);
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      .mobile-nav-popover nav {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .mobile-nav-popover a {
        align-items: center;
        background: var(--surface-soft, #f5f5f6);
        border-radius: var(--sp-radius-control, 12px);
        color: #18181b;
        display: flex;
        font-size: 12px;
        font-weight: var(--gnav-font-medium);
        justify-content: center;
        min-height: 48px;
        text-decoration: none;
        transition-duration: 40ms;
        transition-property: background-color, scale;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
      }

      .mobile-nav-popover a:hover {
        background: var(--surface-hover, #eeeeef);
      }

      .mobile-nav-popover a:active {
        scale: 0.98;
      }

      .mobile-nav-popover a:last-child {
        background: var(--bg-primary, #ff3850);
        color: #ffffff;
      }

      @media (max-width: 900px) {
        :root {
          --gnav-gutter-end: 24px;
          --gnav-gutter-start: 24px;
        }

        .top-nav {
          padding: 0 var(--gnav-gutter-end) 0 var(--gnav-gutter-start);
        }

        .nav-left {
          gap: 34px;
        }

        .nav-links {
          gap: 22px;
        }
      }

      @media (max-width: 760px) {
        :root {
          --gnav-bar-height: 46px;
          --gnav-gutter-end: 16px;
          --gnav-gutter-start: 16px;
          --nav-height: 46px;
          --nav-menu-top: 46px;
          --nav-visible-height: 46px;
          --regen-nav-height: 46px;
          --studio-nav-menu-top: 46px;
          --studio-nav-visible-height: 46px;
        }

        body.studio-active {
          --gnav-bar-height: 46px;
          --nav-height: 46px;
          --nav-menu-top: 46px;
          --nav-visible-height: 46px;
          --regen-nav-height: 46px;
          --studio-nav-menu-top: 46px;
          --studio-nav-visible-height: 46px;
        }

        .top-nav {
          gap: 12px;
          overflow: hidden;
          padding: 0 var(--gnav-gutter-end) 0 var(--gnav-gutter-start);
        }

        .brand,
        .brand-button {
          flex: 0 0 auto;
          font-size: 15px;
          gap: 10px;
          min-height: 28px;
        }

        body.studio-active .brand,
        body.studio-active .brand-button {
          min-height: 28px;
        }

        .brand svg,
        .brand-mark {
          height: 19px;
          width: 14px;
        }

        .nav-left {
          flex: 1 1 auto;
          gap: 18px;
          min-width: 0;
        }

        .nav-links {
          flex: 1 1 auto;
          gap: 8px;
          min-width: 0;
          overflow-x: auto;
          scrollbar-width: none;
        }

        .nav-links::-webkit-scrollbar {
          display: none;
        }

        .trends-link {
          display: inline-flex;
        }

        .avatars-link {
          display: none;
        }

        .nav-link,
        .pricing-link,
        .auth-button {
          font-size: 11px;
          min-height: 28px;
          white-space: nowrap;
        }

        .nav-link {
          gap: 4px;
        }

        .nav-link svg {
          height: 14px;
          width: 14px;
        }

        .nav-actions {
          gap: 14px;
        }

        .nav-models-trigger,
        .pricing-link,
        .auth-button.sign-in,
        .auth-button.sign-up {
          display: none;
        }
      }

      @media (max-width: 620px) {
        .nav-links {
          display: none;
        }

        .top-nav,
        body.studio-active .top-nav {
          overflow: visible;
        }

        .mobile-nav-shell {
          display: block;
          margin-left: auto;
        }
      }

      
      .mega-menu {
        background: #fff;
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.08);
        display: none;
        left: 0;
        min-height: 468px;
        opacity: 0;
        padding: 32px 0 64px;
        pointer-events: none;
        position: fixed;
        right: auto;
        top: var(--nav-menu-top);
        transform: translateY(-8px);
        transition-duration: 40ms;
        transition-property: opacity, transform, filter;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        visibility: hidden;
        width: 100%;
        z-index: var(--layer-global-nav-menu, 145);
      }

      body.studio-active .mega-menu {
        top: var(--studio-nav-menu-top);
      }

      .mega-menu.open,
      .mega-menu[data-state="open"] {
        display: block;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
      }

      /* The tools reveal one by one as the menu opens: each row fades and
         settles with a small stagger. The menu leaves display: none on
         every open, so the keyframes restart naturally. */
      .mega-menu.open .workspace-nav-menu-link,
      .mega-menu[data-state="open"] .workspace-nav-menu-link {
        animation: mega-menu-link-reveal 220ms cubic-bezier(0.2, 0, 0, 1) both;
        animation-delay: var(--menu-reveal-delay, 0ms);
      }

      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(1) { --menu-reveal-delay: 20ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(2) { --menu-reveal-delay: 48ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(3) { --menu-reveal-delay: 76ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(4) { --menu-reveal-delay: 104ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(5) { --menu-reveal-delay: 132ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(6) { --menu-reveal-delay: 160ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(7) { --menu-reveal-delay: 188ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(8) { --menu-reveal-delay: 216ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(9) { --menu-reveal-delay: 244ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(10) { --menu-reveal-delay: 272ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(11) { --menu-reveal-delay: 300ms; }
      .workspace-nav-menu-links .workspace-nav-menu-link:nth-child(12) { --menu-reveal-delay: 328ms; }

      @keyframes mega-menu-link-reveal {
        from {
          opacity: 0;
          transform: translateY(6px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .mega-menu.open .workspace-nav-menu-link,
        .mega-menu[data-state="open"] .workspace-nav-menu-link {
          animation: none;
        }
      }

      .mega-inner {
        display: grid;
        gap: 92px;
        grid-template-columns: 420px 560px;
        margin: 0 auto;
        max-width: 990px;
      }

      .mega-inner-single {
        grid-template-columns: minmax(0, 560px);
        max-width: 560px;
      }

      .mega-heading {
        font-size: 18px;
        font-weight: var(--font-ui-display, 600);
        letter-spacing: 0;
        line-height: 1;
        margin-bottom: 18px;
      }

      .mega-grid {
        display: grid;
        gap: 50px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .nav-models-popover {
        background: #fff;
        border-radius: var(--sp-radius-control, 12px);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
        display: none;
        opacity: 0;
        padding: 24px 28px 28px;
        pointer-events: none;
        position: fixed;
        right: auto;
        top: var(--nav-menu-top);
        transform: translateY(-8px);
        transition-duration: 40ms;
        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
        visibility: hidden;
        width: min(720px, calc(100vw - 48px));
        z-index: var(--layer-global-nav-menu, 145);
      }

      body.studio-active .nav-models-popover {
        top: var(--studio-nav-menu-top);
      }

      .nav-models-popover.open,
      .nav-models-popover[data-state="open"] {
        display: block;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
      }

      .nav-models-popover .mega-inner {
        gap: 48px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin: 0;
        max-width: none;
      }

      .nav-models-popover .mega-grid {
        gap: 32px;
      }

      @media (max-width: 760px) {
        .mega-menu {
          max-height: calc((100vh / var(--density-scale, 1)) - var(--nav-menu-top));
          min-height: 0;
          overflow-y: auto;
          padding: 24px 26px 32px;
        }

        .nav-models-popover {
          left: 16px;
          right: 16px;
          width: auto;
        }

        .mega-grid {
          grid-template-columns: 1fr;
        }
      }

      /* Web workspace navigation menu. This follows shadcn/Radix menu
         geometry and state semantics while remaining server-rendered. */
      .nav-link[data-menu-key]::after {
        content: "";
        inset: -9px -8px -18px;
        position: absolute;
      }

      .workspace-nav-menu.mega-menu,
      .workspace-nav-menu.nav-models-popover {
        background: #fff;
        border: 1px solid rgba(24, 24, 27, 0.08);
        border-radius: var(--radius-panel, 18px);
        box-shadow:
          0 28px 70px rgba(24, 24, 27, 0.16),
          0 3px 12px rgba(24, 24, 27, 0.07);
        filter: none;
        max-height: calc(100vh - var(--nav-menu-top) - 24px);
        min-height: 0;
        overflow: auto;
        padding: 0;
        scrollbar-width: none;
        transform: translateY(-4px) scale(0.985);
        transform-origin: top center;
        transition-duration: 100ms;
        transition-property: opacity, transform, visibility;
        width: auto;
        z-index: var(--layer-global-nav-menu, 145);
      }

      .workspace-nav-menu::-webkit-scrollbar {
        display: none;
      }

      .workspace-nav-menu.mega-menu.open,
      .workspace-nav-menu.nav-models-popover.open,
      .workspace-nav-menu.mega-menu[data-state="open"],
      .workspace-nav-menu.nav-models-popover[data-state="open"] {
        transform: translateY(0) scale(1);
      }

      .workspace-nav-menu .workspace-nav-menu-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin: 0;
        max-width: none;
        padding: 28px;
      }

      .workspace-nav-menu .workspace-nav-menu-content-single {
        grid-template-columns: minmax(0, 1fr);
      }

      .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-content {
        align-items: start;
        column-gap: 28px;
        grid-template-columns: minmax(0, 1fr);
        padding: 26px 30px 30px;
      }

      .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-columns {
        grid-template-columns: minmax(0, 1fr);
      }

      .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-group {
        padding: 2px 4px;
      }

      .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-group:first-child {
        padding-left: 4px;
      }

      .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-links {
        column-gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-links a {
        gap: 12px;
        grid-template-columns: 56px minmax(0, 1fr);
        padding-block: 8px;
      }

      /* The group heading sits on the icon column: the rows' 10px inline
         padding. */
      .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-group h2 {
        margin-left: 10px;
      }

      .workspace-nav-menu-columns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
      }

      .workspace-nav-menu-group {
        min-width: 0;
        padding: 2px 30px;
      }

      .workspace-nav-menu-group:first-child {
        padding-left: 4px;
      }

      .workspace-nav-menu-group + .workspace-nav-menu-group {
        border-left: 1px solid rgba(24, 24, 27, 0.075);
      }

      .workspace-nav-menu .workspace-nav-menu-group h2 {
        color: #85858b;
        font-size: var(--web-type-caption, 11px);
        font-weight: var(--font-ui-regular, 400);
        letter-spacing: 0.04em;
        line-height: 1.2;
        margin: 0 0 12px;
        text-transform: uppercase;
      }

      .workspace-nav-menu-links {
        display: grid;
        gap: 2px;
        grid-template-columns: minmax(0, 1fr);
      }

      .workspace-nav-menu-links a {
        align-items: center;
        border-radius: var(--radius-control, 12px);
        box-sizing: border-box;
        color: inherit;
        display: grid;
        gap: 12px;
        grid-template-columns: 82px minmax(0, 1fr);
        min-height: 0;
        outline: none;
        overflow: hidden;
        padding: 8px 10px;
        text-decoration: none;
        transition: background-color 100ms ease;
        width: 100%;
      }

      .workspace-nav-menu-links a:hover,
      .workspace-nav-menu-links a:focus-visible,
      .workspace-nav-menu-links a[data-highlighted="true"] {
        background: var(--surface-soft, #f5f5f6);
      }

      .workspace-nav-menu-link-title {
        color: #202024;
        font-size: var(--web-type-label, 14px);
        font-weight: var(--font-ui-medium, 400);
        letter-spacing: 0;
        line-height: 1.3;
        white-space: nowrap;
      }

      .workspace-nav-menu-link-subtitle {
        color: #85858b;
        font-size: var(--web-type-body, 13px);
        font-weight: var(--font-ui-regular, 400);
        letter-spacing: 0;
        line-height: 1.4;
      }

      .workspace-nav-menu-link-visual {
        aspect-ratio: 4 / 3;
        background: rgba(24, 24, 27, 0.055);
        border-radius: 12px;
        display: block;
        overflow: hidden;
        width: 82px;
      }

      .workspace-nav-menu-link-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .workspace-nav-menu-illustration {
        display: block;
        height: 100%;
        width: 100%;
      }

      img.workspace-nav-menu-illustration {
        border-radius: inherit;
        object-fit: cover;
      }

      .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-link-visual {
        aspect-ratio: 1;
        border-radius: 14px;
        width: 56px;
      }

      img.workspace-nav-menu-tool-icon {
        background: var(--surface-soft, #f5f5f6);
        object-fit: contain;
      }

      /* "AI Models" dropdown: a calm 720px panel of compact model cards with
         the picker's looping previews; the panel scrolls inside its cap. */
      .nav-models-popover {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
      }

      .nav-models-popover::-webkit-scrollbar {
        display: none;
      }

      .nav-models-grid {
        display: grid;
        gap: 16px 14px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .nav-model-card {
        display: block;
        min-width: 0;
        text-decoration: none;
      }

      .nav-model-card-media {
        aspect-ratio: 16 / 9;
        background: var(--surface-soft, #f5f5f6);
        border-radius: 10px;
        display: block;
        overflow: hidden;
      }

      .nav-model-card-media > video,
      .nav-model-card-media > img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      .nav-model-card-copy {
        display: block;
        padding: 8px 2px 0;
      }

      .nav-model-card-copy > strong,
      .nav-model-card-copy > small {
        display: block;
        text-decoration: none;
      }

      .nav-model-card-copy > strong {
        color: var(--text-primary, #18181b);
        font-size: var(--web-type-body, 13px);
        font-weight: var(--font-ui-medium, 500);
        line-height: 1.25;
      }

      .nav-model-card-copy > small {
        color: var(--text-muted, #9ca3af);
        font-size: var(--web-type-control, 12px);
        font-weight: var(--font-ui-regular, 400);
        line-height: 1.35;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: pretty;
        white-space: nowrap;
      }

      .nav-model-card:hover .nav-model-card-copy > strong,
      .nav-model-card:focus-visible .nav-model-card-copy > strong {
        color: #000000;
      }

      .workspace-nav-menu-backdrop {
        background: rgba(24, 24, 27, 0.13);
        inset: var(--nav-menu-top) 0 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        transition: opacity 100ms ease;
        /* Directly under the nav bar it dims the page for, so the bar and its
           open menu stay lit. */
        z-index: calc(var(--layer-global-nav, 140) - 1);
      }

      .workspace-nav-menu-backdrop.open,
      .workspace-nav-menu-backdrop[data-state="open"] {
        opacity: 1;
        pointer-events: auto;
      }

      .workspace-nav-menu-trigger .ui-icon {
        transition: transform 100ms ease;
      }

      .top-nav .icon-chevron-down {
        fill: currentColor;
        stroke: none;
      }

      .workspace-nav-menu-trigger[aria-expanded="true"] .ui-icon {
        transform: rotate(180deg);
      }

      @media (max-width: 980px) {
        .workspace-nav-menu .workspace-nav-menu-content {
          grid-template-columns: minmax(0, 1fr) 260px;
          padding: 22px;
        }

        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-content {
          column-gap: 20px;
          grid-template-columns: minmax(0, 1fr);
        }

        .workspace-nav-menu-group {
          padding-inline: 18px;
        }

        .workspace-nav-menu-links a {
          gap: 10px;
          grid-template-columns: 70px minmax(0, 1fr);
        }

        .workspace-nav-menu-link-visual {
          width: 70px;
        }

        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-links a {
          grid-template-columns: 52px minmax(0, 1fr);
        }

        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-link-visual {
          width: 52px;
        }
      }

      @media (max-width: 760px) {
        .workspace-nav-menu.mega-menu,
        .workspace-nav-menu.nav-models-popover {
          border-radius: 14px;
          max-height: calc(100vh - var(--nav-menu-top) - 20px);
          padding: 0;
        }

        .workspace-nav-menu .workspace-nav-menu-content {
          grid-template-columns: 1fr;
          padding: 14px;
        }

        .workspace-nav-menu-columns {
          grid-template-columns: 1fr;
        }

        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-content {
          grid-template-columns: 1fr;
          padding: 14px;
        }

        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-columns {
          grid-template-columns: 1fr;
        }

        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-group,
        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-group:first-child {
          padding: 8px 2px;
        }

        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-links {
          grid-template-columns: minmax(0, 1fr);
        }

        .workspace-nav-menu-group,
        .workspace-nav-menu-group:first-child {
          padding: 8px 2px;
        }

        .workspace-nav-menu-group + .workspace-nav-menu-group {
          border-left: 0;
          border-top: 1px solid rgba(24, 24, 27, 0.075);
          margin-top: 4px;
          padding-top: 16px;
        }

        .workspace-nav-menu-links a {
          grid-template-columns: 68px minmax(0, 1fr);
        }

        .workspace-nav-menu-link-visual {
          width: 68px;
        }

        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-links a {
          grid-template-columns: 52px minmax(0, 1fr);
        }

        .workspace-nav-menu:is([data-menu-key="image"], [data-menu-key="video"]) .workspace-nav-menu-link-visual {
          width: 52px;
        }
      }