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


  html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    scrollbar-width: none;
  }

  html::-webkit-scrollbar,
  .landing-shell::-webkit-scrollbar,
  .landing-model-viewport::-webkit-scrollbar {
    display: none;
  }

  .landing-shell {
    --landing-content-width: min(1600px, calc(100vw - 32px));
    background: #ffffff;
    color: #333236;
    min-height: 100vh;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  .landing-shell a {
    color: inherit;
    text-decoration: none;
  }

  .recreate-landing {
    margin: 0 auto;
    padding: calc(var(--workspace-nav-height) + 34px) 0 0;
    width: var(--landing-content-width);
  }

  .landing-hero h1,
  .landing-popular-templates > h2 {
    color: #343338;
    font-size: 25px;
    font-weight: var(--font-ui-display);
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
  }

  .landing-model-viewport {
    margin-right: calc((100vw - var(--landing-content-width)) / -2);
    margin-top: 22px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .landing-model-grid {
    display: grid;
    gap: 14px;
    grid-auto-columns: clamp(203px, 18vw, 260px);
    grid-auto-flow: column;
    padding: 0 max(24px, calc((100vw - var(--landing-content-width)) / 2)) 4px 0;
    width: max-content;
  }

  .landing-model-card {
    min-width: 0;
    scroll-snap-align: start;
  }

  .landing-model-link {
    display: block;
    transition-duration: 150ms;
    transition-property: scale;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .landing-model-link:active {
    scale: 0.96;
  }

  .landing-model-media {
    aspect-ratio: 1.56 / 1;
    background: #f2f2f3;
    border-radius: 9px;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.045),
      0 1px 2px -1px rgba(0, 0, 0, 0.06),
      0 2px 4px rgba(0, 0, 0, 0.025);
    display: block;
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
    overflow: hidden;
    position: relative;
    transition-duration: 160ms;
    transition-property: box-shadow;
    transition-timing-function: ease-out;
  }

  .landing-model-link:hover .landing-model-media,
  .landing-model-link:focus-visible .landing-model-media {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.075),
      0 1px 2px -1px rgba(0, 0, 0, 0.08),
      0 3px 8px rgba(0, 0, 0, 0.06);
  }

  .landing-model-media > img,
  .landing-model-media > video,
  .landing-preset-card > img,
  .landing-preset-card > video {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .landing-model-media > img,
  .landing-model-media > video,
  .landing-preset-card > img,
  .landing-preset-card > video {
    transition-duration: 260ms;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .landing-model-link:hover .landing-model-media > img,
  .landing-model-link:hover .landing-model-media > video,
  .landing-model-link:focus-visible .landing-model-media > img,
  .landing-model-link:focus-visible .landing-model-media > video,
  .landing-preset-card:hover > img,
  .landing-preset-card:hover > video,
  .landing-preset-card:focus-visible > img,
  .landing-preset-card:focus-visible > video {
    transform: scale(1.045);
  }

  .landing-model-copy {
    display: block;
    padding: 11px 1px 0;
  }

  .landing-model-copy > strong,
  .landing-model-copy > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .landing-model-copy > strong {
    color: #343338;
    font-size: var(--web-type-body);
    font-weight: var(--font-ui-medium);
    line-height: 1.25;
  }

  .landing-model-copy > small {
    color: #a0a0a5;
    font-size: var(--web-type-caption);
    font-weight: var(--font-ui-book);
    line-height: 1.35;
    margin-top: 5px;
    text-wrap: pretty;
  }

  .landing-section {
    margin-top: 43px;
  }

  .landing-preset-collections {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
  }

  .landing-section.landing-preset-section {
    background: #fbfbfc;
    border-radius: 22px;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.06),
      0 1px 2px -1px rgba(0, 0, 0, 0.04),
      0 3px 8px rgba(0, 0, 0, 0.025);
    height: 372px;
    margin-top: 0;
    overflow: hidden;
    padding: 22px 24px 0;
    position: relative;
  }

  .landing-section-header {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    min-height: 50px;
  }

  .landing-section-heading {
    min-width: 0;
  }

  .landing-section-heading h3 {
    color: #3a393e;
    font-size: var(--web-type-heading);
    font-weight: var(--font-ui-display);
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
  }

  .landing-section-subtitle {
    color: #b0afb4;
    font-size: 18px;
    font-weight: var(--font-ui-book);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 5px 0 0;
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: pretty;
    white-space: nowrap;
  }

  .landing-section-action {
    align-items: center;
    color: #aaa9ae;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--web-type-caption);
    font-weight: var(--font-ui-medium);
    gap: 5px;
    justify-content: flex-end;
    min-height: 40px;
    padding-left: 10px;
    transition-duration: 140ms;
    transition-property: color, scale;
    transition-timing-function: ease-out;
  }

  .landing-section-action:hover,
  .landing-section-action:focus-visible {
    color: #343338;
  }

  .landing-section-action:active {
    scale: 0.96;
  }

  .landing-section-action .ui-icon {
    height: 11px;
    stroke-width: 1.7;
    width: 11px;
  }

  .landing-preset-viewport {
    height: 286px;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
  }

  .landing-preset-viewport::after {
    background: linear-gradient(
      to bottom,
      rgba(251, 251, 252, 0) 0%,
      rgba(251, 251, 252, 0.62) 48%,
      #fbfbfc 100%
    );
    bottom: 0;
    content: "";
    height: 62px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 2;
  }

  /* Masonry, not a row grid: tiles are different heights and pack up the
     column rather than sitting on a shared baseline. CSS columns is what makes
     that work from server-rendered markup with no measuring pass — the trade
     is that reading order runs down each column before moving to the next,
     which is how every wall of this kind reads anyway. */
  .landing-preset-grid {
    column-count: 5;
    column-gap: 7px;
    display: block;
  }

  .landing-preset-card {
    /* aspect-ratio is set per tile inline; see landingPresetAspectRatio. */
    background: #efeff1;
    border-radius: 9px;
    /* inline-block, not block: a block child of a column box can be split
       across the column break even with break-inside: avoid. */
    display: inline-block;
    margin-bottom: 7px;
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
    overflow: hidden;
    position: relative;
    transition-duration: 150ms;
    transition-property: scale;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    break-inside: avoid;
    width: 100%;
  }

  .landing-preset-card:active {
    scale: 0.96;
  }

  .landing-footer {
    background: var(--bg-primary, #ff3850);
    border-radius: 24px 24px 0 0;
    color: #ffffff;
    margin-inline: calc(50% - 50vw);
    margin-top: 68px;
    overflow: hidden;
    padding: 46px calc(50vw - 50%) 26px;
  }

  .landing-footer-main {
    display: grid;
    gap: 42px;
    grid-template-columns: minmax(280px, 1.6fr) repeat(2, minmax(120px, 0.7fr));
  }

  .landing-footer-intro {
    max-width: 390px;
  }

  .landing-footer-brand {
    align-items: center;
    display: inline-flex;
    font-size: var(--web-type-title);
    font-weight: var(--font-ui-medium);
    gap: 9px;
    line-height: 1;
    min-height: 40px;
  }

  .landing-footer-brand .ui-icon {
    color: #ffffff;
    height: 21px;
    width: 15px;
  }

  .landing-footer-intro p {
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--web-type-control);
    line-height: 1.55;
    margin: 12px 0 0;
    max-width: 42ch;
    text-wrap: pretty;
  }

  .landing-footer-links {
    display: flex;
    flex-direction: column;
  }

  .landing-footer-links h2 {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--web-type-caption);
    font-weight: var(--font-ui-medium);
    letter-spacing: 0.07em;
    line-height: 1.2;
    margin: 0 0 9px;
    text-transform: uppercase;
  }

  .landing-footer-links a {
    align-items: center;
    color: rgba(255, 255, 255, 0.94);
    display: inline-flex;
    font-size: var(--web-type-control);
    min-height: 40px;
    transition-duration: 100ms;
    transition-property: color;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    width: fit-content;
  }

  .landing-footer-links a:hover,
  .landing-footer-links a:focus-visible {
    color: #ffffff;
  }

  .landing-footer-meta {
    align-items: center;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.76);
    display: flex;
    font-size: var(--web-type-caption);
    justify-content: space-between;
    margin-top: 28px;
    min-height: 50px;
    padding-top: 14px;
  }

  @media (max-width: 1280px) {
    .landing-preset-grid {
      column-count: 4;
    }
  }

  @media (max-width: 980px) {
    .landing-preset-grid {
      column-count: 3;
    }
  }

  @media (max-width: 760px) {
    .landing-shell {
      --landing-content-width: calc(100vw - 24px);
    }

    .recreate-landing {
      padding-top: calc(var(--workspace-nav-height) + 24px);
    }

    .landing-model-grid {
      grid-auto-columns: min(56vw, 203px);
      padding-right: 16px;
    }

    .landing-preset-collections {
      grid-template-columns: minmax(0, 1fr);
    }

    .landing-section.landing-preset-section {
      height: 380px;
    }

    .landing-footer-main {
      column-gap: 24px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 28px;
    }

    .landing-footer-intro {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 480px) {
    .landing-shell {
      --landing-content-width: calc(100vw - 20px);
    }

    .landing-hero h1,
    .landing-popular-templates > h2 {
      font-size: 22px;
    }

    .landing-model-viewport {
      margin-top: 18px;
    }

    .landing-model-grid {
      gap: 11px;
      grid-auto-columns: min(62vw, 190px);
      padding-right: 14px;
    }

    .landing-section {
      margin-top: 38px;
    }

    .landing-preset-collections {
      gap: 13px;
      margin-top: 18px;
    }

    .landing-section.landing-preset-section {
      border-radius: 18px;
      height: 350px;
      padding: 18px 18px 0;
    }

    .landing-section-heading h3 {
      font-size: 18px;
    }

    .landing-section-subtitle {
      font-size: var(--web-type-title);
    }

    .landing-preset-viewport {
      height: 270px;
      margin-top: 16px;
    }

    .landing-preset-grid {
      column-count: 2;
      column-gap: 6px;
    }

    .landing-preset-card {
      margin-bottom: 6px;
    }

    .landing-preset-card {
      border-radius: 8px;
    }

    .landing-footer {
      border-radius: 18px 18px 0 0;
      margin-top: 48px;
      padding: 28px calc(50vw - 50%) 18px;
    }

    .landing-footer-meta {
      align-items: flex-start;
      flex-direction: column;
      gap: 5px;
      justify-content: center;
      min-height: 58px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .landing-model-link,
    .landing-model-media,
    .landing-model-media > img,
    .landing-model-media > video,
    .landing-preset-card,
    .landing-preset-card > img,
    .landing-preset-card > video {
      transition-duration: 0.01ms;
    }

    .landing-model-link:hover .landing-model-media > img,
    .landing-model-link:hover .landing-model-media > video,
    .landing-model-link:focus-visible .landing-model-media > img,
    .landing-model-link:focus-visible .landing-model-media > video,
    .landing-preset-card:hover > img,
    .landing-preset-card:hover > video,
    .landing-preset-card:focus-visible > img,
    .landing-preset-card:focus-visible > video {
      transform: none;
    }
  }


      /* Bottom-right of the page, above the content and out of the way — the
         page has no admin chrome to hang it on. */
      .landing-edit-trigger {
        background: var(--surface);
        bottom: max(18px, env(safe-area-inset-bottom));
        position: fixed;
        right: max(18px, env(safe-area-inset-right));
        z-index: 90;
        border: 0;
        border-radius: 999px;
        box-shadow: var(--shadow-border, 0 0 0 1px rgba(24, 24, 27, 0.08));
        color: var(--text-primary);
        cursor: pointer;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        padding: 7px 13px;
      }

      .landing-edit-trigger:hover { background: var(--surface-hover); }
      .landing-edit-trigger[hidden] { display: none; }

      /* One on every editable section, so the affordance is where the thing
         is. The floating trigger stays as the way into the whole page. */
      .landing-edit-pill {
        background: var(--surface-soft);
        border: 0;
        border-radius: var(--radius-pill, 999px);
        color: var(--text-secondary);
        cursor: pointer;
        font-family: inherit;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        margin-left: 10px;
        padding: 5px 11px;
        vertical-align: middle;
      }

      .landing-edit-pill:hover {
        background: var(--surface-hover);
        color: var(--text-primary);
      }

      .landing-editor {
        inset: 0;
        position: fixed;
        z-index: var(--layer-modal, 160);
      }

      .landing-editor[hidden] { display: none; }

      .landing-editor-scrim {
        appearance: none;
        background: rgba(24, 24, 27, 0.32);
        border: 0;
        cursor: default;
        inset: 0;
        padding: 0;
        position: absolute;
      }

      .landing-editor-panel {
        background: var(--surface);
        border-radius: 24px 24px 0 0;
        bottom: 0;
        display: grid;
        gap: 14px;
        grid-template-rows: auto minmax(0, 1fr);
        left: 50%;
        max-height: 86dvh;
        padding: 18px 20px 24px;
        position: absolute;
        transform: translateX(-50%);
        width: min(940px, 100%);
      }

      .landing-editor-head {
        align-items: center;
        display: flex;
        gap: 12px;
      }

      .landing-editor-head h2 {
        font-size: var(--web-type-title);
        font-weight: var(--font-ui-medium);
      }

      .landing-editor-head p,
      .landing-editor-status {
        color: var(--text-secondary);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
      }

      .landing-editor-status[data-tone="error"] { color: var(--bg-primary, #ff3850); }

      .landing-editor-publish {
        background: var(--bg-primary, #ff3850);
        border: 0;
        border-radius: 999px;
        color: #ffffff;
        cursor: pointer;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-medium);
        margin-left: auto;
        padding: 9px 16px;
      }

      .landing-editor-publish[disabled] { opacity: 0.45; }

      .landing-editor-close {
        background: none;
        border: 0;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 20px;
        line-height: 1;
        padding: 4px 8px;
      }

      .landing-editor-body {
        display: grid;
        gap: 18px;
        overflow-y: auto;
      }

      .landing-editor-group h3 {
        color: var(--text-secondary);
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-regular);
        margin-bottom: 8px;
        text-transform: uppercase;
      }

      .landing-editor-cards {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }

      .landing-editor-card,
      .landing-editor-shelf {
        background: var(--surface-soft, #f5f5f6);
        border-radius: 16px;
        display: grid;
        gap: 6px;
        padding: 10px 12px;
        position: relative;
      }

      .landing-editor-card input,
      .landing-editor-shelf input {
        background: var(--surface);
        border: 0;
        border-radius: 10px;
        color: var(--text-primary);
        font-family: inherit;
        font-size: var(--web-type-control);
        font-weight: var(--font-ui-regular);
        padding: 8px 10px;
        width: 100%;
      }

      .landing-editor-shelf {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .landing-editor-shelf-fields {
        display: grid;
        gap: 6px;
        min-width: 0;
      }

      .landing-editor-shelf-actions {
        align-items: center;
        display: flex;
        gap: 4px;
      }

      .landing-editor-shelf-actions button,
      .landing-editor-card-remove {
        background: var(--surface);
        border: 0;
        border-radius: 999px;
        color: var(--text-secondary);
        cursor: pointer;
        font-family: inherit;
        font-size: var(--web-type-caption);
        font-weight: var(--font-ui-medium);
        padding: 6px 10px;
      }

      .landing-editor-shelf-actions button:hover,
      .landing-editor-card-remove:hover {
        background: var(--surface-hover);
        color: var(--text-primary);
      }

      .landing-editor-shelf.is-hidden { opacity: 0.5; }


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