/* Route workbench and simultaneous screencast layer composition. */
:where(.mx-screencast-workbench, .mx-screencast) {
  --mx-layer-project: 10;
  --mx-layer-preview: 20;
  --mx-layer-transform: 30;
  --mx-layer-composer: 40;
  --mx-layer-pointer: 50;
  --mx-workbench-safe-block: 5.5rem;
}

.mx-screencast-workbench {
  container-name: mx-workbench;
  container-type: inline-size;
  display: grid;
  width: 100%;
  max-width: 100%;
  height: calc(100svh - 3.625rem);
  max-height: calc(100svh - 3.625rem);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.mx-screencast-workbench-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  gap: clamp(0.55rem, 1.25cqi, 1rem);
  padding: 0.45rem clamp(0.65rem, 1.5cqi, 1.25rem);
  border-bottom: 1px solid var(--mx-app-border);
  background: var(--mx-app-surface);
  box-shadow: 0 0.2rem 0.8rem rgb(15 23 42 / 0.06);
}

.mx-screencast-workbench-title {
  min-width: 10rem;
  margin-right: auto;
}

.mx-screencast-workbench-title :where(p, h1) {
  margin: 0;
}

.mx-screencast-workbench-title h1 {
  font-size: clamp(1rem, 1.6cqi, 1.35rem);
  line-height: 1.1;
}

