/* [project]/components/app-shell/ProductPageHeading.module.css [app-client] (css) */
.ProductPageHeading-module__spVIqq__root {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  display: flex;
}

.ProductPageHeading-module__spVIqq__root > div:first-child {
  gap: 5px;
  display: grid;
}

.ProductPageHeading-module__spVIqq__eyebrow {
  color: var(--color-text-subtle);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .64rem;
  font-weight: 800;
}

.ProductPageHeading-module__spVIqq__root h1, .ProductPageHeading-module__spVIqq__root h2, .ProductPageHeading-module__spVIqq__root p {
  margin: 0;
}

.ProductPageHeading-module__spVIqq__root h1, .ProductPageHeading-module__spVIqq__root h2 {
  letter-spacing: -.055em;
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  font-weight: 720;
  line-height: 1.05;
}

.ProductPageHeading-module__spVIqq__root p {
  max-width: 66ch;
  color: var(--color-text-muted);
  font-size: .78rem;
  line-height: 1.55;
}

.ProductPageHeading-module__spVIqq__action {
  flex: none;
  align-items: center;
  display: flex;
}

@media (max-width: 560px) {
  .ProductPageHeading-module__spVIqq__root {
    gap: var(--space-3);
    flex-direction: column;
  }

  .ProductPageHeading-module__spVIqq__root h1, .ProductPageHeading-module__spVIqq__root h2 {
    font-size: 1.8rem;
  }

  .ProductPageHeading-module__spVIqq__action, .ProductPageHeading-module__spVIqq__action > * {
    width: 100%;
  }
}

/* [project]/components/ui/IconButton.module.css [app-client] (css) */
.IconButton-module__qmzD9G__root {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  width: 36px;
  height: 36px;
  color: var(--color-text);
  cursor: pointer;
  place-items: center;
  transition: background .12s, border-color .12s;
  display: inline-grid;
}

.IconButton-module__qmzD9G__root:hover:not(:disabled) {
  background: var(--color-muted-bg);
}

.IconButton-module__qmzD9G__root:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.IconButton-module__qmzD9G__root[aria-pressed="true"] {
  background: var(--color-accent-soft-bg);
  border-color: var(--color-primary);
  color: var(--color-accent-soft-text);
}

/* [project]/components/media/MediaGrid.module.css [app-client] (css) */
.MediaGrid-module__zJ426G__grid {
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  display: grid;
}

.MediaGrid-module__zJ426G__grid[data-layout="picker"] {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.MediaGrid-module__zJ426G__tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  min-width: 0;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--anim-duration-fast) var(--anim-ease), box-shadow var(--anim-duration-fast) var(--anim-ease), transform var(--anim-duration-fast) var(--anim-ease);
  position: relative;
  overflow: hidden;
}

.MediaGrid-module__zJ426G__tile:hover, .MediaGrid-module__zJ426G__tile:focus-within, .MediaGrid-module__zJ426G__tile[data-selected="true"] {
  border-color: var(--color-border-strong);
  box-shadow: 4px 4px 0 var(--color-border);
  transform: translate(-2px, -2px);
}

.MediaGrid-module__zJ426G__tile[data-selected="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent), var(--shadow-sm);
}

.MediaGrid-module__zJ426G__selectionBadge {
  z-index: 4;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  min-width: 29px;
  height: 29px;
  color: var(--color-primary-text);
  border: 2px solid #ffffffe6;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 0 7px;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
  position: absolute;
  top: 9px;
  left: 9px;
  box-shadow: 0 3px 12px #00000047;
}

.MediaGrid-module__zJ426G__previewButton {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: block;
}

.MediaGrid-module__zJ426G__frame {
  aspect-ratio: 4 / 3;
  color: #aaa;
  background: #0a0a0a;
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.MediaGrid-module__zJ426G__frame:after {
  content: "";
  pointer-events: none;
  background: #00000038;
  height: 38%;
  position: absolute;
  inset: auto 0 0;
}

.MediaGrid-module__zJ426G__frame video, .MediaGrid-module__zJ426G__frame img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .4s var(--anim-ease);
}

.MediaGrid-module__zJ426G__tile:hover .MediaGrid-module__zJ426G__frame video, .MediaGrid-module__zJ426G__tile:hover .MediaGrid-module__zJ426G__frame img {
  transform: scale(1.025);
}

.MediaGrid-module__zJ426G__placeholderGlow {
  background: #111;
  position: absolute;
  inset: 0;
}

.MediaGrid-module__zJ426G__placeholderIcon {
  opacity: .82;
  position: relative;
}

.MediaGrid-module__zJ426G__playBadge {
  z-index: 2;
  color: #fff;
  opacity: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  width: 29px;
  height: 29px;
  transition: opacity var(--anim-duration-fast) var(--anim-ease), transform var(--anim-duration-fast) var(--anim-ease);
  background: #0000009e;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  bottom: 9px;
  right: 9px;
  transform: scale(.9);
}

.MediaGrid-module__zJ426G__tile:hover .MediaGrid-module__zJ426G__playBadge, .MediaGrid-module__zJ426G__tile:focus-within .MediaGrid-module__zJ426G__playBadge {
  opacity: 1;
  transform: scale(1);
}

.MediaGrid-module__zJ426G__status {
  z-index: 2;
  border-radius: var(--radius-pill);
  color: #fff;
  text-transform: capitalize;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #0000009e;
  border: 1px solid #ffffff26;
  padding: 3px 7px;
  font-size: .62rem;
  font-weight: 700;
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.MediaGrid-module__zJ426G__status[data-status="ready"] {
  background: color-mix(in srgb, var(--color-success-text) 82%, transparent);
}

.MediaGrid-module__zJ426G__details {
  padding: var(--space-3);
  gap: 3px;
  display: grid;
}

.MediaGrid-module__zJ426G__details strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  overflow: hidden;
}

.MediaGrid-module__zJ426G__details > small {
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .65rem;
  overflow: hidden;
}

.MediaGrid-module__zJ426G__metadata {
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  margin-top: 6px;
  font-size: .65rem;
  display: flex;
}

