:root {
  --story-safe-gutter: clamp(20px, 2.2vw, 38px);
  --story-shared-header-image: url("./assets/bg/desktop.webp");
  --story-shared-header-mobile-image: url("./assets/bg/mobile.webp");
}

html,
body.story-studio-page {
  overflow-x: hidden;
}

body.story-studio-page #mainContainer {
  background: var(--story-bg, #f7f4f8);
  padding-left: max(var(--story-safe-gutter), env(safe-area-inset-left)) !important;
  padding-right: max(var(--story-safe-gutter), env(safe-area-inset-right)) !important;
}

body.story-studio-page .story-simple {
  background: var(--story-bg, #f7f4f8);
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100%;
}

body.story-studio-page .story-simple-header {
  align-items: flex-start;
  background-color: #ffffff !important;
  background-image: var(--story-shared-header-image) !important;
  background-position: right top !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  margin: 0 auto -18px;
  max-width: none;
  min-height: clamp(155px, 9vw, 175px);
  overflow: visible;
  padding: 16px 48px 28px;
  text-align: left;
  width: 100%;
}

body.story-studio-page .story-simple-header h1 {
  color: var(--story-pink, #f24f78) !important;
}

body.story-studio-page .story-simple-header .story-preset-tabs.story-view-tabs {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(37, 24, 40, 0.14);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(56, 40, 64, 0.1);
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 5px;
}

@media (max-width: 767.98px) {
  :root {
    --story-safe-gutter: 12px;
  }

  body.story-studio-page .story-simple-header {
    background-image: var(--story-shared-header-mobile-image) !important;
    gap: 12px;
    margin-bottom: -8px;
    min-height: 130px;
    padding: 10px 14px 18px;
  }
}