.mx-screencast-selector-group {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.mx-screencast-selector-group > span {
  color: var(--mx-app-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mx-screencast-selector {
  display: flex;
  min-width: 0;
  gap: 0.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.mx-screencast-selector a {
  flex: 0 0 auto;
  min-width: 0;
  min-block-size: 2rem;
  padding: 0.3rem 0.55rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0.38rem;
  color: var(--mx-app-muted);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1.15;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-screencast-selector a[aria-current="page"] {
  border-color: #dfb149;
  background: var(--mx-app-accent-soft);
  color: var(--mx-app-foreground);
  font-weight: 750;
}

.mx-screencast-selector a:focus-visible {
  outline: 2px solid var(--mx-app-accent);
  outline-offset: -2px;
}

.mx-screencast-workbench-body {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
}

.mx-screencast-stage {
  display: grid;
  container-name: mx-stage;
  container-type: size;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: clamp(0.35rem, 1cqi, 0.8rem);
  overflow: hidden;
  background: #e9edf2;
}

.mx-screencast-panel {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
}

.mx-screencast-panel[hidden] {
  display: none;
}

.mx-screencast-inspector {
  width: clamp(2.25rem, 17cqi, 16rem);
  min-width: 0;
  border-left: 1px solid var(--mx-app-border);
  background: var(--mx-app-surface);
  overflow: auto;
}

.mx-screencast-inspector summary {
  padding: 0.65rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
}

.mx-screencast-inspector dl {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0 0.65rem 0.75rem;
}

.mx-screencast-inspector dl > div {
  min-width: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--mx-app-border);
}

.mx-screencast-inspector :where(dt, dd) {
  margin: 0;
}

.mx-screencast-inspector dt {
  color: var(--mx-app-muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.mx-screencast-inspector dd {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

.mx-screencast {
  position: relative;
  container-name: mx-scene;
  container-type: size;
  display: grid;
  inline-size: min(var(--mx-canvas-native-width), 100cqi, calc(100cqb * var(--mx-canvas-ratio)));
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: calc(100svh - var(--mx-workbench-safe-block));
  aspect-ratio: var(--mx-canvas-aspect);
  overflow: hidden;
  border: 1px solid #cbd3dd;
  border-radius: 0.55rem;
  background: var(--mx-app-background);
  box-shadow: var(--mx-app-shadow);
  isolation: isolate;
}

.mx-screencast[data-canvas="desktop"] {
  --mx-canvas-native-width: 1440px;
  --mx-canvas-native-height: 810px;
  --mx-canvas-aspect: 1440 / 810;
  --mx-canvas-ratio: 1.7777778;
  --mx-workspace-scale: 0.48;
  aspect-ratio: 1440 / 810;
}

.mx-screencast[data-canvas="tablet"] {
  --mx-canvas-native-width: 1024px;
  --mx-canvas-native-height: 768px;
  --mx-canvas-aspect: 1024 / 768;
  --mx-canvas-ratio: 1.3333333;
  --mx-workspace-scale: 0.56;
  aspect-ratio: 1024 / 768;
}

.mx-screencast[data-canvas="mobile"] {
  --mx-canvas-native-width: 390px;
  --mx-canvas-native-height: 844px;
  --mx-canvas-aspect: 390 / 844;
  --mx-canvas-ratio: 0.4620853;
  --mx-workspace-scale: 0.5;
  aspect-ratio: 390 / 844;
}

.mx-screencast[data-canvas="feature"] {
  --mx-canvas-native-width: 720px;
  --mx-canvas-native-height: 576px;
  --mx-canvas-aspect: 720 / 576;
  --mx-canvas-ratio: 1.25;
  --mx-workspace-scale: 0.58;
  aspect-ratio: 720 / 576;
}

.mx-screencast[data-canvas="responsive"] {
  --mx-canvas-native-width: 1440px;
  --mx-canvas-native-height: 810px;
  --mx-canvas-aspect: 16 / 9;
  --mx-canvas-ratio: 1.7777778;
  --mx-workspace-scale: 0.48;
  aspect-ratio: 16 / 9;
  inline-size: min(100%, 1440px);
}

/* The homepage walkthrough uses the native phone composition at mobile widths. */
@media (max-width: 720px) {
  .mx-v2-home-screencast .mx-screencast[data-canvas="responsive"] {
    --mx-canvas-native-width: 390px;
    --mx-canvas-native-height: 844px;
    --mx-canvas-aspect: 390 / 844;
    --mx-canvas-ratio: 0.4620853;
    --mx-workspace-scale: 0.5;
    aspect-ratio: 390 / 844;
    inline-size: min(100%, 390px);
  }
}

.mx-screencast-layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mx-screencast-layer {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

.mx-screencast-layer[data-screencast-required="false"] {
  opacity: 0;
  visibility: hidden;
}

.mx-screencast-workbench[data-isolated-layer="1"] .mx-screencast-layer:not([data-screencast-layer="1"]),
.mx-screencast-workbench[data-isolated-layer="2"] .mx-screencast-layer:not([data-screencast-layer="2"]),
.mx-screencast-workbench[data-isolated-layer="3"] .mx-screencast-layer:not([data-screencast-layer="3"]),
.mx-screencast-workbench[data-isolated-layer="4"] .mx-screencast-layer:not([data-screencast-layer="4"]) {
  opacity: 0;
  visibility: hidden;
}

.mx-screencast-workbench[data-isolated-layer="1"] .mx-screencast-layer[data-screencast-layer="1"],
.mx-screencast-workbench[data-isolated-layer="2"] .mx-screencast-layer[data-screencast-layer="2"],
.mx-screencast-workbench[data-isolated-layer="3"] .mx-screencast-layer[data-screencast-layer="3"],
.mx-screencast-workbench[data-isolated-layer="4"] .mx-screencast-layer[data-screencast-layer="4"] {
  opacity: 1;
  visibility: visible;
}

.mx-screencast-workbench[data-isolated-layer="1"] .mx-screencast-pointer,
.mx-screencast-workbench[data-isolated-layer="2"] .mx-screencast-pointer,
.mx-screencast-workbench[data-isolated-layer="3"] .mx-screencast-pointer,
.mx-screencast-workbench[data-isolated-layer="4"] .mx-screencast-pointer {
  visibility: hidden;
}

.mx-screencast-layer--2 {
  z-index: var(--mx-layer-project);
  background: var(--mx-app-background);
  pointer-events: none;
}

.mx-screencast-layer--3 {
  z-index: var(--mx-layer-preview);
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
}

.mx-screencast-layer--4 {
  z-index: var(--mx-layer-transform);
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
}

.mx-screencast-layer--1 {
  z-index: var(--mx-layer-composer);
  padding: clamp(0.65rem, 2.5cqi, 2rem);
  background: transparent;
  pointer-events: none;
}

.mx-screencast-layer--1 > .mx-app-visual-catalog-surface {
  position: absolute;
  right: 50%;
  bottom: clamp(0.65rem, 2.5cqi, 2rem);
  width: min(100% - 2rem, 38rem);
  transform: translateX(50%);
}

.mx-screencast-layer--1 > .mx-app-visual-catalog-surface--composer-pinned {
  top: clamp(0.65rem, 2.5cqi, 2rem);
  right: clamp(0.65rem, 2.5cqi, 2rem);
  bottom: auto;
  width: min(44%, 350px);
  transform: none;
}

.mx-screencast-layer--1 > .mx-app-visual-catalog-surface--composer-pinned .mx-ref-pinned-composer-shell {
  position: relative;
  margin-left: auto;
}

.mx-screencast-layer--1 > .mx-app-visual-catalog-surface--composer-pinned .mx-ref-pinned-composer-expanded {
  position: absolute;
  z-index: 1;
  top: calc(100% + 0.65rem);
  right: 0;
  width: min(38rem, calc(100cqi - 4rem));
  margin: 0;
}

.mx-walkthrough-composer :where(.mx-walkthrough-budget-attachment, .mx-walkthrough-media-attachments, .mx-walkthrough-voice-attachment) {
  display: none;
}

.mx-walkthrough-composer[data-composer-mode="budget"] .mx-walkthrough-budget-attachment {
  display: inline-flex;
}

.mx-walkthrough-composer[data-composer-mode="media"] .mx-walkthrough-media-attachments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.mx-walkthrough-composer[data-composer-mode="voice"] .mx-walkthrough-voice-attachment {
  display: inline-flex;
}

.mx-walkthrough-media-attachments .mx-ref-chat-image-thumb {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--mx-app-border);
  border-radius: 0.4rem;
}

.mx-walkthrough-media-attachments .mx-ref-stock-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mx-screencast-layer--2 > .mx-app-visual-catalog-surface {
  width: 100%;
  height: 100%;
}

.mx-screencast[data-canvas="feature"][data-scenario^="feature-"] .mx-screencast-layer--2 > .mx-app-visual-catalog-surface {
  inline-size: calc(100% / var(--mx-workspace-scale));
  block-size: calc(100% / var(--mx-workspace-scale));
  transform: scale(var(--mx-workspace-scale));
  transform-origin: top left;
}

.mx-screencast-layer--2 .mx-ref-project-space {
  height: 100%;
  overflow: auto;
}

.mx-screencast-layer--3 > .mx-app-visual-catalog-surface {
  width: min(92%, 64rem);
  max-height: 88%;
  overflow: auto;
}

.mx-screencast-pointer {
  position: absolute;
  z-index: var(--mx-layer-pointer);
  top: 0;
  left: 0;
  width: clamp(0.8rem, 1.8cqi, 1.35rem);
  height: clamp(1rem, 2.2cqi, 1.65rem);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--mx-pointer-x, 50%), var(--mx-pointer-y, 50%));
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms ease !important;
}

.mx-screencast-pointer::before {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  background: #172033;
  clip-path: polygon(0 0, 100% 68%, 58% 72%, 42% 100%);
  content: "";
  filter: drop-shadow(0 0.1rem 0.2rem rgb(15 23 42 / 0.45));
}

.mx-screencast-pointer.is-visible {
  opacity: 1;
}

.mx-screencast-public-control {
  position: absolute;
  z-index: 60;
  right: clamp(0.5rem, 1.5cqi, 1rem);
  bottom: clamp(0.5rem, 1.5cqi, 1rem);
  min-width: 3.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.38);
  border-radius: 999px;
  background: rgb(17 24 39 / 0.88);
  color: #fff;
  font: 700 0.78rem/1 var(--mx-app-font);
  cursor: pointer;
  box-shadow: 0 0.25rem 0.8rem rgb(15 23 42 / 0.24);
}

.mx-screencast-public-control:hover {
  background: rgb(17 24 39 / 0.98);
}

.mx-screencast-public-control:focus-visible {
  outline: 3px solid #eeb53f;
  outline-offset: 3px;
}

.mx-screencast :where(.is-animating, .is-animating .mx-screencast-pointer) {
  will-change: transform, opacity;
}

.mx-screencast [data-screencast-state="hidden"],
.mx-screencast .is-hidden {
  visibility: hidden;
  opacity: 0;
}

.mx-screencast [data-screencast-state="focused"],
.mx-screencast .is-focused {
  outline: 3px solid rgb(238 181 63 / 0.78);
  outline-offset: 3px;
}

@container mx-scene (max-width: 48rem) {
  .mx-screencast-layer--1 {
    padding: clamp(0.5rem, 2cqi, 1rem);
  }

  .mx-animation-project-space {
    padding: clamp(0.45rem, 1.6cqi, 0.8rem);
  }

  .mx-ref-project-grid {
    grid-template-columns: minmax(6.5rem, 24%) minmax(0, 1fr);
    gap: 0.45rem;
  }

  .mx-ref-rendered-web {
    width: 90%;
    max-height: 76%;
  }
}

@container mx-scene (max-width: 28rem) {
  .mx-screencast-layers {
    font-size: 11px;
  }

  .mx-screencast-layers :where(.mx-ref-workspace, .mx-ref-composer, .mx-ref-rendered-web, .mx-app-transform) {
    font-size: 11px;
  }

  .mx-ref-workspace-title p,
  .mx-ref-tabs > button:nth-child(n + 3),
  .mx-ref-document-body table,
  .mx-ref-preview-feature-grid,
  .mx-ref-preview-metrics {
    display: none;
  }

  .mx-ref-project-grid {
    grid-template-columns: 1fr;
  }

  .mx-ref-document-nav {
    display: flex;
    overflow: hidden;
  }

  .mx-ref-preview-hero {
    grid-template-columns: 1fr;
  }

  .mx-ref-preview-hero img {
    min-height: 5rem;
    max-height: 8rem;
  }

  .mx-ref-composer {
    width: 96%;
  }

  .mx-ref-chat-controls {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .mx-ref-context-chip,
  .mx-ref-attachment-chip {
    max-width: calc(100% - 3.2rem);
  }

  .mx-ref-attachment-chip :where(strong, small) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mx-ref-chat-send {
    margin-left: 0;
  }

}

@container mx-scene (max-aspect-ratio: 3 / 4) {
  .mx-screencast-layer--3,
  .mx-screencast-layer--4 {
    align-items: start;
    padding-top: 14%;
  }

  .mx-ref-rendered-web {
    width: 92%;
    max-height: 58%;
  }

  .mx-screencast-layer--1 > .mx-app-visual-catalog-surface--composer-pinned {
    top: auto;
    right: 50%;
    bottom: 1rem;
    width: min(88%, 350px);
    transform: translateX(50%);
  }

  .mx-screencast-layer--1 > .mx-app-visual-catalog-surface--composer-pinned .mx-ref-pinned-composer-shell {
    margin-inline: auto;
  }

  .mx-screencast-layer--1 > .mx-app-visual-catalog-surface--composer-pinned .mx-ref-pinned-composer-expanded {
    top: auto;
    right: auto;
    bottom: calc(100% + 0.65rem);
    left: 50%;
    width: min(38rem, calc(100cqi - 2rem));
    transform: translateX(-50%);
  }
}

@container mx-workbench (max-width: 58rem) {
  .mx-screencast-workbench-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .mx-screencast-workbench-title {
    grid-row: span 2;
  }

  .mx-screencast-selector-group {
    overflow: hidden;
  }

  .mx-screencast-selector {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .mx-screencast-workbench-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .mx-screencast-inspector {
    position: absolute;
    z-index: 60;
    top: 0.4rem;
    right: 0.4rem;
    width: min(13rem, calc(100% - 0.8rem));
    max-height: calc(100% - 0.8rem);
    border: 1px solid var(--mx-app-border);
    border-radius: 0.45rem;
  }
}

@container mx-workbench (max-width: 30rem) {
  .mx-screencast-workbench-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    padding-block: 0.3rem;
  }

  .mx-screencast-workbench-title,
  .mx-screencast-selector-group > span {
    display: none;
  }

  .mx-screencast-selector a {
    padding-block: 0.25rem;
    font-size: 0.68rem;
  }

}

.mx-walkthrough-project {
  inline-size: calc(100% / var(--mx-workspace-scale));
  block-size: calc(100% / var(--mx-workspace-scale));
  height: calc(100cqb / var(--mx-workspace-scale));
  min-width: 0;
  max-inline-size: none;
  max-block-size: none;
  overflow: hidden;
  opacity: 1;
  transform: scale(var(--mx-workspace-scale));
  transform-origin: top left;
  transition: opacity 180ms ease;
}

.mx-walkthrough-project :where(.mx-ref-tabs button, .mx-ref-document-nav button) {
  background: transparent;
  color: var(--mx-app-text);
}

.mx-walkthrough-project :where(.mx-ref-tabs button.is-active, .mx-ref-document-nav button.is-active) {
  background: var(--mx-app-foreground);
  color: #fff;
}

.mx-walkthrough-project table {
  text-align: right;
}

.mx-walkthrough-project table :where(th, td) {
  text-align: right;
}

.mx-walkthrough-project tbody tr + tr > :where(th, td) {
  border-block-start: 1px solid var(--mx-app-border);
}

.mx-walkthrough-project thead {
  background: var(--mx-app-surface-muted);
}

.mx-walkthrough-project thead th {
  background: var(--mx-app-surface-muted);
}

.mx-walkthrough-project tbody tr + tr {
  border-block-start: 1px solid var(--mx-app-border);
}

.mx-walkthrough-project[data-walkthrough-phase="start"] {
  opacity: 0;
}

.mx-screencast-layer--2 .mx-walkthrough-project {
  height: calc(100% / var(--mx-workspace-scale));
}

.mx-walkthrough-project :where(.mx-walkthrough-tab-panel, .mx-walkthrough-phase-panel, .mx-walkthrough-draft-state) {
  display: none;
}

.mx-walkthrough-project .mx-ref-deliverables-timeline .mx-walkthrough-draft-state {
  display: none;
}

.mx-walkthrough-project[data-walkthrough-phase="planning"] .mx-walkthrough-tab-panel--scope,
.mx-walkthrough-project[data-walkthrough-phase="people-complete"] .mx-walkthrough-tab-panel--scope,
.mx-walkthrough-project[data-walkthrough-phase="deliverables-plan"] .mx-walkthrough-tab-panel--scope,
.mx-walkthrough-project[data-walkthrough-phase="sources-budget"] .mx-walkthrough-tab-panel--scope,
.mx-walkthrough-project[data-walkthrough-phase="scope-review"] .mx-walkthrough-tab-panel--scope,
.mx-walkthrough-project[data-walkthrough-phase="voice"] .mx-walkthrough-tab-panel--scope {
  display: block;
}

.mx-walkthrough-project[data-walkthrough-phase="people-empty"] .mx-walkthrough-tab-panel--people,
.mx-walkthrough-project[data-walkthrough-phase="people-contributors"] .mx-walkthrough-tab-panel--people,
.mx-walkthrough-project[data-walkthrough-phase="people-reviewers"] .mx-walkthrough-tab-panel--people,
.mx-walkthrough-project[data-walkthrough-phase="reviewers-highlight"] .mx-walkthrough-tab-panel--people {
  display: block;
}

.mx-walkthrough-project[data-walkthrough-phase="drafts-empty"] .mx-walkthrough-tab-panel--drafts,
.mx-walkthrough-project[data-walkthrough-phase="drafts-media"] .mx-walkthrough-tab-panel--drafts,
.mx-walkthrough-project[data-walkthrough-phase="drafts-copy"] .mx-walkthrough-tab-panel--drafts,
.mx-walkthrough-project[data-walkthrough-phase="publish"] .mx-walkthrough-tab-panel--drafts {
  display: block;
}

.mx-walkthrough-project[data-walkthrough-phase="planning"] [data-walkthrough-panel="planning"],
.mx-walkthrough-project[data-walkthrough-phase="people-complete"] [data-walkthrough-panel="planning"],
.mx-walkthrough-project[data-walkthrough-phase="deliverables-plan"] [data-walkthrough-panel="deliverables-plan"],
.mx-walkthrough-project[data-walkthrough-phase="sources-budget"] [data-walkthrough-panel="sources-budget"],
.mx-walkthrough-project[data-walkthrough-phase="scope-review"] [data-walkthrough-panel="scope-review"],
.mx-walkthrough-project[data-walkthrough-phase="voice"] [data-walkthrough-panel="voice"] {
  display: block;
}

.mx-walkthrough-project[data-walkthrough-phase="drafts-empty"] [data-walkthrough-draft-state="empty"],
.mx-walkthrough-project[data-walkthrough-phase="drafts-media"] [data-walkthrough-draft-state="media"],
.mx-walkthrough-project[data-walkthrough-phase="drafts-copy"] [data-walkthrough-draft-state="copy"],
.mx-walkthrough-project[data-walkthrough-phase="publish"] [data-walkthrough-draft-state="copy"] {
  display: block;
}

.mx-walkthrough-project[data-walkthrough-phase="planning"] [data-ref-tab="scope"],
.mx-walkthrough-project[data-walkthrough-phase="people-complete"] [data-ref-tab="scope"],
.mx-walkthrough-project[data-walkthrough-phase="deliverables-plan"] [data-ref-tab="scope"],
.mx-walkthrough-project[data-walkthrough-phase="sources-budget"] [data-ref-tab="scope"],
.mx-walkthrough-project[data-walkthrough-phase="scope-review"] [data-ref-tab="scope"],
.mx-walkthrough-project[data-walkthrough-phase="voice"] [data-ref-tab="scope"] {
  color: #fff;
  background: var(--mx-app-foreground);
}

.mx-walkthrough-project[data-walkthrough-phase="people-empty"] [data-ref-tab="people"],
.mx-walkthrough-project[data-walkthrough-phase="people-contributors"] [data-ref-tab="people"],
.mx-walkthrough-project[data-walkthrough-phase="people-reviewers"] [data-ref-tab="people"],
.mx-walkthrough-project[data-walkthrough-phase="reviewers-highlight"] [data-ref-tab="people"] {
  color: #fff;
  background: var(--mx-app-foreground);
}

.mx-walkthrough-project[data-walkthrough-phase="drafts-empty"] [data-ref-tab="deliverables"],
.mx-walkthrough-project[data-walkthrough-phase="drafts-media"] [data-ref-tab="deliverables"],
.mx-walkthrough-project[data-walkthrough-phase="drafts-copy"] [data-ref-tab="deliverables"],
.mx-walkthrough-project[data-walkthrough-phase="publish"] [data-ref-tab="deliverables"] {
  color: #fff;
  background: var(--mx-app-foreground);
}

.mx-walkthrough-project[data-walkthrough-phase="planning"] [data-ref-doc="overlay"],
.mx-walkthrough-project[data-walkthrough-phase="people-complete"] [data-ref-doc="overlay"],
.mx-walkthrough-project[data-walkthrough-phase="scope-review"] [data-ref-doc="overlay"] {
  color: #fff;
  background: var(--mx-app-foreground);
}

.mx-walkthrough-project[data-walkthrough-phase="deliverables-plan"] [data-ref-doc="deliverables"] {
  color: #fff;
  background: var(--mx-app-foreground);
}

.mx-walkthrough-project[data-walkthrough-phase="sources-budget"] [data-ref-doc="sources"] {
  color: #fff;
  background: var(--mx-app-foreground);
}

.mx-walkthrough-project[data-walkthrough-phase="voice"] [data-ref-doc="voice"] {
  color: #fff;
  background: var(--mx-app-foreground);
}

.mx-walkthrough-project .mx-ref-document-body {
  max-height: none;
  overflow: visible;
}

.mx-walkthrough-project .mx-walkthrough-planning-section {
  margin-block: 0.6rem;
}

.mx-walkthrough-project .mx-walkthrough-planning-section > h4 {
  margin-block: 0 0.3rem;
}

.mx-walkthrough-project .mx-walkthrough-longform,
.mx-walkthrough-project .mx-walkthrough-voice-guidance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-block: 0.7rem;
}

.mx-walkthrough-project .mx-walkthrough-longform-section {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem;
  border: 1px solid var(--mx-app-border);
  border-radius: var(--mx-app-radius);
  background: var(--mx-app-surface-muted);
  overflow-wrap: anywhere;
}

.mx-walkthrough-project .mx-walkthrough-voice-guide {
  display: grid;
  gap: 0.35rem;
  padding-block: 0.65rem;
  border-block-start: 1px solid var(--mx-app-border);
  overflow-wrap: anywhere;
}

.mx-walkthrough-project :where(.mx-walkthrough-longform-section, .mx-walkthrough-voice-guide) :where(h4, p, ul) {
  margin: 0;
}

.mx-walkthrough-project :where(.mx-walkthrough-longform-section, .mx-walkthrough-voice-guide) ul {
  display: grid;
  gap: 0.22rem;
  padding-inline-start: 1.1rem;
}

.mx-walkthrough-project .mx-walkthrough-budget-extract {
  width: 100%;
  table-layout: fixed;
  font-size: 0.78em;
}

.mx-walkthrough-project [data-walkthrough-panel="deliverables-plan"] :where(th, td):last-child {
  width: 42%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mx-walkthrough-typing-mask {
  clip-path: inset(0 100% 0 0);
}

.mx-walkthrough-project[data-walkthrough-phase="planning"] [data-walkthrough-panel="planning"] .mx-walkthrough-typing-mask,
.mx-walkthrough-project[data-walkthrough-phase="deliverables-plan"] [data-walkthrough-panel="deliverables-plan"] .mx-walkthrough-typing-mask,
.mx-walkthrough-project[data-walkthrough-phase="sources-budget"] [data-walkthrough-panel="sources-budget"] .mx-walkthrough-typing-mask,
.mx-walkthrough-project[data-walkthrough-phase="voice"] [data-walkthrough-panel="voice"] .mx-walkthrough-typing-mask,
.mx-walkthrough-project[data-walkthrough-phase="drafts-copy"] [data-walkthrough-draft-state="copy"] .mx-walkthrough-typing-mask,
.mx-walkthrough-project[data-walkthrough-phase="publish"] [data-walkthrough-draft-state="copy"] .mx-walkthrough-typing-mask {
  animation: mx-walkthrough-type-in 520ms ease forwards;
}

.mx-walkthrough-stagger-row {
  opacity: 0;
  transform: translateY(0.45rem);
  transition: opacity 220ms ease, transform 220ms ease;
  transition-delay: calc(var(--mx-reveal-index, 0) * 70ms);
}

.mx-walkthrough-project[data-walkthrough-phase="people-empty"] .mx-ref-user-list .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="people-contributors"] .mx-ref-user-list [data-user-group="reviewers"] {
  opacity: 0;
  transform: translateY(0.45rem);
}

.mx-walkthrough-project[data-walkthrough-phase="people-contributors"] .mx-ref-user-list [data-user-group="contributors"],
.mx-walkthrough-project[data-walkthrough-phase="people-reviewers"] .mx-ref-user-list .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="reviewers-highlight"] .mx-ref-user-list .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="people-complete"] .mx-walkthrough-planning-person,
.mx-walkthrough-project[data-walkthrough-phase="planning"] [data-walkthrough-panel="planning"] .mx-walkthrough-longform-section,
.mx-walkthrough-project[data-walkthrough-phase="deliverables-plan"] [data-walkthrough-panel="deliverables-plan"] .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="sources-budget"] [data-walkthrough-panel="sources-budget"] .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="scope-review"] [data-walkthrough-panel="scope-review"] .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="voice"] [data-walkthrough-panel="voice"] .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="drafts-empty"] [data-walkthrough-draft-state="empty"] .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="drafts-media"] [data-walkthrough-draft-state="media"] .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="drafts-copy"] [data-walkthrough-draft-state="copy"] .mx-walkthrough-stagger-row,
.mx-walkthrough-project[data-walkthrough-phase="publish"] [data-walkthrough-draft-state="copy"] .mx-walkthrough-stagger-row {
  animation: mx-walkthrough-row-in 260ms ease forwards;
  animation-delay: calc(var(--mx-reveal-index, 0) * 70ms);
}