.MediaGrid-module__zJ426G__metadata > span {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.MediaGrid-module__zJ426G__actions {
  z-index: 3;
  opacity: 0;
  gap: 4px;
  transition: opacity .12s, transform .12s;
  display: flex;
  position: absolute;
  top: 8px;
  right: 8px;
  transform: translateY(-3px);
}

.MediaGrid-module__zJ426G__tile:hover .MediaGrid-module__zJ426G__actions, .MediaGrid-module__zJ426G__tile:focus-within .MediaGrid-module__zJ426G__actions {
  opacity: 1;
  transform: translateY(0);
}

.MediaGrid-module__zJ426G__actions button {
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #141414b8;
}

@media (max-width: 560px) {
  .MediaGrid-module__zJ426G__grid, .MediaGrid-module__zJ426G__grid[data-layout="picker"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .MediaGrid-module__zJ426G__actions {
    opacity: 1;
    transform: none;
  }

  .MediaGrid-module__zJ426G__frame {
    aspect-ratio: 1;
  }

  .MediaGrid-module__zJ426G__details {
    padding: 9px;
  }

  .MediaGrid-module__zJ426G__metadata {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .MediaGrid-module__zJ426G__playBadge {
    display: none;
  }
}

@media (max-width: 380px) {
  .MediaGrid-module__zJ426G__grid, .MediaGrid-module__zJ426G__grid[data-layout="picker"] {
    grid-template-columns: 1fr;
  }

  .MediaGrid-module__zJ426G__frame {
    aspect-ratio: 4 / 3;
  }
}

/* [project]/components/platform/PlatformIcon.module.css [app-client] (css) */
.PlatformIcon-module__PXHUJW__root {
  object-fit: contain;
  flex: none;
  display: block;
}

/* [project]/components/posts/PostPhonePreview.module.css [app-client] (css) */
.PostPhonePreview-module__HQq4ja__phone {
  width: var(--phone-preview-width, var(--phone-width, 323px));
  cursor: default;
  background: #000;
  border-radius: 62px;
  flex-shrink: 0;
  padding: 14px 11px 20px;
  box-shadow: 0 25px 60px #00000073, 0 0 0 1px #1a1a1a, inset 0 1px #ffffff14;
}

.PostPhonePreview-module__HQq4ja__phone[role="button"], .PostPhonePreview-module__HQq4ja__phone[data-picker="true"], .PostPhonePreview-module__HQq4ja__phone[data-picker="true"] .PostPhonePreview-module__HQq4ja__videoContainer {
  cursor: pointer;
}

.PostPhonePreview-module__HQq4ja__phoneBezel {
  background: #0a0a0a;
  border-radius: 52px;
  padding: 10px;
  box-shadow: inset 0 0 0 1px #2a2a2a;
}

.PostPhonePreview-module__HQq4ja__phoneScreen {
  aspect-ratio: 414 / 896;
  background: #000;
  border-radius: 44px;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 80px #000c;
}

.PostPhonePreview-module__HQq4ja__phoneScreenEmpty {
  color: #ccc;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 24px;
  font-size: .85rem;
  display: flex;
}

.PostPhonePreview-module__HQq4ja__videoContainer {
  cursor: pointer;
  background: #000;
  width: 100%;
  height: 100%;
  position: relative;
}

.PostPhonePreview-module__HQq4ja__videoContainer video, .PostPhonePreview-module__HQq4ja__videoContainer > img:not(.PostPhonePreview-module__HQq4ja__platformUiOverlay), .PostPhonePreview-module__HQq4ja__platformUiOverlay {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.PostPhonePreview-module__HQq4ja__videoContainer video, .PostPhonePreview-module__HQq4ja__videoContainer > img:not(.PostPhonePreview-module__HQq4ja__platformUiOverlay) {
  z-index: 1;
  object-fit: cover;
  display: block;
}

.PostPhonePreview-module__HQq4ja__platformUiOverlay {
  z-index: 2;
  object-fit: fill;
  pointer-events: none;
}

@media (max-width: 420px) {
  .PostPhonePreview-module__HQq4ja__phone {
    width: min(var(--phone-preview-width, 323px), calc(100vw - 48px));
  }
}

/* [project]/components/ui/Badge.module.css [app-client] (css) */
.Badge-module__yqYDGW__root {
  border-radius: var(--radius-pill);
  width: fit-content;
  min-height: 22px;
  padding: 0 var(--space-2);
  letter-spacing: 0;
  border: 1px solid #0000;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.Badge-module__yqYDGW__neutral {
  background: var(--color-muted-bg);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.Badge-module__yqYDGW__success {
  background: var(--color-success-bg);
  border-color: color-mix(in srgb, var(--color-success-text) 42%, transparent);
  color: var(--color-success-text);
}

.Badge-module__yqYDGW__warning {
  background: var(--color-warning-bg);
  border-color: color-mix(in srgb, var(--color-warning-text) 42%, transparent);
  color: var(--color-warning-text);
}

.Badge-module__yqYDGW__danger {
  background: var(--color-danger-bg);
  border-color: color-mix(in srgb, var(--color-danger-text) 42%, transparent);
  color: var(--color-danger-text);
}

.Badge-module__yqYDGW__info {
  background: var(--color-info-bg);
  border-color: color-mix(in srgb, var(--color-info-text) 42%, transparent);
  color: var(--color-info-text);
}

/* [project]/components/ui/BlockMark.module.css [app-client] (css) */
.BlockMark-module__uii7XG__root {
  background: url("/logos/selfpost_light_mode.svg") center / contain no-repeat;
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-block;
}

[data-theme="dark"] .BlockMark-module__uii7XG__root {
  background-image: url("/logos/selfpost_dark_mode.svg");
}

/* [project]/components/ui/Button.module.css [app-client] (css) */
.Button-module__VMVMAW__root {
  justify-content: center;
  place-self: start;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  min-height: 40px;
  padding: 0 var(--space-4);
  cursor: pointer;
  transition: background var(--anim-duration-fast) var(--anim-ease),
    border-color var(--anim-duration-fast) var(--anim-ease),
    color var(--anim-duration-fast) var(--anim-ease),
    box-shadow var(--anim-duration-fast) var(--anim-ease),
    transform 80ms var(--anim-ease);
  border: 1px solid #0000;
  font-size: .875rem;
  font-weight: 650;
  text-decoration: none;
  display: inline-flex;
}

.Button-module__VMVMAW__root > span:not(.Button-module__VMVMAW__loader) {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  display: inline-flex;
}

.Button-module__VMVMAW__root svg {
  flex: none;
}

.Button-module__VMVMAW__root:active:not(:disabled) {
  box-shadow: none;
  transform: translate(0);
}

.Button-module__VMVMAW__root:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.Button-module__VMVMAW__primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  box-shadow: var(--shadow-xs);
}

.Button-module__VMVMAW__primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 3px 3px 0 var(--color-border-strong);
  transform: translate(-1px, -1px);
}

.Button-module__VMVMAW__secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.Button-module__VMVMAW__secondary:hover:not(:disabled) {
  background: var(--color-muted-bg);
  box-shadow: 3px 3px 0 var(--color-border-strong);
  transform: translate(-1px, -1px);
}

.Button-module__VMVMAW__danger {
  background: var(--color-danger-text);
  border-color: var(--color-danger-text);
  color: var(--color-surface-raised);
  box-shadow: var(--shadow-xs);
}

.Button-module__VMVMAW__danger:hover:not(:disabled) {
  filter: brightness(.92);
}

.Button-module__VMVMAW__loader {
  margin-left: -2px;
}

.Button-module__VMVMAW__root[aria-busy="true"] > span:last-child > svg, .Button-module__VMVMAW__root[aria-busy="true"] > span:last-child > [aria-hidden="true"] {
  display: none;
}

/* [project]/components/ui/FileDropzone.module.css [app-client] (css) */
.FileDropzone-module__p6aOKW__root {
  justify-items: center;
  gap: var(--space-2);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  color: var(--color-text);
  cursor: pointer;
  text-align: center;
  transition: border-color .14s, background .14s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.FileDropzone-module__p6aOKW__root:after {
  background: var(--page-accent, var(--color-text));
  width: 5px;
  height: 5px;
  box-shadow: 7px 0 0 var(--color-border-strong), 7px -7px 0 var(--color-border);
  content: "";
  position: absolute;
  bottom: 14px;
  right: 14px;
}

.FileDropzone-module__p6aOKW__root:hover {
  border-color: var(--color-primary);
  background: var(--color-accent-soft-bg);
}

.FileDropzone-module__p6aOKW__label {
  font-weight: 600;
}

.FileDropzone-module__p6aOKW__description {
  color: var(--color-text-muted);
  font-size: .8125rem;
}

.FileDropzone-module__p6aOKW__input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

/* [project]/components/ui/Input.module.css [app-client] (css) */
.Input-module__rdnxQa__root {
  gap: var(--space-2);
  display: grid;
}

.Input-module__rdnxQa__label {
  color: var(--color-text);
  font-size: .875rem;
  font-weight: 600;
}

.Input-module__rdnxQa__input {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--anim-duration-fast) var(--anim-ease), box-shadow var(--anim-duration-fast) var(--anim-ease);
}

.Input-module__rdnxQa__input:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-text-muted) 72%, transparent);
}