.mx-walkthrough-scope-status--review {
  opacity: 0;
  transform: scale(0.92);
}

.mx-walkthrough-project[data-walkthrough-phase="scope-review"] .mx-walkthrough-scope-status--draft {
  animation: mx-walkthrough-scope-draft-out 220ms ease forwards;
  animation-delay: calc(var(--mx-reveal-index, 0) * 150ms + 220ms);
}

.mx-walkthrough-project[data-walkthrough-phase="scope-review"] .mx-walkthrough-scope-status--review {
  display: inline-flex;
  animation: mx-walkthrough-scope-review-in 300ms ease forwards;
  animation-delay: calc(var(--mx-reveal-index, 0) * 150ms + 260ms);
}

.mx-walkthrough-project :where([data-walkthrough-control="add"], [data-walkthrough-filter]) {
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.mx-walkthrough-project[data-walkthrough-phase="people-contributors"] [data-walkthrough-control="add"],
.mx-walkthrough-project[data-walkthrough-phase="people-contributors"] [data-walkthrough-filter="contributors"],
.mx-walkthrough-project[data-walkthrough-phase="people-reviewers"] [data-walkthrough-filter="reviewers"] {
  color: #fff;
  background: var(--mx-app-foreground);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mx-app-accent) 24%, transparent);
}

.mx-walkthrough-reviewer-highlight {
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.mx-walkthrough-project[data-walkthrough-phase="reviewers-highlight"] .mx-walkthrough-reviewer-highlight {
  border-color: var(--mx-app-accent);
  background: color-mix(in srgb, var(--mx-app-accent) 10%, var(--mx-app-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mx-app-accent) 18%, transparent);
}

.mx-walkthrough-scope-documents > article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem;
  border: 1px solid var(--mx-app-border);
  border-radius: 0.45rem;
}

.mx-walkthrough-scope-documents > article + article {
  margin-top: 0.4rem;
}

.mx-walkthrough-scope-documents small {
  display: block;
}

.mx-walkthrough-build-gradient {
  display: block;
  width: 8rem;
  height: 0.35rem;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, var(--mx-app-accent), var(--mx-app-foreground), var(--mx-app-accent));
  background-size: 200% 100%;
  transform: scaleX(0.08);
  transform-origin: left;
}

.mx-walkthrough-project[data-walkthrough-phase="drafts-empty"] .mx-walkthrough-build-gradient {
  animation: mx-walkthrough-build-drafts 760ms ease forwards;
}

.mx-walkthrough-project[data-walkthrough-phase="drafts-media"] .mx-walkthrough-build-gradient {
  animation: mx-walkthrough-build-media 760ms ease forwards;
}

.mx-walkthrough-project[data-walkthrough-phase="drafts-copy"] .mx-walkthrough-build-gradient {
  animation: mx-walkthrough-build-copy 760ms ease forwards;
}

.mx-walkthrough-project[data-walkthrough-phase="publish"] .mx-walkthrough-build-gradient {
  animation: mx-walkthrough-build-publish 760ms ease forwards;
}

@keyframes mx-walkthrough-type-in {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes mx-walkthrough-row-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mx-walkthrough-scope-draft-out {
  to { opacity: 0; transform: scale(0.92); }
}

@keyframes mx-walkthrough-scope-review-in {
  to { opacity: 1; transform: scale(1); }
}

@keyframes mx-walkthrough-build-drafts {
  0% { opacity: 0; transform: scaleX(0.08); background-position: 0 0; }
  65% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.8; transform: scaleX(1); background-position: 100% 0; }
}

@keyframes mx-walkthrough-build-media {
  0% { opacity: 0; transform: scaleX(0.08); background-position: 0 0; }
  65% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.8; transform: scaleX(1); background-position: 100% 0; }
}

@keyframes mx-walkthrough-build-copy {
  0% { opacity: 0; transform: scaleX(0.08); background-position: 0 0; }
  65% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.8; transform: scaleX(1); background-position: 100% 0; }
}

@keyframes mx-walkthrough-build-publish {
  0% { opacity: 0; transform: scaleX(0.08); background-position: 0 0; }
  65% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.8; transform: scaleX(1); background-position: 100% 0; }
}

.mx-walkthrough-project .mx-ref-deliverables-timeline {
  height: auto;
  overflow: visible;
}

.mx-walkthrough-project .mx-ref-timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.mx-walkthrough-project .mx-ref-review-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
}

.mx-walkthrough-project .mx-ref-review-time {
  display: grid;
}

.mx-walkthrough-project .mx-ref-review-card {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 3rem;
  height: 100%;
}

.mx-walkthrough-project .mx-ref-review-media {
  min-height: 6rem;
}

.mx-walkthrough-project .mx-ref-review-actions {
  align-content: center;
}

.mx-walkthrough-project .mx-ref-review-body {
  padding: 0.65rem;
}

.mx-walkthrough-project .mx-ref-users-modal {
  max-inline-size: none;
}

.mx-walkthrough-project .mx-ref-user-list {
  gap: 0.45rem;
}

.mx-walkthrough-project .mx-ref-user-list article {
  padding: 0.55rem;
}