.Input-module__rdnxQa__input:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 14%, transparent);
  outline: none;
}

.Input-module__rdnxQa__input:disabled {
  background: var(--color-muted-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.Input-module__rdnxQa__input[aria-invalid="true"] {
  border-color: var(--color-danger-text);
}

.Input-module__rdnxQa__description {
  color: var(--color-text-muted);
  font-size: .8125rem;
}

.Input-module__rdnxQa__error {
  color: var(--color-danger-text);
  font-size: .8125rem;
}

/* [project]/components/ui/Progress.module.css [app-client] (css) */
.Progress-module__ahfteW__root {
  gap: var(--space-2);
  display: grid;
}

.Progress-module__ahfteW__header {
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: .8125rem;
  font-weight: 600;
  display: flex;
}

.Progress-module__ahfteW__track {
  border-radius: var(--radius-pill);
  background: var(--color-muted-bg);
  height: 8px;
  overflow: hidden;
}

.Progress-module__ahfteW__bar {
  border-radius: inherit;
  background: var(--color-primary);
  height: 100%;
  transition: width .2s;
  display: block;
}

/* [project]/components/ui/Switch.module.css [app-client] (css) */
.Switch-module__LmCZTG__root {
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  display: inline-flex;
  position: relative;
}

.Switch-module__LmCZTG__input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.Switch-module__LmCZTG__track {
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  width: 42px;
  height: 24px;
  transition: background var(--anim-duration-fast) var(--anim-ease);
  flex-shrink: 0;
}

.Switch-module__LmCZTG__track:after {
  background: var(--color-surface-raised);
  width: 18px;
  height: 18px;
  box-shadow: var(--shadow-xs);
  content: "";
  transition: transform var(--anim-duration-fast) var(--anim-ease);
  border-radius: 50%;
  margin: 3px;
  display: block;
}

.Switch-module__LmCZTG__input:checked + .Switch-module__LmCZTG__track {
  background: var(--color-primary);
}

.Switch-module__LmCZTG__input:checked + .Switch-module__LmCZTG__track:after {
  transform: translateX(18px);
}

.Switch-module__LmCZTG__input:focus-visible + .Switch-module__LmCZTG__track {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.Switch-module__LmCZTG__input:disabled + .Switch-module__LmCZTG__track {
  opacity: .5;
}

/* [project]/components/ui/Textarea.module.css [app-client] (css) */
.Textarea-module__OSRF5G__root {
  gap: var(--space-2);
  display: grid;
}

.Textarea-module__OSRF5G__label {
  color: var(--color-text);
  font-size: .875rem;
  font-weight: 600;
}

.Textarea-module__OSRF5G__textarea {
  resize: vertical;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  width: 100%;
  min-height: 112px;
  padding: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--anim-duration-fast) var(--anim-ease), box-shadow var(--anim-duration-fast) var(--anim-ease);
}

.Textarea-module__OSRF5G__textarea:hover:not(:disabled) {
  border-color: var(--color-text-muted);
}

.Textarea-module__OSRF5G__textarea:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 14%, transparent);
  outline: none;
}