@container mx-scene (max-aspect-ratio: 3 / 4) {
  .mx-walkthrough-project {
    overflow: hidden;
  }

  .mx-walkthrough-project .mx-ref-workspace-title p {
    display: none;
  }

  .mx-walkthrough-project .mx-ref-tabs > button {
    display: inline-flex;
    min-width: 0;
    padding-inline: 0.45rem;
  }

  .mx-walkthrough-project .mx-ref-project-grid {
    grid-template-columns: 5.25rem minmax(0, 1fr);
  }

  .mx-screencast[data-canvas="mobile"] .mx-walkthrough-project .mx-ref-project-grid,
  .mx-v2-home-screencast .mx-screencast[data-canvas="responsive"] .mx-walkthrough-project .mx-ref-project-grid {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .mx-walkthrough-project .mx-ref-document-nav {
    display: grid;
    align-content: start;
    overflow: hidden;
  }

  .mx-screencast[data-canvas="mobile"] .mx-walkthrough-project .mx-ref-document-nav button,
  .mx-v2-home-screencast .mx-screencast[data-canvas="responsive"] .mx-walkthrough-project .mx-ref-document-nav button {
    justify-content: center;
    gap: 0;
    padding-inline: 0.35rem;
  }

  .mx-screencast[data-canvas="mobile"] .mx-walkthrough-project .mx-walkthrough-document-label,
  .mx-v2-home-screencast .mx-screencast[data-canvas="responsive"] .mx-walkthrough-project .mx-walkthrough-document-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mx-screencast[data-canvas="mobile"] .mx-walkthrough-project :where(.mx-walkthrough-longform, .mx-walkthrough-voice-guidance),
  .mx-v2-home-screencast .mx-screencast[data-canvas="responsive"] .mx-walkthrough-project :where(.mx-walkthrough-longform, .mx-walkthrough-voice-guidance) {
    grid-template-columns: minmax(0, 1fr);
  }

  .mx-walkthrough-project .mx-ref-document-body table {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .mx-walkthrough-project .mx-walkthrough-dense :where(th, td) {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mx-walkthrough-project .mx-walkthrough-action-lens,
  .mx-walkthrough-project [data-ref-tab],
  .mx-walkthrough-project [data-ref-doc],
  .mx-walkthrough-project .mx-walkthrough-reviewer-highlight,
  .mx-walkthrough-project .mx-walkthrough-build-gradient {
    opacity: 1;
    visibility: visible;
  }
}

/* Canonical walkthrough: approved Design-document previews projected as Layer 4. */
.mx-walkthrough-publish-stack {
  --mx-publish-frame-pad: clamp(0.55rem, 1cqi, 0.8rem);
  --mx-publish-foreground-depth: 10;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
}

.mx-walkthrough-publish-stack[data-publish-phase="publish-stack"],
.mx-walkthrough-publish-stack[data-publish-phase="publish-exit"] {
  visibility: visible;
  opacity: 1;
}

.mx-walkthrough-publish-stack .mx-ref-design-doc-modal {
  position: relative;
  width: min(88cqi, 68rem);
  height: min(80cqb, 42rem);
  overflow: visible;
  transform-origin: center;
}

.mx-walkthrough-publish-stack .mx-ref-modal-head {
  display: none;
}

.mx-walkthrough-publish-stack .mx-ref-design-grid {
  position: absolute;
  inset: 1.25rem;
  display: block;
}

.mx-walkthrough-publish-stack .mx-ref-design-code {
  display: none;
}

.mx-walkthrough-publish-stack .mx-ref-design-grid > article:not(.mx-ref-design-code) {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: var(--mx-publish-card-width);
  height: var(--mx-publish-card-height);
  max-height: none;
  margin: auto;
  padding: var(--mx-publish-frame-pad);
  border: 1px solid rgb(255 255 255 / 0.58);
  background: rgb(255 255 255 / 0.3);
  backdrop-filter: blur(18px) saturate(145%);
  opacity: 0;
  z-index: var(--mx-publish-depth);
  transform: translate3d(var(--mx-publish-x), var(--mx-publish-y), 0) scale(var(--mx-publish-scale));
  transform-origin: center;
  box-shadow: 0 1rem 2.5rem rgb(15 23 42 / 0.2);
}

.mx-walkthrough-publish-stack .mx-ref-design-grid > article > .mx-mini-label {
  display: none;
}

.mx-walkthrough-publish-stack .mx-ref-design-grid > article:not(.mx-ref-design-code) > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc((100% - (2 * var(--mx-publish-frame-pad))) / var(--mx-publish-preview-fit));
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%) scale(var(--mx-publish-preview-fit));
  transform-origin: center;
}

.mx-walkthrough-publish-stack .mx-ref-rendered-web {
  --mx-publish-card-width: min(70cqi, 56rem);
  --mx-publish-card-height: min(71cqb, 36rem);
  --mx-publish-preview-fit: 0.5;
  --mx-publish-x: -8cqi;
  --mx-publish-y: -4.5cqb;
  --mx-publish-scale: 0.88;
  --mx-publish-depth: 1;
  --mx-publish-delay: 0ms;
}

.mx-walkthrough-publish-stack .mx-ref-rendered-slide {
  --mx-publish-card-width: min(62cqi, 50rem);
  --mx-publish-card-height: min(64cqb, 32rem);
  --mx-publish-preview-fit: 0.88;
  --mx-publish-x: -4cqi;
  --mx-publish-y: -2.25cqb;
  --mx-publish-scale: 0.91;
  --mx-publish-depth: 2;
  --mx-publish-delay: 1000ms;
}

.mx-walkthrough-publish-stack .mx-ref-rendered-newsletter {
  --mx-publish-card-width: min(28cqi, 22rem);
  --mx-publish-card-height: min(59cqb, 30rem);
  --mx-publish-preview-fit: 0.44;
  --mx-publish-x: 0cqi;
  --mx-publish-y: 0cqb;
  --mx-publish-scale: 0.94;
  --mx-publish-depth: 3;
  --mx-publish-delay: 2000ms;
}

.mx-walkthrough-publish-stack .mx-ref-social-preview.is-video {
  --mx-publish-card-width: min(38cqi, 30rem);
  --mx-publish-card-height: min(62cqb, 31rem);
  --mx-publish-preview-fit: 0.6;
  --mx-publish-x: 4cqi;
  --mx-publish-y: 2.25cqb;
  --mx-publish-scale: 0.97;
  --mx-publish-depth: 4;
  --mx-publish-delay: 3000ms;
}

.mx-walkthrough-publish-stack .mx-ref-social-preview.is-image {
  --mx-publish-card-width: min(38cqi, 30rem);
  --mx-publish-card-height: min(62cqb, 31rem);
  --mx-publish-preview-fit: 0.6;
  --mx-publish-x: 8cqi;
  --mx-publish-y: 4.5cqb;
  --mx-publish-scale: 1;
  --mx-publish-depth: 5;
  --mx-publish-delay: 4000ms;
}

.mx-walkthrough-publish-stack[data-publish-phase="publish-stack"] .mx-ref-design-grid > article:not(.mx-ref-design-code) {
  animation-name: mx-walkthrough-publish-card;
  animation-duration: 1000ms;
  animation-delay: var(--mx-publish-delay);
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.mx-walkthrough-publish-stack[data-publish-phase="publish-exit"] .mx-ref-design-grid > article:not(.mx-ref-design-code) {
  opacity: 1;
}

.mx-walkthrough-publish-stack[data-publish-phase="publish-exit"] .mx-ref-design-doc-modal {
  animation-name: mx-walkthrough-publish-exit;
  animation-duration: 620ms;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.2);
}

@keyframes mx-walkthrough-publish-card {
  0% {
    opacity: 0;
    z-index: var(--mx-publish-foreground-depth);
    transform: translate3d(0, 0, 0) scale(0.96);
  }

  10% {
    opacity: 1;
    z-index: var(--mx-publish-foreground-depth);
    transform: translate3d(0, 0, 0) scale(1);
  }

  99.99% {
    opacity: 1;
    z-index: var(--mx-publish-foreground-depth);
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 1;
    z-index: var(--mx-publish-depth);
    transform: translate3d(var(--mx-publish-x), var(--mx-publish-y), 0) scale(var(--mx-publish-scale));
  }
}

@keyframes mx-walkthrough-publish-exit {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(115cqi);
  }
}

/* The tablet canvas shares the landscape layout but needs its own measured frame heights. */
.mx-screencast[data-canvas="tablet"] .mx-walkthrough-publish-stack .mx-ref-rendered-web {
  --mx-publish-card-height: 60cqb;
}

.mx-screencast[data-canvas="tablet"] .mx-walkthrough-publish-stack .mx-ref-rendered-slide {
  --mx-publish-card-height: 48cqb;
}

.mx-screencast[data-canvas="tablet"] .mx-walkthrough-publish-stack .mx-ref-rendered-newsletter {
  --mx-publish-card-height: 55cqb;
}

.mx-screencast[data-canvas="tablet"] .mx-walkthrough-publish-stack .mx-ref-social-preview.is-video {
  --mx-publish-card-height: 53cqb;
}

.mx-screencast[data-canvas="tablet"] .mx-walkthrough-publish-stack .mx-ref-social-preview.is-image {
  --mx-publish-card-height: 53cqb;
}

@container mx-scene (max-aspect-ratio: 3 / 4) {
  .mx-walkthrough-publish-stack .mx-ref-design-doc-modal {
    width: 92cqi;
    height: 72cqb;
  }

  .mx-walkthrough-publish-stack .mx-ref-rendered-web {
    --mx-publish-card-width: 84cqi;
    --mx-publish-card-height: 42cqb;
    --mx-publish-preview-fit: 0.38;
  }

  .mx-walkthrough-publish-stack .mx-ref-rendered-slide {
    --mx-publish-card-width: 84cqi;
    --mx-publish-card-height: 23cqb;
  }

  .mx-walkthrough-publish-stack .mx-ref-rendered-newsletter {
    --mx-publish-card-width: 62cqi;
    --mx-publish-card-height: 54cqb;
  }

  .mx-walkthrough-publish-stack .mx-ref-social-preview.is-video {
    --mx-publish-card-width: 76cqi;
    --mx-publish-card-height: 43cqb;
  }

  .mx-walkthrough-publish-stack .mx-ref-social-preview.is-image {
    --mx-publish-card-width: 76cqi;
    --mx-publish-card-height: 43cqb;
  }
}

/* Platform hero synthesis motion skin. */
.mx-screencast[data-scenario="platform-hero-synthesis"] {
  --mx-platform-duration: 30s;
  --mx-platform-icon-size: clamp(3.25rem, 4.7cqi, 4.5rem);
  --mx-platform-glass-pad: clamp(0.55rem, 1cqi, 0.8rem);
  --mx-platform-composer-top: 24cqb;
  --mx-platform-composer-width: min(44cqi, 36rem);
  --mx-platform-output-top: 45cqb;
  --mx-platform-output-enter-y: 10cqb;
  --mx-screencast-play-state: paused;
}

.mx-screencast[data-scenario="platform-hero-synthesis"][data-playback-state="playing"] {
  --mx-screencast-play-state: running;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-screencast-layer--1 {
  z-index: var(--mx-layer-composer);
  padding: 0;
  overflow: hidden;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-screencast-layer--3 {
  z-index: var(--mx-layer-preview);
  display: block;
  overflow: hidden;
}

:where(.mx-screencast[data-scenario="platform-hero-synthesis"]) .mx-screencast-layer--2[data-screencast-required="false"] {
  visibility: visible;
  opacity: 1;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-screencast-layer--2::before,
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-screencast-layer--2::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-screencast-layer--2::before {
  inset: 8% 5%;
  background:
    radial-gradient(circle at 50% 31%, rgb(238 181 63 / 0.16), transparent 8%),
    radial-gradient(ellipse at center, transparent 44%, rgb(116 129 151 / 0.1) 44.2%, transparent 44.7%);
  opacity: 0.75;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-screencast-layer--2::after {
  top: calc(var(--mx-platform-composer-top) - 1.25cqb);
  left: 50%;
  inline-size: min(58cqi, 45rem);
  block-size: 28cqb;
  border: 1px dashed rgb(100 116 139 / 0.18);
  border-block-end-color: transparent;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-intake,
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon-stream,
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output-stream {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-composer {
  position: absolute;
  z-index: 2;
  top: var(--mx-platform-composer-top);
  left: 50%;
  box-sizing: border-box;
  width: var(--mx-platform-composer-width);
  min-block-size: 0;
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 0.6rem 0.75rem;
  transform: translateX(-50%);
  animation: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-composer > .mx-ref-context-chip {
  width: fit-content;
  padding: 0.3rem 0.55rem;
  font-size: 0.7rem;
  line-height: 1;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  color: var(--mx-app-foreground);
  font-size: 0.78rem;
  line-height: 1.1;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-working-dot {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background: #eeb53f;
  box-shadow: 0 0 0 0 rgb(238 181 63 / 0.35);
  animation: mx-platform-working-dot 1.4s ease-out infinite;
  animation-play-state: var(--mx-screencast-play-state, running);
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon {
  --mx-platform-lane-offset: calc((var(--mx-platform-icon-index) - ((var(--mx-platform-icon-count) - 1) / 2)) * 0.7cqi);
  --mx-platform-window-start: var(--mx-platform-group-start);
  --mx-platform-window-span: var(--mx-platform-group-span);
  --mx-platform-icon-cadence: clamp(500ms, calc(var(--mx-platform-window-span) / (var(--mx-platform-icon-count) + 3)), 700ms);
  --mx-platform-icon-delay: calc(var(--mx-platform-window-start) + (var(--mx-platform-icon-index) * var(--mx-platform-icon-cadence)));
  position: absolute;
  z-index: 1;
  top: calc(var(--mx-platform-composer-top) - var(--mx-platform-icon-size));
  left: 50%;
  display: block;
  inline-size: var(--mx-platform-icon-size);
  block-size: var(--mx-platform-icon-size);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  opacity: 0;
  transform-origin: 50% 100%;
  animation-duration: var(--mx-platform-duration);
  animation-delay: var(--mx-platform-icon-delay);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: var(--mx-screencast-play-state, running);
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
  filter: drop-shadow(0 0.22rem 0.32rem rgb(15 23 42 / 0.16));
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-seam-icon {
  position: absolute;
  z-index: 1;
  top: calc(var(--mx-platform-composer-top) - var(--mx-platform-icon-size));
  left: 50%;
  display: block;
  inline-size: var(--mx-platform-icon-size);
  block-size: var(--mx-platform-icon-size);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 100%;
  animation: mx-platform-seam-seo var(--mx-platform-duration) linear infinite both;
  animation-play-state: var(--mx-screencast-play-state, running);
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-seam-icon > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
  filter: drop-shadow(0 0.22rem 0.32rem rgb(15 23 42 / 0.16));
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[style*="--mx-platform-route:0"] {
  --mx-platform-start-x: calc(-32cqi + var(--mx-platform-lane-offset));
  --mx-platform-start-y: -4cqb;
  --mx-platform-curve-x: calc(-23cqi + (var(--mx-platform-lane-offset) * 0.45));
  --mx-platform-curve-y: -1cqb;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[style*="--mx-platform-route:1"] {
  --mx-platform-start-x: calc(32cqi + var(--mx-platform-lane-offset));
  --mx-platform-start-y: -2cqb;
  --mx-platform-curve-x: calc(20cqi + (var(--mx-platform-lane-offset) * 0.45));
  --mx-platform-curve-y: -0.5cqb;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[style*="--mx-platform-route:2"] {
  --mx-platform-start-x: calc(-31cqi + var(--mx-platform-lane-offset));
  --mx-platform-start-y: -6cqb;
  --mx-platform-curve-x: calc(-28cqi + (var(--mx-platform-lane-offset) * 0.45));
  --mx-platform-curve-y: -2cqb;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[style*="--mx-platform-route:3"] {
  --mx-platform-start-x: calc(31cqi + var(--mx-platform-lane-offset));
  --mx-platform-start-y: -3cqb;
  --mx-platform-curve-x: calc(27cqi + (var(--mx-platform-lane-offset) * 0.45));
  --mx-platform-curve-y: -1cqb;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="seo"] {
  animation-name: mx-platform-input-seo;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-platform-hero-density-tail] {
  animation-name: mx-platform-input-seo-tail;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="comms"] {
  animation-name: mx-platform-input-comms;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="files"] {
  animation-name: mx-platform-input-files;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="performance"] {
  animation-name: mx-platform-input-performance;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output {
  --mx-platform-exit-x: 58cqi;
  --mx-platform-output-width: 64cqi;
  --mx-platform-output-height: 36cqb;
  --mx-platform-output-fit: 0.62;
  position: absolute;
  z-index: 1;
  top: var(--mx-platform-output-top);
  left: 50%;
  display: grid;
  box-sizing: border-box;
  inline-size: fit-content;
  block-size: fit-content;
  max-inline-size: calc(100cqi - (2 * var(--mx-platform-glass-pad)));
  max-block-size: calc(100cqb - var(--mx-platform-output-top));
  place-items: start;
  padding: var(--mx-platform-glass-pad);
  border: 1px solid rgb(255 255 255 / 0.58);
  border-radius: 0.8rem;
  background: rgb(255 255 255 / 0.3);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: 0 1rem 2.5rem rgb(15 23 42 / 0.2);
  opacity: 0;
  animation-name: mx-platform-output-cycle;
  animation-duration: var(--mx-platform-duration);
  animation-delay: var(--mx-platform-output-start);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: var(--mx-screencast-play-state, running);
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-exit-direction="left"] {
  --mx-platform-exit-x: -58cqi;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-exit-direction="right"] {
  --mx-platform-exit-x: 58cqi;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output > .mx-app-visual-catalog-surface {
  inline-size: var(--mx-platform-output-width);
  block-size: var(--mx-platform-output-height);
  max-block-size: none;
  overflow: visible;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output > .mx-app-visual-catalog-surface > :first-child {
  box-sizing: border-box;
  inline-size: calc(100% / var(--mx-platform-output-fit));
  block-size: calc(100% / var(--mx-platform-output-fit));
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  font-size: 0.875rem;
  transform: scale(var(--mx-platform-output-fit));
  transform-origin: top left;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output :where(
  .mx-ref-workspace,
  .mx-ref-design-doc-modal,
  .mx-ref-media-card,
  .mx-ref-users-modal,
  .mx-ref-calendar-modal,
  .mx-ref-calendar-shell,
  .mx-ref-calendar-board
) {
  overflow: hidden;
  scrollbar-width: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] {
  --mx-platform-output-width: 68cqi;
  --mx-platform-output-height: 34cqb;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] {
  --mx-platform-output-width: 62cqi;
  --mx-platform-output-height: 29cqb;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] {
  --mx-platform-output-width: 68cqi;
  --mx-platform-output-height: 42cqb;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="media-image-gallery-preview"] {
  --mx-platform-output-width: 44cqi;
  --mx-platform-output-height: 36cqb;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] {
  --mx-platform-output-width: 54cqi;
  --mx-platform-output-height: 35cqb;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] {
  --mx-platform-output-width: 68cqi;
  --mx-platform-output-height: 42cqb;
  animation-name: mx-platform-output-final-cycle;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-project-space {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 0.65rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] :where(.mx-ref-workspace-title, .mx-ref-workspace-head) {
  margin-block-end: 0.45rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-workspace-title h3 {
  font-size: 1.15rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-workspace-title p {
  margin-block-start: 0.2rem;
  font-size: 0.7rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-tabs {
  gap: 0.15rem;
  padding: 0.15rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-tabs button {
  min-block-size: 1.5rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.7rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-tab-panel {
  min-block-size: 0;
  margin-block-start: 0.45rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-project-grid {
  block-size: 100%;
  min-block-size: 0;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.45rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] :where(.mx-ref-document-stage, .mx-ref-document-panel) {
  block-size: 100%;
  min-block-size: 0;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-document-nav {
  gap: 0.15rem;
  padding: 0.25rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-document-nav button {
  min-block-size: 1.55rem;
  gap: 0.25rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.65rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-document-panel {
  min-block-size: 0;
  padding: 0.55rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-document-panel .mx-ref-card-head {
  display: block;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-document-panel .mx-ref-card-head :where(p, strong) {
  display: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-document-panel .mx-ref-card-head h3 {
  font-size: 0.8rem;
  line-height: 1;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-document-body,
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-document-panel > h4 {
  display: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0.55rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-workspace-head {
  align-items: flex-start;
  margin-block-end: 0.35rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-workspace-head h3 {
  font-size: 1rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-workspace-head p {
  margin-block-start: 0.15rem;
  font-size: 0.65rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-timeline {
  min-block-size: 0;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-row {
  grid-template-columns: 4rem minmax(0, 1fr);
  block-size: 5.5rem;
  gap: 0.35rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-time {
  font-size: 0.6rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-time strong {
  margin-block-start: 0.3rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-card {
  grid-template-columns: 5rem minmax(0, 1fr) 3rem;
  block-size: 5.5rem;
  min-block-size: 0;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-media {
  min-block-size: 0;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-body {
  min-inline-size: 0;
  padding: 0.4rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-body p,
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-time strong {
  display: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-body .mx-ref-inline {
  gap: 0.2rem;
  overflow: hidden;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-body .mx-ref-pill:first-child {
  display: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-body .mx-ref-pill.is-gold {
  max-inline-size: 100%;
  overflow: hidden;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-body h3 {
  margin-block-start: 0.3rem;
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-actions {
  grid-template-columns: repeat(2, 1fr);
  border-inline-start: 1px solid rgb(var(--mx-line));
  padding: 0.2rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-actions span {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-design-doc-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0.55rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-modal-head {
  margin-block-end: 0.4rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-modal-head h3 {
  font-size: 1.1rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-design-grid {
  block-size: auto;
  min-block-size: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-design-grid > article {
  display: grid;
  min-block-size: 0;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0.35rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-design-grid > article > .mx-mini-label {
  position: static;
  display: block;
  inline-size: auto;
  font-size: 0.75rem;
  line-height: 1;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-design-grid pre,
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-design-grid > article > div {
  block-size: auto;
  min-block-size: 0;
  margin-block-start: 0.25rem;
  overflow: hidden;
  padding: 0.3rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-deck-slide:not(.is-one),
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-deck-dots {
  display: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-preview-browser {
  position: relative;
  display: block;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
  gap: 0;
  padding: 0;
  background: linear-gradient(145deg, #d8eefc, #8fd7e8 52%, #395fbc);
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-preview-browser > * {
  display: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] :where(.mx-ref-rendered-slide h4, .mx-ref-rendered-newsletter h4) {
  font-size: 0.8rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-rendered-slide > div {
  aspect-ratio: auto;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-rendered-newsletter > div {
  inline-size: 100%;
  min-block-size: 0;
  border-width: 0.2rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-rendered-newsletter :where(.mx-ref-newsletter-hero, ul, hr, p:last-of-type),
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-social-card > p,
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-social-card footer {
  display: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-social-card {
  block-size: 100%;
  min-block-size: 0;
  gap: 0.25rem;
  padding: 0.3rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-social-media {
  min-block-size: 0;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="media-image-gallery-preview"] .mx-ref-media-card {
  min-block-size: 0;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.45rem;
  padding: 0.55rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="media-image-gallery-preview"] .mx-ref-media-thumb {
  min-block-size: 0;
  grid-row: 1 / -1;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="media-image-gallery-preview"] .mx-ref-card-head h3 {
  font-size: 1rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="media-image-gallery-preview"] .mx-ref-media-card > p {
  max-block-size: 4.2em;
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.4;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-users-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0.65rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-modal-head {
  margin-block-end: 0.4rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-modal-head .mx-mini-label,
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-user-chip-row,
.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-user-list article small {
  display: none;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-modal-head h3 {
  font-size: 1.15rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-user-list {
  min-inline-size: 0;
  min-block-size: 0;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-user-list article {
  min-inline-size: 0;
  min-block-size: 0;
  gap: 0.4rem;
  padding: 0.2rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-user-list .mx-ref-pill {
  overflow: hidden;
  font-size: 0.65rem;
  text-overflow: ellipsis;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-user-list article > span {
  inline-size: 1.6rem;
  block-size: 1.6rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-user-list article strong {
  font-size: 0.85rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-calendar-shell {
  block-size: 100%;
  grid-template-columns: 8rem minmax(0, 1fr);
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-calendar-board {
  display: grid;
  block-size: 100%;
  min-block-size: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-calendar-shell aside {
  gap: 0.45rem;
  padding: 0.55rem;
  font-size: 0.7rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] :where(.mx-ref-calendar-weekdays, .mx-ref-calendar-grid) {
  min-inline-size: 0;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-calendar-weekdays span {
  padding: 0.3rem;
  font-size: 0.72rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-calendar-grid {
  block-size: auto;
  min-block-size: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-calendar-grid > div {
  min-block-size: 0;
  overflow: hidden;
  padding: 0.25rem;
  font-size: 0.65rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-cal-event {
  left: calc(((var(--mx-cal-col) - 1) * 100%) / 7 + 0.2rem);
  top: calc(((var(--mx-cal-row) - 1) * 25%) + 5%);
  inline-size: calc((var(--mx-cal-span, 1) * 100%) / 7 - 0.4rem);
  block-size: 18%;
  box-sizing: border-box;
  gap: 0.15rem;
  padding: 0.15rem 0.25rem;
  font-size: 0.72rem;
}

.mx-screencast[data-scenario="platform-hero-synthesis"] :where(*, *::before, *::after) {
  animation-play-state: var(--mx-screencast-play-state, running);
}

@keyframes mx-platform-working-dot {
  0% { box-shadow: 0 0 0 0 rgb(238 181 63 / 0.35); }
  70%, 100% { box-shadow: 0 0 0 0.5rem rgb(238 181 63 / 0); }
}

@keyframes mx-platform-input-seo {
  0% { opacity: 0; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  0.667% { opacity: 1; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  8.333% { opacity: 1; transform: translate3d(var(--mx-platform-curve-x), var(--mx-platform-curve-y), 0) scale(1); }
  12.667% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  13.333% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
  13.334%, 100% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
}

@keyframes mx-platform-input-seo-tail {
  0% { opacity: 0; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  0.667% { opacity: 1; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  9% { opacity: 1; transform: translate3d(var(--mx-platform-curve-x), var(--mx-platform-curve-y), 0) scale(1); }
  14.9% { opacity: 1; transform: translate3d(var(--mx-platform-curve-x), var(--mx-platform-curve-y), 0) scale(1); }
  15.5% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
  15.501%, 100% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
}

@keyframes mx-platform-input-comms {
  0% { opacity: 0; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  0.667% { opacity: 1; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  4.667% { opacity: 1; transform: translate3d(var(--mx-platform-curve-x), var(--mx-platform-curve-y), 0) scale(1); }
  7.667% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  8.205% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
  8.206%, 100% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
}

@keyframes mx-platform-input-files {
  0% { opacity: 0; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  0.667% { opacity: 1; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  5% { opacity: 1; transform: translate3d(var(--mx-platform-curve-x), var(--mx-platform-curve-y), 0) scale(1); }
  8.333% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  8.889% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
  8.89%, 100% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
}

@keyframes mx-platform-input-performance {
  0% { opacity: 0; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  0.667% { opacity: 1; transform: translate3d(var(--mx-platform-start-x), var(--mx-platform-start-y), 0) scale(1); }
  8.667% { opacity: 1; transform: translate3d(var(--mx-platform-curve-x), var(--mx-platform-curve-y), 0) scale(1); }
  14.333% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  15% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
  15.001%, 100% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
}

@keyframes mx-platform-seam-seo {
  0% { opacity: 1; transform: translate3d(calc(-50% + var(--mx-platform-seam-x)), var(--mx-platform-seam-y), 0) scale(1); }
  1.333% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.35); }
  1.334%, 96% { opacity: 0; transform: translate3d(calc(-50% + var(--mx-platform-seam-x)), var(--mx-platform-seam-y), 0) scale(1); }
  96.667%, 100% { opacity: 1; transform: translate3d(calc(-50% + var(--mx-platform-seam-x)), var(--mx-platform-seam-y), 0) scale(1); }
}

@keyframes mx-platform-output-cycle {
  0% { opacity: 0; transform: translate3d(-50%, var(--mx-platform-output-enter-y), 0); }
  2.333% { opacity: 1; transform: translate3d(-50%, 0, 0); }
  11.667% { opacity: 1; transform: translate3d(-50%, 0, 0); }
  12.667% { opacity: 1; transform: translate3d(-50%, 0, 0); }
  15.333% { opacity: 0; transform: translate3d(var(--mx-platform-exit-x), 0, 0); }
  15.334%, 100% { opacity: 0; transform: translate3d(var(--mx-platform-exit-x), 0, 0); }
}

@keyframes mx-platform-output-final-cycle {
  0% { opacity: 0; transform: translate3d(-50%, var(--mx-platform-output-enter-y), 0); }
  2.333% { opacity: 1; transform: translate3d(-50%, 0, 0); }
  23% { opacity: 1; transform: translate3d(-50%, 0, 0); }
  23.333% { opacity: 0; transform: translate3d(var(--mx-platform-exit-x), 0, 0); }
  23.334%, 100% { opacity: 0; transform: translate3d(var(--mx-platform-exit-x), 0, 0); }
}

@container mx-scene (max-width: 52.125rem) {
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-screencast-layers {
    --mx-platform-icon-size: clamp(3rem, 6cqi, 4rem);
    --mx-platform-composer-top: 25cqb;
    --mx-platform-composer-width: min(54cqi, 31rem);
    --mx-platform-output-top: 47cqb;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface] {
    --mx-platform-output-fit: 0.52;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"],
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"],
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] {
    --mx-platform-output-width: 72cqi;
    --mx-platform-output-height: 38cqb;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-row,
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-card {
    block-size: 3.7rem;
  }
}

@container mx-scene (max-width: 24.375rem) {
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-screencast-layers {
    --mx-platform-icon-size: clamp(2.5rem, 11cqi, 3rem);
    --mx-platform-glass-pad: clamp(0.42rem, 2.2cqi, 0.6rem);
    --mx-platform-composer-top: 28cqb;
    --mx-platform-composer-width: 86cqi;
    --mx-platform-output-top: 52cqb;
    --mx-platform-output-enter-y: 7cqb;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface] {
    --mx-platform-output-width: 84cqi;
    --mx-platform-output-height: 31cqb;
    --mx-platform-output-fit: 0.4;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"],
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] {
    --mx-platform-output-height: 36cqb;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-row {
    grid-template-columns: 3rem minmax(0, 1fr);
    block-size: 1.8rem;
    gap: 0.25rem;
    overflow: hidden;
    transform: none;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-card {
    grid-template-columns: 4rem minmax(0, 1fr) 2.5rem;
    block-size: 100%;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-workspace {
    padding: 0.3rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-workspace-head {
    margin-block-end: 0.15rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-workspace-head h3 {
    font-size: 0.8rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-workspace-head p {
    display: none;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-timeline {
    grid-template-rows: repeat(3, 1.8rem);
    gap: 0;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-action-row {
    display: none;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-body {
    padding: 0.1rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-body h3 {
    margin-block-start: 0;
    font-size: 0.6rem;
    line-height: 1;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-body .mx-ref-pill.is-gold {
    padding: 0 0.25rem;
    font-size: 0.56rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-media b,
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-actions span:nth-child(n + 3) {
    display: none;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-deliverable-timeline"] .mx-ref-review-actions span {
    inline-size: 0.7rem;
    block-size: 0.7rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-project-space,
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-design-doc-modal,
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-users-modal {
    padding: 0.3rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] :where(.mx-ref-workspace-title, .mx-ref-workspace-head) {
    margin-block-end: 0.15rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-workspace-title h3,
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-modal-head h3,
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-modal-head h3 {
    font-size: 0.8rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-tabs button {
    min-block-size: 1rem;
    padding: 0.1rem 0.35rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-tab-panel {
    margin-block-start: 0.2rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-modal-head {
    margin-block-end: 0.2rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-modal-head {
    margin-block-end: 0.15rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-modal-head button {
    display: none;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-user-list {
    gap: 0.15rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-users"] .mx-ref-user-list article > span {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"] .mx-ref-modal-head :where(.mx-mini-label, .mx-ref-pill) {
    display: none;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-calendar-shell aside {
    grid-template-rows: auto repeat(3, minmax(0, 1fr));
    gap: 0.12rem;
    padding: 0.25rem;
    font-size: 0.56rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-calendar-shell aside > span {
    min-block-size: 0;
    gap: 0.15rem;
    overflow: hidden;
    line-height: 1;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-calendar-shell aside > span .mx-ref-svg {
    flex: 0 0 auto;
    inline-size: 0.55rem;
    block-size: 0.55rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="workspace-project-scope"] .mx-ref-workspace-title p {
    display: none;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="media-image-gallery-preview"] .mx-ref-media-card > p {
    display: -webkit-box;
    max-block-size: 2.3em;
    margin: 0;
    overflow: hidden;
    font-size: 0.56rem;
    line-height: 1.1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-composer {
    padding: 0.3rem 0.45rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-composer > .mx-ref-context-chip {
    padding-block: 0.2rem;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-status {
    margin-top: 0.25rem;
  }
}

@container mx-scene (max-width: 20rem) {
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-screencast-layers {
    --mx-platform-icon-size: clamp(2.5rem, 11cqi, 3rem);
    --mx-platform-glass-pad: 0.4rem;
    --mx-platform-composer-top: 29cqb;
    --mx-platform-composer-width: 90cqi;
    --mx-platform-output-top: 60cqb;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface] {
    --mx-platform-output-width: 88cqi;
    --mx-platform-output-height: 29cqb;
    --mx-platform-output-fit: 0.4;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-design-document"],
  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] {
    --mx-platform-output-height: 32cqb;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output[data-platform-hero-surface="modal-calendar"] .mx-ref-cal-event {
    top: calc(((var(--mx-cal-row) - 1) * 25%) + 4%);
  }
}

.mx-screencast[data-scenario="platform-hero-synthesis"][data-screencast-restarting] :where(*, *::before, *::after) {
  animation: none !important;
}

.mx-screencast[data-reduced-motion="true"][data-scenario="platform-hero-synthesis"] :where(*, *::before, *::after) {
  animation: none !important;
}

.mx-screencast[data-reduced-motion="true"][data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon {
  top: 3cqb;
  opacity: 0;
}

.mx-screencast[data-reduced-motion="true"][data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-platform-hero-static-representative] {
  opacity: 1;
}

.mx-screencast[data-reduced-motion="true"][data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="seo"][data-platform-hero-static-representative] {
  left: 26%;
  transform: translateX(-50%);
}

.mx-screencast[data-reduced-motion="true"][data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="comms"][data-platform-hero-static-representative] {
  left: 42%;
  transform: translateX(-50%);
}

.mx-screencast[data-reduced-motion="true"][data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="files"][data-platform-hero-static-representative] {
  left: 58%;
  transform: translateX(-50%);
}

.mx-screencast[data-reduced-motion="true"][data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="performance"][data-platform-hero-static-representative] {
  left: 74%;
  transform: translateX(-50%);
}

.mx-screencast[data-reduced-motion="true"][data-scenario="platform-hero-synthesis"] .mx-platform-hero-output:not(:first-child) {
  display: none;
}

.mx-screencast[data-reduced-motion="true"][data-scenario="platform-hero-synthesis"] .mx-platform-hero-output:first-child {
  display: grid;
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .mx-screencast[data-scenario="platform-hero-synthesis"] :where(*, *::before, *::after) {
    animation: none !important;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon {
    top: 3cqb;
    opacity: 0;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-platform-hero-static-representative] {
    opacity: 1;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="seo"][data-platform-hero-static-representative] {
    left: 26%;
    transform: translateX(-50%);
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="comms"][data-platform-hero-static-representative] {
    left: 42%;
    transform: translateX(-50%);
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="files"][data-platform-hero-static-representative] {
    left: 58%;
    transform: translateX(-50%);
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-icon[data-input-group="performance"][data-platform-hero-static-representative] {
    left: 74%;
    transform: translateX(-50%);
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output:not(:first-child) {
    display: none;
  }

  .mx-screencast[data-scenario="platform-hero-synthesis"] .mx-platform-hero-output:first-child {
    display: grid;
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}
/* End Platform hero synthesis motion skin. */

.mx-screencast[data-reduced-motion="true"] *,
.mx-screencast[data-reduced-motion="true"] *::before,
.mx-screencast[data-reduced-motion="true"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

.mx-screencast[data-reduced-motion="true"] .mx-walkthrough-publish-stack[data-publish-phase="publish-stack"] .mx-ref-design-grid > article:not(.mx-ref-design-code) {
  animation-delay: 0ms !important;
  opacity: 1;
  transform: translate3d(var(--mx-publish-x), var(--mx-publish-y), 0) scale(var(--mx-publish-scale));
}

.mx-screencast[data-reduced-motion="true"] .mx-walkthrough-publish-stack[data-publish-phase="publish-exit"] .mx-ref-design-doc-modal {
  animation: none !important;
  opacity: 0;
  transform: translateX(115cqi);
}

@media (prefers-reduced-motion: reduce) {
  .mx-screencast *,
  .mx-screencast *::before,
  .mx-screencast *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .mx-walkthrough-publish-stack[data-publish-phase="publish-stack"] .mx-ref-design-grid > article:not(.mx-ref-design-code) {
    animation-delay: 0ms !important;
    opacity: 1;
    transform: translate3d(var(--mx-publish-x), var(--mx-publish-y), 0) scale(var(--mx-publish-scale));
  }

  .mx-walkthrough-publish-stack[data-publish-phase="publish-exit"] .mx-ref-design-doc-modal {
    animation: none !important;
    opacity: 0;
    transform: translateX(115cqi);
  }
}