.Textarea-module__OSRF5G__textarea:disabled {
  background: var(--color-muted-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.Textarea-module__OSRF5G__textarea[aria-invalid="true"] {
  border-color: var(--color-danger-text);
}

.Textarea-module__OSRF5G__description, .Textarea-module__OSRF5G__error {
  font-size: .8125rem;
}

.Textarea-module__OSRF5G__description {
  color: var(--color-text-muted);
}

.Textarea-module__OSRF5G__error {
  color: var(--color-danger-text);
}

/* [project]/components/demo/DemoExperience.module.css [app-client] (css) */
.DemoExperience-module__OsFraW__root {
  background: var(--color-bg);
  min-height: 100dvh;
  color: var(--color-text);
  grid-template-columns: 236px minmax(0, 1fr);
  display: grid;
}

.DemoExperience-module__OsFraW__sidebar {
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  flex-direction: column;
  gap: 20px;
  height: 100dvh;
  padding: 18px 13px;
  display: flex;
  position: sticky;
  top: 0;
}

.DemoExperience-module__OsFraW__brand {
  color: var(--color-text);
  font-family: var(--font-display);
  letter-spacing: -.055em;
  align-items: center;
  gap: 11px;
  padding: 0 8px;
  font-size: 1.5rem;
  font-weight: 780;
  text-decoration: none;
  display: flex;
}

.DemoExperience-module__OsFraW__brandMark {
  width: 30px;
  height: 30px;
}

.DemoExperience-module__OsFraW__workspace, .DemoExperience-module__OsFraW__demoUser {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  align-items: center;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.DemoExperience-module__OsFraW__workspace > span, .DemoExperience-module__OsFraW__demoUser > span {
  border-radius: var(--radius-sm);
  background: var(--color-text);
  width: 32px;
  height: 32px;
  color: var(--color-bg);
  flex: none;
  place-items: center;
  font-size: .64rem;
  font-weight: 800;
  display: grid;
}

.DemoExperience-module__OsFraW__workspace div, .DemoExperience-module__OsFraW__demoUser div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.DemoExperience-module__OsFraW__workspace strong, .DemoExperience-module__OsFraW__demoUser strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .74rem;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__workspace small, .DemoExperience-module__OsFraW__demoUser small {
  color: var(--color-text-subtle);
  font-size: .59rem;
}

.DemoExperience-module__OsFraW__blockRail {
  opacity: .9;
  grid-template: repeat(3, 1fr) / repeat(8, 1fr);
  gap: 4px;
  height: 46px;
  padding: 0 8px;
  display: grid;
}

.DemoExperience-module__OsFraW__blockRail i {
  background: var(--color-text);
  border-radius: 2px;
}

.DemoExperience-module__OsFraW__blockRail i:first-child {
  grid-area: 1 / 1 / 4 / 3;
}

.DemoExperience-module__OsFraW__blockRail i:nth-child(2) {
  background: #7c3aed;
  grid-area: 1 / 3 / 2 / 6;
}

.DemoExperience-module__OsFraW__blockRail i:nth-child(3) {
  background: #2563eb;
  grid-area: 2 / 3 / 4 / 4;
}

.DemoExperience-module__OsFraW__blockRail i:nth-child(4) {
  background: #16a34a;
  grid-area: 2 / 4 / 4 / 7;
}

.DemoExperience-module__OsFraW__blockRail i:nth-child(5) {
  background: var(--color-border-strong);
  grid-area: 1 / 6 / 2 / 9;
}

.DemoExperience-module__OsFraW__navigation {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  display: flex;
}

.DemoExperience-module__OsFraW__navigation button {
  border-radius: var(--radius-md);
  min-height: 40px;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  font-size: .83rem;
  display: flex;
  position: relative;
}

.DemoExperience-module__OsFraW__navigation button:not(:disabled):hover {
  background: var(--color-muted-bg);
  color: var(--color-text);
}

.DemoExperience-module__OsFraW__navigation button:disabled {
  cursor: default;
  opacity: .48;
}

.DemoExperience-module__OsFraW__navigation button[data-active] {
  background: var(--color-primary);
  color: var(--color-primary-text);
  opacity: 1;
  font-weight: 680;
}

.DemoExperience-module__OsFraW__navigation button[data-active]:after {
  width: 5px;
  height: 5px;
  box-shadow: 0 7px currentColor,
    -7px 7px color-mix(in srgb, currentColor 58%, transparent);
  content: "";
  background: currentColor;
  position: absolute;
  right: 11px;
}

.DemoExperience-module__OsFraW__demoUser {
  margin-top: auto;
}

.DemoExperience-module__OsFraW__demoUser > span {
  color: #fff;
  background: #7c3aed;
  border-radius: 50%;
}

.DemoExperience-module__OsFraW__app {
  min-width: 0;
}

.DemoExperience-module__OsFraW__topbar {
  z-index: 10;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  position: sticky;
  top: 0;
}

.DemoExperience-module__OsFraW__topbar > :first-child {
  margin-left: auto;
}

.DemoExperience-module__OsFraW__localNotice {
  color: var(--color-text-subtle);
  align-items: center;
  gap: 6px;
  font-size: .67rem;
  display: flex;
}

.DemoExperience-module__OsFraW__exit {
  border-left: 1px solid var(--color-border);
  min-height: 32px;
  color: var(--color-text-muted);
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  font-size: .7rem;
  font-weight: 650;
  text-decoration: none;
  display: inline-flex;
}

.DemoExperience-module__OsFraW__exit:hover {
  color: var(--color-text);
}

.DemoExperience-module__OsFraW__mobileBrand {
  align-items: center;
  gap: 8px;
  display: none;
}

.DemoExperience-module__OsFraW__mobileBrand > span {
  width: 25px;
  height: 25px;
}

.DemoExperience-module__OsFraW__mobileBrand strong {
  font-family: var(--font-display);
  letter-spacing: -.045em;
  font-size: 1.2rem;
}

.DemoExperience-module__OsFraW__main {
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.DemoExperience-module__OsFraW__guide {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
  grid-template-columns: auto minmax(220px, 1fr) minmax(360px, .9fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 16px 18px;
  display: grid;
}

.DemoExperience-module__OsFraW__guideNumber {
  border-radius: var(--radius-md);
  background: var(--color-primary);
  width: 46px;
  height: 46px;
  color: var(--color-primary-text);
  font-family: var(--font-mono);
  place-items: center;
  font-size: .82rem;
  font-weight: 750;
  display: grid;
}

.DemoExperience-module__OsFraW__guideCopy {
  gap: 2px;
  display: grid;
}

.DemoExperience-module__OsFraW__guideCopy > span {
  color: var(--color-text-subtle);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .58rem;
  font-weight: 800;
}

.DemoExperience-module__OsFraW__guideCopy h1 {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 1rem;
}

.DemoExperience-module__OsFraW__guideCopy p {
  max-width: 52ch;
  color: var(--color-text-muted);
  margin: 0;
  font-size: .7rem;
  line-height: 1.45;
}

.DemoExperience-module__OsFraW__guide ol {
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.DemoExperience-module__OsFraW__guide li {
  color: var(--color-text-subtle);
  text-align: center;
  justify-items: center;
  gap: 5px;
  font-size: .56rem;
  display: grid;
  position: relative;
}

.DemoExperience-module__OsFraW__guide li:before {
  z-index: 0;
  background: var(--color-border);
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  top: 12px;
  left: -50%;
}

.DemoExperience-module__OsFraW__guide li:first-child:before {
  display: none;
}

.DemoExperience-module__OsFraW__guide li > span {
  z-index: 1;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  border-radius: 50%;
  place-items: center;
  width: 25px;
  height: 25px;
  font-size: .6rem;
  display: grid;
}

.DemoExperience-module__OsFraW__guide li[aria-current="step"] {
  color: var(--color-text);
}

.DemoExperience-module__OsFraW__guide li[aria-current="step"] > span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.DemoExperience-module__OsFraW__guide li[data-complete] > span {
  border-color: var(--color-success-text);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.DemoExperience-module__OsFraW__guideActions {
  gap: 8px;
  display: flex;
}

.DemoExperience-module__OsFraW__guideActions button {
  white-space: nowrap;
}

.DemoExperience-module__OsFraW__product {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  min-height: 680px;
  position: relative;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__product:before {
  background: linear-gradient(var(--color-text), var(--color-text)) 0 0/38% 50% no-repeat,
    linear-gradient(#7c3aed, #7c3aed) 40% 0/20% 24% no-repeat,
    linear-gradient(#2563eb, #2563eb) 62% 0/38% 68% no-repeat,
    linear-gradient(#16a34a, #16a34a) 15% 54%/24% 46% no-repeat;
  content: "";
  opacity: .045;
  width: 260px;
  height: 130px;
  position: absolute;
  top: -45px;
  right: -35px;
}

.DemoExperience-module__OsFraW__stepPage {
  z-index: 1;
  padding: 28px;
  animation: .28s both DemoExperience-module__OsFraW__enter;
  position: relative;
}

@keyframes DemoExperience-module__OsFraW__enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.DemoExperience-module__OsFraW__productHeading {
  margin-bottom: 24px;
}

.DemoExperience-module__OsFraW__mediaLayout, .DemoExperience-module__OsFraW__editorLayout, .DemoExperience-module__OsFraW__publishLayout {
  grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr);
  gap: 18px;
  display: grid;
}

.DemoExperience-module__OsFraW__uploadCard, .DemoExperience-module__OsFraW__libraryCard, .DemoExperience-module__OsFraW__formCard, .DemoExperience-module__OsFraW__previewCard, .DemoExperience-module__OsFraW__reviewCard, .DemoExperience-module__OsFraW__scheduleCard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

.DemoExperience-module__OsFraW__cardHeading {
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  display: flex;
}

.DemoExperience-module__OsFraW__cardHeading > span {
  border-radius: var(--radius-md);
  background: var(--color-primary);
  width: 38px;
  height: 38px;
  color: var(--color-primary-text);
  flex: none;
  place-items: center;
  display: grid;
}

.DemoExperience-module__OsFraW__cardHeading div {
  gap: 4px;
  display: grid;
}

.DemoExperience-module__OsFraW__cardHeading h3 {
  margin: 0;
  font-size: .9rem;
}

.DemoExperience-module__OsFraW__cardHeading p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: .68rem;
  line-height: 1.4;
}

.DemoExperience-module__OsFraW__uploadCard {
  align-self: start;
}

.DemoExperience-module__OsFraW__uploadCard > button {
  width: 100%;
}

.DemoExperience-module__OsFraW__or {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font-size: .61rem;
  display: flex;
}

.DemoExperience-module__OsFraW__or span {
  background: var(--color-border);
  flex: 1;
  height: 1px;
}

.DemoExperience-module__OsFraW__privacy {
  color: var(--color-text-subtle);
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 13px;
  font-size: .61rem;
  display: flex;
}

.DemoExperience-module__OsFraW__error {
  color: var(--color-danger-text);
  margin: 10px 0 0;
  font-size: .7rem;
}

.DemoExperience-module__OsFraW__libraryCard {
  min-height: 430px;
}

.DemoExperience-module__OsFraW__libraryToolbar {
  border-bottom: 1px solid var(--color-border);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 15px;
  display: flex;
}

.DemoExperience-module__OsFraW__libraryToolbar > div {
  gap: 3px;
  display: grid;
}

.DemoExperience-module__OsFraW__libraryToolbar span {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  font-size: .58rem;
  font-weight: 800;
}

.DemoExperience-module__OsFraW__libraryToolbar h3 {
  margin: 0;
  font-size: 1rem;
}

.DemoExperience-module__OsFraW__libraryToolbar p {
  max-width: 48ch;
  color: var(--color-text-muted);
  margin: 2px 0 0;
  font-size: .65rem;
  line-height: 1.4;
}

.DemoExperience-module__OsFraW__preparedGrid {
  margin-top: 18px;
}

.DemoExperience-module__OsFraW__preparedGrid > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.DemoExperience-module__OsFraW__emptyLibrary {
  min-height: 310px;
  color: var(--color-text-subtle);
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 7px;
  display: grid;
}

.DemoExperience-module__OsFraW__emptyLibrary strong {
  color: var(--color-text);
  font-size: .8rem;
}

.DemoExperience-module__OsFraW__emptyLibrary p {
  max-width: 34ch;
  margin: 0;
  font-size: .68rem;
  line-height: 1.45;
}

.DemoExperience-module__OsFraW__assetCard {
  gap: 7px;
  margin-top: 18px;
  display: grid;
}

.DemoExperience-module__OsFraW__assetVisual {
  border-radius: var(--radius-md);
  background: #162a24;
  height: 285px;
  position: relative;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__assetVisual img, .DemoExperience-module__OsFraW__assetVisual video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.DemoExperience-module__OsFraW__assetVisual > span {
  border-radius: var(--radius-pill);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  font-size: .59rem;
  font-weight: 800;
  display: flex;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.DemoExperience-module__OsFraW__assetCard > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .76rem;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__assetCard > small {
  color: var(--color-text-subtle);
  font-size: .62rem;
}

.DemoExperience-module__OsFraW__formCard {
  align-content: start;
  gap: 17px;
  display: grid;
}

.DemoExperience-module__OsFraW__platformPicker {
  border: 0;
  gap: 7px;
  margin: 0;
  padding: 0;
  display: grid;
}

.DemoExperience-module__OsFraW__platformPicker legend {
  margin-bottom: 8px;
  font-size: .75rem;
  font-weight: 700;
}

.DemoExperience-module__OsFraW__platformPicker button {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  display: grid;
}

.DemoExperience-module__OsFraW__platformPicker button[data-selected] {
  border-color: color-mix(in srgb,
    var(--color-primary) 45%,
    var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
}

.DemoExperience-module__OsFraW__platformPicker button > span {
  gap: 2px;
  display: grid;
}

.DemoExperience-module__OsFraW__platformPicker strong {
  font-size: .72rem;
}

.DemoExperience-module__OsFraW__platformPicker small {
  color: var(--color-text-subtle);
  font-size: .59rem;
}

.DemoExperience-module__OsFraW__platformPicker i {
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  place-items: center;
  width: 21px;
  height: 21px;
  display: grid;
}

.DemoExperience-module__OsFraW__platformPicker button[data-selected] i {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.DemoExperience-module__OsFraW__selectedMedia {
  border-top: 1px solid var(--color-border);
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 10px;
  padding-top: 15px;
  display: grid;
}

.DemoExperience-module__OsFraW__selectedMedia > div {
  border-radius: var(--radius-sm);
  background: var(--color-muted-bg);
  width: 52px;
  height: 52px;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__selectedMedia img, .DemoExperience-module__OsFraW__selectedMedia video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.DemoExperience-module__OsFraW__selectedMedia > span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.DemoExperience-module__OsFraW__selectedMedia small {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  font-size: .57rem;
}

.DemoExperience-module__OsFraW__selectedMedia strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__selectedMedia > svg {
  color: var(--color-success-text);
}

.DemoExperience-module__OsFraW__previewCard {
  background: color-mix(in srgb, var(--color-surface-raised) 94%, #7c3aed);
  grid-template-rows: auto 1fr;
  min-width: 0;
  display: grid;
}

.DemoExperience-module__OsFraW__previewCard > div:first-child {
  gap: 4px;
  display: grid;
}

.DemoExperience-module__OsFraW__previewCard span {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  font-size: .58rem;
  font-weight: 800;
}

.DemoExperience-module__OsFraW__previewCard strong {
  font-size: .88rem;
}

.DemoExperience-module__OsFraW__previewCard p {
  min-height: 31px;
  color: var(--color-text-muted);
  margin: 0;
  font-size: .65rem;
  line-height: 1.4;
}

.DemoExperience-module__OsFraW__phoneStage {
  --phone-preview-width: 214px;
  place-items: center;
  min-height: 480px;
  padding: 18px 0 0;
  display: grid;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__phoneStage > div {
  border-radius: 42px;
  padding: 9px 7px 13px;
}

.DemoExperience-module__OsFraW__phoneStage > div > div {
  border-radius: 35px;
  padding: 7px;
}

.DemoExperience-module__OsFraW__phoneStage > div > div > div {
  border-radius: 30px;
}

.DemoExperience-module__OsFraW__platformTabs {
  border-bottom: 1px solid var(--color-border);
  gap: 5px;
  padding-bottom: 12px;
  display: flex;
  overflow-x: auto;
}

.DemoExperience-module__OsFraW__platformTabs button {
  border-radius: var(--radius-md);
  min-height: 38px;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  font-size: .68rem;
  font-weight: 650;
  display: flex;
}

.DemoExperience-module__OsFraW__platformTabs button[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.DemoExperience-module__OsFraW__accountBar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
  display: grid;
}

.DemoExperience-module__OsFraW__accountBar > span {
  gap: 2px;
  display: grid;
}

.DemoExperience-module__OsFraW__accountBar small {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  font-size: .55rem;
}

.DemoExperience-module__OsFraW__accountBar strong {
  font-size: .68rem;
}

.DemoExperience-module__OsFraW__readiness {
  border: 1px solid
    color-mix(in srgb, var(--color-success-text) 28%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  display: grid;
}

.DemoExperience-module__OsFraW__readiness div {
  gap: 3px;
  display: grid;
}

.DemoExperience-module__OsFraW__readiness strong {
  font-size: .72rem;
}

.DemoExperience-module__OsFraW__readiness p {
  margin: 0;
  font-size: .61rem;
  line-height: 1.35;
}

.DemoExperience-module__OsFraW__publishLayout {
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
}

.DemoExperience-module__OsFraW__reviewCard {
  grid-template-columns: 220px 1fr;
  gap: 21px;
  display: grid;
}

.DemoExperience-module__OsFraW__reviewMedia {
  border-radius: var(--radius-md);
  background: var(--color-muted-bg);
  min-height: 400px;
  position: relative;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__reviewMedia img, .DemoExperience-module__OsFraW__reviewMedia video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.DemoExperience-module__OsFraW__reviewMedia > span {
  border-radius: var(--radius-pill);
  color: #fff;
  background: #000000a6;
  padding: 5px 8px;
  font-size: .6rem;
  font-weight: 800;
  position: absolute;
  top: 10px;
  right: 10px;
}

.DemoExperience-module__OsFraW__reviewCopy {
  align-self: center;
}

.DemoExperience-module__OsFraW__reviewCopy > span {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  font-size: .59rem;
  font-weight: 800;
}

.DemoExperience-module__OsFraW__reviewCopy h3 {
  letter-spacing: -.035em;
  margin: 7px 0 0;
  font-size: 1.35rem;
}

.DemoExperience-module__OsFraW__reviewCopy > p {
  color: var(--color-text-muted);
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  margin: 11px 0 21px;
  font-size: .72rem;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__reviewCopy > div {
  gap: 7px;
  display: grid;
}

.DemoExperience-module__OsFraW__reviewCopy > div > span {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  font-size: .67rem;
  font-weight: 650;
  display: grid;
}

.DemoExperience-module__OsFraW__reviewCopy > div svg:last-child {
  color: var(--color-success-text);
}

.DemoExperience-module__OsFraW__scheduleCard {
  align-content: start;
  gap: 17px;
  display: grid;
}

.DemoExperience-module__OsFraW__scheduleCard .DemoExperience-module__OsFraW__cardHeading {
  margin: 0;
}

.DemoExperience-module__OsFraW__preflight {
  border-top: 1px solid var(--color-border);
  gap: 8px;
  padding-top: 16px;
  display: grid;
}

.DemoExperience-module__OsFraW__preflight strong {
  margin-bottom: 2px;
  font-size: .72rem;
}

.DemoExperience-module__OsFraW__preflight span {
  color: var(--color-text-muted);
  align-items: center;
  gap: 7px;
  font-size: .65rem;
  display: flex;
}

.DemoExperience-module__OsFraW__preflight svg {
  color: var(--color-success-text);
}

.DemoExperience-module__OsFraW__simulationNote {
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--color-info-text);
  gap: 7px;
  margin: 0;
  padding: 11px;
  font-size: .62rem;
  line-height: 1.4;
  display: flex;
}

.DemoExperience-module__OsFraW__simulationNote svg {
  flex: none;
}

.DemoExperience-module__OsFraW__welcomeBackdrop {
  z-index: 50;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #030508a8;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.DemoExperience-module__OsFraW__welcome {
  background: var(--color-surface-raised);
  text-align: center;
  border: 1px solid #ffffff29;
  border-radius: 24px;
  justify-items: center;
  width: min(560px, 100%);
  padding: 42px;
  animation: .36s both DemoExperience-module__OsFraW__welcome;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 34px 100px #0000005c;
}

.DemoExperience-module__OsFraW__welcome:before {
  content: "";
  background: linear-gradient(90deg, #7c3aed 0 34%, #2563eb 34% 67%, #16a34a 67%);
  width: 100%;
  height: 6px;
  position: absolute;
  top: 0;
}

.DemoExperience-module__OsFraW__welcomeMark {
  background: var(--color-primary);
  width: 62px;
  height: 62px;
  color: var(--color-primary-text);
  box-shadow: 7px 7px 0
    color-mix(in srgb, var(--color-primary) 16%, transparent);
  border-radius: 20px;
  place-items: center;
  margin-bottom: 15px;
  display: grid;
}

.DemoExperience-module__OsFraW__welcome h1 {
  letter-spacing: -.065em;
  max-width: 12ch;
  margin: 14px 0 0;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: .95;
}

.DemoExperience-module__OsFraW__welcome > p {
  max-width: 48ch;
  color: var(--color-text-muted);
  margin: 17px 0 22px;
  font-size: .8rem;
  line-height: 1.6;
}

.DemoExperience-module__OsFraW__welcomeFacts {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-bottom: 22px;
  display: grid;
}

.DemoExperience-module__OsFraW__welcomeFacts span {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  justify-items: center;
  gap: 7px;
  padding: 12px 7px;
  display: grid;
}

.DemoExperience-module__OsFraW__welcomeFacts strong {
  font-size: .62rem;
}

.DemoExperience-module__OsFraW__welcome > button {
  width: min(280px, 100%);
}

.DemoExperience-module__OsFraW__welcome > a {
  color: var(--color-text-muted);
  margin-top: 13px;
  font-size: .67rem;
}

.DemoExperience-module__OsFraW__welcome > a:hover {
  color: var(--color-text);
}

@keyframes DemoExperience-module__OsFraW__welcome {
  from {
    opacity: 0;
    transform: translateY(12px)scale(.98);
  }
}

.DemoExperience-module__OsFraW__completion {
  text-align: center;
  align-content: center;
  place-items: center;
  min-height: calc(100dvh - 108px);
  padding: 40px 20px;
  animation: .35s both DemoExperience-module__OsFraW__enter;
  display: grid;
}

.DemoExperience-module__OsFraW__successMark {
  background: var(--color-success-text);
  width: 68px;
  height: 68px;
  color: var(--color-success-bg);
  box-shadow: 8px 8px 0
    color-mix(in srgb, var(--color-success-text) 14%, transparent);
  border-radius: 22px;
  place-items: center;
  margin-bottom: 16px;
  display: grid;
}

.DemoExperience-module__OsFraW__completion h1 {
  letter-spacing: -.07em;
  max-width: 12ch;
  margin: 15px 0 0;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: .9;
}

.DemoExperience-module__OsFraW__completion > p {
  max-width: 50ch;
  color: var(--color-text-muted);
  margin: 20px 0 25px;
  line-height: 1.55;
}

.DemoExperience-module__OsFraW__completion article {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  width: min(680px, 100%);
  box-shadow: var(--shadow-md);
  text-align: left;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 20px;
  display: grid;
}

.DemoExperience-module__OsFraW__completion article > div:first-child {
  min-width: 0;
}

.DemoExperience-module__OsFraW__completion article > div:first-child span {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  font-size: .58rem;
  font-weight: 800;
}

.DemoExperience-module__OsFraW__completion article h2 {
  margin: 5px 0 0;
  font-size: 1.05rem;
}

.DemoExperience-module__OsFraW__completion article p {
  max-width: 47ch;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 7px 0 0;
  font-size: .66rem;
  overflow: hidden;
}

.DemoExperience-module__OsFraW__completion article > div:nth-child(2) {
  align-items: center;
  gap: 6px;
  display: flex;
}

.DemoExperience-module__OsFraW__completion article > div:nth-child(2) span {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  font-size: .59rem;
  display: flex;
}

.DemoExperience-module__OsFraW__completion article > div:nth-child(2) svg:last-child {
  color: var(--color-success-text);
}

.DemoExperience-module__OsFraW__completion article footer {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  grid-column: 1 / -1;
  align-items: center;
  gap: 6px;
  padding-top: 13px;
  font-size: .64rem;
  display: flex;
}

.DemoExperience-module__OsFraW__completionActions {
  gap: 9px;
  margin-top: 22px;
  display: flex;
}

.DemoExperience-module__OsFraW__primaryLink {
  border-radius: var(--radius-md);
  background: var(--color-primary);
  min-height: 40px;
  color: var(--color-primary-text);
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.DemoExperience-module__OsFraW__homeLink {
  color: var(--color-text-muted);
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: .68rem;
  display: flex;
}

@media (max-width: 1180px) {
  .DemoExperience-module__OsFraW__guide {
    grid-template-columns: auto 1fr auto;
  }

  .DemoExperience-module__OsFraW__guide ol {
    grid-area: 2 / 1 / auto / -1;
  }

  .DemoExperience-module__OsFraW__mediaLayout, .DemoExperience-module__OsFraW__editorLayout {
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .DemoExperience-module__OsFraW__preparedGrid > div, .DemoExperience-module__OsFraW__publishLayout {
    grid-template-columns: 1fr;
  }

  .DemoExperience-module__OsFraW__reviewMedia {
    min-height: 330px;
  }

  .DemoExperience-module__OsFraW__scheduleCard {
    grid-template-columns: 1fr 1fr;
  }

  .DemoExperience-module__OsFraW__scheduleCard .DemoExperience-module__OsFraW__cardHeading, .DemoExperience-module__OsFraW__scheduleCard .DemoExperience-module__OsFraW__preflight, .DemoExperience-module__OsFraW__scheduleCard .DemoExperience-module__OsFraW__simulationNote {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .DemoExperience-module__OsFraW__root {
    grid-template-columns: 1fr;
  }

  .DemoExperience-module__OsFraW__sidebar {
    display: none;
  }

  .DemoExperience-module__OsFraW__topbar {
    padding: 0 16px;
  }

  .DemoExperience-module__OsFraW__topbar > :first-child {
    margin-left: 0;
  }

  .DemoExperience-module__OsFraW__mobileBrand {
    margin-right: auto;
    display: flex;
  }

  .DemoExperience-module__OsFraW__main {
    padding: 16px;
  }

  .DemoExperience-module__OsFraW__guide {
    grid-template-columns: auto 1fr;
    position: static;
  }

  .DemoExperience-module__OsFraW__guideActions {
    grid-column: 1 / -1;
  }

  .DemoExperience-module__OsFraW__guideActions button {
    flex: 1;
  }

  .DemoExperience-module__OsFraW__product {
    min-height: 0;
  }

  .DemoExperience-module__OsFraW__mediaLayout, .DemoExperience-module__OsFraW__editorLayout {
    grid-template-columns: 1fr;
  }

  .DemoExperience-module__OsFraW__preparedGrid > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .DemoExperience-module__OsFraW__previewCard {
    grid-template-rows: auto;
    grid-template-columns: 1fr 260px;
    align-items: center;
  }

  .DemoExperience-module__OsFraW__phoneStage {
    min-height: 430px;
  }

  .DemoExperience-module__OsFraW__scheduleCard {
    grid-template-columns: 1fr;
  }

  .DemoExperience-module__OsFraW__scheduleCard .DemoExperience-module__OsFraW__cardHeading, .DemoExperience-module__OsFraW__scheduleCard .DemoExperience-module__OsFraW__preflight, .DemoExperience-module__OsFraW__scheduleCard .DemoExperience-module__OsFraW__simulationNote {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .DemoExperience-module__OsFraW__localNotice {
    display: none;
  }

  .DemoExperience-module__OsFraW__topbar {
    gap: 8px;
  }

  .DemoExperience-module__OsFraW__exit {
    padding-left: 8px;
  }

  .DemoExperience-module__OsFraW__exit svg {
    display: none;
  }

  .DemoExperience-module__OsFraW__main {
    padding: 10px;
  }

  .DemoExperience-module__OsFraW__guide {
    gap: 11px;
    margin-bottom: 10px;
    padding: 13px;
  }

  .DemoExperience-module__OsFraW__guideNumber {
    width: 38px;
    height: 38px;
  }

  .DemoExperience-module__OsFraW__guideCopy p {
    font-size: .65rem;
  }

  .DemoExperience-module__OsFraW__guide ol {
    overflow: hidden;
  }

  .DemoExperience-module__OsFraW__guide li strong {
    display: none;
  }

  .DemoExperience-module__OsFraW__stepPage {
    padding: 17px;
  }

  .DemoExperience-module__OsFraW__productHeading {
    flex-direction: column;
    align-items: flex-start;
  }

  .DemoExperience-module__OsFraW__mediaLayout {
    gap: 10px;
  }

  .DemoExperience-module__OsFraW__preparedGrid > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .DemoExperience-module__OsFraW__uploadCard, .DemoExperience-module__OsFraW__libraryCard, .DemoExperience-module__OsFraW__formCard, .DemoExperience-module__OsFraW__previewCard, .DemoExperience-module__OsFraW__reviewCard, .DemoExperience-module__OsFraW__scheduleCard {
    padding: 16px;
  }

  .DemoExperience-module__OsFraW__editorLayout {
    gap: 10px;
  }

  .DemoExperience-module__OsFraW__previewCard {
    grid-template-columns: 1fr;
  }

  .DemoExperience-module__OsFraW__phoneStage {
    min-height: 425px;
  }

  .DemoExperience-module__OsFraW__reviewCard {
    grid-template-columns: 1fr;
  }

  .DemoExperience-module__OsFraW__reviewMedia {
    min-height: 310px;
  }

  .DemoExperience-module__OsFraW__welcome {
    padding: 34px 20px 26px;
  }

  .DemoExperience-module__OsFraW__welcomeFacts {
    grid-template-columns: 1fr;
  }

  .DemoExperience-module__OsFraW__welcomeFacts span {
    justify-content: center;
    display: flex;
  }

  .DemoExperience-module__OsFraW__completion article {
    grid-template-columns: 1fr;
  }

  .DemoExperience-module__OsFraW__completion article > div:nth-child(2) {
    flex-wrap: wrap;
  }

  .DemoExperience-module__OsFraW__completion article footer {
    grid-column: 1;
  }

  .DemoExperience-module__OsFraW__completionActions {
    flex-direction: column;
    width: 100%;
  }

  .DemoExperience-module__OsFraW__completionActions > * {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .DemoExperience-module__OsFraW__stepPage, .DemoExperience-module__OsFraW__welcome, .DemoExperience-module__OsFraW__completion {
    animation: none;
  }
}

@media (max-width: 380px) {
  .DemoExperience-module__OsFraW__preparedGrid > div {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=components_1kf_2yg._.css.map*/