body.krea {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ds-font);
  user-select: none;
  -webkit-user-select: none;
}
body.krea input,
body.krea textarea,
body.krea [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}
body.krea h1,
body.krea h2,
body.krea h3,
body.krea p,
body.krea li,
body.krea button,
body.krea a,
body.krea input,
body.krea textarea,
body.krea select {
  font-family: var(--ds-font);
}
body.krea h1,
body.krea h2,
body.krea h3 {
  text-transform: none;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #f4f4f5;
}
body.krea .shell {
  grid-template-columns: 248px minmax(0, 1fr);
  background: #0b0b0c;
  min-height: 100vh;
}
body.krea .side {
  background: #101214;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: auto;
  overflow-x: hidden;
}
body.krea .side-top {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
body.krea .side-collapse {
  flex: none;
  position: relative;
  width: 40px;
  height: 40px;
  display: block;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transform-origin: center;
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms ease;
}
body.krea .side-collapse span {
  position: absolute;
  left: 13px;
  width: 14px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.8);
  display: block;
  border-radius: 1px;
}
body.krea .side-collapse span:first-child { top: 16px; }
body.krea .side-collapse span:last-child { top: 22px; }
body.krea .side-collapse:hover { background: rgba(255, 255, 255, 0.08); }
body.krea .side-nav,
body.krea .side-tools,
body.krea .side-foot { display: flex; flex-direction: column; gap: 4px; }
body.krea .side-nav { position: relative; }
body.krea .side-tools { margin-top: 16px; }
body.krea .side-foot { margin-top: auto; padding-top: 16px; }
body.krea .company-head { display: grid; gap: 8px; max-width: 720px; margin: 0 0 24px; }
body.krea .company-head h2 { margin: 0; font-size: var(--ds-text-title); line-height: 1.15; letter-spacing: var(--ds-tracking-title); }
body.krea .company-list { display: grid; gap: 12px; max-width: 720px; }
body.krea .company-list button {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: #1c1e20;
  color: #f4f4f5;
  text-align: left;
  cursor: pointer;
}
body.krea .company-list button svg { width: 32px; height: 32px; flex: none; }
body.krea .company-list strong { display: block; font-size: 18px; line-height: 1.3; }
body.krea .company-list em { display: block; margin-top: 4px; color: #c8c8ce; font-size: 16px; font-style: normal; line-height: 1.4; }
body.krea #company { padding: 28px; background: #0b0b0c; }
body.krea .side button.nav-item,
body.krea a.nav-item {
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
  font-size: 14px;
  font-family: var(--ds-font);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  text-align: left;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 180ms ease, color 180ms ease, gap 520ms cubic-bezier(0.16, 1, 0.3, 1), padding 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.krea .nav-item > span:not(.dots) {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1) 180ms, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.krea .side .nav-item:hover { background: rgba(255, 255, 255, 0.06); }
body.krea .nav-item[data-panel="home"] { --nav-tint: #f4f4f5; }
body.krea .nav-item[data-panel="creatives"] { --nav-tint: #8b5cf6; }
body.krea .nav-item[data-panel="images"] { --nav-tint: #67e8f9; }
body.krea .nav-item[data-panel="videos"] { --nav-tint: #93c5fd; }
body.krea .nav-item[data-panel="research"] { --nav-tint: #d1fe17; }
body.krea .nav-item[data-panel="library"] { --nav-tint: #a78bfa; }
body.krea .nav-item[data-panel="banana"] { --nav-tint: #ffd400; }
body.krea .nav-item[data-panel="seedance"] { --nav-tint: #93c5fd; }
body.krea .nav-item[data-panel="genprompt"] { --nav-tint: #34d399; }
body.krea .nav-item[data-panel="agent"] { --nav-tint: #c4b5fd; }
body.krea .nav-item[data-panel="makety"] { --nav-tint: #60a5fa; }
body.krea .nav-item[data-panel="account"] { --nav-tint: #f4f4f5; }
body.krea .nav-item[data-panel="company"] { --nav-tint: #d1fe17; }
body.krea .nav-rail {
  display: none;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: #2a2a2e;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), height 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), left 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}
body.krea .nav-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: #fff;
}
body.krea .side button:focus-visible,
body.krea .side a:focus-visible {
  outline: none;
}
body.krea .nav-rail.is-off { opacity: 0; }
body.krea .side-nav .nav-item { position: relative; z-index: 1; }
body.krea .side-nav .nav-item.is-on,
body.krea .side-nav .nav-item.is-on:hover,
body.krea .side-tools .nav-item.is-on,
body.krea .side-tools .nav-item.is-on:hover,
body.krea .side-foot .nav-item.is-on,
body.krea .side-foot .nav-item.is-on:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f7f7f8;
  font-weight: 500;
  box-shadow: none;
}
body.krea .nav-ico {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  object-fit: contain;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
body.krea img.nav-ico {
  stroke: none;
  fill: none;
}
body.krea .nav-item.is-on .nav-ico {
  background: transparent;
}
body.krea .nav-ico.is-color,
body.krea .nav-ico.is-color * {
  stroke: none;
}
@media (min-width: 901px) {
  body.krea .shell { display: flex; align-items: stretch; }
  body.krea .side { width: 248px; flex: 0 0 248px; }
  body.krea .stage { flex: 1 1 auto; width: auto; min-width: 0; }
  body.krea.is-side-ready .side { transition: width 560ms cubic-bezier(0.22, 1, 0.36, 1), flex-basis 560ms cubic-bezier(0.22, 1, 0.36, 1); }
  body.krea.is-side-anim { overflow-x: clip; }
  body.krea.is-side-anim .shell { position: relative; }
  body.krea.is-side-anim .stage { will-change: margin-left, width; }
  body.krea.is-side-anim .side {
    position: fixed;
    z-index: 6;
    top: 0;
    left: 0;
    height: 100vh;
  }
  body.krea.is-side-thin .side { width: 72px; flex-basis: 72px; }
  body.krea.is-side-thin .nav-row:has(.nav-fold:not([hidden])) .nav-item { padding-right: 8px; }
  body.krea.is-side-thin .side-collapse { transform: rotate(90deg); }
  body.krea.is-side-thin .nav-item > span:not(.dots),
  body.krea.is-side-thin .side-search input {
    opacity: 0;
    transform: translate3d(-8px, 0, 0);
    transition: opacity 140ms cubic-bezier(0.4, 0, 1, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.krea.is-side-thin .account-mail,
  body.krea.is-side-thin .nav-projects {
    height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    transition: height 380ms cubic-bezier(0.4, 0, 0.2, 1), margin 380ms cubic-bezier(0.4, 0, 0.2, 1), padding 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 140ms cubic-bezier(0.4, 0, 1, 1);
  }
  body.krea.is-side-thin .nav-fold {
    width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: width 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 140ms ease;
  }
  body.krea.is-side-thin .side-label {
    max-height: 17px;
    margin: 6px 0;
    color: transparent;
    opacity: 1;
    pointer-events: none;
    transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1), margin 380ms cubic-bezier(0.4, 0, 0.2, 1), color 140ms ease, opacity 140ms ease;
  }
  body.krea.is-side-thin .side-label::after {
    transform: translate(-50%, -50%) scaleX(1);
    opacity: 1;
    transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1) 80ms, opacity 280ms ease 80ms;
  }
  body.krea.is-side-thin .side-search {
    width: 44px;
    margin: 0 0 6px 4px;
    padding: 0 0 0 8px;
  }
}
body.krea #cw-nav-library[hidden] { display: none; }
body.krea #library { background: #0b0b0c; }
body.krea .lib-head { margin: 0 0 16px; }
body.krea .lib-lead {
  margin: 8px 0 0;
  max-width: 560px;
  color: #c8c8ce;
  font-size: 16px;
  line-height: 1.4;
}
body.krea .lib-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px 0 12px;
  background: #0b0b0c;
}
body.krea .lib-search input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #1a1b1e;
  color: #f4f4f5;
  font-size: 16px;
}
body.krea .lib-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea .lib-chip.is-on {
  box-shadow: inset 0 0 0 2px #d1fe17;
}
body.krea .lib-ico {
  display: block;
  width: 22px;
  height: 22px;
}
body.krea .lib-ico svg {
  display: block;
  width: 22px;
  height: 22px;
}
body.krea .lib-picked {
  flex: none;
  align-self: center;
  max-width: 160px;
  overflow: hidden;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea .lib-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
body.krea .lib-filters[hidden] { display: none; }
body.krea .lib-views {
  display: flex;
  flex: none;
  gap: 8px;
  margin-left: auto;
}
body.krea .lib-days { display: grid; gap: 28px; }
body.krea .lib-day { display: grid; gap: 8px; min-width: 0; }
body.krea .lib-day h3 {
  margin: 8px 0 0;
  color: #9a9aa0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
body.krea .lib-time { display: none; margin: 0; }
body.krea .lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
body.krea .lib-card,
body.krea .lib-project {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  background: #1a1b1e;
  color: #f4f4f5;
  text-align: left;
}
body.krea .lib-project {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
body.krea .lib-project {
  width: 100%;
  min-height: 44px;
  cursor: pointer;
}
body.krea .lib-project strong,
body.krea .lib-title {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.krea .lib-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 10px;
  background: #121316;
}
body.krea .lib-shot {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
body.krea #library.is-list .lib-shot { width: 72px; height: 72px; }
body.krea .lib-project span {
  margin: 0;
  color: #9a9aa0;
  font-size: 13px;
  line-height: 1.4;
}
body.krea .lib-text {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.krea .lib-note {
  margin: 0;
  color: #9a9aa0;
  font-size: 13px;
  line-height: 1.4;
}
body.krea .lib-card .btn,
body.krea .lib-empty .btn,
body.krea .lib-project .btn {
  justify-self: start;
  min-height: 44px;
}
body.krea .lib-actions,
body.krea .lib-shelf {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
}
body.krea .lib-text-chip {
  width: auto;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
body.krea .lib-project > button:first-child {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
body.krea .lib-quiet {
  justify-self: start;
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #9a9aa0;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
body.krea .lib-ask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.55);
}
body.krea .lib-ask[hidden] { display: none; }
body.krea .lib-ask-card {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  background: #1a1b1e;
}
body.krea .lib-ask p {
  margin: 0;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 1.4;
}
body.krea .lib-ask-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.krea .lib-archive-note {
  margin: 0 0 12px;
  color: #9a9aa0;
  font-size: 14px;
  line-height: 1.4;
}
body.krea #library.is-archive .lib-grid { grid-template-columns: 1fr; }
body.krea #library.is-archive .lib-card {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px;
}
body.krea #library.is-archive .lib-text { -webkit-line-clamp: 1; }
body.krea #library.is-list .lib-grid { grid-template-columns: 1fr; }
body.krea #library.is-list .lib-card {
  grid-template-columns: 36px minmax(0, 220px) minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px 16px;
}
body.krea #library.is-list .lib-title,
body.krea #library.is-list .lib-text { -webkit-line-clamp: 1; }
body.krea #library.is-list .lib-note { grid-column: 4; white-space: nowrap; }
body.krea #library.is-list .lib-time {
  display: block;
  grid-column: 5;
  color: #9a9aa0;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}
body.krea #library.is-list .lib-card .lib-actions { grid-column: -1; justify-self: end; }
body.krea #library.is-list .lib-project {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
body.krea .lib-empty {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin: 8px 0 0;
}
body.krea .lib-empty p {
  margin: 0;
  color: #9a9aa0;
  font-size: 16px;
}
body.krea .dots { width: 27px; text-align: center; letter-spacing: 1px; color: #bdbdc2; }
body.krea .side-label {
  position: relative;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 500;
  margin: 16px 4px 4px;
  max-height: 32px;
  overflow: hidden;
  text-transform: none;
  letter-spacing: 0;
  transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1), margin 380ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms ease 180ms, opacity 280ms ease 180ms;
}
body.krea .side-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 1px;
  background: #6a6a70;
  transform: translate(-50%, -50%) scaleX(0);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 1, 1), opacity 160ms ease;
}
body.krea .side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 6px;
  padding: 0 8px;
  min-height: 44px;
  border-radius: 10px;
  background: #141416;
  overflow: hidden;
  transition: width 380ms cubic-bezier(0.4, 0, 0.2, 1), margin 380ms cubic-bezier(0.4, 0, 0.2, 1), padding 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.krea .search-ico {
  width: 21px;
  height: 21px;
  border: 1.6px solid #8b8b90;
  border-radius: 50%;
  position: relative;
}
body.krea .search-ico::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 1.6px;
  background: #8b8b90;
  right: -4px;
  bottom: -1px;
  transform: rotate(40deg);
}
body.krea .side-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1) 180ms, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.krea .stage {
  position: relative;
  padding: 0;
  background: #0b0b0c;
  min-width: 0;
}
body.krea .panel {
  padding: 28px 28px 64px;
  border-top: 0;
}
body.krea .panel[hidden] {
  display: none !important;
}
body.krea .panel.is-enter {
  position: relative;
  z-index: 2;
}
@keyframes panel-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.krea .k-slide { transition: none; }
  body.krea .panel,
  body.krea .panel.is-enter,
  body.krea .panel.is-leave { animation: none; }
  body.krea .panel.is-enter,
  body.krea .panel.is-leave,
  body.krea .side button.nav-item,
  body.krea a.nav-item,
  body.krea .nav-rail,
  body.krea .shell,
  body.krea .nav-item > span,
  body.krea .side-label,
  body.krea .side-label::after,
  body.krea .account-mail,
  body.krea .nav-projects,
  body.krea .nav-fold,
  body.krea .side-search,
  body.krea .side-search input,
  body.krea .side-collapse { transition: none; }
  body.krea a.nav-item,
  body.krea .nav-rail,
  body.krea .form-success,
  body.krea .form > :not(.form-success),
  body.krea form.pay .pay-main > :not(.form-success) { transition: none; }
}
body.krea .home-panel { padding: 0 0 48px; border-top: 0; }
body.krea .lead { color: #c8c8ce; max-width: 680px; font-size: 16px; line-height: 1.5; }
body.krea #services,
body.krea #products,
body.krea #venture,
body.krea #about,
body.krea #brief {
  background: #121314;
}
body.krea #services h2,
body.krea #products h2,
body.krea #venture h2,
body.krea #about h2,
body.krea #brief h2 {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.05;
}
body.krea #about {
  padding: 0 0 48px;
  border-top: 0;
}
body.krea .mag {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 28px 8px;
}
body.krea .era-title {
  margin: 8px 0 24px;
  font-size: 40px;
  line-height: 1.15;
  max-width: none;
}
body.krea .era-title span { color: #d1fe17; }
body.krea .era {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 28px;
  padding-top: 36px;
}
body.krea .era-track {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10px;
  height: 2px;
  background: #2c2c31;
}
body.krea .era-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #d1fe17;
  transform-origin: left center;
  animation: era-fill 900ms ease forwards;
}
body.krea .era-dot {
  position: absolute;
  top: -5px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: #d1fe17;
  animation: era-dot 900ms ease forwards;
}
body.krea .era-node {
  position: relative;
  z-index: 1;
  min-height: 88px;
  padding: 16px 12px;
  border-radius: 16px;
  border: 1px solid #2c2c31;
  background: #1a1b1e;
  text-align: left;
  cursor: pointer;
}
body.krea .era-node strong { display: block; font-size: 16px; line-height: 1.3; }
body.krea .era-mark {
  display: block;
  margin-bottom: 8px;
  color: #9a9aa0;
  font-size: 12px;
}
body.krea .era-node em {
  display: inline-block;
  margin-top: 8px;
  color: #1a1a1a;
  background: #d1fe17;
  border-radius: 999px;
  padding: 2px 8px;
  font-style: normal;
  font-size: 12px;
}
body.krea .era-node.is-now { box-shadow: inset 0 0 0 2px #d1fe17; }
body.krea .era-node[aria-pressed="true"] { background: #25262b; }
body.krea .era-node[aria-pressed="true"] strong { color: #d1fe17; }
body.krea .era-node.is-next { opacity: 0.72; }
body.krea .ip-card,
body.krea .era-detail article {
  background: #1a1b1e;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  padding: 24px;
}
body.krea .ip-card { margin-bottom: 16px; }
body.krea .ip-card h3,
body.krea .era-detail h3 { margin: 0 0 12px; font-size: 20px; }
body.krea .ip-card p,
body.krea .era-detail p,
body.krea .ip-card li { color: #d4d4d8; font-size: 16px; line-height: 1.45; }
body.krea .ip-card ul,
body.krea .era-detail ul { margin: 8px 0 0; padding-left: 18px; }
body.krea .era-detail a { color: #d1fe17; }
body.krea .era-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
body.krea .era-split article {
  padding: 16px;
  background: #121314;
}
body.krea .era-split h4 { margin: 0 0 8px; font-size: 16px; }
body.krea .mag-edu { margin: 28px 0 8px; color: #9a9aa0; }
@keyframes era-fill { to { width: 66%; } }
@keyframes era-dot { to { left: calc(66% - 6px); } }
@media (prefers-reduced-motion: reduce) {
  body.krea .era-fill { animation: none; width: 66%; }
  body.krea .era-dot { animation: none; left: calc(66% - 6px); }
}
@media (max-width: 900px) {
  body.krea .era { grid-template-columns: 1fr; padding-top: 0; }
  body.krea .era-track { display: none; }
  body.krea .era-title { font-size: 32px; }
  body.krea .era-split { grid-template-columns: 1fr; }
}

body.krea .mag-kicker {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2c2c31;
  color: #9a9aa0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.krea .mag-hero,
body.krea .mag-spread {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 32px;
  align-items: start;
}
body.krea .mag-spread { margin-top: 40px; }
body.krea .mag-photo { margin: 0; }
body.krea .mag-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #1a1b1e;
}
body.krea .mag-photo figcaption,
body.krea .mag-note {
  margin: 8px 0 0;
  color: #9a9aa0;
  font-size: 12px;
  line-height: 1.4;
}
body.krea .mag-lead h2 {
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
body.krea .mag-lead p,
body.krea .mag-cols p,
body.krea .mag-spread p {
  margin: 0 0 16px;
  color: #c8c8ce;
  font-size: 16px;
  line-height: 1.5;
}
body.krea .mag blockquote {
  margin: 24px 0 0;
  padding: 8px 0 8px 16px;
  border-left: 2px solid #d1fe17;
}
body.krea .mag blockquote p {
  margin: 0 0 8px;
  color: #f4f4f5;
  font-size: 20px;
  line-height: 1.35;
}
body.krea .mag cite {
  color: #9a9aa0;
  font-size: 12px;
  font-style: normal;
}
body.krea .mag-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #2c2c31;
}
body.krea .mag h3 {
  margin: 0 0 12px;
  color: #f4f4f5;
  font-size: 18px;
  line-height: 1.3;
}
body.krea .mag-pull {
  color: #f4f4f5 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}
body.krea .mag-news-title { margin: 40px 0 16px; }
body.krea .mag-news {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #2c2c31;
}
body.krea .mag-news li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #2c2c31;
}
body.krea .mag-news time {
  color: #9a9aa0;
  font-size: 12px;
}
body.krea .mag-news a {
  color: #f4f4f5;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
}
body.krea .mag-news a:hover { color: #d1fe17; }
body.krea .mag-rules { margin: 32px 0 16px; }
body.krea .mag-foot { margin: 0 0 16px; }
body.krea .mag-foot a { color: #d1fe17; }
@media (max-width: 800px) {
  body.krea .mag { padding: 24px 16px 8px; }
  body.krea .mag-hero,
  body.krea .mag-spread,
  body.krea .mag-cols { grid-template-columns: 1fr; gap: 16px; }
  body.krea .mag-lead h2 { font-size: 36px; }
  body.krea .mag-news li { grid-template-columns: 1fr; gap: 4px; }
}
body.krea #venture .form,
body.krea #brief .form {
  padding: 16px;
  border: 1px solid #2c2c31;
  border-radius: 22px;
  background: #1a1b1e;
}
body.krea .card .btn { margin-top: auto; align-self: flex-start; }
body.krea .know {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 24px;
  align-items: center;
  margin: 32px 0 8px;
  padding: 20px;
  border-radius: 18px;
  background: #161618;
  border: 1px solid #2a2a2e;
}
body.krea .know-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
body.krea .know-copy h3 { margin: 0; font-size: 32px; line-height: 1.1; }
body.krea .know-copy p { margin: 0; color: #d4d4d8; font-size: 16px; line-height: 1.5; }
body.krea .know-shot {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f3f5;
  line-height: 0;
}
body.krea .know-shot img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
body.krea .plain { margin: 0 0 20px; padding-left: 18px; color: #d4d4d8; }
body.krea .plain li { margin: 8px 0; }

body.krea .home-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 32px;
  align-items: end;
  padding: 48px 32px 24px;
  background: #0b0b0c;
}
body.krea .home-copy h1 {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.05;
}
body.krea .home-copy p {
  max-width: 36em;
  margin: 0 0 16px;
  color: #c8c8ce;
  font-size: 16px;
  line-height: 1.45;
}
body.krea .home-cosmos {
  position: relative;
  min-height: 560px;
  border-radius: 20px;
  overflow: hidden;
  background: #020308;
}
body.krea #home-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
body.krea .home-cosmos-ui {
  position: relative;
  z-index: 1;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 24px;
  pointer-events: none;
}
body.krea .home-cosmos-ui h2 {
  margin: 0;
  color: #f4f4f5;
  font-size: 40px;
  line-height: 1.1;
  text-align: center;
}
body.krea .home-cosmos-ui .cw-lead {
  max-width: 36em;
  margin: 0;
  color: #c8c8ce;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}
body.krea .home-thread {
  width: min(720px, 100%);
  max-height: 240px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
  opacity: 1;
  margin-top: 0;
  transform: translateY(0);
  transition:
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1),
    height 780ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 780ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea .home-thread.is-leaving {
  overflow: hidden;
  opacity: 0;
  margin-top: -16px;
  transform: translateY(4px);
  pointer-events: none;
}
body.krea .home-thread p {
  margin: 0;
  max-width: min(520px, 100%);
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.45;
}
body.krea .home-thread .is-user {
  align-self: flex-end;
  background: #2a2b30;
  color: #f4f4f5;
  border-radius: 16px 16px 4px 16px;
}
body.krea .home-thread .is-bot {
  align-self: flex-start;
  background: #1c1e20;
  color: #f4f4f5;
  border-radius: 16px 16px 16px 4px;
}
body.krea .home-thread .is-think,
body.krea .as-status.is-think {
  animation: as-breathe 1200ms ease-in-out infinite;
}
body.krea .home-thread .is-think::after,
body.krea .as-status.is-think::after {
  content: "...";
  display: inline-block;
  width: 1.2em;
  animation: think-dots 1200ms ease-in-out infinite;
}
@keyframes think-dots {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.krea .home-thread .is-think,
  body.krea .as-status.is-think,
  body.krea .home-thread .is-think::after,
  body.krea .as-status.is-think::after { animation: none; }
  body.krea .home-thread { transition: none; }
}
body.krea .home-cosmos .era-box,
body.krea .home-cosmos .era-box textarea,
body.krea .home-cosmos .era-box button,
body.krea .home-cosmos .attach-note { pointer-events: auto; }
body.krea .home-cosmos .home-auto { pointer-events: none; }
body.krea .home-cosmos .era-box { cursor: text; }
body.krea .home-cosmos .era-box button { cursor: pointer; }
body.krea #home .era-box:focus-within { border-color: rgba(209, 254, 23, 0.85); }
body.krea #home .era-box textarea {
  color: #f4f4f5;
  -webkit-text-fill-color: #f4f4f5;
  caret-color: #f4f4f5;
}
body.krea .home-cosmos .era-box {
  width: min(var(--ds-content-chat), 100%);
  background: var(--ds-plate);
  border: 1px solid var(--ds-line-soft);
  box-shadow: var(--ds-shadow-panel);
}
body.krea #account {
  padding: 28px 32px 48px;
  background: var(--ds-bg);
  overflow: auto;
}
body.krea .account-wrap {
  max-width: 920px;
  display: grid;
  gap: var(--ds-space-5);
  align-content: start;
}
body.krea .account-hero {
  display: grid;
  gap: var(--ds-space-2);
  margin: 0;
}
body.krea .account-hero h2 {
  margin: 0;
  color: var(--ds-text);
  font: 560 40px/1.1 var(--ds-font);
  letter-spacing: -0.03em;
}
body.krea .account-hero .lead {
  margin: 0;
  max-width: 52ch;
  color: var(--ds-text-secondary);
  font: 400 var(--ds-text-body)/var(--ds-leading-body) var(--ds-font);
}
body.krea .account-gate:not([hidden]) {
  display: grid;
  gap: var(--ds-space-4);
  justify-items: start;
  padding: var(--ds-space-5);
  border: 1px solid var(--ds-line-soft);
  border-radius: 22px;
  background: var(--ds-surface);
}
body.krea .account-gate .btn { min-height: 48px; padding: 0 22px; border-radius: var(--ds-radius-pill); }
body.krea #account-card:not([hidden]) {
  display: grid;
  gap: var(--ds-space-5);
}
body.krea #account-card[hidden],
body.krea #account-guest[hidden],
body.krea #account-out[hidden],
body.krea #account-pass[hidden] { display: none; }
body.krea .account-identity:not([hidden]) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ds-space-4);
  align-items: center;
  padding: var(--ds-space-4) var(--ds-space-5);
  border: 1px solid var(--ds-line-soft);
  border-radius: 18px;
  background: var(--ds-surface);
}
body.krea .account-identity-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
body.krea .account-meta-mail {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-text);
  font: 600 15px/1.3 var(--ds-font);
}
body.krea .account-identity-role:not([hidden]) {
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-chip);
  color: var(--ds-text-secondary);
  font: 600 var(--ds-text-caption)/1.3 var(--ds-font);
}
body.krea .account-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--ds-space-1);
  width: fit-content;
  max-width: 100%;
  border-radius: 12px;
  background: var(--ds-field);
  border: 1px solid var(--ds-line-soft);
}
body.krea .account-nav button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ds-text-secondary);
  font: 500 14px/1 var(--ds-font);
  cursor: pointer;
}
body.krea .account-nav button[aria-current="page"] {
  background: var(--ds-nav-active);
  color: var(--ds-text);
}
body.krea .account-pane:not([hidden]) { display: grid; gap: var(--ds-space-4); }
body.krea .account-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-3);
}
body.krea .account-stat {
  display: grid;
  gap: var(--ds-space-2);
  min-height: 120px;
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-line-soft);
  border-radius: 18px;
  background: var(--ds-surface);
  align-content: end;
}
body.krea .account-stat h3 {
  margin: 0;
  color: var(--ds-text-muted);
  font: 500 13px/1.3 var(--ds-font);
}
body.krea .account-stat strong {
  color: var(--ds-text);
  font: 560 28px/1.15 var(--ds-font);
  letter-spacing: -0.03em;
}
body.krea .account-stat p,
body.krea .account-rules {
  margin: 0;
  color: var(--ds-text-secondary);
  font: 400 var(--ds-text-body)/var(--ds-leading-body) var(--ds-font);
}
body.krea .account-rules {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  background: var(--ds-field);
  border: 1px solid var(--ds-line-soft);
}
body.krea .account-stack select,
body.krea .account-people-form select {
  min-height: var(--ds-control-md);
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-md);
  background: var(--ds-field);
  color: var(--ds-text);
  font: 400 var(--ds-text-body)/var(--ds-leading-body) var(--ds-font);
}
@media (max-width: 720px) {
  body.krea .account-stats { grid-template-columns: 1fr; }
  body.krea #account { padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-6); }
  body.krea .account-identity:not([hidden]) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  body.krea .account-identity .btn { grid-column: 1 / -1; justify-self: start; }
  body.krea .account-hero h2 { font-size: 32px; }
}
body.krea .account-card {
  display: grid;
  gap: var(--ds-space-4);
  margin: 0;
  padding: var(--ds-space-5);
  border: 1px solid var(--ds-line-soft);
  border-radius: 18px;
  background: var(--ds-surface);
}
body.krea .account-card-head {
  display: grid;
  gap: var(--ds-space-2);
}
body.krea .account-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}
body.krea .account-card-foot .account-note { flex: 1 1 160px; }
body.krea .account-card h3,
body.krea .account-stack h4 {
  margin: 0;
  color: var(--ds-text);
  font: 560 18px/1.3 var(--ds-font);
  letter-spacing: -0.02em;
}
body.krea .account-avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border: 0;
  border-radius: 14px;
  background: var(--ds-chip);
  color: var(--ds-text);
  font: 600 20px/56px var(--ds-font);
  overflow: hidden;
  cursor: pointer;
}
body.krea .account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.krea .account-fields {
  display: grid;
  gap: var(--ds-space-3);
  min-width: 0;
}
body.krea .account-fields-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.krea .account-fields-span { grid-column: 1 / -1; }
body.krea .account-label,
body.krea .account-stack {
  display: grid;
  gap: var(--ds-space-2);
  color: var(--ds-text-muted);
  font: 500 13px/1.3 var(--ds-font);
}
body.krea .account-card input,
body.krea .account-stack input {
  min-height: var(--ds-control-md);
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-line-soft);
  border-radius: 10px;
  background: var(--ds-field);
  color: var(--ds-text);
  font: 400 var(--ds-text-body)/var(--ds-leading-body) var(--ds-font);
  color-scheme: dark;
}
body.krea .account-card input::placeholder { color: var(--ds-placeholder); }
body.krea .account-card input:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 1px;
}
body.krea .account-card input[readonly] {
  color: var(--ds-text-secondary);
  cursor: default;
}
body.krea .account-card input[type="date"] {
  min-width: 0;
}
body.krea .account-note {
  margin: 0;
  color: var(--ds-text-secondary);
  font: 400 14px/1.45 var(--ds-font);
}
body.krea .account-filters,
body.krea .account-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
body.krea .account-filters button,
body.krea .account-switch button,
body.krea .account-gate .btn,
body.krea .account-card .btn,
body.krea .account-stack .btn,
body.krea .account-identity .btn { min-height: var(--ds-control-md); }
body.krea .account-filters button,
body.krea .account-switch button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--ds-chip);
  color: var(--ds-text);
  font: 500 13px/1 var(--ds-font);
  cursor: pointer;
}
body.krea .account-filters button[aria-pressed="true"],
body.krea .account-switch button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--ds-accent);
  color: var(--ds-text);
}
@media (max-width: 720px) {
  body.krea .account-fields-grid { grid-template-columns: 1fr; }
}
body.krea .account-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--ds-space-2);
  min-height: 160px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: var(--ds-space-1);
}
body.krea .account-bar {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-text-secondary);
  cursor: default;
}
body.krea .account-bar i {
  display: block;
  width: 16px;
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
  background: var(--ds-accent);
}
body.krea .account-bar span {
  font: 400 var(--ds-text-caption)/1.2 var(--ds-font);
  white-space: nowrap;
}
body.krea .account-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-4);
}
body.krea .account-shot {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--ds-space-2);
  min-width: 0;
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-card);
  background: var(--ds-chat-in);
}
body.krea .account-shot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
}
body.krea .account-shot-kind {
  color: var(--ds-text-muted);
  font: 600 var(--ds-text-caption)/1.3 var(--ds-font);
  letter-spacing: var(--ds-tracking-label);
  text-transform: uppercase;
}
body.krea .account-shot time {
  color: var(--ds-text-muted);
  font: 400 var(--ds-text-caption)/1.3 var(--ds-font);
}
body.krea .account-shot-title {
  margin: 0;
  color: var(--ds-text);
  font: 600 var(--ds-text-body)/1.3 var(--ds-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea .account-shot img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--ds-radius-md);
  background: var(--ds-field);
}
body.krea .account-shot-text {
  margin: 0;
  color: var(--ds-text-secondary);
  font: 400 var(--ds-text-body)/var(--ds-leading-body) var(--ds-font);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.krea .account-shot-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
}
body.krea .account-shot-foot .account-note { flex: 1 1 120px; }
body.krea .account-shot .btn { min-height: var(--ds-control-filter); }
body.krea .account-list { display: grid; gap: var(--ds-space-2); }
body.krea .account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-space-2) var(--ds-space-4);
  align-items: start;
  min-width: 0;
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-card);
  background: var(--ds-chat-in);
}
body.krea .account-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  justify-content: flex-end;
}
  display: grid;
  gap: var(--ds-space-2);
  min-width: 0;
}
body.krea .account-row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-3);
}
body.krea .account-row time,
body.krea .account-row-kind {
  color: var(--ds-text-muted);
  font: 400 var(--ds-text-caption)/1.3 var(--ds-font);
}
body.krea .account-row-kind {
  font-weight: 600;
  letter-spacing: var(--ds-tracking-label);
  text-transform: uppercase;
}
body.krea .account-row-title {
  margin: 0;
  color: var(--ds-text);
  font: 600 var(--ds-text-body)/1.3 var(--ds-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea .account-row-text {
  margin: 0;
  color: var(--ds-text-secondary);
  font: 400 var(--ds-text-body)/var(--ds-leading-body) var(--ds-font);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.krea .account-row .btn {
  justify-self: end;
  align-self: center;
  min-height: var(--ds-control-filter);
  white-space: nowrap;
}
body.krea .account-people-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-3);
}
body.krea .account-people-form .account-card-foot {
  grid-column: 1 / -1;
}
body.krea .account-people-form select {
  min-height: var(--ds-control-md);
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-md);
  background: var(--ds-field);
  color: var(--ds-text);
  font: 400 var(--ds-text-body)/var(--ds-leading-body) var(--ds-font);
}
body.krea .account-people-list {
  display: grid;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-2);
}
body.krea .account-person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-space-2) var(--ds-space-4);
  align-items: center;
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-md);
  background: var(--ds-field);
}
body.krea .account-person-row strong {
  display: block;
  color: var(--ds-text);
  font: 600 var(--ds-text-body)/1.3 var(--ds-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea .account-person-row span {
  color: var(--ds-text-secondary);
  font: 400 var(--ds-text-caption)/1.3 var(--ds-font);
}
body.krea .account-stacks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-4); }
body.krea .account-stack {
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-card);
  background: var(--ds-field);
}
body.krea .account-stack ul {
  margin: 0;
  padding-left: var(--ds-space-4);
  color: var(--ds-text);
  font: 400 var(--ds-text-body)/var(--ds-leading-body) var(--ds-font);
}
body.krea #account-nav-people[hidden],
body.krea #account-pane-people[hidden],
body.krea #account-people-parent-wrap[hidden],
body.krea #account-people-role-wrap[hidden] { display: none; }
body.krea .ds-toggle {
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f2f2ee;
  font: 500 13px/1 Inter, sans-serif;
  cursor: pointer;
}
body.krea .ds-toggle[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #d1fe17; color: #d1fe17; }
body.krea .ds-toggle:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 800px) {
  body.krea .account-gallery,
  body.krea .account-stacks,
  body.krea .account-people-form,
  body.krea .account-row,
  body.krea .account-person-row { grid-template-columns: 1fr; }
  body.krea .account-row .btn,
  body.krea .account-person-row .ds-status { justify-self: start; }
}
body.krea .home-auto {
  flex: none;
  color: #c8c8ce;
  font-size: 13px;
  font-weight: 500;
}
body.krea .era-box {
  width: min(640px, 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a1b1e;
  border: 1px solid #2c2c31;
  border-radius: 22px;
  padding: 8px;
}
body.krea .era-box textarea {
  flex: 1;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  resize: none;
  outline: none;
  font: 16px/1.4 Inter, sans-serif;
  text-align: left;
}
body.krea .plus,
body.krea .go {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  flex: none;
  cursor: pointer;
}
body.krea .plus { background: #2a2b30; color: #fff; font-size: 22px; }
body.krea .go { background: #d1fe17; color: #1a1a1a; font-size: 18px; }
body.krea .attach-note { position: relative; z-index: 1; margin: 8px 0 0; font-size: 13px; color: #c8c8ce; }
body.krea .k-home {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px 28px 8px;
  background: #0b0b0c;
}
body.krea .studio-banner {
  position: relative;
  width: 100%;
  min-height: 280px;
  padding: 48px 24px;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #050806;
  color: #d1fe17;
  cursor: pointer;
  animation: studio-banner-pulse 1600ms cubic-bezier(0.2, 0, 0, 1) infinite;
}
body.krea .studio-banner::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 18%;
  height: 140%;
  background-image:
    linear-gradient(rgba(209, 254, 23, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(209, 254, 23, 0.28) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(280px) rotateX(68deg);
  transform-origin: center top;
  animation: studio-banner-grid 7s linear infinite;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 70%, transparent);
}
body.krea .studio-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(5, 8, 6, 0.15) 0%, rgba(5, 8, 6, 0.82) 58%, #050806 100%);
  pointer-events: none;
}
body.krea .studio-banner-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  justify-items: center;
}
body.krea .studio-banner strong {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}
body.krea .studio-banner em {
  color: #e7f7c4;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}
body.krea .studio-try {
  min-height: 44px;
  margin-top: 8px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: #d1fe17;
  color: #17180a;
  font: 600 16px/1 Inter, sans-serif;
  cursor: pointer;
}
@keyframes studio-banner-pulse {
  0%, 100% { box-shadow: inset 0 0 64px rgba(209, 254, 23, 0.22), 0 0 24px rgba(209, 254, 23, 0.12); }
  50% { box-shadow: inset 0 0 110px rgba(209, 254, 23, 0.42), 0 0 48px rgba(209, 254, 23, 0.28); }
}
@keyframes studio-banner-grid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 56px, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.krea .studio-banner,
  body.krea .studio-banner::before { animation: none; }
}
body.krea .k-hero-view {
  position: relative;
  height: min(420px, 46vh);
  min-height: 240px;
  border-radius: 20px;
  overflow: hidden;
  background: #121314;
}
body.krea .k-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
body.krea .k-slide.is-on { opacity: 1; pointer-events: auto; }
body.krea .k-slide-hit {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #121314;
  cursor: pointer;
}
body.krea .k-slide-hit img,
body.krea .k-slide-hit video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.krea .k-hero-view .home-live { height: 100%; aspect-ratio: auto; }
body.krea .k-hero-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
body.krea .k-hero-cap {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.03em;
}
body.krea .k-hero-nav { display: flex; gap: 8px; }
body.krea .k-hero-nav button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #2a2b30;
  box-shadow: inset 0 0 0 1px #3a3b42;
  color: #f4f4f5;
  font-size: 22px;
  cursor: pointer;
}
body.krea .k-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  min-height: 360px;
  padding: 32px 32px 72px;
  border-radius: 24px;
  overflow: hidden;
  background: #101114;
  box-shadow: inset 0 0 0 1px #2c2c31;
}
body.krea .k-feature > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
body.krea .k-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.2), rgba(8, 8, 10, 0.82));
}
body.krea .k-feature-copy,
body.krea .k-feature .era-box { position: relative; z-index: 1; }
body.krea .k-feature-copy { text-align: center; }
body.krea .k-feature-copy h2 {
  width: 100%;
  max-width: none;
  margin: 0 0 8px;
  font-size: 36px;
  line-height: 1.1;
  text-align: center;
}
body.krea .k-feature-copy p {
  max-width: 36em;
  margin: 0 auto;
  color: #e4e4e7;
  font-size: 16px;
  line-height: 1.45;
}
body.krea .k-feature .era-box { width: min(var(--ds-content-chat), 100%); margin: 0 auto; }
body.krea .k-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.krea .k-tool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f4f4f5;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
body.krea .k-tool-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #121314;
}
body.krea .k-tool-shot img,
body.krea .k-tool-shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.krea .k-tool:hover .k-tool-shot,
body.krea .k-tool:focus-visible .k-tool-shot,
body.krea .k-card:hover,
body.krea .k-card:focus-visible {
  box-shadow: inset 0 0 0 1px #d1fe17;
}
body.krea .k-rail { display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; }
body.krea .k-rail-head {
  display: grid;
  grid-template-columns: auto 1fr 44px;
  align-items: baseline;
  gap: 12px;
}
body.krea .k-rail-head h2 { margin: 0; font-size: 22px; }
body.krea .k-rail-head p { margin: 0; color: #9a9aa0; font-size: 14px; }
body.krea .k-find {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  justify-self: end;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea .k-tool-shot .home-live { height: 100%; aspect-ratio: auto; }
body.krea .k-find svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.krea .k-find[aria-expanded="true"] { background: #1a1b1e; }
body.krea .k-find-box { position: relative; }
body.krea .k-find-box[hidden] { display: none; }
body.krea .k-find-box input {
  width: min(320px, 100%);
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #2c2c31;
  border-radius: 12px;
  background: #121314;
  color: #f4f4f5;
  font: 16px/1.4 Inter, sans-serif;
}
body.krea .k-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-color: #2c2c31 transparent;
}
body.krea .k-card {
  position: relative;
  flex: 0 0 260px;
  height: 340px;
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1b1e;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
body.krea .k-card[hidden] { display: none; }
body.krea .k-card img,
body.krea .k-card video,
body.krea .k-card .home-live {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.krea .k-card .home-live { aspect-ratio: auto; }
body.krea .k-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16, 16, 18, 0.72);
  font-size: 12px;
  font-weight: 500;
}
body.krea .k-card-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 48px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
}
body.krea .k-card-copy strong { font-size: 18px; font-weight: 600; }
body.krea .k-card-copy em {
  font-style: normal;
  color: #e4e4e7;
  font-size: 13px;
}
body.krea .k-word {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
body.krea .home-live {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: inline-size;
  background: #101214;
}
body.krea .home-live iframe {
  width: 1280px;
  height: 800px;
  border: 0;
  transform: scale(calc(100cqw / 1280));
  transform-origin: top left;
  pointer-events: none;
}
body.krea .round {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 22px;
  cursor: pointer;
}
body.krea .jumps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 22px 0;
  background: #121314;
}
body.krea .jumps button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: #2a2b30;
  color: #f4f4f5;
  font-weight: 600;
  cursor: pointer;
}
body.krea .jumps .nav-ico { stroke: #f4f4f5; }
body.krea .jumps button:hover { background: #3a3b42; }
body.krea .works-rail {
  margin: 0;
  padding: 32px 22px 40px;
  background: #121314;
  color: #f4f4f5;
}
body.krea .works-rail h2 { color: #f4f4f5; margin: 0 0 8px; font-size: 24px; }
body.krea .empty-note,
body.krea .works-rail p { color: #9a9aa0; margin: 0; }

body.krea .makety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: stretch;
}
body.krea .maket-search {
  display: block;
  margin: 0;
}
body.krea .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.krea #makety {
  padding: 16px 16px 48px;
  background: #0f1113;
  color: #f7f7f8;
}
body.krea #makety .maket-banner { margin-bottom: 16px; }
body.krea #makety .maket-banner .live-frame {
  position: absolute;
  top: -24px;
  left: -2%;
  width: 104%;
  height: 760px;
  border: 0;
  pointer-events: none;
  filter: blur(10px) brightness(0.42) saturate(0.65);
}
body.krea #makety .hf-banner-copy {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.58) 46%, rgba(0, 0, 0, 0.74));
}
body.krea #makety .hf-banner,
body.krea .realty-banner {
  height: 160px;
  margin-bottom: 16px;
}
body.krea #makety .hf-banner h2,
body.krea #realty .realty-banner h2 {
  font-size: 32px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.04em;
}
body.krea #makety .hf-banner .lead {
  margin: 0;
  max-width: 860px;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
}
body.krea .maket-head { margin: 0 0 16px; }
body.krea .maket-lead {
  margin: 8px 0 0;
  max-width: 560px;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 1.4;
}
body.krea .maket-tools {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px 0 12px;
  background: #0f1113;
}
body.krea .maket-search input {
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: 0;
  border-radius: 12px;
  background: #1c1e20;
  color: #fff;
  font: inherit;
  font-size: 16px;
}
body.krea .maket-search input::placeholder { color: #898a8b; }
body.krea .maket-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
body.krea .maket-tags button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #2a2b30;
  color: #f7f7f8;
  cursor: pointer;
}
body.krea .maket-tags button.is-on {
  box-shadow: inset 0 0 0 2px #d1fe17;
}
body.krea .maket-empty { margin: 0 0 16px; color: #d4d4d8; font-size: 16px; }
body.krea #makety .maket { border-radius: 20px; background: #1c1e20; }
body.krea #makety .maket.is-on { outline: none; box-shadow: inset 0 0 0 2px #d1fe17; }
body.krea #makety .maket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 60px;
  padding: 8px 8px 8px 16px;
}
body.krea #makety .maket-foot strong {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}
body.krea .maket-count { margin: 0 0 12px; color: #898a8b; font-size: 14px; }
body.krea #makety .maket-shot.is-live {
  position: relative;
  height: auto;
  aspect-ratio: 1280 / 800;
  overflow: hidden;
  background: #101214;
}
body.krea #makety .maket-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #131517;
  color: #fff;
  cursor: pointer;
}
body.krea #makety .maket-copy svg { width: 18px; height: 18px; }
body.krea #makety .maket-copy.is-copied { background: #16803c; }
body.krea #makety .maket-shot.is-live .live-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1280px;
  height: 800px;
  border: 0;
  transform-origin: center center;
  pointer-events: none;
}
body.krea .maket-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
}
body.krea .maket-layer[hidden] { display: none; }
body.krea .maket-shade {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.56);
  cursor: pointer;
}
body.krea.is-maket-open { overflow: hidden; }
body.krea #makety .detail {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(480px, 100%);
  height: 100%;
  margin: 0;
  padding: 16px;
  overflow: auto;
  border-radius: 0;
  background: #1c1e20;
}
body.krea #makety .detail-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  background: #1c1e20;
}
body.krea #makety .detail-actions .btn { min-height: 44px; }
body.krea #makety .detail-stage.is-live {
  flex: none;
  height: auto;
  min-height: 220px;
  aspect-ratio: 1280 / 800;
  max-height: 46vh;
}
body.krea #makety .detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body.krea #makety .detail h3 { margin: 0; font-size: 24px; }
body.krea #makety .maket-close {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: #131517;
  color: #f7f7f8;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
body.krea #makety .detail p { margin: 0 0 8px; color: #d4d4d8; font-size: 16px; line-height: 1.4; }
body.krea #creatives {
  padding: 16px 16px 48px;
  background: #0f1113;
  color: #f7f7f8;
}
body.krea #creatives h2,
body.krea #creatives strong,
body.krea #creatives .hf-kicker {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-feature-settings: "ss04" 1;
}
body.krea #creatives .btn-primary {
  background: #d1fe17;
  color: #1a1a1a;
  border-radius: 999px;
}
body.krea #creatives .btn-primary:hover { filter: brightness(0.95); }
body.krea:has(#creatives:not([hidden])) {
  height: 100vh;
  overflow: hidden;
}
body.krea:has(#creatives:not([hidden])) .shell,
body.krea:has(#creatives:not([hidden])) .stage {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
body.krea #creatives:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
body.krea .cw-tabs {
  display: none;
}
body.krea .cw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  flex: 1;
  min-height: 0;
  background: #121314;
}
body.krea .cw[data-gallery="s"] { grid-template-columns: minmax(0, 1fr) 280px; }
body.krea .cw[data-gallery="m"] { grid-template-columns: minmax(0, 1fr) 400px; }
body.krea .cw[data-gallery="l"] { grid-template-columns: minmax(0, 1fr) 560px; }
body.krea .cw-list,
body.krea .cw-chat,
body.krea .cw-gallery {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.krea .cw-chat {
  overflow-x: hidden;
  padding: 0;
  border-top: 0;
}
body.krea .cw-list,
body.krea .cw-gallery {
  background: #16181a;
}
body.krea .cw-list { border-right: 1px solid rgba(255, 255, 255, 0.08); }
body.krea .cw-gallery { border-left: 1px solid rgba(255, 255, 255, 0.08); }
body.krea .cw-model-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 20px 0;
  color: #cfcfd4;
  font-size: 14px;
}
body.krea .cw-model-line select {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
body.krea .cw-search {
  display: block;
  margin: 12px;
}
body.krea .cw-search input {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #23262a;
  color: #f7f7f8;
  font: inherit;
  font-size: 16px;
}
body.krea .cw-search input {
  height: 44px;
  padding: 0 12px;
}
body.krea .cw-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 8px 8px 0 16px;
}
body.krea .cw-gallery-head .cw-gallery-title { margin: 0; }
body.krea .cw-gallery-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border-radius: 16px;
  background: #23262a;
}
body.krea .cw-gallery-tabs button {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #c8c8ce;
  cursor: pointer;
}
body.krea .cw-gallery-tabs button svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
body.krea .cw-gallery-tabs button[aria-selected="true"] {
  background: #d1fe17;
  color: #17180a;
}
body.krea .cw-templates-pane,
body.krea .cw-settings-pane {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
body.krea .cw-templates-pane[hidden],
body.krea .cw-settings-pane[hidden] { display: none; }
body.krea .cw-extra-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 8px;
}
body.krea .cw-extra-toggles .cw-chip {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #2a2b30;
  color: #f4f4f5;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .cw-extra-toggles .cw-chip.is-on,
body.krea .cw-extra-toggles .cw-chip[aria-pressed="true"] {
  background: #d1fe17;
  color: #17180a;
}
body.krea .cw-settings-pane .cw-shoot {
  position: static;
  left: auto;
  bottom: auto;
  z-index: auto;
  width: auto;
  max-height: none;
  flex: 1;
  margin: 0 12px 16px;
  overflow: auto;
  box-shadow: none;
}
body.krea .cw-settings-empty {
  margin: 0;
  padding: 16px;
  color: #9a9aa0;
  font-size: 14px;
  line-height: 1.4;
}
body.krea .cw-width {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 44px;
  height: 44px;
  padding-bottom: 12px;
  border: 0;
  border-radius: 10px;
  background: #23262a;
  cursor: pointer;
}
body.krea .cw-width i {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: #6d6e70;
}
body.krea .cw-width i:nth-child(1) { height: 8px; }
body.krea .cw-width i:nth-child(2) { height: 12px; }
body.krea .cw-width i:nth-child(3) { height: 16px; }
body.krea .cw-width[data-size="s"] i:nth-child(1),
body.krea .cw-width[data-size="m"] i:nth-child(2),
body.krea .cw-width[data-size="l"] i:nth-child(3) {
  background: #d1fe17;
}
body.krea .cw-gallery-title {
  margin: 16px 16px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #898a8b;
}
body.krea .cw-gallery-search {
  display: block;
  margin: 8px 12px 0;
}
body.krea .cw-gallery-search input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #23262a;
  color: #f7f7f8;
  font: inherit;
  font-size: 15px;
}
body.krea .cw-genres {
  display: flex;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0 12px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
body.krea .cw-genre {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #23262a;
  color: #c8c8ce;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
body.krea .cw-genre.is-on {
  background: #d1fe17;
  color: #1a1a1a;
}
body.krea .cw-gallery-empty {
  margin: 16px 12px;
  color: #898a8b;
  font-size: 14px;
}
body.krea .cw-scroll,
body.krea .cw-thread {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
body.krea .cw-thread {
  overflow-x: hidden;
  overflow-y: auto;
}
body.krea .cw[data-gallery="m"] #cw-gallery,
body.krea .cw[data-gallery="l"] #cw-gallery {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 2px 8px 8px;
}
body.krea .cw[data-gallery="m"] #cw-gallery { grid-template-columns: 1fr 1fr; }
body.krea .cw[data-gallery="l"] #cw-gallery { grid-template-columns: 1fr 1fr 1fr; }
body.krea .cw[data-gallery="m"] #cw-gallery > .cw-card,
body.krea .cw[data-gallery="l"] #cw-gallery > .cw-card {
  width: auto;
  margin: 0;
}
body.krea .cw[data-gallery="m"] #cw-gallery .cw-gallery-empty,
body.krea .cw[data-gallery="l"] #cw-gallery .cw-gallery-empty {
  grid-column: 1 / -1;
}
body.krea .cw-row-wrap,
body.krea .cw-card {
  width: calc(100% - 16px);
  margin: 0 8px 8px;
  border-radius: 12px;
  color: #f7f7f8;
}
body.krea .cw-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}
body.krea .cw-row-wrap:first-child { margin-top: 4px; }
body.krea .cw-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
body.krea .cw-row-wrap.is-on,
body.krea .cw-card.is-on {
  outline: 2px solid #d1fe17;
  background: #1c1e20;
}
body.krea .cw-row video {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  background: #111;
}
body.krea .cw-row strong,
body.krea .cw-card strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
body.krea .cw-row em {
  display: block;
  margin-top: 4px;
  color: #898a8b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}
body.krea .cw-row-wrap .copy-prompt { width: 100%; }
body.krea .cw-project {
  display: block;
  width: calc(100% - 16px);
  min-height: 44px;
  margin: 0 8px 8px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f7f7f8;
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
body.krea .cw-project:first-child { margin-top: 4px; }
body.krea .cw-project.is-on {
  background: #1c1e20;
  box-shadow: inset 0 0 0 2px #d1fe17;
}
body.krea .cw-empty {
  margin: 0;
  color: #c8c8ce;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.3;
  text-align: center;
}
body.krea .cw-compose[hidden] { display: none; }
body.krea .cw-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: #1c1e20;
  cursor: pointer;
}
body.krea #cw-gallery > .cw-card:first-child {
  margin-top: 2px;
}
body.krea .cw-card video,
body.krea #cw-gallery > .cw-card[data-kind="image"] img,
body.krea #cw-gallery .cw-still {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 8px;
  background: #1c1e20;
  pointer-events: none;
}
body.krea #cw-gallery .cw-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: transparent;
  opacity: 0;
}
body.krea #cw-gallery .cw-card-media video.is-ready { opacity: 1; }
body.krea #cw-gallery > .cw-card[data-kind="image"] img { aspect-ratio: 3 / 4; }
body.krea #cw-gallery > .cw-card[data-kind="slides"] img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  background: #1c1e20;
  pointer-events: none;
}
body.krea #cw-gallery > .cw-card[data-kind="slides"] .cw-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 12px;
  border-radius: 8px;
  background: #1c1e20;
  color: #f4f4f5;
}
body.krea .cw-slide p {
  margin: 0;
  color: #9a9aa0;
  font-size: 12px;
  line-height: 1.35;
}
body.krea .cw-thumb-slide {
  display: inline-flex;
  align-items: flex-end;
  padding: 6px;
  background: #1c1e20;
  color: #f4f4f5;
  font-size: 11px;
  line-height: 1.2;
}
body.krea .cw-card-meta {
  display: block;
  margin-top: -4px;
  color: #898a8b;
  font-size: 12px;
  line-height: 1.35;
}
body.krea .cw-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 40px 36px;
}
body.krea .cw-thread:has(.cw-intro),
body.krea .cw-thread:has(.cw-empty),
body.krea .cw-thread:has(.cw-use-tag):not(:has(.cw-msg)) {
  align-items: center;
  justify-content: center;
}
body.krea .cw-intro {
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: center;
}
body.krea .cw-eyebrow {
  margin: 0 0 12px;
  color: #d1fe17;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.krea .cw-intro h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 40px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.045em;
}
body.krea .cw-intro h2 span { color: #d1fe17; }
body.krea .cw-lead {
  max-width: 460px;
  margin: 0 auto 20px;
  color: #c8c8ce;
  font-size: 16px;
  line-height: 1.45;
}
body.krea .cw-reel {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 20px;
}
body.krea .cw-thread:has(.cw-intro) {
  align-items: center;
  justify-content: flex-start;
  padding-top: 28px;
}
body.krea .cw-reel img {
  width: auto;
  height: 188px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 18px;
  background: #121314;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}
body.krea .cw-reel img:nth-child(2) {
  height: 220px;
  width: auto;
  box-shadow: 0 0 0 1px #d1fe17, 0 18px 40px rgba(209, 254, 23, 0.16);
}
body.krea .cw-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}
body.krea .cw-step {
  min-height: 0;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
body.krea .cw-step b {
  display: block;
  margin-bottom: 8px;
  color: #d1fe17;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
body.krea .cw-step strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 15px;
}
body.krea .cw-step p {
  margin: 0;
  color: #9a9aa0;
  font-size: 13px;
  line-height: 1.35;
}
body.krea .cw-writer-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 16px 0 0;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: #1a1b1e;
  box-shadow: inset 0 0 0 1px rgba(209, 254, 23, 0.45);
  color: #f4f4f5;
  font-size: 13px;
  text-align: left;
}
body.krea .cw-writer-banner img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
@media (max-width: 900px) {
  body.krea .cw-steps { grid-template-columns: 1fr; }
  body.krea .cw-intro h2 { font-size: 28px; }
  body.krea .cw-reel img { height: 140px; }
  body.krea .cw-reel img:nth-child(2) { height: 164px; width: auto; }
}
body.krea .cw-use-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: min(520px, 100%);
  min-height: 44px;
  padding: 0 4px 0 14px;
  border-radius: 999px;
  background: #2a2b30;
  color: #f2f2ee;
  font-size: 14px;
}
body.krea .cw-use-tag span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea .cw-use-tag button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f2f2ee;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
body.krea .cw-preview h2 {
  margin: 12px 0 0;
  font-size: 24px;
}
body.krea .cw-hero {
  display: block;
  width: 100%;
  max-height: 320px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  background: #111;
}
body.krea .cw-note,
body.krea .cw-kicker {
  margin: 8px 0 0;
  color: #898a8b;
  font-size: 13px;
}
body.krea .cw-msg {
  min-width: 0;
  max-width: min(720px, 100%);
  padding: 14px 16px;
  border: 1px solid #2c2c31;
  border-radius: 18px;
  background: #1a1b1e;
  overflow-wrap: anywhere;
}
body.krea .cw-msg-user {
  align-self: flex-end;
  max-width: min(520px, 86%);
  background: #2a2b30;
  border-color: transparent;
}
body.krea .cw-prompt {
  margin: 8px 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.45;
  color: #f7f7f8;
}
body.krea .cw-compose {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: calc((100% - 24px) * 0.9);
  margin: -20px auto 16px;
  padding: 8px;
  border: 1px solid #2c2c31;
  border-radius: 22px;
  background: #1a1b1e;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
body.krea .cw-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 16px;
  background: #121314;
}
body.krea .cw-draft-row { position: relative; }
body.krea .cw-compose textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 16px 44px;
  border: 0;
  border-radius: 0 0 16px 16px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  resize: none;
}
body.krea .cw-clip {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9a9aa0;
  cursor: pointer;
}
body.krea .cw-clip svg { width: 18px; height: 18px; }
body.krea .cw-clip:hover { color: #f4f4f5; background: #2a2b30; }
body.krea .cw-clip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.28), 0 0 10px rgba(209, 254, 23, 0.16);
}
body.krea .cw-field:not(:has(.cw-name:not([hidden]))) textarea {
  border-radius: 16px;
}
body.krea .cw-attach {
  display: flex;
  gap: 8px;
}
body.krea .cw-attach-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 96px;
  min-height: 64px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: #2a2b30;
  color: #c8c8ce;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
body.krea .cw-attach-btn svg { width: 18px; height: 18px; }
body.krea .cw-attach-btn:hover { color: #fff; }
body.krea .cw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px 2px;
}
body.krea .cw-chip {
  display: inline-flex;
  align-items: center;
  max-width: 148px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f2f2ee;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
body.krea .cw-chip.is-on {
  color: #d1fe17;
  box-shadow: inset 0 0 0 1px rgba(209, 254, 23, 0.7);
}
body.krea .cw-who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
body.krea .cw-who img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  background: #121314;
}
body.krea .cw-who .cw-kicker { margin: 0; }
body.krea .cw-writer-note { margin: 8px 0 0; color: #9a9aa0; font-size: 13px; }
body.krea .cw-model:focus-visible,
body.krea .cw-stepper button:focus-visible,
body.krea .cw-mode button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.28), 0 0 10px rgba(209, 254, 23, 0.16);
}
body.krea .cw-name input:focus,
body.krea .cw-name input:focus-visible,
body.krea .cw-compose textarea:focus,
body.krea .cw-compose textarea:focus-visible {
  outline: none;
}
body.krea .cw-field:focus-within {
  box-shadow: none;
}
body.krea .cw-frame {
  position: relative;
  display: inline-flex;
}
body.krea .cw-frame[hidden],
body.krea .cw-stepper[hidden],
body.krea .cw-pop[hidden],
body.krea .cw-frame-x[hidden],
body.krea .cw-model-option[hidden],
body.krea .cw-shoot-pick[hidden],
body.krea .cw-shoot[hidden],
body.krea .cw-shoot-line[hidden] { display: none; }
body.krea .cw-frame-x {
  position: absolute;
  top: -8px;
  right: -6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #3a3b42;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
body.krea .cw-stepper {
  display: inline-flex;
  align-items: center;
  height: 32px;
  border-radius: 999px;
  background: #2a2b30;
  color: #f2f2ee;
}
body.krea .cw-stepper button {
  width: 28px;
  height: 32px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
body.krea .cw-stepper span {
  min-width: 32px;
  font-size: 13px;
  line-height: 32px;
  text-align: center;
}
body.krea .cw-shoot-pick { position: relative; }
body.krea .cw-shoot {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: 280px;
  max-height: 360px;
  padding: 8px;
  overflow: auto;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  background: #1a1b1e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
body.krea .cw-shoot-line { position: relative; }
body.krea .cw-shoot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f2f2ee;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
body.krea .cw-shoot-row:hover { background: #2a2b30; }
body.krea .cw-shoot-row b {
  max-width: 140px;
  overflow: hidden;
  color: #9a9aa0;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea .cw-picked {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.krea .cw-ref {
  display: block;
  flex: none;
  width: 40px;
  height: 28px;
  overflow: hidden;
  border-radius: 6px;
  background: #121314;
}
body.krea .cw-ref svg { display: block; width: 100%; height: 100%; }
body.krea .cw-shoot-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 8px;
}
body.krea .cw-shoot-list .cw-model-option {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 6px;
  min-height: 0;
  padding: 6px;
}
body.krea .cw-shoot-list .cw-model-option::after { content: none; }
body.krea .cw-shoot-list .cw-ref { width: 100%; height: 48px; }
body.krea .cw-shoot-list .cw-model-option[aria-selected="true"] {
  box-shadow: inset 0 0 0 2px #d1fe17;
}
body.krea .cw-shoot-line .cw-pop {
  position: static;
  width: auto;
  margin: 4px 0 8px;
}
body.krea .cw-pop {
  position: absolute;
  z-index: 6;
  width: 260px;
  padding: 12px;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  background: #1a1b1e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
body.krea .cw-pop p {
  margin: 0 0 12px;
  color: #f2f2ee;
  font-size: 14px;
  line-height: 1.4;
}
body.krea .cw-pop-primary,
body.krea .cw-pop-ghost {
  width: 100%;
  min-height: 40px;
  border: 0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .cw-pop-primary {
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  font-weight: 600;
}
body.krea .cw-pop-ghost {
  margin-top: 8px;
  border-radius: 12px;
  background: #2a2b30;
  color: #fff;
}
body.krea #creatives .cw-compose .btn-primary {
  flex: none;
  margin-left: auto;
  background: #d1fe17;
  color: #1a1a1a;
}
body.krea .hf-banner {
  position: relative;
  height: 280px;
  margin-bottom: 12px;
  border-radius: 20px;
  overflow: hidden;
  background: #0f1113;
}
body.krea .hf-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.krea .hf-banner-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.62));
}
body.krea .hf-kicker {
  margin: 0;
  color: #d1fe17;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.krea .hf-banner h2 {
  margin: 0;
  max-width: 920px;
  color: #d1fe17;
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none;
}
body.krea .hf-banner-copy .hf-kicker { color: #f4f4f5; }
body.krea #creatives { background: #121314; }
body.krea #creative-banner.hf-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 420px);
  align-items: center;
  gap: 32px;
  height: auto;
  min-height: 0;
  margin: 0 0 24px;
  padding: 48px 8px 16px;
  border-radius: 0;
  overflow: hidden;
  background: #121314;
}
body.krea #creative-banner .hf-stage {
  position: absolute;
  inset: 0 0 auto;
  height: 680px;
  pointer-events: none;
}
body.krea #creative-banner .hf-stage img {
  object-fit: cover;
  object-position: left top;
}
body.krea #creative-banner .hf-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 19, 20, 0.8), rgba(18, 19, 20, 0.35) 55%, rgba(18, 19, 20, 0.1)),
    rgba(18, 19, 20, 0.62);
}
body.krea #creative-banner .hf-stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(transparent, #121314);
}
body.krea #creative-banner .hf-banner-copy,
body.krea #creative-banner .hf-banner-reel { position: relative; z-index: 1; }
body.krea #creative-banner .hf-banner-copy {
  inset: auto;
  display: block;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  text-align: left;
  background: none;
}
body.krea #creative-banner .hf-kicker {
  margin: 0;
  color: #d1fe17;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.krea #creative-banner h2 {
  margin: 16px 0 0;
  max-width: 14em;
  color: #f2f2ee;
  font-family: Unbounded, "Arial Black", sans-serif;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}
body.krea #creative-banner h2 span { display: block; color: #d1fe17; }
body.krea #creative-banner .hf-banner-reel {
  width: 100%;
  max-width: 420px;
  justify-self: center;
  min-height: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
body.krea #creative-banner figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #2a2c2f;
  border-radius: 24px;
  background: #1b1c1e;
}
body.krea #creative-banner .hf-banner-reel video {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: min(72vh, 640px);
  object-fit: cover;
}
body.krea #creative-banner figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 20px 20px;
  background: linear-gradient(transparent, rgba(18, 19, 20, 0.8) 42%, #121314);
}
body.krea #creative-banner .hf-reel-id {
  margin: 0;
  color: #d1fe17;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
}
body.krea #creative-banner .hf-reel-title {
  margin: 4px 0 0;
  color: #f2f2ee;
  font-family: Unbounded, "Arial Black", sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
body.krea #creative-banner .hf-reel-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}
body.krea #creative-banner .hf-reel-tabs button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: #6f726c;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
body.krea #creative-banner .hf-reel-tabs button.is-on {
  background: #d1fe17;
  color: #121314;
}
body.krea .hf-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
body.krea .hf-feature { cursor: pointer; }
body.krea .hf-shot {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  overflow: clip;
  background: #111;
  aspect-ratio: 16 / 9;
}
body.krea .hf-press {
  position: absolute;
  inset: 0;
}
body.krea .hf-shot.is-press .hf-press {
  animation: hf-press 230ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes hf-press {
  0% { transform: scale(1); }
  39% { transform: scale(0.985); }
  100% { transform: scale(1); }
}
body.krea .hf-shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.krea .hf-feature strong {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #f7f7f8;
  transition: color .3s ease;
}
body.krea .hf-feature:hover strong,
body.krea .creative:hover strong { color: #d1fe17; }
body.krea .creatives-grid {
  columns: 2;
  column-gap: 12px;
}
body.krea .creatives-grid .creative {
  height: auto;
  display: block;
  margin: 0 0 12px;
  break-inside: avoid;
  border-radius: 16px;
}
body.krea .creative.ratio-a .hf-shot { aspect-ratio: 3 / 4; }
body.krea .creative.ratio-b .hf-shot { aspect-ratio: 3 / 5; }
body.krea .creative.ratio-c .hf-shot { aspect-ratio: 1 / 1; }
body.krea .creative .hf-shot video,
body.krea .hf-feature .hf-shot video { transition: transform .22s ease; }
body.krea .creative:hover .hf-shot video,
body.krea .hf-feature:hover .hf-shot video { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  body.krea .creative .hf-shot video,
  body.krea .hf-feature .hf-shot video,
  body.krea #realty .place,
  body.krea #realty .place::after,
  body.krea #realty .place.is-on,
  body.krea #realty .place.is-on::after,
  body.krea #realty .place-photo,
  body.krea #realty .place-pay,
  body.krea #realty form.pay.is-hot { transition: none; animation: none; }
  body.krea .hf-shot.is-press .hf-press { animation: none; }
  body.krea .copy-prompt,
  body.krea .copy-prompt.is-press,
  body.krea .copy-prompt.is-copied {
    transition: none;
    transform: none;
  }
}
body.krea .creative,
body.krea .maket {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 16px;
  background: #161618;
  color: #fff;
  text-align: left;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
body.krea .maket[hidden] { display: none; }
body.krea .creative.is-on,
body.krea .maket.is-on { outline: 2px solid #d1fe17; }
body.krea .maket strong { display: block; min-height: 44px; padding: 12px 16px 16px; font-size: 18px; line-height: 1.3; }
body.krea .maket-shot,
body.krea .maket-shot.is-live {
  height: 320px;
  container-type: inline-size;
  overflow: hidden;
}
body.krea .maket-shot.is-live .live-frame {
  width: 1280px;
  height: 800px;
  border: 0;
  transform: scale(calc(100cqw / 1280));
  transform-origin: top left;
  pointer-events: none;
}
body.krea .creative {
  position: relative;
  height: auto;
  border-radius: 12px;
}
body.krea .creative .hf-shot { border-radius: 12px; }
body.krea .creative strong {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  min-height: 0;
  padding: 20px 8px 8px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}
@media (min-width: 700px) {
  body.krea .creatives-grid { columns: 3; }
}
@media (min-width: 1100px) {
  body.krea .creatives-grid { columns: 4; }
}
@media (min-width: 1400px) {
  body.krea .creatives-grid { columns: 6; }
}
body.krea .copy-prompt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.krea .copy-prompt.is-press { transform: scale(0.96); }
body.krea .copy-prompt.is-copied {
  background: #d1fe17;
  color: #1a1a1a;
  border-color: transparent;
  transform: scale(1);
}
body.krea .copy-prompt.is-copied .copy-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 4px;
  margin-right: 8px;
  border-left: 2px solid #1a1a1a;
  border-bottom: 2px solid #1a1a1a;
  transform: rotate(-45deg) translateY(-1px);
  vertical-align: middle;
}
body.krea .copy-prompt.is-fail {
  background: #2a2a2e;
  color: #f7f7f8;
}
body.krea .maket-shot { flex: none; }
body.krea .more-btn,
body.krea .btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 650;
}
body.krea .more-btn { margin-top: 16px; background: #d1fe17; color: #1a1a1a; }
body.krea .btn-primary { background: #d1fe17; color: #1a1a1a; }
body.krea .panel > .btn { margin-top: 16px; }
body.krea .btn-ghost { background: #2a2b30; color: #f4f4f5; }
body.krea .detail {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: #161618;
}
body.krea .detail-stage { position: relative; height: 220px; border-radius: 12px; overflow: hidden; background: #0e0e10; }
body.krea .detail-stage.is-live { height: min(72vh, 640px); background: #f5efe6; }
body.krea .detail-stage.is-live .live-frame { width: 100%; height: 100%; border: 0; transform: none; }
body.krea .detail-stage .frame { position: absolute; inset: 16px; }
body.krea .detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.krea .frame { border-radius: 12px; background: #f3efe8; overflow: hidden; height: 120px; }
body.krea .chrome { height: 14px; background: #e4dfd6; }
body.krea .mini-hero { margin: 10px; height: 36px; border-radius: 6px; background: #161616; }
body.krea .mini-line { margin: 0 10px 6px; height: 6px; border-radius: 99px; background: #ddd4c8; }
body.krea .mini-line.s { width: 55%; }
body.krea .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
body.krea .mini-grid i { height: 36px; border-radius: 6px; background: #fff; display: block; }
body.krea .mini-shot { margin: 10px; height: 52px; border-radius: 6px; background: linear-gradient(120deg, #1c1c1c, #6d6256); }
body.krea .play .mini-shot { animation: drift 3.2s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08); } }
body.krea .mini-box { margin: 12px 10px 8px; height: 36px; border-radius: 8px; background: #fff; }
body.krea .mini-btn { margin-left: 10px; width: 54px; height: 14px; border-radius: 99px; background: #161616; }
body.krea .mini-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
body.krea .mini-split i { height: 48px; border-radius: 6px; background: #fff; display: block; }

body.krea .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.krea .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.krea .objects { margin-top: 8px; }
body.krea #realty {
  padding: 16px 16px 48px;
  background: #0f1113;
  color: #f7f7f8;
}
body.krea #realty h2,
body.krea #realty h3,
body.krea #realty .place-copy strong {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-feature-settings: "ss04" 1;
}
body.krea #realty h2 {
  margin: 0 0 8px;
  font-size: 44px;
  text-transform: uppercase;
  letter-spacing: -0.04em;
}
body.krea #realty > .lead { margin: 0; font-size: 14px; }
body.krea:has(#realty:not([hidden])) {
  height: 100vh;
  overflow: hidden;
}
body.krea:has(#realty:not([hidden])) .shell,
body.krea:has(#realty:not([hidden])) .stage {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
body.krea #realty {
  --hf-green: #8dff3e;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 20px 24px 16px;
  box-sizing: border-box;
  background: #101214;
}
body.krea .realty-banner {
  position: relative;
  z-index: 2;
  flex: none;
  height: 160px;
  margin: 0 0 16px;
  border-radius: 16px;
  overflow: hidden;
  background: #0f1113;
  box-shadow: 0 22px 28px -16px rgba(0, 0, 0, 0.85);
}
body.krea .realty-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.krea .realty-banner-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.38) 42%, rgba(0, 0, 0, 0.62));
}
body.krea #realty .realty-banner h2 {
  margin: 0;
  max-width: 920px;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-transform: none;
}
body.krea #realty .realty-banner .lead {
  margin: 0;
  max-width: 760px;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 1.4;
}
body.krea #realty > * { position: relative; z-index: 1; }
body.krea #realty[hidden] { display: none; }
body.krea #realty .place {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: auto;
  min-height: 0;
  padding: 0;
  background: #1c1e20;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body.krea #realty .lead,
body.krea #realty .map-credit { color: #898a8b; }
body.krea #realty .objects { grid-template-columns: 1fr 1fr; gap: 10px; }
body.krea #realty .realty-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  margin-top: 0;
}
body.krea #realty .realty-objects {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 20px 8px 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 24px), transparent 100%);
}
body.krea #realty .realty-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding-top: 40px;
}
body.krea #realty .know {
  flex: none;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 8px;
  border-radius: 12px;
}
body.krea #realty .know-copy { gap: 4px; }
body.krea #realty .know-copy h3 { font-size: 14px; line-height: 1.2; }
body.krea #realty .know-copy p {
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.krea #realty .know .btn { min-height: 28px; padding: 0 10px; font-size: 12px; }
body.krea #realty .know-shot { border-radius: 8px; }
body.krea #realty .know-shot img { width: 100%; height: 120px; object-fit: cover; }
body.krea #realty .realty-split form.pay {
  margin-top: 0;
  min-width: 0;
  align-self: stretch;
  flex: none;
  height: auto;
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 16px;
  overflow: visible;
  background: #1c1e20;
  color: #f7f7f8;
  border-color: transparent;
}
body.krea #realty form.pay .pay-main {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  width: 100%;
}
body.krea #realty form.pay .pay-main > .btn-primary { margin-top: 4px; }
body.krea #realty .pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.krea #realty form.pay label.wide {
  display: grid;
  gap: 4px;
}
body.krea #realty form.pay .check {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.krea #realty form.pay .check input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  flex: none;
}
body.krea #realty form.pay h3,
body.krea #realty form.pay .lead,
body.krea #realty form.pay label,
body.krea #realty form.pay .check,
body.krea #realty form.pay .status { color: #f7f7f8; }
body.krea #realty form.pay .lead { color: #898a8b; }
body.krea #realty form.pay input {
  background: #131517;
  color: #fff;
  border: 0;
}
body.krea #realty form.pay input::placeholder { color: #898a8b; }
body.krea #realty .btn-primary {
  background: #d1fe17;
  color: #1a1a1a;
  border-radius: 999px;
}
body.krea #realty .btn-primary:hover { filter: brightness(0.95); }
body.krea #realty .place {
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea #realty button.place,
body.krea #realty button.place:hover,
body.krea #realty button.place.is-on { transform: none; }
body.krea #realty .place::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 0;
  padding: 2px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea #realty .objects.has-pick .place { opacity: 0.45; }
body.krea #realty .objects.has-pick .place:hover:not(.is-on) { opacity: 0.72; }
body.krea #realty .objects.has-pick .place.is-on { opacity: 1; }
body.krea #realty .place.is-on {
  animation: none;
  box-shadow: inset 0 0 0 2px #d1fe17;
}
body.krea #realty .place.is-on::after {
  opacity: 0;
  animation: none;
}
@keyframes realty-flow {
  0%, 100% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
}
@keyframes realty-glow {
  0%, 100% { box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.22); }
  50% { box-shadow: inset 0 0 26px rgba(209, 254, 23, 0.42); }
}
body.krea #realty .place-shot { position: relative; display: block; }
body.krea #realty .place-photo {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea #realty .place.is-on .place-photo { filter: brightness(0.38); }
body.krea #realty .place-pay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  min-width: 132px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 22px;
  background: #d1fe17;
  color: #1a1a1a;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -46%);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea #realty .place.is-on .place-pay {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
body.krea #realty .place-pay.is-press {
  transform: translate(-50%, -50%) scale(0.94);
}
body.krea #realty .place-pay.is-go {
  background: #131517;
  color: #f4f4f5;
  box-shadow: inset 0 0 0 1px #f4f4f5;
}
body.krea #realty form.pay.is-hot {
  animation: none;
  box-shadow: 0 0 0 1px #d1fe17;
}
@keyframes form-hot {
  0%, 100% { box-shadow: 0 0 0 1px #f4f4f5, 0 0 16px rgba(255, 255, 255, 0.2); }
  50% { box-shadow: 0 0 0 1px #d1fe17, 0 0 22px rgba(209, 254, 23, 0.35); }
}
body.krea #realty .place-tags {
  position: static;
  gap: 4px;
}
body.krea #realty .place-copy {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  background: none;
}
body.krea #realty .place-note {
  color: #898a8b;
  font-size: 12px;
  line-height: 1.35;
}
body.krea #realty .place-copy strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}
body.krea #realty .place:hover .place-copy strong,
body.krea #realty .place.is-on .place-copy strong { color: #fff; }
body.krea #realty .place-tag { min-height: 18px; padding: 0 6px; font-size: 10px; }
body.krea #realty .pay-picked { margin: 0; color: var(--hf-green); font-size: 13px; line-height: 1.2; }
body.krea #realty form.pay h3 { margin: 0; font-size: 24px; line-height: 1.2; }
body.krea #realty .pay-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.krea #realty .ip-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #131517;
  color: #f7f7f8;
  cursor: pointer;
}
body.krea #realty .ip-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.krea #realty .ip-btn[aria-expanded="true"] { background: #f4f4f5; color: #131517; }
body.krea #realty .ip-card {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: #131517;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
body.krea #realty .ip-card[hidden] { display: none; }
body.krea #realty .ip-card p { margin: 0; color: #f7f7f8; font-size: 13px; line-height: 1.35; }
body.krea #realty form.pay .lead { margin: 0; font-size: 14px; line-height: 1.4; }
body.krea #realty form.pay label { font-size: 13px; gap: 8px; }
body.krea #realty .check { font-size: 14px; line-height: 1.4; }
body.krea #realty .pay-ways { display: flex; flex-wrap: wrap; gap: 8px; }
body.krea #realty .pay-ways button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #131517;
  color: #f7f7f8;
  font-size: 13px;
  cursor: pointer;
}
body.krea #realty .pay-ways button.is-on { background: #d1fe17; color: #1a1a1a; box-shadow: none; }
body.krea #realty form.pay input { min-height: 40px; padding: 8px 12px; border-radius: 10px; }
body.krea #realty .place-media {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  background: #131517;
}
body.krea #realty .place-photo { transition: none; }
body.krea #realty .place:hover .place-photo { transform: none; }
body.krea #realty .place-map-open {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  width: 104px;
  height: 76px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  overflow: hidden;
  background: #23262a;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
body.krea #realty .place-map-open .place-map {
  position: static;
  display: block;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  object-position: center;
}
body.krea #realty .place-map-open span {
  display: block;
  height: 24px;
  color: #131517;
  background: #d1fe17;
  font-size: 11px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
body.krea .map-view {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}
body.krea .map-view[hidden] { display: none; }
body.krea .map-view-sheet {
  position: relative;
  width: min(880px, 100%);
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: #1c1e20;
}
body.krea .map-view-sheet h3 {
  margin: 0 48px 0 0;
  font-size: 20px;
  line-height: 1.25;
}
body.krea .map-view-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 22px;
  background: #23262a;
  color: #fff;
  font-size: 24px;
  line-height: 44px;
  cursor: pointer;
}
body.krea .map-view-sheet iframe {
  width: 100%;
  height: min(62vh, 520px);
  border: 0;
  border-radius: 12px;
  background: #131517;
}
body.krea #realty .place-tag {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.krea #realty .place-tag.sale {
  background: #f4f4f5;
  color: #131517;
  border-color: transparent;
}
body.krea #realty .place-tag.busy {
  background: #e0a106;
  color: #131517;
  border-color: transparent;
}
body.krea #realty .place-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  background: none;
}
body.krea #realty .place-copy .meta {
  color: #898a8b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.krea #realty .place-copy strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
body.krea #realty .place-go { color: #898a8b; font-size: 12px; }
body.krea #realty .place:hover .place-go,
body.krea #realty .place.is-on .place-go { color: var(--hf-green); }
body.krea #realty form.pay {
  background: #1c1e20;
  border-color: transparent;
  border-radius: 16px;
}
body.krea #realty form.pay.is-set #rent-map {
  width: 112px;
  height: 76px;
  right: 12px;
  bottom: 64px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
body.krea .map-credit { margin: 8px 0 0; color: #8e8e93; font-size: 12px; }
body.krea button.place {
  padding: 10px;
  gap: 10px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .2s ease;
}
body.krea button.place:hover,
body.krea button.place.is-on { transform: translateY(-8px); border-color: #fff; }
body.krea .place-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
body.krea .place-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
body.krea button.place:hover .place-photo { transform: scale(1.06); }
body.krea .place-map {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 42%;
  height: 48%;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
body.krea .place-tags {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.krea .place-tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
}
body.krea .place-tag.sale { background: #fff; color: #111; }
body.krea .place-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 2px 6px 6px; }
body.krea .place-copy strong { font-size: 16px; line-height: 1.35; font-weight: 650; }
body.krea .place-go { color: #fff; font-size: 13px; }
body.krea button.card {
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
body.krea button.card h3 { margin: 0; font-size: 18px; line-height: 1.35; min-height: 72px; }
body.krea button.card.is-on { border-color: #fff; }
body.krea .card {
  background: #1a1b1e;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.krea .card p,
body.krea .meta { color: #c4c4c8; }
body.krea .card a { color: #fff; }
body.krea .empty-card {
  max-width: 640px;
  padding: 20px;
  border-radius: 18px;
  background: #161618;
}
body.krea .form {
  display: grid;
  gap: 12px;
  max-width: 640px;
  margin-top: 24px;
}
body.krea form.pay {
  max-width: none;
  margin-top: 28px;
  padding: 16px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: start;
  background: #17181b;
  border: 1px solid #2a2a2e;
  border-radius: 28px;
}
body.krea .pay-stage {
  position: relative;
  min-height: 280px;
  border-radius: 18px;
  overflow: hidden;
  background: #111114;
}
body.krea .pay-stage img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: none;
}
body.krea form.pay.is-set .pay-stage img { display: block; }
body.krea form.pay.is-set #rent-map {
  position: absolute;
  right: 12px;
  bottom: 56px;
  width: 42%;
  height: 42%;
  border-radius: 12px;
  border: 2px solid #fff;
  object-fit: cover;
}
body.krea #rent-picked {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}
body.krea .pay-main { display: grid; gap: 12px; min-width: 0; }
body.krea .pay-main h3 { margin: 4px 0 0; font-size: 28px; letter-spacing: -0.03em; }
body.krea .pay-main .lead { margin: 0; }
body.krea .pay-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.krea .pay-fields .wide,
body.krea .pay-main > .wide { grid-column: 1 / -1; }
body.krea .pay-periods { display: flex; flex-wrap: wrap; gap: 8px; }
body.krea .pay-periods button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: #2a2a2e;
  color: #fff;
  cursor: pointer;
}
body.krea .pay-periods button.is-on { box-shadow: inset 0 0 0 1.5px #fff; }
body.krea button.card.place { padding: 10px; }
body.krea .form label { display: grid; gap: 6px; font-size: 14px; color: #d4d4d8; }
body.krea .form input,
body.krea .form select,
body.krea .form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: #121314;
  border: 1px solid #2c2c31;
  color: #fff;
  border-radius: 12px;
  font-size: 16px;
}
body.krea .form input:focus-visible,
body.krea .form select:focus-visible,
body.krea .form textarea:focus-visible,
body.krea .era-box:focus-within,
body.krea .maket-search input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.22), 0 0 18px rgba(209, 254, 23, 0.14);
}
body.krea .form textarea { min-height: 96px; }
body.krea .check { display: flex; gap: 8px; align-items: flex-start; }
body.krea .check input { width: 20px; min-height: 20px; margin-top: 2px; }
body.krea .status { white-space: pre-wrap; color: #e4e4e7; }
body.krea .form,
body.krea #realty form.pay .pay-main { position: relative; }
body.krea .form > :not(.form-success),
body.krea form.pay .pay-main > :not(.form-success) {
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea .form.is-done > :not(.form-success),
body.krea form.pay.is-done .pay-main > :not(.form-success) {
  opacity: 0;
  pointer-events: none;
}
body.krea .form-success {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 24px;
  border-radius: 16px;
  background: #161618;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea .form.is-done .form-success,
body.krea form.pay.is-done .form-success {
  opacity: 1;
  transform: none;
}
body.krea .form-success strong {
  color: #f7f7f8;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
body.krea .form-success p {
  margin: 0;
  max-width: 420px;
  color: #d4d4d8;
  font-size: 16px;
  line-height: 1.4;
}
body.krea #realty .form-success { background: #1c1e20; }
body.krea .note button {
  background: none;
  border: 0;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  min-height: 44px;
}
body.krea .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
body.krea .mobile-gate { display: none; }
body.krea .mnav { display: none; }
body.krea .icon-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: #2a2a2e;
  display: grid;
  gap: 5px;
  place-content: center;
}
body.krea .icon-btn span { display: block; width: 16px; height: 1.5px; background: #fff; }
body.krea .mnav .pill { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; font-weight: 650; cursor: pointer; }
body.krea .mnav .pill.light { background: #fff; color: #111; }
body.locked { overflow: hidden; }

@media (max-width: 900px), (max-device-width: 900px) {
  body.krea { overflow: hidden; height: 100%; }
  body.krea .mobile-gate {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #020308;
    overflow: hidden;
  }
  body.krea #mobile-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  body.krea .mobile-gate-copy {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
  }
  body.krea .mobile-gate-copy p {
    margin: 0;
    max-width: 14em;
    color: #f4f4f5;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
  }
  body.krea .mnav,
  body.krea .shell,
  body.krea .backdrop { visibility: hidden; }
  body.krea .mnav {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 40;
    align-items: center;
    gap: 10px;
    height: 64px;
    padding: 0 12px 0 16px;
    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(16px);
  }
  body.krea .mnav .pill { margin-right: auto; }
  body.krea .shell { display: block; min-height: auto; }
  body.krea .side-collapse { display: none; }
  body.krea .side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: min(86vw, 300px);
    height: 100vh;
    transform: translateX(-105%);
  }
  body.krea .side.open { transform: none; }
  body.krea .backdrop.show { z-index: 48; }
  body.krea .k-home { padding: 16px 16px 8px; gap: 20px; }
  body.krea .studio-banner { min-height: 220px; padding: 32px 16px; }
  body.krea .studio-banner strong { font-size: 28px; }
  body.krea .home-cosmos,
  body.krea .home-cosmos-ui { min-height: 480px; }
  body.krea .home-cosmos-ui { padding: 32px 16px; }
  body.krea .home-cosmos-ui h2 { font-size: 28px; }
  body.krea .k-hero-view { height: 220px; min-height: 220px; }
  body.krea .k-hero-cap { font-size: 18px; }
  body.krea .k-feature { min-height: 0; padding: 24px 16px 56px; }
  body.krea .k-feature-copy h2 { font-size: 28px; }
  body.krea .k-tools { grid-template-columns: 1fr; }
  body.krea .k-rail-head { grid-template-columns: 1fr 44px; }
  body.krea .k-rail-head p { grid-column: 1 / -1; }
  body.krea .promo { flex-basis: calc(100cqw - 8px); }
  body.krea #makety .makety-grid { grid-template-columns: 1fr; }
  body.krea .maket-tools { top: 64px; }
  body.krea #makety .detail {
    top: 48px;
    left: 0;
    width: auto;
    height: calc(100% - 48px);
    border-radius: 20px 20px 0 0;
  }
  body.krea .grid,
  body.krea .products,
  body.krea #realty .objects { grid-template-columns: 1fr 1fr; }
  body.krea #realty .realty-split,
  body.krea .know,
  body.krea form.pay,
  body.krea .pay-fields,
  body.krea .hf-features { grid-template-columns: 1fr; }
  body.krea:has(#realty:not([hidden])),
  body.krea:has(#realty:not([hidden])) .shell,
  body.krea:has(#realty:not([hidden])) .stage {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  body.krea #realty {
    height: auto;
    overflow: visible;
    padding: 8px 16px 32px;
  }
  body.krea #realty h2 {
    font-size: 28px;
    line-height: 1.1;
    max-width: 100%;
  }
  body.krea .realty-banner { height: 140px; margin-bottom: 16px; box-shadow: none; }
  body.krea .realty-banner-copy { padding: 16px; }
  body.krea #realty .realty-banner .lead {
    max-width: none;
    font-size: 14px;
    line-height: 1.35;
  }
  body.krea #realty .realty-split {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    margin-top: 16px;
  }
  body.krea #realty .realty-objects {
    order: 0;
    flex: none;
    overflow: visible;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.krea #realty .realty-side { order: 1; height: auto; flex: none; gap: 12px; padding-top: 0; }
  body.krea #realty .objects { grid-template-columns: 1fr 1fr; }
  body.krea #realty .place-copy strong { overflow-wrap: anywhere; }
  body.krea #realty .realty-split form.pay {
    flex: none;
    height: auto;
    max-height: none;
    padding: 16px;
    overflow: visible;
    scroll-margin-top: 80px;
  }
  body.krea #realty form.pay .pay-main { gap: 8px; }
  body.krea #realty form.pay .pay-main > .btn-primary { margin-top: 0; }
  body.krea #realty form.pay h3 { font-size: 18px; }
  body.krea #realty form.pay .lead { font-size: 13px; line-height: 1.35; }
  body.krea #realty .pay-ways button { flex: 1 1 30%; }
  body.krea #realty .know { grid-template-columns: 96px minmax(0, 1fr); }
  body.krea #realty .know-shot img { height: 72px; }
  body.krea .hf-banner,
  body.krea #makety .maket-banner { height: 220px; }
  body.krea #creative-banner.hf-split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    padding: 32px 0 8px;
  }
  body.krea #creative-banner .hf-banner-copy,
  body.krea #creative-banner .hf-banner-reel { min-height: 0; }
  body.krea #creative-banner h2 { font-size: clamp(28px, 8vw, 40px); }
  body.krea .know-shot img { height: 220px; }
  body.krea .panel { padding: 20px 16px 48px; }
  body.krea .lib-bar { top: 64px; }
  body.krea .lib-grid { grid-template-columns: 1fr; }
  body.krea #library.is-list .lib-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  body.krea #library.is-list .lib-title,
  body.krea #library.is-list .lib-text,
  body.krea #library.is-list .lib-note,
  body.krea #library.is-list .lib-time,
  body.krea #library.is-list .lib-card .lib-actions {
    grid-column: 2;
    white-space: normal;
  }
  body.krea #library.is-list .lib-card .lib-actions { justify-self: start; }
  body.krea:has(#creatives:not([hidden])) {
    height: auto;
    overflow: visible;
  }
  body.krea:has(#creatives:not([hidden])) .shell,
  body.krea:has(#creatives:not([hidden])) .stage {
    height: auto;
    overflow: visible;
  }
  body.krea #creatives:not([hidden]) {
    height: auto;
    min-height: calc(100vh - 64px);
    overflow: visible;
  }
  body.krea #creatives.panel { padding: 0 0 24px; }
  body.krea .cw-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }
  body.krea .cw-tabs button {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: #23262a;
    color: #f7f7f8;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  body.krea .cw-tabs button[aria-selected="true"] {
    background: #d1fe17;
    color: #1a1a1a;
  }
  body.krea:has(#research:not([hidden])) {
    height: auto;
    overflow: visible;
  }
  body.krea:has(#research:not([hidden])) .shell,
  body.krea:has(#research:not([hidden])) .stage {
    height: auto;
    overflow: visible;
  }
  body.krea #research:not([hidden]) {
    height: auto;
    min-height: calc(100vh - 64px);
    overflow: visible;
  }
  body.krea #research .cw [data-rs-pane] { display: none; }
  body.krea #research .cw[data-pane="chat"] [data-rs-pane="chat"],
  body.krea #research .cw[data-pane="people"] [data-rs-pane="people"] {
    display: flex;
    min-height: 70vh;
  }
  body.krea .cw { display: block; }
  body.krea .cw-width { display: none; }
  body.krea .cw [data-cw-pane] { display: none; }
  body.krea .cw[data-pane="chat"] [data-cw-pane="chat"],
  body.krea .cw[data-pane="prompts"] [data-cw-pane="prompts"] {
    display: flex;
    min-height: 70vh;
  }
}

@media (max-width: 640px) {
  body.krea .grid,
  body.krea .products,
  body.krea #realty .objects { grid-template-columns: 1fr 1fr; }
}

body.krea .nav-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}
body.krea .nav-row .nav-item { flex: 1; width: 100%; min-width: 0; min-height: 44px; }
body.krea .nav-row:has(.nav-fold:not([hidden])) .nav-item { padding-right: 36px; }
body.krea .nav-fold[hidden] { display: none; }
body.krea .nav-fold {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  flex: none;
  width: 32px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: width 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease 180ms;
}
body.krea .nav-fold::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border-right: 2px solid #ececef;
  border-bottom: 2px solid #ececef;
  transform: rotate(45deg);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea .nav-fold[aria-expanded="false"]::before { transform: rotate(-45deg); }
body.krea .nav-projects { display: flex; flex-direction: column; gap: 0; height: auto; overflow: hidden; interpolate-size: allow-keywords; padding: 0 0 4px 28px; transition: height 380ms cubic-bezier(0.4, 0, 0.2, 1), padding 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease 180ms; }
body.krea .nav-projects[hidden] { display: none; }
body.krea .nav-project {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
body.krea .nav-project::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #6b6b70;
}
body.krea .nav-project span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea .nav-project.is-on::before { background: #d1fe17; }
body.krea .nav-project.is-on,
body.krea .nav-project.is-on:hover {
  background: transparent;
  color: #f4f4f5;
}
body.krea .nav-project:hover { background: rgba(255, 255, 255, 0.06); color: #f7f7f8; }
body.krea .nav-project.is-on span {
  flex: none;
  padding: 0 6px;
  border-radius: 6px;
  line-height: 20px;
  background: #2a2a2e;
  animation: menu-pulse 2.6s ease-in-out infinite;
}
body.krea .side .nav-item.is-on {
  animation: menu-pulse 2.6s ease-in-out infinite;
}
@keyframes menu-pulse {
  0%, 100% { background-color: #2a2a2e; }
  50% { background-color: #3c3c44; }
}
body.krea .account-mail {
  margin: 0 10px 4px;
  color: #898a8b;
  font-size: 14.4px;
  font-weight: 600;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  interpolate-size: allow-keywords;
  transition: height 380ms cubic-bezier(0.4, 0, 0.2, 1), margin 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease 180ms;
}
body.krea .cw-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow-x: hidden;
}
body.krea .cw-stage .cw-thread { padding-bottom: 36px; }
body.krea .cw-rail {
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateY(-50%);
  animation: cw-rise 300ms ease;
}
body.krea .cw-rail[hidden] { display: none; }
body.krea .cw-rail button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
body.krea .cw-rail button i {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border-radius: 50%;
  background: #5c5d62;
}
body.krea .cw-rail button.is-on i { background: #d1fe17; }
body.krea .cw-name[hidden] { display: none; }
body.krea .cw-name {
  gap: 0;
  border-bottom: 1px solid #2c2c31;
}
body.krea .cw-name input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
}
body.krea .cw-model-pick {
  position: relative;
  flex: none;
  height: 32px;
}
body.krea .cw-model-pick::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 1;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #f2f2ee;
  border-bottom: 1.5px solid #f2f2ee;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
body.krea .cw-model {
  width: auto;
  max-width: 148px;
  height: 32px;
  padding: 0 24px 0 10px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f2f2ee;
  font: inherit;
  font-size: 13px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
body.krea .cw-model-menu {
  position: absolute;
  left: 0;
  right: auto;
  width: 280px;
  bottom: calc(100% + 8px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  padding: 8px;
  overflow: auto;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  background: #1a1b1e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
body.krea .cw-ratio-pick { position: relative; }
body.krea .cw-ratio-menu { width: 180px; }
body.krea .cw-menu-title {
  margin: 4px 8px 8px;
  color: #9a9aa0;
  font-size: 13px;
}
body.krea .cw-model-search {
  width: 100%;
  height: 40px;
  margin-bottom: 4px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #2a2b30;
  color: #fff;
  font: inherit;
  font-size: 14px;
}
body.krea .cw-model-menu[hidden] { display: none; }
body.krea .cw-model-option {
  display: grid;
  grid-template-columns: 1fr 16px;
  align-items: center;
  column-gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c8c8ce;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
body.krea .cw-model-option small {
  grid-column: 1;
  color: #9a9aa0;
  font-size: 12px;
}
body.krea .cw-model-option::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  border: 1.5px solid #6d6e73;
  border-radius: 50%;
}
body.krea .cw-model-option[aria-selected="true"]::after {
  border-color: #d1fe17;
  background: #d1fe17;
  box-shadow: inset 0 0 0 3px #1a1b1e;
}
body.krea .cw-model-option[aria-selected="true"],
body.krea .cw-model-option:hover {
  background: #2a2b30;
  color: #fff;
}
body.krea .cw-plus {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #2a2b30;
  color: #f2f2ee;
  cursor: pointer;
}
body.krea .cw-plus svg { display: block; width: 18px; height: 18px; margin: 0 auto; }
body.krea .cw-mode {
  position: relative;
  flex: none;
  display: flex;
  height: 32px;
  padding: 2px;
  border-radius: 999px;
  background: #2a2b30;
}
body.krea .cw-mode-rail {
  position: absolute;
  top: 2px;
  left: 0;
  height: 28px;
  border-radius: 999px;
  background: #3a3b42;
  pointer-events: none;
}
body.krea .cw-mode.is-ready .cw-mode-rail {
  transition: transform 300ms ease, height 300ms ease, width 300ms ease;
}
body.krea .cw-mode button {
  position: relative;
  z-index: 1;
  flex: none;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9a9aa0;
  font: inherit;
  font-size: 13px;
  line-height: 28px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 300ms ease;
}
body.krea .cw-mode button[aria-pressed="true"] { background: transparent; color: #fff; }
body.krea .cw-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 8px 0;
}
body.krea .cw-files[hidden] { display: none; }
body.krea .cw-frame-chip {
  display: grid;
  flex: none;
  justify-items: center;
  width: 88px;
  gap: 4px;
}
body.krea .cw-thumb-tag {
  max-width: 88px;
  color: #9a9aa0;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}
body.krea .cw-setting-chip { width: 96px; }
body.krea .cw-setting-chip .cw-thumb-tag { max-width: 96px; }
body.krea .cw-thumb-tag.is-value { color: #f4f4f5; }
body.krea .cw-setting-thumb svg {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: #111;
}
body.krea .cw-thumb {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
}
body.krea .cw-thumb img,
body.krea .cw-thumb video {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  background: #111;
}
body.krea .cw-thumb button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #1a1b1e;
  box-shadow: 0 0 0 1px #3a3b42;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
body.krea .cw-thumb button[hidden] { display: none; }
body.krea .cw-sent-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
body.krea .cw-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 44px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  background: #2a2b30;
  color: #f2f2ee;
  font-size: 14px;
}
body.krea .cw-file-chip button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f2f2ee;
  font-size: 22px;
  cursor: pointer;
}
body.krea .cw-inline-tag { margin: 8px 0 0; color: #d1fe17; font-size: 13px; }
body.krea .cw-preview-frame {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 120px;
  margin-top: 8px;
  padding: 16px;
  border-radius: 12px;
  background: #121314;
  color: #c8c8ce;
  text-align: center;
  overflow-wrap: anywhere;
}
body.krea .cw-upsell {
  min-width: 0;
  max-width: min(520px, 100%);
  padding: 4px 4px 8px;
  overflow-wrap: anywhere;
}
body.krea .cw-upsell p { margin: 0 0 8px; color: #c8c8ce; font-size: 15px; line-height: 1.4; }
body.krea .cw-send {
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d1fe17;
  color: #1a1a1a;
  cursor: pointer;
}
body.krea .cw-send svg { display: block; width: 18px; height: 18px; margin: 0 auto; }
body.krea .cw-send:disabled {
  background: #2a2b30;
  color: #6d6e73;
  cursor: default;
}
body.krea .cw-card-media { position: relative; }
body.krea .cw-add {
  display: none;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: rgba(18, 19, 20, 0.82);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body.krea .cw-card.is-picked .cw-add { display: block; }
body.krea #cw-gallery .cw-add {
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  z-index: 3;
  width: max-content;
  min-width: 128px;
  padding: 0 16px;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #17180a;
}
body.krea #cw-gallery .cw-card.is-picked .cw-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.46);
  pointer-events: none;
}
body.krea #cw-gallery .cw-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 12, 14, 0.45);
  color: #fff;
  cursor: pointer;
}
body.krea #cw-gallery .cw-fav svg { width: 20px; height: 20px; }
body.krea #cw-gallery .cw-fav path { fill: none; stroke: currentColor; stroke-width: 1.6; }
body.krea #cw-gallery .cw-fav.is-on { color: #d1fe17; }
body.krea #cw-gallery .cw-fav.is-on path { fill: currentColor; }
body.krea .cw-genre-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
}
body.krea .cw-genre-fav svg { width: 18px; height: 18px; }
body.krea .cw-genre-fav path { fill: none; stroke: currentColor; stroke-width: 1.6; }
body.krea .cw-genre-fav.is-on {
  background: #23262a;
  color: #d1fe17;
}
body.krea .cw-genre-fav.is-on path { fill: currentColor; }
body.krea #creatives .cw-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
body.krea #creatives .cw-mark svg {
  width: 56px;
  height: 56px;
  flex: none;
}
body.krea #creatives .cw-mark h2 {
  margin: 0;
  max-width: none;
  color: #f4f4f5;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: none;
}
body.krea #creatives .ms-hint em {
  color: #d1fe17;
  font-style: normal;
  font-weight: 700;
}
body.krea .cw-add[hidden] { display: none; }
body.krea .cw-add:disabled {
  background: #d1fe17;
  color: #1a1a1a;
  cursor: default;
}
body.krea:has(#research:not([hidden])) {
  height: 100vh;
  overflow: hidden;
}
body.krea:has(#research:not([hidden])) .shell,
body.krea:has(#research:not([hidden])) .stage {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
body.krea #research:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-top: 0;
}
body.krea .rs-gallery-note {
  margin: 8px 16px 0;
  color: #9a9aa0;
  font-size: 12px;
  line-height: 1.4;
}
body.krea .rs-stage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 20px;
}
body.krea .rs-poster {
  position: relative;
  display: block;
  width: 132px;
  height: 188px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #121314;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
  color: #f4f4f5;
  text-align: left;
  cursor: pointer;
}
body.krea .rs-poster.is-hero {
  height: 220px;
  box-shadow: 0 0 0 1px #d1fe17, 0 18px 40px rgba(209, 254, 23, 0.16);
}
body.krea .rs-poster.is-still { cursor: default; }
body.krea .hf-intro { padding-top: 28px; }
body.krea .hf-intro .era-box {
  width: min(720px, 100%);
  margin: 28px auto 0;
}
body.krea #library .hf-intro,
body.krea #makety .hf-intro { margin-bottom: 28px; }
body.krea .rs-motion,
body.krea .rs-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  pointer-events: none;
}
body.krea .rs-onboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: left;
}
body.krea .rs-onboard article {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  border-radius: 14px;
  background: #121314;
}
body.krea .rs-onboard div {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 32px 12px 12px;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.92), transparent);
}
body.krea .rs-onboard b {
  display: block;
  margin-bottom: 4px;
  color: #d1fe17;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
body.krea .rs-onboard strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 15px;
}
body.krea .rs-onboard p {
  margin: 0;
  color: #e4e4e7;
  font-size: 13px;
  line-height: 1.35;
}
body.krea .rs-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 36px 10px 10px;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.9), transparent);
}
body.krea .rs-poster span { display: block; }
body.krea .rs-poster strong,
body.krea .rs-poster em {
  display: block;
  font-style: normal;
}
body.krea .rs-poster strong {
  font-size: 13px;
  line-height: 1.25;
}
body.krea .rs-poster em {
  margin-top: 4px;
  color: #c8c8ce;
  font-size: 12px;
  line-height: 1.3;
}
body.krea .rs-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  width: calc(100% - 16px);
  margin: 0 8px 8px;
  padding: 12px;
  border: 0;
  border-radius: 16px;
  background: #1a1b1e;
  box-shadow: inset 0 0 0 1px #2c2c31;
  color: #f4f4f5;
  text-align: left;
  cursor: pointer;
}
body.krea #rs-gallery > .rs-card:first-child { margin-top: 2px; }
body.krea .rs-card.is-on { box-shadow: inset 0 0 0 2px #d1fe17; }
body.krea .rs-plate {
  position: relative;
  display: block;
  min-height: 96px;
  overflow: hidden;
  padding: 0;
  border-radius: 12px;
  background: #121314;
}
body.krea .rs-copy { min-width: 0; padding-top: 4px; }
body.krea .rs-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}
body.krea .rs-card em {
  display: block;
  margin-top: 4px;
  color: #c8c8ce;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}
body.krea .rs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
body.krea .rs-tags i {
  padding: 2px 8px;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}
body.krea .rs-books {
  display: block;
  margin-top: 8px;
  color: #9a9aa0;
  font-size: 12px;
  line-height: 1.3;
}
body.krea .rs-card .cw-add {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: none;
  width: auto;
  margin: 0;
}
body.krea .rs-card.is-picked { padding-bottom: 64px; }
body.krea .rs-card.is-picked .cw-add { display: grid; place-items: center; }
body.krea .rs-card .cw-add[hidden] { display: none; }
@media (max-width: 900px) {
  body.krea .rs-poster { width: 96px; height: 140px; }
  body.krea .rs-poster.is-hero { height: 164px; }
  body.krea .rs-onboard { grid-template-columns: 1fr; }
  body.krea .rs-onboard article { min-height: 112px; }
}
body.krea .cw-msg,
body.krea .cw-thread .cw-use-tag { animation: cw-rise 300ms ease; }
@keyframes cw-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
body.krea .auth-layer,
body.krea .models-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
}
body.krea .auth-layer[hidden],
body.krea .models-layer[hidden] { display: none; }
body.krea .auth-card,
body.krea .models-card {
  position: relative;
  width: min(480px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  padding: 24px;
  border: 1px solid #2c2c31;
  border-radius: 22px;
  background: #1a1b1e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
body.krea .models-card { width: min(640px, 100%); }
body.krea .auth-card {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(280px, 1fr);
  width: min(920px, calc(100vw - 48px));
  max-height: min(640px, calc(100vh - 48px));
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #141416;
}
body.krea .auth-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 36px 32px 22px;
  overflow: auto;
}
body.krea .auth-card h2,
body.krea .models-card h2 { margin: 0 0 16px; font-size: 24px; }
body.krea .auth-card h2 {
  margin: 8px 0 26px;
  text-align: center;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
body.krea .auth-back {
  align-self: flex-start;
  min-height: 32px;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c8c8ce;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .auth-back::before { content: "‹ "; }
body.krea .auth-step { display: flex; flex-direction: column; }
body.krea .auth-step[hidden] { display: none; }
body.krea .auth-providers { display: flex; flex-direction: column; gap: 10px; }
body.krea .auth-provider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
}
body.krea .auth-provider svg { width: 18px; height: 18px; flex: 0 0 auto; }
body.krea .auth-last {
  position: absolute;
  top: -9px;
  right: 16px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #3b82f6;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}
body.krea .auth-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: #8d8d95;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.krea .auth-or::before,
body.krea .auth-or::after {
  content: "";
  height: 1px;
  background: #3a3a40;
}
body.krea .auth-shown {
  margin: 0 0 12px;
  color: #c8c8ce;
  font-size: 14px;
  text-align: center;
}
body.krea .auth-switch {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9ec0ff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .auth-legal {
  margin: 18px 0 0;
  color: #8d8d95;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
body.krea .auth-art {
  position: relative;
  min-height: 100%;
  background: #0d0d0f;
}
body.krea .auth-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.krea .auth-card .auth-x {
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.45);
}
@media (max-width: 860px) {
  body.krea .auth-card { grid-template-columns: 1fr; }
  body.krea .auth-art { min-height: 180px; }
}
body.krea .auth-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
body.krea .auth-card label { display: block; margin: 0; color: #c8c8ce; font-size: 14px; }
body.krea .auth-card input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #2c2c31;
  border-radius: 14px;
  background: #1d1e22;
  color: #fff;
  font: inherit;
  font-size: 16px;
}
body.krea .auth-card input::placeholder { color: #8d8d95; }
body.krea .auth-continue {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 0;
  border-radius: 14px;
  background: #2f6bff;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
}
body.krea .auth-continue:disabled { opacity: 0.6; cursor: default; }
body.krea .auth-error { margin: 12px 0 0; color: #ff8d7a; font-size: 14px; text-align: center; }
body.krea .auth-card .btn-primary { width: 100%; min-height: 44px; background: #d1fe17; color: #1a1a1a; }
body.krea .models-cap { margin: 0 0 12px; color: #c8c8ce; font-size: 14px; }
body.krea #models-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.krea #models-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 8px 8px 8px 12px;
  border-radius: 12px;
  background: #121314;
}
body.krea #models-list strong { display: block; font-size: 15px; }
body.krea #models-list p { margin: 4px 0 0; color: #898a8b; font-size: 13px; }
body.krea .btn-line {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d1fe17;
  border-radius: 10px;
  background: transparent;
  color: #d1fe17;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea #models-list .btn-ghost { flex: none; min-height: 44px; }
body.krea .btn-line:disabled,
body.krea #models-list .btn:disabled { opacity: 0.4; cursor: default; }
body.krea:has(#realty:not([hidden])),
body.krea:has(#realty:not([hidden])) .shell,
body.krea:has(#realty:not([hidden])) .stage {
  height: auto;
  min-height: 0;
  overflow: visible;
}
body.krea.is-realty-open { overflow: hidden; }
body.krea #realty {
  display: block;
  height: auto;
  overflow: visible;
  padding: 28px 28px 64px;
  background: transparent;
  color: #f4f4f5;
  font-family: Inter, sans-serif;
}
body.krea #realty h3,
body.krea #realty strong { font-family: Inter, sans-serif; }
body.krea .realty-head { margin: 0 0 16px; }
body.krea .realty-lead {
  margin: 8px 0 0;
  max-width: 640px;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 1.4;
}
body.krea .realty-tools {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  margin: 0 0 24px;
  padding: 8px 0 12px;
  background: #0f1113;
}
body.krea .realty-search { display: block; }
body.krea .realty-search input {
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: 1px solid #2c2c31;
  border-radius: 12px;
  background: #121314;
  color: #f4f4f5;
  font: inherit;
  font-size: 16px;
}
body.krea .realty-search input::placeholder { color: #9a9aa0; }
body.krea .realty-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
body.krea .realty-chips button {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #2a2b30;
  color: #f4f4f5;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
body.krea .realty-chips button.is-on { box-shadow: inset 0 0 0 2px #d1fe17; }
body.krea .realty-empty { margin: 8px 0 24px; color: #9a9aa0; font-size: 16px; }
body.krea .realty-empty[hidden],
body.krea .realty-group[hidden],
body.krea .realty-card[hidden],
body.krea .realty-layer[hidden] { display: none; }
body.krea .realty-groups { display: grid; gap: 32px; }
body.krea .realty-group { display: grid; gap: 12px; min-width: 0; }
body.krea .realty-group h3 {
  margin: 0;
  color: #f4f4f5;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
body.krea .realty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
body.krea .realty-card {
  display: grid;
  align-content: start;
  min-width: 0;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1b1e;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea .realty-card.is-on { box-shadow: inset 0 0 0 2px #d1fe17; }
body.krea .realty-shot { display: block; }
body.krea .realty-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
body.krea .realty-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px 16px 16px;
}
body.krea .realty-tags { display: flex; flex-wrap: wrap; gap: 8px; }
body.krea .realty-tag {
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 12px;
  line-height: 20px;
}
body.krea .realty-tag.is-busy { color: #9a9aa0; }
body.krea .realty-tag.is-sale { background: #f4f4f5; color: #1a1a1a; }
body.krea .realty-copy strong {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  color: #f4f4f5;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.krea .realty-note { margin: 0; color: #9a9aa0; font-size: 16px; line-height: 1.4; }
body.krea .realty-copy .btn { justify-self: start; min-height: 44px; }
body.krea .realty-know {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 32px;
  padding: 16px;
  border: 1px solid #2c2c31;
  border-radius: 16px;
  background: #1a1b1e;
}
body.krea .realty-know-shot { display: block; min-width: 0; }
body.krea .realty-know-shot img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
}
body.krea .realty-know-copy { display: grid; gap: 8px; min-width: 0; }
body.krea .realty-know-copy h3 { margin: 0; font-size: 18px; font-weight: 600; }
body.krea .realty-know-copy p { margin: 0; color: #c8c8ce; font-size: 16px; line-height: 1.45; }
body.krea .realty-know-copy .btn { justify-self: start; min-height: 44px; }
body.krea #realty .realty-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
}
body.krea .realty-shade {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.56);
  cursor: pointer;
}
body.krea #realty form.pay.realty-sheet {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 20px 20px 32px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: #1a1b1e;
  color: #f4f4f5;
}
body.krea #realty form.pay .pay-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-height: 420px;
}
body.krea #realty .pay-head { position: relative; }
body.krea #realty .realty-sheet-tools { display: flex; gap: 8px; }
body.krea #realty .ip-btn,
body.krea #realty .realty-x {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #2a2b30;
  color: #f4f4f5;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
body.krea #realty .ip-card { position: static; box-shadow: none; }
body.krea #realty form.pay h3 { margin: 0; color: #f4f4f5; font-size: 24px; font-weight: 600; line-height: 1.2; }
body.krea #realty form.pay .lead { margin: 0; color: #9a9aa0; font-size: 16px; line-height: 1.4; }
body.krea #realty form.pay label { color: #f4f4f5; font-size: 16px; }
body.krea #realty form.pay input {
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid #2c2c31;
  border-radius: 12px;
  background: #121314;
  color: #f4f4f5;
}
body.krea #realty form.pay input:focus { outline: none; box-shadow: 0 0 0 1px #d1fe17; }
body.krea #realty form.pay input[readonly] { color: #c8c8ce; }
body.krea #realty .pay-ways button {
  background: #2a2b30;
  color: #f4f4f5;
  border-radius: 12px;
  font-size: 16px;
}
body.krea #realty .pay-ways button.is-on {
  background: #2a2b30;
  color: #f4f4f5;
  box-shadow: inset 0 0 0 2px #d1fe17;
}
body.krea #realty form.pay .btn-primary { align-self: flex-start; }
@media (max-width: 900px) {
  body.krea #realty { padding: 20px 16px 48px; }
  body.krea .realty-tools { top: 64px; }
  body.krea .realty-grid,
  body.krea .realty-know { grid-template-columns: 1fr; }
  body.krea .realty-know-shot img { height: 160px; }
  body.krea #realty form.pay.realty-sheet {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
  }
}
body.krea:has(#images:not([hidden])),
body.krea:has(#images:not([hidden])) .shell,
body.krea:has(#images:not([hidden])) .stage,
body.krea:has(#videos:not([hidden])),
body.krea:has(#videos:not([hidden])) .shell,
body.krea:has(#videos:not([hidden])) .stage {
  height: 100vh;
  overflow: hidden;
}
body.krea #videos {
  height: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
}
body.krea #videos[hidden] { display: none; }
body.krea #videos #vd-dock.cw-compose {
  background: var(--ds-dock-bg);
  border-color: var(--ds-line-soft);
  box-shadow: var(--ds-dock-shadow);
}
body.krea #videos .img-go { margin-left: auto; }
body.krea #videos video.img-face { opacity: 0; background: transparent; }
body.krea #videos video.img-face.is-ready { opacity: 1; }
body.krea #vd-wall .img-masonry { gap: 12px; padding: 16px 16px 220px; }
body.krea #vd-wall .img-col { margin-top: 0; }
body.krea #vd-wall .img-tile { width: 100%; margin: 0; }
body.krea #videos .img-tile.is-on .img-card,
body.krea #videos .img-tile.is-picked .img-card {
  outline: none;
  box-shadow: inset 0 0 0 1.5px rgba(209, 254, 23, 0.9);
}
body.krea #vd-thread {
  position: absolute;
  left: 50%;
  bottom: 200px;
  z-index: 4;
  width: min(720px, calc(100% - 32px));
  max-height: 32vh;
  overflow: auto;
  transform: translateX(-50%);
}
body.krea #vd-thread[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  body.krea #videos video.img-face { opacity: 0; }
}
body.krea #images {
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #0b0b0c;
}
body.krea #images[hidden] { display: none; }
body.krea #images { position: relative; }
body.krea #images.is-building .img-wall { opacity: 0.22; }
body.krea #images.is-building #img-thread { opacity: 0; pointer-events: none; }
body.krea .img-build {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 24px;
  bottom: 200px;
  left: 24px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
body.krea .img-build[hidden] { display: none; }
body.krea .img-build-frame {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #070708;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.krea .img-build-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
body.krea .img-build-status {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: grid;
  gap: 4px;
  max-width: calc(100% - 96px);
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(11, 11, 12, 0.78);
}
body.krea .img-build-status b {
  color: #f4f4f5;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}
body.krea .img-build-status span {
  color: #d4d4d8;
  font-size: 16px;
  line-height: 1.3;
}
body.krea .img-build-delete {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(11, 11, 12, 0.88);
  color: #f4f4f5;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
body.krea .img-build-delete[hidden] { display: none; }
body.krea .img-build-delete svg { width: 20px; height: 20px; }
body.krea .img-sent {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  color: #f4f4f5;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
body.krea #images .img-dock.is-sent .img-sent,
body.krea #videos .img-dock.is-sent .img-sent,
body.krea #genprompt #gp-form.is-sent .img-sent {
  display: flex;
  animation: img-sent-pop 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.krea #genprompt #gp-form.is-sent #gp-note,
body.krea #genprompt #gp-form.is-sent .cw-tools,
body.krea #genprompt #gp-form.is-sent #gp-files,
body.krea #images .img-dock.is-sent #img-draft,
body.krea #images .img-dock.is-sent .img-tools,
body.krea #images .img-dock.is-sent .img-files {
  max-height: 0;
  min-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
body.krea #images #img-draft,
body.krea #images .img-tools,
body.krea #images .img-files,
body.krea #genprompt #gp-note,
body.krea #genprompt #gp-form .cw-tools,
body.krea #genprompt #gp-files {
  transition: max-height 360ms ease, min-height 360ms ease, opacity 280ms ease, margin 360ms ease, padding 360ms ease;
}
@keyframes img-sent-pop {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
body.krea .img-spin {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #d1fe17;
  border-radius: 50%;
  animation: img-spin 800ms linear infinite;
}
@keyframes img-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.krea .img-spin { animation: none; }
}
body.krea .img-actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  gap: 8px;
}
body.krea .img-actions[hidden] { display: none; }
body.krea .img-actions .img-use { position: static; }
body.krea .img-actions.is-tools {
  left: 8px;
  right: 8px;
  bottom: 15%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--ds-duration, 180ms) var(--ds-ease, ease), transform var(--ds-duration, 180ms) var(--ds-ease, ease);
}
body.krea .img-tile.is-ready:hover .img-actions.is-tools,
body.krea .img-tile.is-ready:focus-within .img-actions.is-tools,
body.krea .img-tile.is-miss .img-actions.is-tools {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
body.krea .img-tile.is-ready:focus-within .img-actions.is-tools,
body.krea .img-tile:focus-within .img-use.ds-template-add {
  transition: none;
}
body.krea .img-tile.is-miss .img-actions.is-tools {
  top: 12px;
  bottom: auto;
}
body.krea .img-actions.is-tools .img-use.is-danger { margin-left: 14px; }
body.krea .img-actions.is-tools .img-use:focus-visible,
body.krea .img-use.ds-template-add:focus-visible {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea .img-actions.is-tools .img-use:disabled { opacity: 0.55; cursor: default; }
@media (pointer: coarse) {
  body.krea .img-tile.is-ready .img-actions.is-tools,
  body.krea .img-tile .img-use.ds-template-add {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  body.krea .img-tile .img-use.ds-template-add {
    transform: translate(-50%, -50%);
    visibility: visible;
  }
  body.krea .img-actions.is-tools .img-use { width: 44px; height: 44px; }
}
body.krea .img-actions.is-tools[hidden] { display: none; }
body.krea .img-actions.is-tools .img-use {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
}
body.krea .img-actions.is-tools .img-use svg {
  width: 18px;
  height: 18px;
}
body.krea .img-view {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0);
  transition: background 220ms var(--ds-ease, ease);
}
body.krea .img-view.is-on { background: rgba(0, 0, 0, 0.82); }
body.krea .img-view.is-plain {
  display: grid;
  place-items: center;
}
body.krea .img-view.is-plain .img-view-shot {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  max-width: min(86vw, 1200px);
  max-height: 86vh;
  object-fit: contain;
}
body.krea .img-view-shot {
  position: fixed;
  z-index: 81;
  margin: 0;
  border-radius: 16px;
  background: #0b0b0c;
  transition: left 220ms var(--ds-ease, ease), top 220ms var(--ds-ease, ease), width 220ms var(--ds-ease, ease), height 220ms var(--ds-ease, ease), border-radius 220ms var(--ds-ease, ease);
}
body.krea .img-view-x {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 82;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 19, 20, 0.88);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms var(--ds-ease, ease);
}
body.krea .img-view.is-on .img-view-x { opacity: 1; }
body.krea .img-view-x svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
  body.krea .img-view,
  body.krea .img-view-shot,
  body.krea .img-view-x,
  body.krea .img-actions.is-tools,
  body.krea .img-use.ds-template-add { transition: none; }
  body.krea #images .img-tile.ds-template-card:active .img-use.ds-template-add {
    transform: translate(-50%, -50%);
  }
}
body.krea #images::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--ds-z-fade);
  height: var(--ds-fade-height);
  pointer-events: none;
  background: var(--ds-fade);
}
@media (max-width: 900px) {
  body.krea #images::after { height: var(--ds-fade-height-narrow); }
}
body.krea .img-wall {
  position: absolute;
  inset: 0;
  overflow: auto;
  cursor: default;
  touch-action: pan-y;
}
body.krea.is-side-anim #images .img-wall { overflow-x: hidden; }
body.krea .img-masonry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 220px;
}
body.krea .img-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.krea .img-wall.is-drag { cursor: default; }
body.krea .img-tile.is-on .img-card { outline: 2px solid #d1fe17; outline-offset: 0; }
body.krea #images .img-tile.is-on .img-card {
  outline: none;
  box-shadow: inset 0 0 0 1.5px rgba(209, 254, 23, 0.9);
}
body.krea #images .img-tile.is-on:focus-visible .img-card {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea #images .img-chosen {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: var(--ds-radius-full, 999px);
  background: rgba(12, 12, 14, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ds-duration, 180ms) var(--ds-ease, ease);
}
body.krea #images .img-chosen { display: none; }
body.krea #images .img-chosen svg { width: 14px; height: 14px; color: #d1fe17; flex: none; }
body.krea .img-template-shot {
  width: 88px;
  height: auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: #121314;
  cursor: pointer;
}
body.krea .img-template-pop {
  display: grid;
  grid-template-columns: repeat(5, 88px);
  gap: 8px;
  width: max-content;
  max-height: 320px;
  overflow: auto;
  padding: 8px;
}
body.krea .img-template-shot img { width: 100%; height: auto; object-fit: contain; display: block; }
body.krea .img-template-shot.is-on { border-color: #d1fe17; }
body.krea .img-template-tags { display: flex; flex-wrap: wrap; gap: 8px; }
body.krea .img-template-tag {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(209, 254, 23, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #d1fe17;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .img-template-tag.is-on { background: #2a2a2e; }
body.krea .img-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-bottom: 8px;
}
body.krea .img-template {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #1a1b1e;
  color: #f4f4f5;
  text-align: left;
  cursor: pointer;
}
body.krea .img-template strong { font-size: 16px; font-weight: 600; line-height: 1.3; }
body.krea .img-template span { color: #c8c8ce; font-size: 14px; line-height: 1.4; }
body.krea .img-template em { color: #9a9aa0; font-size: 12px; font-style: normal; }
body.krea .img-template.is-on { border: 2px solid #d1fe17; }
@media (max-width: 900px) {
  body.krea .img-template-grid { grid-template-columns: 1fr; }
  body.krea .img-templates { left: 8px; right: 8px; top: 8px; bottom: 200px; }
}
body.krea .img-tile {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  break-inside: avoid;
  background: transparent;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body.krea .img-tile:focus { outline: none; }
body.krea .img-tile:focus-visible .img-card { outline: 2px solid #d1fe17; outline-offset: 0; }
body.krea .img-use {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(18, 19, 20, 0.88);
  color: #f4f4f5;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
body.krea .img-use[hidden],
body.krea .img-actions.is-tools .img-use[hidden] { display: none; }
body.krea #images .img-files { flex-wrap: wrap; align-items: flex-start; }
body.krea #images .img-txt {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px 28px 8px 10px;
  border: 0;
  border-radius: 12px;
  background: #1a1b1e;
  color: #f4f4f5;
  text-align: left;
  cursor: text;
}
body.krea #images .img-txt strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
body.krea #images .img-txt-body,
body.krea #images .img-txt textarea {
  margin: 0;
  max-height: 140px;
  overflow: auto;
  color: #d4d4d8;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
}
body.krea #images .img-txt textarea {
  width: 100%;
  min-height: 120px;
  max-height: 240px;
  padding: 0;
  border: 0;
  resize: vertical;
  background: transparent;
  color: #f4f4f5;
}
body.krea #images .img-txt .img-thumb-x { top: 4px; right: 4px; }
body.krea .img-use.ds-template-add {
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  min-width: 128px;
  padding: 0 16px;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #17180a;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  appearance: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms var(--ds-ease, ease), transform 80ms linear, background 160ms var(--ds-ease, ease), color 160ms var(--ds-ease, ease);
}
body.krea .img-use.ds-template-add > .img-use-label {
  display: inline-grid;
  justify-items: center;
}
body.krea .img-use.ds-template-add > .img-use-label::before {
  content: "Добавить";
  grid-area: 1 / 1;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
body.krea .img-use.ds-template-add > .img-use-label > span { grid-area: 1 / 1; }
body.krea #images .img-tile.ds-template-card {
  appearance: none;
  min-width: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
body.krea #images .img-tile.ds-template-card:hover .img-use.ds-template-add {
  background: #f4f4f5;
}
body.krea #images .img-tile.ds-template-card:active .img-use.ds-template-add {
  transform: translate(-50%, -50%) scale(0.98);
  background: #e7e7ea;
}
body.krea #images .img-tile.is-on .img-use.ds-template-add,
body.krea #images .img-tile.is-on.ds-template-card:hover .img-use.ds-template-add {
  background: #d1fe17;
  color: #17180a;
}
body.krea #images .img-tile.is-on.ds-template-card:active .img-use.ds-template-add {
  background: #c3ef12;
  color: #17180a;
  transform: translate(-50%, -50%) scale(0.98);
}
body.krea .img-use.ds-template-add svg { width: 18px; height: 18px; flex: none; }
body.krea .img-tile:hover .img-use.ds-template-add,
body.krea .img-tile:focus-within .img-use.ds-template-add,
body.krea .img-tile:focus-visible .img-use.ds-template-add,
body.krea .img-tile.is-picked .img-use.ds-template-add,
body.krea .img-tile.is-on .img-use.ds-template-add {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.krea .img-tile.is-picked:hover .img-card { filter: none; }
body.krea .img-plan {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  max-height: 46%;
  overflow: auto;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(18, 19, 20, 0.88);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}
body.krea .img-plan summary { cursor: pointer; }
body.krea .img-plan p { margin: 8px 0 0; }
body.krea .img-tile.is-miss .img-plan { bottom: 78px; }
body.krea .img-miss-note {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(18, 19, 20, 0.88);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}
body.krea .img-miss-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: rgba(18, 19, 20, 0.88);
  color: #f4f4f5;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
body.krea .img-miss-x svg { width: 20px; height: 20px; }
body.krea .img-tile.is-miss:hover .img-miss-x,
body.krea .img-tile.is-miss.is-open .img-miss-x,
body.krea .img-tile.is-miss:focus-within .img-miss-x {
  opacity: 1;
  pointer-events: auto;
}
body.krea .img-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #161618;
  transition: filter var(--ds-duration, 180ms) var(--ds-ease, ease);
}
body.krea .img-tile:hover .img-card { filter: brightness(1.06); }
body.krea #images .img-tile.ds-template-card:hover .img-card,
body.krea #images .img-tile.ds-template-card.is-on .img-card { filter: none; }
body.krea #images .img-tile.ds-template-card .img-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 180ms var(--ds-ease, ease);
}
body.krea #images .img-tile.ds-template-card:hover:not(.is-on) .img-card::after,
body.krea #images .img-tile.ds-template-card:focus-visible:not(.is-on) .img-card::after,
body.krea #images .img-tile.ds-template-card.is-on .img-card::after {
  background: rgba(0, 0, 0, 0.26);
}
body.krea .img-view-note {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 82;
  margin: 0;
  color: #fff;
  font-size: 16px;
  transform: translate(-50%, -50%);
}
body.krea .img-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
body.krea .img-reveal video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.krea .img-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
body.krea .img-reveal video {
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea .img-globe .img-tile:hover { z-index: auto; }
body.krea .img-tile:hover:not(.is-shrunk) .img-reveal {
  transform: translateX(0);
  box-shadow: 2px 0 rgba(255, 255, 255, 0.9), 0 0 18px 2px rgba(255, 255, 255, 0.4);
  animation: img-reveal-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body.krea .img-tile:hover:not(.is-shrunk) .img-reveal video {
  transform: translateX(0);
  animation: img-reveal-img 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes img-reveal-in { from { transform: translateX(-100%); } }
@keyframes img-reveal-img { from { transform: translateX(100%); } }
body.krea .img-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 4px;
  padding: 48px 16px 14px;
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.28) 55%, transparent);
  pointer-events: none;
}
body.krea .img-cap span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
}
body.krea .img-cap strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.krea .img-batch {
  position: absolute;
  left: 50%;
  bottom: 148px;
  z-index: 4;
  display: grid;
  gap: 8px;
  width: min(920px, calc(100% - 32px));
  padding: 12px;
  border-radius: 16px;
  background: rgba(26, 27, 30, 0.92);
  transform: translateX(-50%);
}
body.krea .img-batch[hidden] { display: none; }
body.krea .img-batch-prompt,
body.krea .img-batch-note { margin: 0; color: #f4f4f5; font-size: 16px; line-height: 1.4; }
body.krea .img-batch-note { color: #9a9aa0; }
body.krea .img-batch-row { display: flex; gap: 8px; overflow-x: auto; }
body.krea .img-batch-row span {
  flex: none;
  display: grid;
  place-items: center;
  width: 140px;
  height: 88px;
  padding: 8px;
  border-radius: 12px;
  background: #121314;
  color: #9a9aa0;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}
body.krea .img-dock {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 5;
  display: grid;
  gap: 8px;
  width: min(920px, calc(100% - 32px));
  margin: 0;
  padding: 10px 10px 10px 12px;
  border-radius: 28px;
  background: rgba(32, 32, 36, 0.92);
  transform: translateX(-50%);
}
body.krea .img-files { display: flex; gap: 8px; }
body.krea .img-files[hidden] { display: none; }
body.krea .img-thumb { position: relative; width: 56px; height: 56px; }
body.krea .img-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; }
body.krea .img-thumb.is-template { width: 72px; height: auto; }
body.krea .img-thumb.is-template img { width: 72px; height: auto; object-fit: contain; }
body.krea #images .img-thumb.is-template .ds-template-edit {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(18, 19, 20, 0.82);
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #images .img-thumb.is-template .ds-template-edit svg {
  width: 16px;
  height: 16px;
}
body.krea #images .img-thumb.is-template .ds-template-edit:hover,
body.krea #images .img-thumb.is-template .ds-template-edit:focus-visible {
  color: #fff;
  background: #2a2b30;
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea .img-thumb-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 14px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #images #img-dock .img-files {
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
  padding: 4px 2px 0;
  overflow: visible;
}
body.krea #images #img-dock .img-file {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: max-content;
  max-width: 140px;
}
body.krea #images #img-dock .img-thumb,
body.krea #images #img-dock .img-thumb.is-template {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ds-radius-md, 12px);
  background: #121314;
}
body.krea #images #img-dock .img-thumb img,
body.krea #images #img-dock .img-thumb.is-template img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  object-position: center;
  border-radius: var(--ds-radius-md, 12px);
  background: #121314;
}
body.krea #images #img-dock .img-file.is-media .img-thumb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  padding: 8px;
  box-sizing: border-box;
}
body.krea #images #img-dock .img-media-name,
body.krea #images #img-dock .img-media-file {
  max-width: 100%;
  overflow: hidden;
  color: #f4f4f5;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea #images #img-dock .img-media-file { color: #bdbdc2; }
body.krea #images #img-dock .img-file.is-template .img-thumb {
  width: 88px;
  height: 88px;
  overflow: hidden;
  background: #121314;
}
body.krea #images #img-dock .img-file.is-template .img-thumb img {
  width: 88px;
  height: 88px;
  max-width: none;
  object-fit: contain;
  object-position: center;
  background: #121314;
}
body.krea #images #img-dock .img-thumb-x {
  top: 4px;
  right: 4px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  background: rgba(12, 12, 14, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
body.krea #images #img-dock .img-thumb-x:focus-visible,
body.krea #images #img-dock .img-file-edit:focus-visible {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea #images #img-dock .img-file.is-template {
  align-items: center;
  width: 88px;
  max-width: 88px;
}
body.krea #images #img-dock .img-file.is-template:has(.img-template-editor) {
  width: 240px;
  max-width: 240px;
  align-items: flex-start;
}
body.krea #images #img-dock .img-file-edit {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
  transition: background 160ms var(--ds-ease, ease), color 160ms var(--ds-ease, ease), transform 80ms linear;
}
body.krea #images #img-dock .img-file-edit svg {
  width: 16px;
  height: 16px;
}
body.krea #images #img-dock .img-file-edit:hover,
body.krea #images #img-dock .img-file-edit:focus-visible {
  background: #3a3b40;
  color: #fff;
}
body.krea #images #img-dock .img-file-edit:active { transform: scale(0.98); }
body.krea #images #img-dock .img-template-editor {
  width: 240px;
}
body.krea #images #img-dock .img-template-editor textarea {
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  resize: vertical;
  background: #121314;
  color: #f4f4f5;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  body.krea #images .img-chosen,
  body.krea #images #img-dock.cw-compose { transition: none; }
}
body.krea #img-draft {
  width: 100%;
  min-height: 48px;
  max-height: 120px;
  padding: 6px 8px;
  border: 0;
  resize: none;
  background: transparent;
  color: #f4f4f5;
  font: inherit;
  font-size: var(--ds-text-field);
  line-height: var(--ds-leading-body);
}
body.krea #images #img-draft { max-height: 240px; }
body.krea #img-draft::placeholder { color: var(--ds-placeholder); }
body.krea .img-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.krea .img-plus,
body.krea .img-chip,
body.krea .img-step button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #2a2b30;
  color: #f4f4f5;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
body.krea .img-plus { width: 44px; padding: 0; border-radius: 22px; font-size: 22px; }
body.krea .img-chip[aria-pressed="true"],
body.krea .img-pop-row.is-on { box-shadow: inset 0 0 0 2px #d1fe17; }
body.krea .img-step { display: inline-flex; align-items: center; gap: 4px; }
body.krea .img-step b { min-width: 16px; color: #f4f4f5; font-size: 15px; text-align: center; }
body.krea .img-step button { width: 36px; min-height: 36px; padding: 0; border-radius: 10px; }
body.krea .img-model-wrap { margin-left: auto; }
body.krea .img-pop-wrap { position: relative; }
body.krea .img-pop {
  position: absolute;
  bottom: 48px;
  left: 0;
  z-index: 6;
  display: grid;
  min-width: 160px;
  padding: 6px;
  border-radius: 12px;
  background: #1a1b1e;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
body.krea .img-pop[hidden] { display: none; }
body.krea .img-pop-row {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f4f4f5;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
body.krea .img-go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #3a3a3e;
  color: #9a9aa0;
  cursor: pointer;
}
body.krea .img-go:not(:disabled) { background: #d1fe17; color: #1a1a1a; }
body.krea .img-go svg { width: 18px; height: 18px; }
body.krea .img-go:disabled { cursor: default; }
@media (max-width: 900px) {
  body.krea:has(#images:not([hidden])),
  body.krea:has(#images:not([hidden])) .shell,
  body.krea:has(#images:not([hidden])) .stage,
  body.krea:has(#videos:not([hidden])),
  body.krea:has(#videos:not([hidden])) .shell,
  body.krea:has(#videos:not([hidden])) .stage { height: auto; overflow: visible; }
  body.krea #images,
  body.krea #videos { height: calc(100vh - 64px); }
  body.krea .img-model-wrap { margin-left: 0; }
  body.krea .img-batch { bottom: 196px; }
}
body.krea .img-tile.is-picked .img-cap { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  body.krea .img-card,
  body.krea .img-reveal,
  body.krea .img-reveal video,
  body.krea .img-cap,
  body.krea .img-actions.is-tools,
  body.krea .img-use.ds-template-add,
  body.krea #images .img-tile.ds-template-card .img-card::after,
  body.krea #images #img-dock .img-file-edit { transition: none; animation: none; filter: none; }
}
body.krea #makety { padding: 0 0 64px; background: #0b0b0c; }
body.krea .maket-hero {
  margin: 0 0 32px;
  padding: 48px 32px 36px;
  background: linear-gradient(90deg, #f4f4f5 0%, #e4e4e7 46%, #3f3f46 100%);
}
body.krea .maket-hero-copy { display: grid; gap: 12px; max-width: 520px; }
body.krea #makety .maket-hero h2 {
  margin: 0;
  max-width: none;
  color: #141416;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
body.krea #makety .maket-lead { margin: 0; max-width: 460px; color: #3f3f46; font-size: 16px; line-height: 1.45; }
body.krea .maket-start {
  justify-self: start;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #141416;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
body.krea .maket-start:active { scale: 0.98; }
body.krea .maket-presets-head { padding: 0 28px; }
body.krea #makety .maket-presets-head h3 { margin: 0 0 16px; color: #f4f4f5; font-size: 18px; font-weight: 600; }
body.krea #makety .maket-tools,
body.krea #makety .maket-count,
body.krea #makety .maket-empty,
body.krea #makety .makety-grid { margin-left: 28px; margin-right: 28px; }
body.krea #makety .makety-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
body.krea #makety .maket {
  position: relative;
  height: auto;
  gap: 8px;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  transition: transform 0.15s;
}
body.krea #makety .maket:active { transform: scale(0.99); }
body.krea #makety .maket.is-on { outline: none; box-shadow: none; }
body.krea #makety .maket-shot,
body.krea #makety .maket-shot.is-live {
  height: 232px;
  aspect-ratio: auto;
  border-radius: 12px;
  background: #1a1b1e;
}
body.krea #makety .maket-foot {
  min-height: 0;
  padding: 0 2px;
  background: transparent;
}
body.krea #makety .maket-foot strong,
body.krea #makety .maket strong {
  min-height: 0;
  padding: 0;
  color: #f4f4f5;
  font-size: 16px;
  font-weight: 600;
}
body.krea #makety .maket-copy {
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.45);
}
body.krea #makety .maket:hover .maket-copy,
body.krea #makety .maket:focus-within .maket-copy { opacity: 1; }
@media (max-width: 1100px) {
  body.krea #makety .makety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.krea .maket-hero { padding: 28px 16px 24px; }
  body.krea .maket-presets-head,
  body.krea #makety .maket-tools,
  body.krea #makety .maket-count,
  body.krea #makety .maket-empty,
  body.krea #makety .makety-grid { margin-left: 16px; margin-right: 16px; }
  body.krea .maket-presets-head { padding: 0; }
  body.krea #makety .makety-grid { grid-template-columns: 1fr; }
  body.krea #makety .maket-copy { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.krea #makety .maket,
  body.krea .maket-start { transition: none; }
}
body.krea:has(#banana:not([hidden])),
body.krea:has(#banana:not([hidden])) .shell,
body.krea:has(#banana:not([hidden])) .stage {
  height: 100vh;
  overflow: hidden;
}
body.krea #banana {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  background: #101010;
}
body.krea #banana.has-chat { align-items: stretch; }
body.krea .nb-stage {
  width: min(768px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 0;
}
body.krea #banana.has-chat .nb-stage { height: 100%; justify-content: flex-end; }
body.krea .nb-thread { width: 100%; min-height: 0; }
body.krea #banana.has-chat .nb-thread { flex: 1; width: min(720px, calc(100% - 32px)); overflow: auto; padding: 8px 0 16px; }
body.krea .nb-turn { display: grid; justify-items: end; gap: 8px; margin: 0 0 28px; }
body.krea .nb-ask {
  max-width: min(520px, 86%);
  margin: 0;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
body.krea .nb-refs { display: flex; gap: 8px; }
body.krea .nb-refs img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
body.krea .nb-frame { width: min(100%, 560px); justify-self: stretch; }
body.krea .nb-frame img { display: block; width: 100%; height: auto; border-radius: 16px; }
body.krea .nb-frame.is-wait {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 16px;
  border-radius: 16px;
  background: #1a1b1e;
  color: #d4d4d8;
  font-size: 16px;
  text-align: center;
}
body.krea .nb-meta,
body.krea .nb-note { justify-self: start; margin: 0; color: #9a9aa0; font-size: 14px; }
body.krea .nb-title { display: flex; align-items: center; gap: 12px; }
body.krea .nb-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(#FFDDA2, #FFD400);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
body.krea .nb-mark svg { width: 26px; height: 26px; }
body.krea #banana h2 {
  margin: 0;
  max-width: none;
  color: #fff;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
body.krea .nb-form {
  position: relative;
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  background: rgba(38, 38, 40, 0.85);
}
body.krea #banana textarea,
body.krea #banana input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
  resize: none;
}
body.krea #banana textarea::placeholder,
body.krea #banana input::placeholder { color: #6b6b70; }
body.krea .nb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
body.krea .nb-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .nb-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #d1fe17; }
body.krea .nb-go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #3a3a3e;
  color: #9a9aa0;
  cursor: pointer;
}
body.krea .nb-go:not(:disabled) { background: #fff; color: #111; }
body.krea .nb-go:disabled { cursor: default; }
body.krea .nb-go svg { width: 18px; height: 18px; }
body.krea .nb-pop-wrap { position: relative; }
body.krea .nb-pop,
body.krea .nb-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 64px;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #1a1b1e;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
body.krea .nb-pop { left: auto; right: auto; width: max-content; min-width: 96px; max-height: 280px; overflow: auto; }
body.krea #nb-model-menu { left: 0; right: auto; width: min(340px, 78vw); max-height: 320px; overflow: auto; }
body.krea .nb-pop[hidden],
body.krea .nb-sheet[hidden],
body.krea .nb-files[hidden],
body.krea .nb-batch[hidden] { display: none; }
body.krea .nb-pop-row {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
body.krea .nb-pop-row strong { font-size: 15px; font-weight: 600; }
body.krea .nb-pop-row span { color: #9a9aa0; font-size: 13px; }
body.krea .nb-pop-row[aria-pressed="true"] { background: rgba(255, 255, 255, 0.08); }
body.krea #nb-size-wrap[hidden] { display: none; }
body.krea .nb-sheet p,
body.krea .nb-sheet strong { margin: 0; color: #f4f4f5; font-size: 16px; }
body.krea .nb-sheet strong { font-size: 18px; }
body.krea #banana .nb-sheet textarea,
body.krea #banana .nb-sheet input { background: #121214; }
body.krea .nb-files { display: flex; gap: 8px; flex-wrap: wrap; }
body.krea .nb-thumb { position: relative; width: 56px; height: 56px; }
body.krea .nb-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
body.krea .nb-thumb button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 12px;
  background: #111;
  color: #fff;
  cursor: pointer;
}
@media (max-width: 900px) {
  body.krea:has(#banana:not([hidden])),
  body.krea:has(#banana:not([hidden])) .shell,
  body.krea:has(#banana:not([hidden])) .stage { height: auto; overflow: visible; }
  body.krea #banana { height: calc(100vh - 64px); padding: 16px; }
  body.krea #banana h2 { font-size: 32px; }
}
body.krea:has(#seedance:not([hidden])),
body.krea:has(#seedance:not([hidden])) .shell,
body.krea:has(#seedance:not([hidden])) .stage {
  height: 100vh;
  overflow: hidden;
}
body.krea #seedance {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  background: #101010;
}
body.krea .sd-feed {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 16px;
  padding: 24px 24px 12px;
}
body.krea .sd-card { width: min(720px, 100%); margin: 0 auto; display: grid; gap: 8px; }
body.krea .sd-ask { margin: 0; color: #f4f4f5; font-size: 16px; }
body.krea .sd-cell {
  display: grid;
  place-items: center;
  min-height: 160px;
  border-radius: 16px;
  background: #1a1b1e;
  color: #d4d4d8;
  font-size: 16px;
}
body.krea .sd-note { margin: 0; color: #9a9aa0; font-size: 14px; }
body.krea .sd-dock {
  position: relative;
  width: min(920px, calc(100% - 48px));
  margin: 0 auto 24px;
  display: grid;
  gap: 8px;
  padding: 12px 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  background: #1a1b1e;
}
body.krea .sd-top { display: flex; align-items: flex-end; gap: 8px; }
body.krea .sd-tool {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 72px;
  min-height: 56px;
  padding: 4px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #d4d4d8;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
body.krea .sd-tool svg { width: 22px; height: 22px; }
body.krea .sd-tool.is-on { background: #2a2b30; color: #fff; }
body.krea .sd-split { width: 1px; height: 28px; margin: 0 4px 10px; background: rgba(255, 255, 255, 0.12); }
body.krea .sd-modes { display: flex; gap: 8px; margin-left: auto; }
body.krea .sd-mode {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: #d4d4d8;
  cursor: pointer;
}
body.krea .sd-mode svg { width: 18px; height: 18px; }
body.krea .sd-mode.is-on { background: #2a2b30; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
body.krea #seedance textarea {
  width: 100%;
  min-height: 52px;
  max-height: 120px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: #f4f4f5;
  font: inherit;
  font-size: 16px;
  resize: none;
}
body.krea #seedance textarea::placeholder { color: #6b6b70; }
body.krea .sd-bottom { display: flex; align-items: center; gap: 6px; }
body.krea .sd-plus,
body.krea .sd-meta,
body.krea .sd-count button {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c8c8cc;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .sd-plus { font-size: 22px; }
body.krea .sd-count { display: inline-flex; align-items: center; color: #c8c8cc; }
body.krea .sd-count b { min-width: 16px; text-align: center; font-weight: 600; }
body.krea .sd-model { margin-left: auto; }
body.krea .sd-go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea .sd-go:not(:disabled) { background: #fff; color: #111; }
body.krea .sd-go:disabled { cursor: default; }
body.krea .sd-go svg { width: 16px; height: 16px; }
body.krea .sd-panel {
  position: absolute;
  left: 50%;
  bottom: 168px;
  z-index: 5;
  width: min(980px, calc(100% - 48px));
  max-height: min(520px, calc(100% - 196px));
  overflow: auto;
  transform: translateX(-50%);
  padding: 12px;
  border-radius: 20px;
  background: #242428;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
body.krea .sd-panel[hidden],
body.krea .sd-menu[hidden],
body.krea .sd-at[hidden],
body.krea .sd-tool[hidden],
body.krea .sd-meta[hidden] { display: none; }
body.krea .sd-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
body.krea .sd-panel-head strong { margin-right: auto; color: #fff; font-size: 18px; }
body.krea .sd-reset,
body.krea .sd-x,
body.krea .sd-use,
body.krea .sd-maker button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f4f4f5;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .sd-panel-grid { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
body.krea .sd-rail { display: grid; align-content: start; gap: 4px; }
body.krea .sd-rail-btn {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #d4d4d8;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body.krea .sd-rail-btn strong { font-size: 15px; color: #fff; }
body.krea .sd-rail-btn span { font-size: 12px; color: #9a9aa0; }
body.krea .sd-rail-btn.is-on { background: #323238; }
body.krea .sd-rail-note,
body.krea .sd-empty,
body.krea .sd-3d p,
body.krea .sd-maker p { margin: 0; color: #d4d4d8; font-size: 14px; }
body.krea .sd-search,
body.krea .sd-maker input,
body.krea .sd-3d input {
  width: 100%;
  min-height: 40px;
  margin: 0 0 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #1a1b1e;
  color: #fff;
  font: inherit;
  font-size: 15px;
}
body.krea .sd-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.krea .sd-tile {
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f4f4f5;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body.krea .sd-tile-face {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #1a1b1e;
  color: #9a9aa0;
}
body.krea .sd-tile.is-on .sd-tile-face { box-shadow: inset 0 0 0 2px #d1fe17; }
body.krea .sd-tile-face img,
body.krea .sd-tile-face video { width: 100%; height: 100%; object-fit: cover; }
body.krea .sd-tile-name { font-size: 14px; }
body.krea .sd-cube { font-size: 28px; }
body.krea .sd-dots { display: flex; gap: 6px; }
body.krea .sd-dots i { width: 28px; height: 28px; border-radius: 14px; }
body.krea .sd-slider { display: grid; gap: 8px; margin-bottom: 12px; color: #f4f4f5; font-size: 14px; }
body.krea .sd-slider input { width: 100%; }
body.krea .sd-maker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.krea .sd-maker input { width: auto; flex: 1; margin: 0; }
body.krea .sd-3d { display: grid; gap: 8px; }
body.krea .sd-menu,
body.krea .sd-at {
  position: absolute;
  bottom: 52px;
  z-index: 6;
  display: grid;
  min-width: 120px;
  padding: 6px;
  border-radius: 12px;
  background: #2a2b30;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
body.krea .sd-at { left: 16px; right: 16px; }
body.krea .sd-menu-row {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 900px) {
  body.krea:has(#seedance:not([hidden])),
  body.krea:has(#seedance:not([hidden])) .shell,
  body.krea:has(#seedance:not([hidden])) .stage { height: auto; overflow: visible; }
  body.krea #seedance { height: calc(100vh - 64px); }
  body.krea .sd-dock { width: calc(100% - 24px); }
  body.krea .sd-top { overflow-x: auto; }
  body.krea .sd-panel { left: 12px; right: 12px; width: auto; transform: none; }
  body.krea .sd-panel-grid,
  body.krea .sd-tile-grid { grid-template-columns: 1fr; }
  body.krea .sd-bottom { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  body.krea .cw-msg,
  body.krea #creatives .cw-turn,
  body.krea .cw-thread .cw-use-tag,
  body.krea .cw-rail,
  body.krea .cw-mode-rail,
  body.krea .nav-fold::before { animation: none; transition: none; }
}
body.krea:has(#genprompt:not([hidden])),
body.krea:has(#genprompt:not([hidden])) .shell,
body.krea:has(#genprompt:not([hidden])) .stage {
  height: 100vh;
  overflow: hidden;
}
body.krea #genprompt {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 24px;
}
body.krea .gp-stage { width: min(640px, 100%); display: grid; justify-items: center; gap: 16px; }
body.krea .gp-title { display: grid; gap: 8px; text-align: center; }
body.krea #genprompt h2 {
  margin: 0;
  max-width: none;
  color: #fff;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
body.krea .gp-title p { margin: 0; color: #9a9aa0; font-size: 16px; }
body.krea .gp-form {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  background: #1a1b1e;
}
body.krea .gp-drop {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 160px;
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: transparent;
  color: #d4d4d8;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
body.krea .gp-drop.is-over { box-shadow: inset 0 0 0 2px #d1fe17; }
body.krea .gp-preview:empty { display: none; }
body.krea .gp-preview img,
body.krea .gp-preview video {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
}
body.krea .gp-clear {
  justify-self: start;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #d4d4d8;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .gp-clear[hidden] { display: none; }
body.krea #genprompt textarea {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
  resize: none;
}
body.krea #genprompt textarea::placeholder { color: #6b6b70; }
body.krea .gp-go {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #3a3a3e;
  color: #9a9aa0;
  cursor: pointer;
}
body.krea .gp-go:not(:disabled) { background: #fff; color: #111; }
body.krea .gp-go:disabled { cursor: default; }
body.krea .gp-go svg { width: 18px; height: 18px; }
body.krea .gp-result { width: 100%; }
body.krea .gp-result[hidden] { display: none; }
body.krea .gp-card { display: grid; gap: 8px; }
body.krea .gp-ask { margin: 0; color: #f4f4f5; font-size: 16px; }
body.krea .gp-cell {
  display: grid;
  place-items: center;
  min-height: 88px;
  border-radius: 16px;
  background: #242428;
  color: #d4d4d8;
  font-size: 16px;
}
body.krea .gp-line { margin: 0; color: #9a9aa0; font-size: 14px; }
@media (max-width: 900px) {
  body.krea:has(#genprompt:not([hidden])),
  body.krea:has(#genprompt:not([hidden])) .shell,
  body.krea:has(#genprompt:not([hidden])) .stage { height: auto; overflow: visible; }
  body.krea #genprompt { height: calc(100vh - 64px); padding: 16px; }
  body.krea #genprompt h2 { font-size: 32px; }
}
body.krea:has(#library:not([hidden])),
body.krea:has(#library:not([hidden])) .shell,
body.krea:has(#library:not([hidden])) .stage {
  height: auto;
  min-height: 0;
  overflow: visible;
}
body.krea .juice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 128px;
  margin: 12px 12px 0;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 46% 140% at 50% -30%, rgba(255, 255, 255, 0.16), transparent 62%),
    #0c0c0e;
  overflow: hidden;
}
body.krea .juice-copy {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 0;
}
body.krea .juice-copy b {
  color: #d1fe17;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
body.krea .juice-fan {
  position: relative;
  height: 112px;
}
body.krea .juice-fan img {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 68px;
  height: 92px;
  object-fit: cover;
  border: 2px solid #f4f4f5;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}
body.krea .juice-fan img:nth-child(1) { transform: translateX(-132px) rotate(-18deg); }
body.krea .juice-fan img:nth-child(2) { transform: translateX(-72px) rotate(-9deg); }
body.krea .juice-fan img:nth-child(3) { transform: translateX(-34px) rotate(0deg); z-index: 1; }
body.krea .juice-fan img:nth-child(4) { transform: translateX(8px) rotate(9deg); }
body.krea .juice-fan img:nth-child(5) { transform: translateX(64px) rotate(16deg); }
body.krea .juice-go {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #d1fe17;
  color: #1a1a1a;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
body.krea .juice-go:active { scale: 0.98; }
body.krea .juice-stage {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 8px 8px 0;
  text-align: center;
}
body.krea .juice-frames {
  position: relative;
  width: 320px;
  height: 112px;
}
body.krea .juice-frames img {
  position: absolute;
  top: 12px;
  width: 132px;
  height: 88px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
body.krea .juice-frames img:nth-child(1) { left: 0; transform: rotate(-8deg); }
body.krea .juice-frames img:nth-child(2) { left: 94px; z-index: 1; width: 96px; height: 96px; border-radius: 48px; }
body.krea .juice-frames img:nth-child(3) { right: 0; transform: rotate(8deg); }
body.krea .juice-stage h2 {
  display: grid;
  margin: 0;
  max-width: none;
  color: #fff;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
body.krea .juice-stage h2 span { color: #d1fe17; }
body.krea .juice-stage p {
  margin: 0;
  max-width: 560px;
  color: #9a9aa0;
  font-size: 16px;
  line-height: 1.45;
}
body.krea #genprompt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: auto;
  padding: 12px 16px 24px;
}
body.krea #genprompt .juice { margin: 0; }
body.krea #genprompt .gp-stage { margin: 20px auto auto; }
body.krea .maket-hero {
  margin: 0 0 24px;
  padding: 16px 16px 8px;
  background: #0b0b0c;
}
body.krea #makety .juice { margin: 0; }
body.krea #makety .juice-stage h2,
body.krea #makety .juice-stage h2 span { color: #fff; }
body.krea #makety .juice-stage h2 span { color: #d1fe17; }
@media (max-width: 900px) {
  body.krea .juice { grid-template-columns: 1fr; min-height: 0; }
  body.krea .juice-fan { display: none; }
  body.krea .juice-go { justify-self: start; }
}
body.krea.is-side-anim .cw-compose,
body.krea.is-side-anim .img-dock,
body.krea.is-side-anim .nb-form,
body.krea.is-side-anim .sd-dock,
body.krea.is-side-anim .gp-form,
body.krea.is-side-anim .era-box { animation-play-state: paused; }
body.krea .cw-compose,
body.krea .img-dock,
body.krea .nb-form,
body.krea .sd-dock,
body.krea .gp-form,
body.krea .era-box {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: #131416;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}
body.krea .era-box { animation: input-sway 7.2s ease-in-out infinite; }
body.krea .cw-compose {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 52px;
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 8px;
  min-height: 112px;
  padding: 8px;
}
body.krea .cw-compose .cw-mode {
  grid-column: 1;
  grid-row: 1 / span 2;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  height: auto;
  padding: 4px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
}
body.krea .cw-compose .cw-mode button {
  height: auto;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
}
body.krea .cw-compose .cw-mode-rail {
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  border-radius: 12px;
}
body.krea #cw-compose {
  grid-template-columns: minmax(0, 1fr) 52px;
}
body.krea #cw-compose .cw-field {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  background: transparent;
}
body.krea .cw-compose .cw-field {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  background: transparent;
}
body.krea .cw-compose .cw-draft-row { display: flex; align-items: center; gap: 4px; }
body.krea .cw-compose .cw-clip { position: static; flex: none; }
body.krea #cw-compose .cw-tools {
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: center;
}
body.krea .cw-compose .cw-tools { grid-column: 2; grid-row: 2; align-items: center; }
body.krea #cw-compose .cw-send {
  grid-column: auto;
  grid-row: auto;
  margin-left: auto;
}
body.krea .cw-compose .cw-send {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  margin-left: 0;
}
body.krea .cw-compose textarea {
  height: 32px;
  min-height: 32px;
  padding: 4px 8px;
  overflow: auto;
}
body.krea .cw-compose .cw-name input {
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #fff;
}
body.krea #creatives .cw-chat:not(:has(.cw-turn)) .cw-stage,
body.krea #research .cw-chat:not(:has(.as-turn)) .cw-stage { display: none; }
body.krea #creatives .cw-chat:not(:has(.cw-turn)) .cw-composer-stack,
body.krea #research .cw-chat:not(:has(.as-turn)) .cw-compose { margin-top: 20px; }
body.krea #cw-width[hidden] { display: none; }
body.krea #creatives .cw,
body.krea #research .cw { background: transparent; }
body.krea #rs-compose .cw-tools:empty { display: none; }
body.krea #rs-compose .cw-field { grid-row: 1 / span 2; }
body.krea .gp-form,
body.krea .era-box { position: relative; }
body.krea .cw-compose { margin: -28px auto 20px; }
body.krea #creatives .cw-chat,
body.krea #research .cw-chat { position: relative; }
body.krea #creatives .cw-composer-stack {
  position: absolute;
  right: 0;
  bottom: 12%;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: calc((100% - 24px) * 0.9);
  margin: 0 auto;
}
body.krea #creatives .cw-composer-stack .cw-mode {
  position: relative;
  display: inline-flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  gap: 0;
  height: 44px;
  padding: 4px;
  border-radius: 22px;
  background: #2a2b30;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
body.krea #creatives .cw-composer-stack .cw-mode button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #creatives .cw-composer-stack .cw-mode button[aria-pressed="true"] { color: #17180a; }
body.krea #creatives .cw-composer-stack .cw-mode svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}
body.krea #creatives .cw-composer-stack .cw-mode-rail {
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  border-radius: 18px;
  background: #d1fe17;
}
body.krea #creatives .cw-compose {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  margin: 0;
}
body.krea #research .cw-compose {
  position: absolute;
  right: 0;
  bottom: 12%;
  left: 0;
  z-index: 4;
  width: calc((100% - 24px) * 0.9);
  margin: 0 auto;
}
body.krea #creatives .cw-thread,
body.krea #research .cw-thread { padding-bottom: calc(12vh + 168px); }
body.krea .sd-dock { z-index: 2; margin-top: -12px; }
body.krea .img-dock { bottom: 20px; }
body.krea .cw-compose::before,
body.krea .img-dock::before,
body.krea .nb-form::before,
body.krea .sd-dock::before,
body.krea .gp-form::before,
body.krea .era-box::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
@keyframes input-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -2px, 0) rotate(-0.15deg); }
}
@keyframes input-sway-x {
  0%, 100% { transform: translate3d(-50%, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-50%, -2px, 0) rotate(-0.15deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.krea .cw-compose,
  body.krea .img-dock,
  body.krea .nb-form,
  body.krea .sd-dock,
  body.krea .gp-form,
  body.krea .era-box { animation: none; }
  body.krea .side .nav-item.is-on,
  body.krea .nav-project.is-on span { animation: none; }
  body.krea.is-side-ready .side { transition: none; }
  body.krea .ms-film figure { transition: none; }
}
body.krea #home.ms-dots,
body.krea #creatives.ms-dots,
body.krea #research.ms-dots,
body.krea #images.ms-dots,
body.krea #videos.ms-dots,
body.krea #banana.ms-dots,
body.krea #seedance.ms-dots,
body.krea #genprompt.ms-dots,
body.krea #agent.ms-dots {
  background-color: var(--ds-canvas);
  background-image: radial-gradient(rgba(255, 255, 255, 0.208) 1px, transparent 1px);
  background-size: 18px 18px;
  border-radius: 0;
}
body.krea #creatives.ms-dots,
body.krea #research.ms-dots,
body.krea #images.ms-dots,
body.krea #videos.ms-dots,
body.krea #banana.ms-dots,
body.krea #seedance.ms-dots,
body.krea #genprompt.ms-dots,
body.krea #agent.ms-dots {
  background-image: radial-gradient(var(--ds-dot) 1px, transparent 1px);
  background-size: var(--ds-dot-size) var(--ds-dot-size);
}
body.krea .ms-block {
  flex: none;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 12px 16px 4px;
  text-align: center;
}
body.krea .ms-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 2px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.krea .ms-film {
  position: relative;
  height: 148px;
  margin: 20px auto 0;
  overflow: visible;
}
body.krea .ms-film-track { position: relative; height: 100%; }
body.krea .ms-film figure {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 132px;
  height: 92px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  transition: transform 320ms ease, width 320ms ease, height 320ms ease, opacity 320ms ease;
}
body.krea .ms-film figure:nth-child(1) { z-index: 1; opacity: 0.72; transform: translate(-50%, -50%) translateX(-240px); }
body.krea .ms-film figure:nth-child(2) { z-index: 2; transform: translate(-50%, -50%) translateX(-120px); }
body.krea .ms-film figure:nth-child(3) { z-index: 4; width: 188px; height: 132px; }
body.krea .ms-film figure:nth-child(4) { z-index: 2; transform: translate(-50%, -50%) translateX(120px); }
body.krea .ms-film figure:nth-child(5) { z-index: 1; opacity: 0.72; transform: translate(-50%, -50%) translateX(240px); }
body.krea .ms-film img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.krea .ms-film figcaption {
  position: absolute;
  right: auto;
  bottom: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.krea #creatives .cw-chat:not(:has(.cw-turn)) .ms-block {
  position: static;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  pointer-events: none;
}
body.krea #creatives .ms-block h2 {
  max-width: 560px;
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.92;
  text-transform: none;
}
body.krea #creatives .cw-mark h2 {
  max-width: none;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
body.krea #creatives .ms-block .ms-note { text-align: left; }
body.krea #creatives .ms-hint {
  position: absolute;
  color: #f4f4f5;
  pointer-events: none;
}
body.krea #creatives .ms-hint p {
  margin: 0;
  color: #f4f4f5;
  font-family: Caveat, "Segoe Script", cursive;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
}
body.krea #creatives .ms-hint svg { flex: none; color: #f4f4f5; }
body.krea #creatives .ms-hint-right {
  top: 8%;
  right: -8px;
  display: flex;
  align-items: center;
  gap: 4px;
  width: min(300px, 46%);
  transform: rotate(-3deg);
}
body.krea #creatives .ms-hint-right p { text-align: right; }
body.krea #creatives .ms-hint-right svg { width: 88px; height: 36px; }
body.krea #creatives .ms-hint-down {
  left: 10%;
  bottom: calc(12% + 188px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: min(340px, 70%);
  transform: rotate(2deg);
}
body.krea #creatives .ms-hint-down svg { width: 36px; height: 72px; margin-left: 24px; }
@media (max-width: 1100px) {
  body.krea #creatives .ms-block h2 { font-size: 40px; }
  body.krea #creatives .ms-hint p { font-size: 22px; }
  body.krea #creatives .cw-chat:not(:has(.cw-turn)) .ms-block { width: min(640px, calc(100% - 32px)); margin-left: auto; }
  body.krea #creatives .ms-hint-right { position: static; width: auto; margin-top: 24px; transform: none; }
}
body.krea .ms-block h2 {
  max-width: 640px;
  margin: 16px auto 0;
  color: #ececee;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}
body.krea .ms-note {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  line-height: 1.4;
}
body.krea #cw-gallery > .cw-card {
  gap: 0;
  padding: 0;
  background: transparent;
}
body.krea .cw-card-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 28px 10px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
  color: #fff;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
body.krea .cw-card:hover .cw-card-label,
body.krea .cw-card:focus-within .cw-card-label { opacity: 1; }
body.krea .cw-card-label span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
body.krea .cw-card-label strong { font-size: 14px; font-weight: 600; color: #fff; }
body.krea .cw-add { z-index: 3; }
@media (max-width: 900px) {
  body.krea .cw-card-label { opacity: 1; }
  body.krea .cw-compose {
    grid-template-columns: minmax(0, 1fr) 52px;
  }
  body.krea .cw-compose .cw-mode {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  body.krea #cw-compose {
    grid-template-columns: minmax(0, 1fr);
  }
  body.krea #cw-compose .cw-field { grid-column: 1; grid-row: 1; }
  body.krea #cw-compose .cw-tools { grid-column: 1; grid-row: 2; }
  body.krea #cw-compose .cw-send { margin-left: auto; }
  body.krea .cw-compose .cw-field { grid-column: 1 / -1; grid-row: 2; }
  body.krea .cw-compose .cw-tools { grid-column: 1; grid-row: 3; }
  body.krea .cw-compose .cw-send { grid-column: 2; grid-row: 3; }
  body.krea #rs-compose .cw-field { grid-row: 2; }
}

body.krea #creatives .cw-turn {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(960px, calc(100% - 32px));
  min-width: 0;
  margin: 0 auto 32px;
  animation: cw-rise 300ms ease;
}
body.krea #creatives .cw-turn-user {
  align-self: flex-end;
  max-width: min(520px, 86%);
  min-width: 0;
  text-align: right;
}
body.krea #creatives .cw-turn-user .cw-sent-files { justify-content: flex-end; margin-top: 0; }
body.krea #creatives .cw-turn-line,
body.krea #creatives .cw-turn-copy {
  margin: 0;
  color: #ececee;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body.krea #creatives .cw-turn-file,
body.krea #creatives .cw-turn-role {
  margin: 0;
  color: #9a9aa0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
body.krea #creatives .cw-turn-copy { max-width: 640px; }
body.krea #creatives .cw-turn-out {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: min(720px, 100%);
}
body.krea #creatives .cw-frame {
  display: grid;
  place-items: center;
  max-width: 100%;
  padding: 16px;
  border-radius: 16px;
  background:
    radial-gradient(rgba(255, 255, 255, 0.182) 1px, transparent 1px) 0 0 / 18px 18px,
    #16181c;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
body.krea #creatives .cw-frame p {
  margin: 0;
  max-width: 220px;
  color: #c8c8ce;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
body.krea #creatives .cw-turn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.krea #creatives .cw-turn-chips span {
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #9a9aa0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
body.krea #creatives .cw-turn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.krea #creatives .cw-turn-actions button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c8c8ce;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body.krea #creatives .cw-turn-actions button:hover { background: rgba(255, 255, 255, 0.04); color: #f4f4f5; }
body.krea #creatives .cw-turn-actions button:disabled { opacity: 0.4; cursor: default; }
body.krea #creatives .cw-upsell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0;
  background: transparent;
}
body.krea #creatives .cw-upsell p { margin: 0; color: #9a9aa0; font-size: 16px; }
body.krea #creatives .cw-upsell .btn-ghost {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d1fe17;
}

body.krea .studio-compose textarea,
body.krea .studio-compose .cw-field,
body.krea .studio-compose .cw-name input {
  background: transparent;
  box-shadow: none;
}
body.krea .studio-compose textarea:focus,
body.krea .studio-compose textarea:focus-visible {
  outline: none;
  box-shadow: none;
}
body.krea .studio-compose .cw-chip,
body.krea .studio-compose .img-chip,
body.krea .studio-compose .nb-chip,
body.krea .studio-compose .cw-model {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}
body.krea .studio-compose .cw-chip[aria-pressed="true"],
body.krea .studio-compose .img-chip[aria-pressed="true"],
body.krea .studio-compose .nb-chip[aria-pressed="true"],
body.krea .studio-compose .img-pop-row.is-on,
body.krea .studio-compose .nb-pop-row[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px #d1fe17;
}
body.krea .studio-compose .img-pop-wrap,
body.krea .studio-compose .nb-pop-wrap,
body.krea .studio-compose .cw-model-pick,
body.krea .studio-compose .cw-ratio-pick,
body.krea .studio-compose .cw-shoot-pick {
  position: relative;
}
body.krea .studio-compose .img-pop,
body.krea .studio-compose .nb-pop,
body.krea .studio-compose .nb-sheet,
body.krea .studio-compose .cw-model-menu,
body.krea .studio-compose .cw-shoot {
  left: 0;
  right: auto;
  top: auto;
  bottom: calc(100% + 8px);
  max-height: min(280px, 42vh);
  overflow: auto;
}
body.krea #cw-compose .cw-mode svg,
body.krea .studio-compose .img-plus svg,
body.krea .studio-compose .sd-plus svg,
body.krea .studio-compose .img-go svg,
body.krea .studio-compose .sd-go svg,
body.krea .studio-compose .gp-go svg,
body.krea .studio-compose .nb-go svg,
body.krea .studio-compose .cw-send svg {
  width: 20px;
  height: 20px;
}
body.krea #cw-compose .cw-mode button { color: #f4f4f5; }
body.krea #cw-compose .cw-mode button[aria-pressed="true"] { color: #17180a; }
body.krea #rs-compose {
  grid-template-columns: minmax(0, 1fr) 52px;
}
body.krea #rs-compose .cw-field { grid-column: 1; grid-row: 1; }
body.krea #rs-compose .cw-tools {
  display: flex;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
body.krea #rs-compose .cw-mode {
  position: relative;
  flex-direction: row;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0;
  gap: 4px;
  background: transparent;
}
body.krea #rs-compose .cw-mode button {
  position: relative;
  z-index: 1;
  width: auto;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 22px;
  color: #f4f4f5;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}
body.krea #rs-compose .cw-mode button[aria-pressed="true"] { color: #17180a; }
body.krea #rs-compose .cw-mode-rail {
  top: 0;
  left: 0;
  height: 44px;
  border-radius: 22px;
  background: #d1fe17;
}
body.krea #images .img-dock { bottom: 72px; }
body.krea #images .img-go,
body.krea #banana .nb-go,
body.krea #genprompt .gp-go { margin-left: auto; }
body.krea #images .img-plus,
body.krea #seedance .sd-plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 22px;
  color: #f4f4f5;
}
body.krea #img-size-wrap[hidden] { display: none; }
body.krea .img-tile.is-job .img-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  color: #d4d4d8;
  font-size: 16px;
  text-align: center;
}
body.krea .img-wait-note {
  position: relative;
  z-index: 1;
  max-width: 92%;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}
body.krea .img-tile.is-job .img-wait img,
body.krea .img-tile.is-job .img-face img,
body.krea .img-tile.is-job .img-face video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.krea #images .img-tile.is-job.is-ready .img-face img,
body.krea #images .img-tile.is-job.is-native .img-face img {
  object-fit: contain;
}
body.krea .img-tile.is-spark .img-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, 0.9) 42%, #d1fe17 50%, transparent 68%);
  background-size: 220% 100%;
  background-position: 120% 0;
  opacity: 0;
  animation: img-spark 900ms ease;
  pointer-events: none;
}
@keyframes img-spark {
  0% { background-position: 120% 0; opacity: 1; }
  100% { background-position: -40% 0; opacity: 0; }
}
body.krea #seedance .sd-files { display: flex; flex-wrap: wrap; gap: 8px; }
body.krea #seedance .sd-files[hidden] { display: none; }
body.krea #seedance .sd-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 14px;
}
body.krea #seedance .sd-file button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #seedance .sd-honest {
  margin: 0;
  color: #9a9aa0;
  font-size: 15px;
}
body.krea #seedance .sd-bottom { display: flex; align-items: center; gap: 8px; }
body.krea #seedance .sd-go { margin-left: auto; }
body.krea #genprompt { height: 100%; }
body.krea #genprompt .gp-stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  width: min(720px, calc(100% - 32px));
  min-height: 0;
  margin: 0 auto;
}
body.krea #genprompt .ms-block { margin-bottom: auto; }
body.krea #genprompt .gp-form { width: 100%; margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  body.krea .img-tile.is-spark .img-card::after { animation: none; opacity: 0; }
  body.krea .as-status,
  body.krea .as-turn { animation: none; }
}

body.krea .as-turn {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(720px, calc(100% - 32px));
  margin: 0 auto 32px;
  animation: cw-rise 300ms ease;
}
body.krea .as-user {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  align-self: flex-end;
  max-width: 100%;
  text-align: left;
}
body.krea .as-bubble {
  max-width: min(520px, calc(100% - 48px));
  padding: 12px 16px;
  border-radius: 16px 16px 4px 16px;
  background: #2a2b30;
}
body.krea .as-bubble:not(:has(.as-ask, .as-file, .as-thumbs)) { display: none; }
body.krea .as-face {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3a3b42;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
body.krea .as-face-bot {
  background: #1c1e20;
  box-shadow: inset 0 0 0 1px #3a3b42;
}
body.krea .as-writer .as-face-bot { box-shadow: inset 0 0 0 1px #d1fe17; }
body.krea .as-ask,
body.krea .as-body,
body.krea .as-status {
  margin: 0;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
body.krea .as-file,
body.krea .as-role {
  margin: 0;
  color: #9a9aa0;
  font-size: 12px;
  font-weight: 600;
}
body.krea .as-thumbs { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
body.krea .as-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
body.krea .as-bot {
  align-self: flex-start;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}
body.krea .as-bot-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: min(640px, calc(100% - 48px));
}
body.krea .as-reply {
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 16px 16px 16px 4px;
  background: #1c1e20;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.krea .as-reply:not(:has(.as-body:not([hidden]), .as-status:not([hidden]))) { display: none; }
body.krea .as-status { color: #c8c8ce; animation: as-breathe 1200ms ease-in-out infinite; }
body.krea .as-pic { display: block; width: min(100%, 420px); aspect-ratio: 3 / 4; object-fit: cover; background: #1c1e20; border-radius: 16px; }
body.krea video.as-pic { aspect-ratio: 9 / 16; }
body.krea .as-jump {
  position: sticky;
  bottom: 8px;
  z-index: 3;
  display: block;
  min-height: 44px;
  margin: 8px auto 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #1c1e20;
  color: #f4f4f5;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body.krea .as-jump[hidden] { display: none; }
@keyframes as-breathe {
  50% { opacity: 0.45; }
}
body.krea .as-pic[hidden],
body.krea .as-body[hidden],
body.krea .as-status[hidden],
body.krea #img-thread[hidden] { display: none; }
body.krea .as-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.krea .as-actions button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c8c8ce;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body.krea .as-actions button:disabled { opacity: 0.4; cursor: default; }
body.krea #img-thread {
  position: absolute;
  left: 50%;
  bottom: 168px;
  z-index: 4;
  width: min(720px, calc(100% - 48px));
  max-height: 32vh;
  overflow: auto;
  transform: translateX(-50%);
}

body.krea .studio-compose {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(var(--ds-content-chat), calc(100% - 32px));
  margin-right: auto;
  margin-left: auto;
  padding: 12px;
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-plate);
  background: var(--ds-plate);
  box-shadow: var(--ds-shadow-panel);
  animation: none;
}
body.krea .studio-compose::before { content: none; }
body.krea #cw-compose,
body.krea #rs-compose {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  min-height: 0;
}
body.krea #creatives .cw-compose {
  width: min(var(--ds-content), calc(100% - 32px));
}
body.krea #research .cw-compose {
  width: min(var(--ds-content-chat), calc(100% - 32px));
}
body.krea #creatives .cw-thread,
body.krea #research .cw-thread { padding-bottom: calc(12vh + 200px); }
body.krea #genprompt .gp-stage,
body.krea .nb-stage { width: min(720px, calc(100% - 32px)); }
body.krea .studio-compose .cw-field {
  grid-column: auto;
  grid-row: auto;
  background: transparent;
  border-radius: 0;
}
body.krea #cw-compose .cw-draft-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
body.krea #cw-compose .cw-drop {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 72px;
  min-height: 72px;
  padding: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: transparent;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #cw-compose .cw-drop svg { width: 20px; height: 20px; }
body.krea #cw-compose .cw-drop span {
  font-size: 12px;
  line-height: 16px;
  color: #c8c8ce;
}
body.krea #cw-compose .cw-drop:hover,
body.krea #cw-compose .cw-drop.is-over {
  border-color: rgba(209, 254, 23, 0.7);
  color: #d1fe17;
}
body.krea .studio-compose.is-over {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}
body.krea #cw-compose .cw-draft-row textarea {
  flex: 1;
  width: auto;
  min-width: 0;
}
body.krea .studio-compose textarea {
  width: 100%;
  height: auto;
  min-height: 72px;
  max-height: 168px;
  margin: 0;
  padding: 4px 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 24px;
  resize: none;
}
body.krea #cw-draft::placeholder {
  color: rgba(244, 244, 245, 0.32);
}
body.krea .studio-compose textarea:focus,
body.krea .studio-compose textarea:focus-visible {
  outline: none;
  box-shadow: none;
}
body.krea .studio-compose .cw-name { border-bottom: 0; }
body.krea .studio-compose:focus-within {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), 0 0 40px rgba(209, 254, 23, 0.14);
}
body.krea #creatives .cw-compose:focus-within {
  animation: cw-glow-pulse 1100ms cubic-bezier(0.2, 0, 0, 1) 140ms both;
}
@keyframes cw-glow-pulse {
  0% { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16), 0 0 0 rgba(209, 254, 23, 0); }
  38% { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), 0 0 22px rgba(209, 254, 23, 0.1); }
  68% { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3), 0 0 56px rgba(209, 254, 23, 0.24); }
  100% { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), 0 0 40px rgba(209, 254, 23, 0.14); }
}
body.krea .studio-compose .cw-name input {
  height: 32px;
  min-height: 32px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 24px;
}
body.krea .studio-compose .cw-tools,
body.krea .studio-compose .img-tools,
body.krea .studio-compose .sd-bottom,
body.krea .studio-compose .nb-tools,
body.krea .studio-compose .gp-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  grid-column: auto;
  grid-row: auto;
  min-height: 40px;
  padding: 0;
}
body.krea .studio-compose .cw-chip,
body.krea .studio-compose .img-chip,
body.krea .studio-compose .nb-chip,
body.krea .studio-compose .cw-model,
body.krea .studio-compose .gp-drop,
body.krea .studio-compose .gp-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  gap: 0;
}
body.krea .studio-compose .gp-clear { background: transparent; color: #c8c8ce; }
body.krea #gp-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea .studio-compose .img-plus,
body.krea .studio-compose .sd-plus,
body.krea .studio-compose .cw-clip {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 16px;
}
body.krea .studio-compose .cw-stepper { display: inline-flex; align-items: center; gap: 4px; height: 32px; }
body.krea .studio-compose .cw-stepper[hidden] { display: none; }
body.krea .studio-compose .cw-stepper button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 16px;
}
body.krea .studio-compose .cw-stepper span { font-size: 14px; }
body.krea #rs-compose .cw-mode {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: auto;
  height: 32px;
  padding: 0;
  border-radius: 16px;
  background: #2a2b30;
  grid-column: auto;
  grid-row: auto;
}
body.krea #rs-compose .cw-mode button {
  width: auto;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #f4f4f5;
  font-size: 14px;
  line-height: 32px;
  white-space: nowrap;
  cursor: pointer;
}
body.krea #rs-compose .cw-mode button[aria-pressed="true"] { color: #17180a; }
body.krea #rs-compose .cw-mode-rail {
  top: 0;
  left: 0;
  height: 32px;
  border-radius: 16px;
  background: #d1fe17;
}
body.krea .studio-compose .cw-send,
body.krea .studio-compose .img-go,
body.krea .studio-compose .sd-go,
body.krea .studio-compose .nb-go,
body.krea .studio-compose .gp-go {
  display: grid;
  place-items: center;
  flex: none;
  align-self: center;
  justify-self: auto;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  grid-column: auto;
  grid-row: auto;
}
body.krea .studio-compose .cw-files,
body.krea .studio-compose .img-files,
body.krea .studio-compose .sd-files,
body.krea .studio-compose .nb-files,
body.krea .studio-compose .gp-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}
body.krea .studio-compose .cw-files[hidden],
body.krea .studio-compose .img-files[hidden],
body.krea .studio-compose .sd-files[hidden],
body.krea .studio-compose .nb-files[hidden] { display: none; }
body.krea .gp-files:not(:has(img, video, .gp-file-name)) { display: none; }
body.krea .studio-compose .cw-thumb,
body.krea .studio-compose .img-thumb { width: 64px; height: 64px; }
body.krea .studio-compose .cw-thumb img,
body.krea .studio-compose .cw-thumb video,
body.krea .studio-compose .img-thumb img,
body.krea .studio-compose .img-thumb video,
body.krea .gp-preview img,
body.krea .gp-preview video {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
}
body.krea #img-thread { bottom: 200px; width: min(var(--ds-content-chat), calc(100% - 32px)); }
body.krea #images .img-dock,
body.krea #seedance .sd-dock,
body.krea #banana .nb-form,
body.krea #genprompt .gp-form {
  width: min(var(--ds-content-chat), calc(100% - 32px));
}
body.krea #images .img-plus,
body.krea #seedance .sd-plus {
  width: 32px;
  height: 32px;
  min-height: 32px;
}
body.krea #images #img-draft,
body.krea #seedance #sd-draft,
body.krea #banana #nb-draft,
body.krea #genprompt #gp-note {
  height: auto;
  min-height: 72px;
  max-height: 168px;
  padding: 4px 4px 0;
  font-size: var(--ds-text-field);
  line-height: var(--ds-leading-body);
}
body.krea #cw-compose .cw-files {
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 0 0;
}
body.krea #cw-compose .cw-thumb button {
  top: 4px;
  right: 4px;
}
body.krea #cw-compose .cw-doc {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 72px;
  height: 88px;
  padding: 28px 8px 8px;
  border-radius: 12px;
  background: #1c1e20;
  color: #f4f4f5;
}
body.krea #cw-compose .cw-doc svg {
  position: absolute;
  top: 8px;
  left: 22px;
  width: 28px;
  height: 28px;
  color: #c8c8ce;
}
body.krea #cw-compose .cw-doc-mark {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.04em;
}
body.krea #cw-compose .cw-doc-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.krea #cw-compose .cw-doc-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 6;
  width: max-content;
  max-width: 240px;
  padding: 8px;
  border-radius: 8px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
}
body.krea #cw-compose .cw-doc:hover .cw-doc-tip,
body.krea #cw-compose .cw-doc:focus-within .cw-doc-tip { opacity: 1; }
body.krea #cw-compose .cw-doc button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #1a1b1e;
  box-shadow: 0 0 0 1px #3a3b42;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
body.krea #cw-writer[aria-pressed="true"] {
  background: #d1fe17;
  color: #17180a;
  box-shadow: none;
}
body.krea #cw-compose .cw-model {
  min-width: 88px;
  height: 32px;
  min-height: 32px;
  padding: 0 28px 0 12px;
  font-size: 14px;
  line-height: 32px;
}
body.krea #cw-compose .cw-model-pick::after { right: 10px; }
body.krea #cw-compose .cw-plus {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
  pointer-events: auto;
}
body.krea #cw-compose .cw-plus svg { width: 20px; height: 20px; pointer-events: none; }
body.krea #cw-compose .cw-mode,
body.krea #cw-compose .cw-mode-rail {
  height: 28px;
  border-radius: 14px;
}
body.krea #cw-compose .cw-mode button {
  width: 36px;
  height: 28px;
  min-height: 28px;
  border-radius: 14px;
}
body.krea #cw-compose .cw-mode svg { width: 18px; height: 18px; }
body.krea #cw-compose .cw-chip,
body.krea #cw-compose .cw-model,
body.krea #cw-compose .cw-stepper,
body.krea #cw-compose .cw-stepper button {
  height: 28px;
  min-height: 28px;
  font-size: 13px;
}
body.krea #cw-compose .cw-chip,
body.krea #cw-compose .cw-model {
  padding: 0 10px;
  border-radius: 14px;
}
body.krea #cw-compose .cw-model {
  min-width: 76px;
  padding: 0 24px 0 10px;
  line-height: 28px;
}
body.krea #cw-compose .cw-stepper button {
  width: 28px;
  padding: 0;
  border-radius: 14px;
}
body.krea #cw-compose .cw-model:active,
body.krea #cw-compose .cw-model[aria-pressed="true"] { background: #3a3b42; }
body.krea #cw-compose .cw-model-pick:has(.cw-model[aria-pressed="true"])::after {
  transform: translateY(-30%) rotate(225deg);
}
body.krea #cw-model-menu {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}
body.krea #cw-model-menu.is-in { opacity: 1; transform: none; }
body.krea #cw-model-menu .cw-model-option {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
}
body.krea #cw-model-menu .cw-model-option::after { content: none; }
body.krea #cw-model-menu .cw-model-option svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #c8c8ce;
}
body.krea #cw-model-menu .cw-model-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-align: left;
}
body.krea #cw-model-menu .cw-model-copy strong {
  font-size: 14px;
  font-weight: 600;
  color: #f4f4f5;
}
body.krea #cw-model-menu .cw-model-copy small {
  display: block;
  grid-column: auto;
  font-size: 12px;
  line-height: 16px;
  color: #9a9aa0;
}
body.krea #cw-model-menu .cw-model-add {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c8c8ce;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
body.krea #cw-model-menu .cw-model-add:hover { color: #f4f4f5; }
@media (prefers-reduced-motion: reduce) {
  body.krea #cw-model-menu { transition: none; transform: none; }
  body.krea #creatives .cw-compose:focus-within { animation: none; }
}
body.krea #cw-compose .cw-draft-row { align-items: flex-end; }
body.krea #cw-compose .cw-drop { align-self: flex-end; }
body.krea #cw-compose textarea {
  min-height: 72px;
  max-height: calc(72px * 1.7);
  overflow-y: auto;
}
body.krea .studio-compose .cw-model-search,
body.krea .studio-compose .cw-model-option,
body.krea .studio-compose .cw-model-copy strong,
body.krea .studio-compose .cw-model-add,
body.krea .studio-compose .cw-shoot-row,
body.krea .studio-compose .cw-pop p,
body.krea .studio-compose .cw-pop-primary,
body.krea .studio-compose .cw-pop-ghost,
body.krea .studio-compose .img-pop-row,
body.krea .studio-compose .nb-pop-row,
body.krea .studio-compose .nb-pop-row strong,
body.krea .studio-compose .nb-sheet p,
body.krea .studio-compose .nb-sheet strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
body.krea .studio-compose .cw-model-copy small,
body.krea .studio-compose .cw-shoot-row b,
body.krea .studio-compose .nb-pop-row span {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}
body.krea .studio-compose .cw-model-search:focus {
  outline: none;
  box-shadow: none;
}
body.krea #cw-model-menu .cw-model-option[aria-selected="true"] {
  background: #2a2b30;
}
body.krea #cw-model-menu .cw-model-option[aria-selected="true"] .cw-model-copy strong {
  color: #d1fe17;
}
body.krea #images #img-dock.cw-compose,
body.krea #videos #vd-dock.cw-compose {
  position: absolute;
  left: 50%;
  bottom: 72px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(720px, calc((100% - 24px) * 0.9));
  margin: 0;
  padding: 8px;
  border: 1px solid #2c2c31;
  border-radius: 22px;
  background: #1a1b1e;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
}
body.krea #videos #vd-dock .cw-chip.is-unset {
  opacity: 0.4;
}
body.krea #images #img-dock:focus-within,
body.krea #videos #vd-dock:focus-within {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), 0 0 40px rgba(209, 254, 23, 0.14);
}
body.krea #images #img-dock.cw-compose {
  background: #16171a;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.5);
}
body.krea #images #img-dock.cw-compose:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #images #img-draft::placeholder { color: #9a9aa0; }
body.krea #images #img-dock .cw-field,
body.krea #videos #vd-dock .cw-field {
  border-radius: 0;
  background: transparent;
}
body.krea #images #img-dock textarea,
body.krea #videos #vd-dock textarea {
  min-height: 72px;
  max-height: calc(72px * 1.7);
  padding: 4px 4px 0;
  overflow-y: auto;
  border-radius: 0;
  background: transparent;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 24px;
}
body.krea #images #img-draft::placeholder,
body.krea #videos #vd-draft::placeholder { color: rgba(244, 244, 245, 0.32); }
body.krea #images #img-dock .cw-plus,
body.krea #videos #vd-dock .cw-plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #images #img-dock .cw-plus svg,
body.krea #videos #vd-dock .cw-plus svg { width: 20px; height: 20px; }
body.krea #images #img-dock .cw-tools,
body.krea #videos #vd-dock .cw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
}
body.krea #images #img-dock .cw-model,
body.krea #videos #vd-dock .cw-model,
body.krea #images #img-dock .cw-chip,
body.krea #videos #vd-dock .cw-chip {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
body.krea #images #img-dock .cw-model,
body.krea #videos #vd-dock .cw-model {
  max-width: 200px;
  padding: 0 28px 0 12px;
  line-height: 32px;
  text-align: left;
}
body.krea #images #img-dock .cw-chip:disabled,
body.krea #videos #vd-dock .cw-chip:disabled {
  color: #9a9aa0;
  cursor: default;
}
body.krea #images #img-dock .cw-send,
body.krea #videos #vd-dock .cw-send {
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin-left: auto;
  padding: 0;
  border-radius: 50%;
  background: #d1fe17;
  color: #17180a;
}
body.krea #images #img-dock .cw-send:disabled,
body.krea #videos #vd-dock .cw-send:disabled {
  background: #2a2b30;
  color: #6d6e73;
}
body.krea #images #img-dock .cw-send svg,
body.krea #videos #vd-dock .cw-send svg { width: 20px; height: 20px; }
body.krea #images #img-dock .cw-model-menu,
body.krea #videos #vd-dock .cw-model-menu { width: 240px; }
body.krea #images .img-guard {
  margin: 0 4px 8px;
  color: #f4f4f5;
  font-size: 13px;
  line-height: 1.4;
}
body.krea #images .img-guard p { margin: 0 0 6px; }
body.krea #images .img-guard-btn {
  margin: 0 8px 0 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
body.krea #images .img-menu-note {
  flex: 0 0 auto;
  margin: 0 4px 8px;
  color: #d0d0d6;
  font-size: 13px;
  line-height: 1.35;
}
body.krea #images #img-dock .cw-chip.is-blocked {
  box-shadow: inset 0 0 0 1px #ffb15a;
}
body.krea #images #img-dock .cw-chip.is-unset {
  opacity: 0.4;
}
body.krea #images #img-dock .cw-model-option.is-off {
  color: #6d6e73;
}
body.krea #images #img-dock .cw-model-option.is-off::after { opacity: 0.35; }
body.krea #images #img-dock .cw-model-menu .cw-model-option,
body.krea #images #img-dock .cw-model-menu .img-menu-note {
  flex: 0 0 auto;
  height: auto;
}
body.krea #images #img-dock #img-model-menu {
  width: 448px;
  max-height: min(520px, calc(100vh - 140px));
}
body.krea #images #img-model-menu .cw-model-option {
  flex: 0 0 auto;
  grid-template-columns: 36px minmax(0, 1fr) 32px 16px;
  align-items: start;
  column-gap: 12px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 12px 14px;
  box-sizing: border-box;
}
body.krea #images #img-model-menu .cw-model-option::after {
  grid-column: 4;
  grid-row: 1;
}
body.krea #images #img-model-menu .img-fav {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8d8d93;
  cursor: pointer;
}
body.krea #images #img-model-menu .img-fav svg {
  width: 16px;
  height: 16px;
}
body.krea #images #img-model-menu .img-fav.is-on { color: #ff5a7a; }
body.krea #images #img-model-menu .img-fav:hover,
body.krea #images #img-model-menu .img-fav:focus-visible {
  color: #ff8aa0;
  background: #232428;
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #images #img-model-menu .img-fav.is-on:hover,
body.krea #images #img-model-menu .img-fav.is-on:focus-visible { color: #ff5a7a; }
body.krea #images #img-model-menu .img-fav:active { transform: scale(0.96); }
body.krea #images #img-model-menu .img-fav:disabled {
  opacity: 0.45;
  cursor: default;
}
body.krea #images #img-model-menu .cw-model-option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #images #img-model-menu .img-model-logo {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #101114;
}
body.krea #images #img-model-menu .img-model-logo svg {
  width: 22px;
  height: 22px;
}
body.krea #images #img-model-menu .cw-model-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  text-align: left;
}
body.krea #images #img-model-menu .cw-model-copy strong {
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body.krea #images #img-model-menu .img-model-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
body.krea #images #img-model-menu .img-model-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: #2a2b30;
  color: #d7d7dc;
  font-size: 11px;
  line-height: 1.4;
}
body.krea #images #img-model-menu .img-model-logo,
body.krea #images #img-model-menu .img-fav,
body.krea #images #img-model-menu .cw-model-option::after {
  margin-top: 2px;
}
body.krea #images #img-model-menu .img-model-strengths {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
body.krea #images #img-model-menu .img-model-tag {
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: default;
}
body.krea #images #img-model-menu .img-model-about {
  display: grid;
  place-items: center;
  flex: none;
  align-self: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #c8c8ce;
  cursor: pointer;
}
body.krea #images #img-model-menu .img-model-about svg {
  width: 16px;
  height: 16px;
}
body.krea #images #img-model-menu .img-model-about:hover,
body.krea #images #img-model-menu .img-model-about:focus-visible {
  color: #fff;
  background: #232428;
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.45);
}
body.krea #images #img-model-menu .cw-model-copy small {
  display: block;
  grid-column: auto;
  margin-top: 4px;
  color: #dedee3;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
html.is-model-sheet { overflow: hidden; }
body.krea #images #img-dock .cw-model-menu {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--ds-popover-in, 160ms) var(--ds-ease, ease), transform var(--ds-popover-in, 160ms) var(--ds-ease, ease);
}
body.krea #images #img-dock .cw-model-menu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body.krea #images #img-dock .cw-model-menu.is-closing {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition-duration: var(--ds-popover-out, 120ms);
}
body.krea .img-model-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-dialog-in, 200ms) var(--ds-ease, ease);
}
body.krea .img-model-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.krea .img-model-sheet.is-closing {
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--ds-dialog-out, 160ms);
}
body.krea .img-model-sheet[hidden] { display: none; }
body.krea .img-model-sheet-card {
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  height: auto;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: #1a1b1e;
  color: #f4f4f5;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  transform: scale(0.98);
  transition: transform var(--ds-dialog-in, 200ms) var(--ds-ease, ease);
}
body.krea .img-model-sheet.is-open .img-model-sheet-card { transform: none; }
body.krea .img-model-sheet.is-closing .img-model-sheet-card {
  transform: scale(0.98);
  transition-duration: var(--ds-dialog-out, 160ms);
}
body.krea .img-model-sheet-card:focus { outline: none; }
body.krea .img-model-sheet-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.krea .img-model-sheet-head .img-model-logo {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #101114;
}
body.krea .img-model-sheet-head .img-model-logo svg { width: 22px; height: 22px; }
body.krea .img-model-sheet-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #f4f4f5;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
}
body.krea .img-model-sheet-x {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea .img-model-sheet-x svg { width: 18px; height: 18px; }
body.krea .img-model-sheet-x:hover { background: #232428; }
body.krea .img-model-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px;
}
body.krea .img-model-sheet-lead,
body.krea .img-model-sheet-example p,
body.krea .img-model-sheet-limit p {
  margin: 0;
  color: #f4f4f5;
  font-size: 15px;
  line-height: 1.4;
}
body.krea .img-model-sheet-example,
body.krea .img-model-sheet-caps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.krea .img-model-sheet-example {
  padding: 10px 12px;
  border-radius: 12px;
  background: #121314;
}
body.krea .img-model-sheet-body h3 {
  margin: 0;
  color: #b4b4ba;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}
body.krea .img-model-sheet-caps dl {
  display: grid;
  gap: 6px;
  margin: 0;
}
body.krea .img-model-sheet-caps div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}
body.krea .img-model-sheet-caps dt {
  margin: 0;
  color: #9a9aa0;
  font-size: 13px;
  line-height: 1.35;
}
body.krea .img-model-sheet-caps dd {
  margin: 0;
  color: #f4f4f5;
  font-size: 13px;
  line-height: 1.35;
}
body.krea .img-model-sheet-limit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.krea .img-model-sheet-limit p { color: #c8c8ce; }
body.krea .img-model-sheet-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.krea .img-model-sheet-pick,
body.krea .img-model-sheet-back {
  min-width: 168px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 80ms linear, background var(--ds-duration-fast, 120ms) var(--ds-ease, ease);
}
body.krea .img-model-sheet-pick {
  margin-left: auto;
  background: #d1fe17;
  color: #17180a;
}
body.krea .img-model-sheet-pick:hover { background: #dff85a; }
body.krea .img-model-sheet-pick:disabled {
  background: #2a2b30;
  color: #f4f4f5;
  cursor: default;
}
body.krea .img-model-sheet-back { background: #2a2b30; color: #f4f4f5; }
body.krea .img-model-sheet-back:hover { background: #34353b; }
body.krea .img-model-sheet-pick:active:not(:disabled),
body.krea .img-model-sheet-back:active,
body.krea .img-model-sheet-x:active { transform: scale(0.98); }
body.krea .img-model-sheet-pick:focus-visible,
body.krea .img-model-sheet-back:focus-visible,
body.krea .img-model-sheet-x:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #0b0b0c, 0 0 0 4px rgba(209, 254, 23, 0.8);
}
@media (max-width: 640px) {
  body.krea .img-model-sheet-actions { flex-direction: column-reverse; align-items: stretch; }
  body.krea .img-model-sheet-pick,
  body.krea .img-model-sheet-back { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.krea #images #img-dock .cw-model-menu,
  body.krea .img-model-sheet,
  body.krea .img-model-sheet-card,
  body.krea .img-model-sheet-pick,
  body.krea .img-model-sheet-back {
    transition-duration: 1ms;
    transform: none;
  }
}
body.krea #images #img-dock .cw-ratio-menu { width: 196px; }
body.krea #videos #vd-dock .cw-ratio-menu { width: 148px; }
body.krea #images #img-ratio-menu .cw-model-option {
  grid-template-columns: 36px 1fr 16px;
  column-gap: 10px;
}
body.krea #images #img-ratio-menu .cw-model-option::after { grid-column: 3; }
body.krea #images #img-ratio-menu .ratio-frame {
  display: grid;
  width: 36px;
  height: 28px;
  place-items: center;
}
body.krea #images #img-ratio-menu .ratio-frame i {
  display: block;
  box-sizing: border-box;
  border: 1.5px solid #d7d7dc;
  border-radius: 2px;
  background-image:
    linear-gradient(to right, transparent 33%, rgba(215, 215, 220, 0.7) 33%, rgba(215, 215, 220, 0.7) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(215, 215, 220, 0.7) 66%, rgba(215, 215, 220, 0.7) calc(66% + 1px), transparent calc(66% + 1px)),
    linear-gradient(to bottom, transparent 33%, rgba(215, 215, 220, 0.7) 33%, rgba(215, 215, 220, 0.7) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(215, 215, 220, 0.7) 66%, rgba(215, 215, 220, 0.7) calc(66% + 1px), transparent calc(66% + 1px));
  background-repeat: no-repeat;
}
body.krea #images .img-dock.is-sent .cw-field,
body.krea #videos .img-dock.is-sent .cw-field {
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
}
/* banana wall uses the images dock */

body.krea:has(#banana:not([hidden])),
body.krea:has(#banana:not([hidden])) .shell,
body.krea:has(#banana:not([hidden])) .stage,
body.krea:has(#videos:not([hidden])),
body.krea:has(#videos:not([hidden])) .shell,
body.krea:has(#videos:not([hidden])) .stage {
  height: 100vh;
  overflow: hidden;
}
body.krea #banana {
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #0b0b0c;
}
body.krea #banana[hidden] { display: none; }
body.krea #banana { position: relative; }
body.krea #banana.is-building .img-wall { opacity: 0.22; }
body.krea #banana.is-building #nb-thread { opacity: 0; pointer-events: none; }
body.krea #banana .img-dock.is-sent .img-sent,
body.krea #videos .img-dock.is-sent .img-sent {
  display: flex;
  animation: img-sent-pop 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.krea #banana .img-dock.is-sent #nb-draft,
body.krea #banana .img-dock.is-sent .img-tools,
body.krea #banana .img-dock.is-sent .img-files {
  max-height: 0;
  min-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
body.krea #banana #nb-draft,
body.krea #banana .img-tools,
body.krea #banana .img-files {
  transition: max-height 360ms ease, min-height 360ms ease, opacity 280ms ease, margin 360ms ease, padding 360ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body.krea #banana .img-tile.ds-template-card:active .img-use.ds-template-add {
    transform: translate(-50%, -50%);
  }}
body.krea #banana::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--ds-z-fade);
  height: var(--ds-fade-height);
  pointer-events: none;
  background: var(--ds-fade);
}
@media (max-width: 900px) {
  body.krea #banana::after { height: var(--ds-fade-height-narrow); }}
body.krea #banana .img-tile.is-on .img-card {
  outline: none;
  box-shadow: inset 0 0 0 1.5px rgba(209, 254, 23, 0.9);
}
body.krea #banana .img-tile.is-on:focus-visible .img-card {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea #banana .img-chosen {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: var(--ds-radius-full, 999px);
  background: rgba(12, 12, 14, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ds-duration, 180ms) var(--ds-ease, ease);
}
body.krea #banana .img-chosen { display: none; }
body.krea #banana .img-chosen svg { width: 14px; height: 14px; color: #d1fe17; flex: none; }
body.krea #banana .img-files { flex-wrap: wrap; align-items: flex-start; }
body.krea #banana .img-txt {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px 28px 8px 10px;
  border: 0;
  border-radius: 12px;
  background: #1a1b1e;
  color: #f4f4f5;
  text-align: left;
  cursor: text;
}
body.krea #banana .img-txt strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
body.krea #banana .img-txt-body,
body.krea #banana .img-txt textarea {
  margin: 0;
  max-height: 140px;
  overflow: auto;
  color: #d4d4d8;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
}
body.krea #banana .img-txt textarea {
  width: 100%;
  min-height: 120px;
  max-height: 240px;
  padding: 0;
  border: 0;
  resize: vertical;
  background: transparent;
  color: #f4f4f5;
}
body.krea #banana .img-txt .img-thumb-x { top: 4px; right: 4px; }
body.krea #banana .img-tile.ds-template-card {
  appearance: none;
  min-width: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
body.krea #banana .img-tile.ds-template-card:hover .img-use.ds-template-add {
  background: #f4f4f5;
}
body.krea #banana .img-tile.ds-template-card:active .img-use.ds-template-add {
  transform: translate(-50%, -50%) scale(0.98);
  background: #e7e7ea;
}
body.krea #banana .img-tile.is-on .img-use.ds-template-add,
body.krea #banana .img-tile.is-on.ds-template-card:hover .img-use.ds-template-add {
  background: #d1fe17;
  color: #17180a;
}
body.krea #banana .img-tile.is-on.ds-template-card:active .img-use.ds-template-add {
  background: #c3ef12;
  color: #17180a;
  transform: translate(-50%, -50%) scale(0.98);
}
body.krea #banana .img-tile.ds-template-card:hover .img-card,
body.krea #banana .img-tile.ds-template-card.is-on .img-card { filter: none; }
body.krea #banana .img-tile.ds-template-card .img-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 180ms var(--ds-ease, ease);
}
body.krea #banana .img-tile.ds-template-card:hover:not(.is-on) .img-card::after,
body.krea #banana .img-tile.ds-template-card:focus-visible:not(.is-on) .img-card::after,
body.krea #banana .img-tile.ds-template-card.is-on .img-card::after {
  background: rgba(0, 0, 0, 0.26);
}
body.krea #banana .img-thumb.is-template .ds-template-edit {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(18, 19, 20, 0.82);
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #banana .img-thumb.is-template .ds-template-edit svg {
  width: 16px;
  height: 16px;
}
body.krea #banana .img-thumb.is-template .ds-template-edit:hover,
body.krea #banana .img-thumb.is-template .ds-template-edit:focus-visible {
  color: #fff;
  background: #2a2b30;
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #banana #nb-dock .img-files {
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
  padding: 4px 2px 0;
  overflow: visible;
}
body.krea #banana #nb-dock .img-file {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: max-content;
  max-width: 140px;
}
body.krea #banana #nb-dock .img-thumb,
body.krea #banana #nb-dock .img-thumb.is-template {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ds-radius-md, 12px);
  background: #121314;
}
body.krea #banana #nb-dock .img-thumb img,
body.krea #banana #nb-dock .img-thumb.is-template img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  object-position: center;
  border-radius: var(--ds-radius-md, 12px);
  background: #121314;
}
body.krea #banana #nb-dock .img-file.is-media .img-thumb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  padding: 8px;
  box-sizing: border-box;
}
body.krea #banana #nb-dock .img-media-name,
body.krea #banana #nb-dock .img-media-file {
  max-width: 100%;
  overflow: hidden;
  color: #f4f4f5;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea #banana #nb-dock .img-media-file { color: #bdbdc2; }
body.krea #banana #nb-dock .img-file.is-template .img-thumb {
  width: 88px;
  height: 88px;
  overflow: hidden;
  background: #121314;
}
body.krea #banana #nb-dock .img-file.is-template .img-thumb img {
  width: 88px;
  height: 88px;
  max-width: none;
  object-fit: contain;
  object-position: center;
  background: #121314;
}
body.krea #banana #nb-dock .img-thumb-x {
  top: 4px;
  right: 4px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  background: rgba(12, 12, 14, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
body.krea #banana #nb-dock .img-thumb-x:focus-visible,
body.krea #banana #nb-dock .img-file-edit:focus-visible {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea #banana #nb-dock .img-file.is-template {
  align-items: center;
  width: 88px;
  max-width: 88px;
}
body.krea #banana #nb-dock .img-file.is-template:has(.img-template-editor) {
  width: 240px;
  max-width: 240px;
  align-items: flex-start;
}
body.krea #banana #nb-dock .img-file-edit {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
  transition: background 160ms var(--ds-ease, ease), color 160ms var(--ds-ease, ease), transform 80ms linear;
}
body.krea #banana #nb-dock .img-file-edit svg {
  width: 16px;
  height: 16px;
}
body.krea #banana #nb-dock .img-file-edit:hover,
body.krea #banana #nb-dock .img-file-edit:focus-visible {
  background: #3a3b40;
  color: #fff;
}
body.krea #banana #nb-dock .img-file-edit:active { transform: scale(0.98); }
body.krea #banana #nb-dock .img-template-editor {
  width: 240px;
}
body.krea #banana #nb-dock .img-template-editor textarea {
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  resize: vertical;
  background: #121314;
  color: #f4f4f5;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  body.krea #banana .img-chosen,
  body.krea #banana #nb-dock.cw-compose { transition: none; }}
body.krea #nb-draft {
  width: 100%;
  min-height: 48px;
  max-height: 120px;
  padding: 6px 8px;
  border: 0;
  resize: none;
  background: transparent;
  color: #f4f4f5;
  font: inherit;
  font-size: var(--ds-text-field);
  line-height: var(--ds-leading-body);
}
body.krea #banana #nb-draft { max-height: 240px; }
body.krea #nb-draft::placeholder { color: var(--ds-placeholder); }
@media (max-width: 900px) {
  body.krea:has(#banana:not([hidden])),
  body.krea:has(#banana:not([hidden])) .shell,
  body.krea:has(#banana:not([hidden])) .stage,
  body.krea:has(#videos:not([hidden])),
  body.krea:has(#videos:not([hidden])) .shell,
  body.krea:has(#videos:not([hidden])) .stage { height: auto; overflow: visible; }
  body.krea #banana,
  body.krea #videos { height: calc(100vh - 64px); }}
@media (prefers-reduced-motion: reduce) {
  body.krea .img-card,
  body.krea .img-reveal,
  body.krea .img-reveal video,
  body.krea .img-cap,
  body.krea .img-actions.is-tools,
  body.krea .img-use.ds-template-add,
  body.krea #banana .img-tile.ds-template-card .img-card::after,
  body.krea #banana #nb-dock .img-file-edit { transition: none; animation: none; filter: none; }}
body.krea #home.ms-dots,
body.krea #creatives.ms-dots,
body.krea #research.ms-dots,
body.krea #banana.ms-dots,
body.krea #videos.ms-dots,
body.krea #banana.ms-dots,
body.krea #seedance.ms-dots,
body.krea #genprompt.ms-dots,
body.krea #agent.ms-dots {
  background-color: var(--ds-canvas);
  background-image: radial-gradient(rgba(255, 255, 255, 0.208) 1px, transparent 1px);
  background-size: 18px 18px;
  border-radius: 0;
}
body.krea #creatives.ms-dots,
body.krea #research.ms-dots,
body.krea #banana.ms-dots,
body.krea #videos.ms-dots,
body.krea #banana.ms-dots,
body.krea #seedance.ms-dots,
body.krea #genprompt.ms-dots,
body.krea #agent.ms-dots {
  background-image: radial-gradient(var(--ds-dot) 1px, transparent 1px);
  background-size: var(--ds-dot-size) var(--ds-dot-size);
}
body.krea #banana .img-dock { bottom: 72px; }
body.krea #banana .img-go,
body.krea #banana .nb-go,
body.krea #genprompt .gp-go { margin-left: auto; }
body.krea #banana .img-plus,
body.krea #seedance .sd-plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 22px;
  color: #f4f4f5;
}
body.krea #nb-size-wrap[hidden] { display: none; }
body.krea .as-pic[hidden],
body.krea .as-body[hidden],
body.krea .as-status[hidden],
body.krea #nb-thread[hidden] { display: none; }
body.krea #nb-thread {
  position: absolute;
  left: 50%;
  bottom: 168px;
  z-index: 4;
  width: min(720px, calc(100% - 48px));
  max-height: 32vh;
  overflow: auto;
  transform: translateX(-50%);
}
body.krea #nb-thread { bottom: 200px; width: min(var(--ds-content-chat), calc(100% - 32px)); }
body.krea #banana .img-dock,
body.krea #seedance .sd-dock,
body.krea #banana .nb-form,
body.krea #genprompt .gp-form {
  width: min(var(--ds-content-chat), calc(100% - 32px));
}
body.krea #banana .img-plus,
body.krea #seedance .sd-plus {
  width: 32px;
  height: 32px;
  min-height: 32px;
}
body.krea #banana #nb-draft,
body.krea #seedance #sd-draft,
body.krea #banana #nb-draft,
body.krea #genprompt #gp-note {
  height: auto;
  min-height: 72px;
  max-height: 168px;
  padding: 4px 4px 0;
  font-size: var(--ds-text-field);
  line-height: var(--ds-leading-body);
}
body.krea #banana #nb-dock.cw-compose,
body.krea #videos #vd-dock.cw-compose {
  position: absolute;
  left: 50%;
  bottom: var(--ds-dock-bottom);
  z-index: var(--ds-z-dock);
  display: flex;
  flex-direction: column;
  gap: var(--ds-dock-gap);
  width: min(var(--ds-dock-width), calc((100% - 24px) * 0.9));
  margin: 0;
  padding: var(--ds-dock-pad);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-dock-radius);
  background: var(--ds-dock-bg);
  box-shadow: var(--ds-dock-shadow);
  transform: translateX(-50%);
}
body.krea #banana #nb-dock:focus-within,
body.krea #videos #vd-dock:focus-within {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), 0 0 40px rgba(209, 254, 23, 0.14);
}
body.krea #banana #nb-dock.cw-compose {
  background: var(--ds-dock-bg);
  border-color: var(--ds-line-soft);
  box-shadow: var(--ds-dock-shadow);
}
body.krea #banana #nb-dock.cw-compose:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #banana #nb-draft::placeholder { color: #9a9aa0; }
body.krea #banana #nb-dock .cw-field,
body.krea #videos #vd-dock .cw-field {
  border-radius: 0;
  background: transparent;
}
body.krea #banana #nb-dock textarea,
body.krea #videos #vd-dock textarea {
  min-height: 72px;
  max-height: calc(72px * 1.7);
  padding: 4px 4px 0;
  overflow-y: auto;
  border-radius: 0;
  background: transparent;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 24px;
}
body.krea #banana #nb-draft::placeholder,
body.krea #videos #vd-draft::placeholder { color: rgba(244, 244, 245, 0.32); }
body.krea #banana #nb-dock .cw-plus,
body.krea #videos #vd-dock .cw-plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #banana #nb-dock .cw-plus svg,
body.krea #videos #vd-dock .cw-plus svg { width: 20px; height: 20px; }
body.krea #banana #nb-dock .cw-tools,
body.krea #videos #vd-dock .cw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
}
body.krea #banana #nb-dock .cw-model,
body.krea #videos #vd-dock .cw-model,
body.krea #banana #nb-dock .cw-chip,
body.krea #videos #vd-dock .cw-chip {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
body.krea #banana #nb-dock .cw-model,
body.krea #videos #vd-dock .cw-model {
  max-width: 200px;
  padding: 0 28px 0 12px;
  line-height: 32px;
  text-align: left;
}
body.krea #banana #nb-dock .cw-chip:disabled,
body.krea #videos #vd-dock .cw-chip:disabled {
  color: #9a9aa0;
  cursor: default;
}
body.krea #banana #nb-dock .cw-send,
body.krea #videos #vd-dock .cw-send {
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin-left: auto;
  padding: 0;
  border-radius: 50%;
  background: #d1fe17;
  color: #17180a;
}
body.krea #banana #nb-dock .cw-send:disabled,
body.krea #videos #vd-dock .cw-send:disabled {
  background: #2a2b30;
  color: #6d6e73;
}
body.krea #banana #nb-dock .cw-send svg,
body.krea #videos #vd-dock .cw-send svg { width: 20px; height: 20px; }
body.krea #banana #nb-dock .cw-model-menu,
body.krea #videos #vd-dock .cw-model-menu { width: 240px; }
body.krea #banana .img-guard {
  margin: 0 4px 8px;
  color: #f4f4f5;
  font-size: 13px;
  line-height: 1.4;
}
body.krea #banana .img-guard p { margin: 0 0 6px; }
body.krea #banana .img-guard-btn {
  margin: 0 8px 0 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
body.krea #banana .img-menu-note {
  flex: 0 0 auto;
  margin: 0 4px 8px;
  color: #d0d0d6;
  font-size: 13px;
  line-height: 1.35;
}
body.krea #banana #nb-dock .cw-chip.is-blocked {
  box-shadow: inset 0 0 0 1px #ffb15a;
}
body.krea #banana #nb-dock .cw-chip.is-unset {
  opacity: 0.4;
}
body.krea #banana #nb-dock .cw-model-option.is-off {
  color: #6d6e73;
}
body.krea #banana #nb-dock .cw-model-option.is-off::after { opacity: 0.35; }
body.krea #banana #nb-dock .cw-model-menu .cw-model-option,
body.krea #banana #nb-dock .cw-model-menu .img-menu-note {
  flex: 0 0 auto;
  height: auto;
}
body.krea #banana #nb-dock #nb-model-menu {
  width: 448px;
  max-height: min(520px, calc(100vh - 140px));
}
body.krea #banana #nb-model-menu .cw-model-option {
  flex: 0 0 auto;
  grid-template-columns: 36px minmax(0, 1fr) 32px 16px;
  align-items: start;
  column-gap: 12px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 12px 14px;
  box-sizing: border-box;
}
body.krea #banana #nb-model-menu .cw-model-option::after {
  grid-column: 4;
  grid-row: 1;
}
body.krea #banana #nb-model-menu .img-fav {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8d8d93;
  cursor: pointer;
}
body.krea #banana #nb-model-menu .img-fav svg {
  width: 16px;
  height: 16px;
}
body.krea #banana #nb-model-menu .img-fav.is-on { color: #ff5a7a; }
body.krea #banana #nb-model-menu .img-fav:hover,
body.krea #banana #nb-model-menu .img-fav:focus-visible {
  color: #ff8aa0;
  background: #232428;
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #banana #nb-model-menu .img-fav.is-on:hover,
body.krea #banana #nb-model-menu .img-fav.is-on:focus-visible { color: #ff5a7a; }
body.krea #banana #nb-model-menu .img-fav:active { transform: scale(0.96); }
body.krea #banana #nb-model-menu .img-fav:disabled {
  opacity: 0.45;
  cursor: default;
}
body.krea #banana #nb-model-menu .cw-model-option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #banana #nb-model-menu .img-model-logo {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #101114;
}
body.krea #banana #nb-model-menu .img-model-logo svg {
  width: 22px;
  height: 22px;
}
body.krea #banana #nb-model-menu .cw-model-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  text-align: left;
}
body.krea #banana #nb-model-menu .cw-model-copy strong {
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body.krea #banana #nb-model-menu .img-model-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
body.krea #banana #nb-model-menu .img-model-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: #2a2b30;
  color: #d7d7dc;
  font-size: 11px;
  line-height: 1.4;
}
body.krea #banana #nb-model-menu .img-model-logo,
body.krea #banana #nb-model-menu .img-fav,
body.krea #banana #nb-model-menu .cw-model-option::after {
  margin-top: 2px;
}
body.krea #banana #nb-model-menu .img-model-strengths {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
body.krea #banana #nb-model-menu .img-model-tag {
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: default;
}
body.krea #banana #nb-model-menu .img-model-about {
  display: grid;
  place-items: center;
  flex: none;
  align-self: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #c8c8ce;
  cursor: pointer;
}
body.krea #banana #nb-model-menu .img-model-about svg {
  width: 16px;
  height: 16px;
}
body.krea #banana .nb-brand {
  position: absolute;
  inset: 0 0 160px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}
body.krea #banana .nb-brand[hidden] {
  display: none;
}
body.krea #banana .nb-brand .nb-brand-logo {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  object-fit: cover;
}
body.krea #banana .nb-brand .nb-brand-name {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  background-image: linear-gradient(100deg, #fff 0%, #fff6c2 16%, #ffe14a 34%, #fff 50%, #f6c945 66%, #fff 82%, #ffe14a 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: nb-shimmer 5.5s linear infinite;
}
@keyframes nb-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  body.krea #banana .nb-brand .nb-brand-name {
    animation: none;
    background-image: none;
    color: #fff6c2;
    -webkit-text-fill-color: #fff6c2;
  }
}
body.krea #banana #nb-model-menu .img-model-about:hover,
body.krea #banana #nb-model-menu .img-model-about:focus-visible {
  color: #fff;
  background: #232428;
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.45);
}
body.krea #banana #nb-model-menu .cw-model-copy small {
  display: block;
  grid-column: auto;
  margin-top: 4px;
  color: #dedee3;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.krea #banana #nb-dock .cw-model-menu {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--ds-popover-in, 160ms) var(--ds-ease, ease), transform var(--ds-popover-in, 160ms) var(--ds-ease, ease);
}
body.krea #banana #nb-dock .cw-model-menu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body.krea #banana #nb-dock .cw-model-menu.is-closing {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition-duration: var(--ds-popover-out, 120ms);
}
@media (prefers-reduced-motion: reduce) {
  body.krea #banana #nb-dock .cw-model-menu,
  body.krea .img-model-sheet,
  body.krea .img-model-sheet-card,
  body.krea .img-model-sheet-pick,
  body.krea .img-model-sheet-back {
    transition-duration: 1ms;
    transform: none;
  }}
body.krea #banana #nb-dock .cw-ratio-menu { width: 196px; }
body.krea #banana #nb-ratio-menu .cw-model-option {
  grid-template-columns: 36px 1fr 16px;
  column-gap: 10px;
}
body.krea #banana #nb-ratio-menu .cw-model-option::after { grid-column: 3; }
body.krea #banana #nb-ratio-menu .ratio-frame {
  display: grid;
  width: 36px;
  height: 28px;
  place-items: center;
}
body.krea #banana #nb-ratio-menu .ratio-frame i {
  display: block;
  box-sizing: border-box;
  border: 1.5px solid #d7d7dc;
  border-radius: 2px;
  background-image:
    linear-gradient(to right, transparent 33%, rgba(215, 215, 220, 0.7) 33%, rgba(215, 215, 220, 0.7) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(215, 215, 220, 0.7) 66%, rgba(215, 215, 220, 0.7) calc(66% + 1px), transparent calc(66% + 1px)),
    linear-gradient(to bottom, transparent 33%, rgba(215, 215, 220, 0.7) 33%, rgba(215, 215, 220, 0.7) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(215, 215, 220, 0.7) 66%, rgba(215, 215, 220, 0.7) calc(66% + 1px), transparent calc(66% + 1px));
  background-repeat: no-repeat;
}
body.krea #banana .img-dock.is-sent .cw-field,
body.krea #videos .img-dock.is-sent .cw-field {
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
}

body.krea #banana {
  display: block;
  padding: 0;
}
@media (max-width: 900px) {
  body.krea #banana { padding: 0; }
}

/* seedance wall uses the images dock */

body.krea:has(#seedance:not([hidden])),
body.krea:has(#seedance:not([hidden])) .shell,
body.krea:has(#seedance:not([hidden])) .stage,
body.krea:has(#videos:not([hidden])),
body.krea:has(#videos:not([hidden])) .shell,
body.krea:has(#videos:not([hidden])) .stage {
  height: 100vh;
  overflow: hidden;
}
body.krea #seedance {
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #0b0b0c;
}
body.krea #seedance[hidden] { display: none; }
body.krea #seedance { position: relative; }
body.krea #seedance.is-building .img-wall { opacity: 0.22; }
body.krea #seedance.is-building #sd-thread { opacity: 0; pointer-events: none; }
body.krea #seedance .img-dock.is-sent .img-sent,
body.krea #videos .img-dock.is-sent .img-sent {
  display: flex;
  animation: img-sent-pop 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.krea #seedance .img-dock.is-sent #sd-draft,
body.krea #seedance .img-dock.is-sent .img-tools,
body.krea #seedance .img-dock.is-sent .img-files {
  max-height: 0;
  min-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
body.krea #seedance #sd-draft,
body.krea #seedance .img-tools,
body.krea #seedance .img-files {
  transition: max-height 360ms ease, min-height 360ms ease, opacity 280ms ease, margin 360ms ease, padding 360ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body.krea #seedance .img-tile.ds-template-card:active .img-use.ds-template-add {
    transform: translate(-50%, -50%);
  }}
body.krea #seedance::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--ds-z-fade);
  height: var(--ds-fade-height);
  pointer-events: none;
  background: var(--ds-fade);
}
@media (max-width: 900px) {
  body.krea #seedance::after { height: var(--ds-fade-height-narrow); }}
body.krea #seedance .img-tile.is-on .img-card {
  outline: none;
  box-shadow: inset 0 0 0 1.5px rgba(209, 254, 23, 0.9);
}
body.krea #seedance .img-tile.is-on:focus-visible .img-card {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea #seedance .img-chosen {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: var(--ds-radius-full, 999px);
  background: rgba(12, 12, 14, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ds-duration, 180ms) var(--ds-ease, ease);
}
body.krea #seedance .img-chosen { display: none; }
body.krea #seedance .img-chosen svg { width: 14px; height: 14px; color: #d1fe17; flex: none; }
body.krea #seedance .img-files { flex-wrap: wrap; align-items: flex-start; }
body.krea #seedance .img-txt {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px 28px 8px 10px;
  border: 0;
  border-radius: 12px;
  background: #1a1b1e;
  color: #f4f4f5;
  text-align: left;
  cursor: text;
}
body.krea #seedance .img-txt strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
body.krea #seedance .img-txt-body,
body.krea #seedance .img-txt textarea {
  margin: 0;
  max-height: 140px;
  overflow: auto;
  color: #d4d4d8;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
}
body.krea #seedance .img-txt textarea {
  width: 100%;
  min-height: 120px;
  max-height: 240px;
  padding: 0;
  border: 0;
  resize: vertical;
  background: transparent;
  color: #f4f4f5;
}
body.krea #seedance .img-txt .img-thumb-x { top: 4px; right: 4px; }
body.krea #seedance .img-tile.ds-template-card {
  appearance: none;
  min-width: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
body.krea #seedance .img-tile.ds-template-card:hover .img-use.ds-template-add {
  background: #f4f4f5;
}
body.krea #seedance .img-tile.ds-template-card:active .img-use.ds-template-add {
  transform: translate(-50%, -50%) scale(0.98);
  background: #e7e7ea;
}
body.krea #seedance .img-tile.is-on .img-use.ds-template-add,
body.krea #seedance .img-tile.is-on.ds-template-card:hover .img-use.ds-template-add {
  background: #d1fe17;
  color: #17180a;
}
body.krea #seedance .img-tile.is-on.ds-template-card:active .img-use.ds-template-add {
  background: #c3ef12;
  color: #17180a;
  transform: translate(-50%, -50%) scale(0.98);
}
body.krea #seedance .img-tile.ds-template-card:hover .img-card,
body.krea #seedance .img-tile.ds-template-card.is-on .img-card { filter: none; }
body.krea #seedance .img-tile.ds-template-card .img-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 180ms var(--ds-ease, ease);
}
body.krea #seedance .img-tile.ds-template-card:hover:not(.is-on) .img-card::after,
body.krea #seedance .img-tile.ds-template-card:focus-visible:not(.is-on) .img-card::after,
body.krea #seedance .img-tile.ds-template-card.is-on .img-card::after {
  background: rgba(0, 0, 0, 0.26);
}
body.krea #seedance .img-thumb.is-template .ds-template-edit {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(18, 19, 20, 0.82);
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #seedance .img-thumb.is-template .ds-template-edit svg {
  width: 16px;
  height: 16px;
}
body.krea #seedance .img-thumb.is-template .ds-template-edit:hover,
body.krea #seedance .img-thumb.is-template .ds-template-edit:focus-visible {
  color: #fff;
  background: #2a2b30;
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #seedance #sd-dock .img-files {
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
  padding: 4px 2px 0;
  overflow: visible;
}
body.krea #seedance #sd-dock .img-file {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: max-content;
  max-width: 140px;
}
body.krea #seedance #sd-dock .img-thumb,
body.krea #seedance #sd-dock .img-thumb.is-template {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ds-radius-md, 12px);
  background: #121314;
}
body.krea #seedance #sd-dock .img-thumb img,
body.krea #seedance #sd-dock .img-thumb.is-template img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  object-position: center;
  border-radius: var(--ds-radius-md, 12px);
  background: #121314;
}
body.krea #seedance #sd-dock .img-file.is-media .img-thumb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  padding: 8px;
  box-sizing: border-box;
}
body.krea #seedance #sd-dock .img-media-name,
body.krea #seedance #sd-dock .img-media-file {
  max-width: 100%;
  overflow: hidden;
  color: #f4f4f5;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea #seedance #sd-dock .img-media-file { color: #bdbdc2; }
body.krea #seedance #sd-dock .img-file.is-template .img-thumb {
  width: 88px;
  height: 88px;
  overflow: hidden;
  background: #121314;
}
body.krea #seedance #sd-dock .img-file.is-template .img-thumb img {
  width: 88px;
  height: 88px;
  max-width: none;
  object-fit: contain;
  object-position: center;
  background: #121314;
}
body.krea #seedance #sd-dock .img-thumb-x {
  top: 4px;
  right: 4px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  background: rgba(12, 12, 14, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
body.krea #seedance #sd-dock .img-thumb-x:focus-visible,
body.krea #seedance #sd-dock .img-file-edit:focus-visible {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea #seedance #sd-dock .img-file.is-template {
  align-items: center;
  width: 88px;
  max-width: 88px;
}
body.krea #seedance #sd-dock .img-file.is-template:has(.img-template-editor) {
  width: 240px;
  max-width: 240px;
  align-items: flex-start;
}
body.krea #seedance #sd-dock .img-file-edit {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
  transition: background 160ms var(--ds-ease, ease), color 160ms var(--ds-ease, ease), transform 80ms linear;
}
body.krea #seedance #sd-dock .img-file-edit svg {
  width: 16px;
  height: 16px;
}
body.krea #seedance #sd-dock .img-file-edit:hover,
body.krea #seedance #sd-dock .img-file-edit:focus-visible {
  background: #3a3b40;
  color: #fff;
}
body.krea #seedance #sd-dock .img-file-edit:active { transform: scale(0.98); }
body.krea #seedance #sd-dock .img-template-editor {
  width: 240px;
}
body.krea #seedance #sd-dock .img-template-editor textarea {
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  resize: vertical;
  background: #121314;
  color: #f4f4f5;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  body.krea #seedance .img-chosen,
  body.krea #seedance #sd-dock.cw-compose { transition: none; }}
body.krea #sd-draft {
  width: 100%;
  min-height: 48px;
  max-height: 120px;
  padding: 6px 8px;
  border: 0;
  resize: none;
  background: transparent;
  color: #f4f4f5;
  font: inherit;
  font-size: var(--ds-text-field);
  line-height: var(--ds-leading-body);
}
body.krea #seedance #sd-draft { max-height: 240px; }
body.krea #sd-draft::placeholder { color: var(--ds-placeholder); }
@media (max-width: 900px) {
  body.krea:has(#seedance:not([hidden])),
  body.krea:has(#seedance:not([hidden])) .shell,
  body.krea:has(#seedance:not([hidden])) .stage,
  body.krea:has(#videos:not([hidden])),
  body.krea:has(#videos:not([hidden])) .shell,
  body.krea:has(#videos:not([hidden])) .stage { height: auto; overflow: visible; }
  body.krea #seedance,
  body.krea #videos { height: calc(100vh - 64px); }}
@media (prefers-reduced-motion: reduce) {
  body.krea .img-card,
  body.krea .img-reveal,
  body.krea .img-reveal video,
  body.krea .img-cap,
  body.krea .img-actions.is-tools,
  body.krea .img-use.ds-template-add,
  body.krea #seedance .img-tile.ds-template-card .img-card::after,
  body.krea #seedance #sd-dock .img-file-edit { transition: none; animation: none; filter: none; }}
body.krea #home.ms-dots,
body.krea #creatives.ms-dots,
body.krea #research.ms-dots,
body.krea #seedance.ms-dots,
body.krea #videos.ms-dots,
body.krea #seedance.ms-dots,
body.krea #seedance.ms-dots,
body.krea #genprompt.ms-dots,
body.krea #agent.ms-dots {
  background-color: var(--ds-canvas);
  background-image: radial-gradient(rgba(255, 255, 255, 0.208) 1px, transparent 1px);
  background-size: 18px 18px;
  border-radius: 0;
}
body.krea #creatives.ms-dots,
body.krea #research.ms-dots,
body.krea #seedance.ms-dots,
body.krea #videos.ms-dots,
body.krea #seedance.ms-dots,
body.krea #seedance.ms-dots,
body.krea #genprompt.ms-dots,
body.krea #agent.ms-dots {
  background-image: radial-gradient(var(--ds-dot) 1px, transparent 1px);
  background-size: var(--ds-dot-size) var(--ds-dot-size);
}
body.krea #seedance .img-dock { bottom: 72px; }
body.krea #seedance .img-go,
body.krea #seedance .nb-go,
body.krea #genprompt .gp-go { margin-left: auto; }
body.krea #seedance .img-plus,
body.krea #seedance .sd-plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 22px;
  color: #f4f4f5;
}
body.krea #sd-dur-wrap[hidden] { display: none; }
body.krea .as-pic[hidden],
body.krea .as-body[hidden],
body.krea .as-status[hidden],
body.krea #sd-thread[hidden] { display: none; }
body.krea #sd-thread {
  position: absolute;
  left: 50%;
  bottom: 168px;
  z-index: 4;
  width: min(720px, calc(100% - 48px));
  max-height: 32vh;
  overflow: auto;
  transform: translateX(-50%);
}
body.krea #sd-thread { bottom: 200px; width: min(var(--ds-content-chat), calc(100% - 32px)); }
body.krea #seedance .img-dock,
body.krea #seedance .sd-dock,
body.krea #seedance .nb-form,
body.krea #genprompt .gp-form {
  width: min(var(--ds-content-chat), calc(100% - 32px));
}
body.krea #seedance .img-plus,
body.krea #seedance .sd-plus {
  width: 32px;
  height: 32px;
  min-height: 32px;
}
body.krea #seedance #sd-draft,
body.krea #seedance #sd-draft,
body.krea #seedance #sd-draft,
body.krea #genprompt #gp-note {
  height: auto;
  min-height: 72px;
  max-height: 168px;
  padding: 4px 4px 0;
  font-size: var(--ds-text-field);
  line-height: var(--ds-leading-body);
}
body.krea #seedance #sd-dock.cw-compose,
body.krea #videos #vd-dock.cw-compose {
  position: absolute;
  left: 50%;
  bottom: 72px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(720px, calc((100% - 24px) * 0.9));
  margin: 0;
  padding: 8px;
  border: 1px solid #2c2c31;
  border-radius: 22px;
  background: #1a1b1e;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
}
body.krea #seedance #sd-dock:focus-within,
body.krea #videos #vd-dock:focus-within {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), 0 0 40px rgba(209, 254, 23, 0.14);
}
body.krea #seedance #sd-dock.cw-compose {
  background: #16171a;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.5);
}
body.krea #videos #vd-dock.cw-compose {
  background: var(--ds-dock-bg);
  border-color: var(--ds-line-soft);
  box-shadow: var(--ds-dock-shadow);
}
body.krea #videos #vd-dock.cw-compose:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--ds-dock-shadow), 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #seedance #sd-dock.cw-compose:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #seedance #sd-draft::placeholder { color: #9a9aa0; }
body.krea #seedance #sd-dock .cw-field,
body.krea #videos #vd-dock .cw-field {
  border-radius: 0;
  background: transparent;
}
body.krea #seedance #sd-dock textarea,
body.krea #videos #vd-dock textarea {
  min-height: 72px;
  max-height: calc(72px * 1.7);
  padding: 4px 4px 0;
  overflow-y: auto;
  border-radius: 0;
  background: transparent;
  color: #f4f4f5;
  font-size: 16px;
  line-height: 24px;
}
body.krea #seedance #sd-draft::placeholder,
body.krea #videos #vd-draft::placeholder { color: rgba(244, 244, 245, 0.32); }
body.krea #seedance #sd-dock .cw-plus,
body.krea #videos #vd-dock .cw-plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #seedance #sd-dock .cw-plus svg,
body.krea #videos #vd-dock .cw-plus svg { width: 20px; height: 20px; }
body.krea #seedance #sd-dock .cw-tools,
body.krea #videos #vd-dock .cw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
}
body.krea #seedance #sd-dock .cw-model,
body.krea #videos #vd-dock .cw-model,
body.krea #seedance #sd-dock .cw-chip,
body.krea #videos #vd-dock .cw-chip {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
body.krea #seedance #sd-dock .cw-model,
body.krea #videos #vd-dock .cw-model {
  max-width: 200px;
  padding: 0 28px 0 12px;
  line-height: 32px;
  text-align: left;
}
body.krea #seedance #sd-dock .cw-chip:disabled,
body.krea #videos #vd-dock .cw-chip:disabled {
  color: #9a9aa0;
  cursor: default;
}
body.krea #seedance #sd-dock .cw-send,
body.krea #videos #vd-dock .cw-send {
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin-left: auto;
  padding: 0;
  border-radius: 50%;
  background: #d1fe17;
  color: #17180a;
}
body.krea #seedance #sd-dock .cw-send:disabled,
body.krea #videos #vd-dock .cw-send:disabled {
  background: #2a2b30;
  color: #6d6e73;
}
body.krea #seedance #sd-dock .cw-send svg,
body.krea #videos #vd-dock .cw-send svg { width: 20px; height: 20px; }
body.krea #seedance #sd-dock .cw-model-menu,
body.krea #videos #vd-dock .cw-model-menu { width: 240px; }
body.krea #seedance .img-guard {
  margin: 0 4px 8px;
  color: #f4f4f5;
  font-size: 13px;
  line-height: 1.4;
}
body.krea #seedance .img-guard p { margin: 0 0 6px; }
body.krea #seedance .img-guard-btn {
  margin: 0 8px 0 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
body.krea #seedance .img-menu-note {
  flex: 0 0 auto;
  margin: 0 4px 8px;
  color: #d0d0d6;
  font-size: 13px;
  line-height: 1.35;
}
body.krea #seedance #sd-dock .cw-chip.is-blocked {
  box-shadow: inset 0 0 0 1px #ffb15a;
}
body.krea #seedance #sd-dock .cw-chip.is-unset {
  opacity: 0.4;
}
body.krea #seedance #sd-dock .cw-model-option.is-off {
  color: #6d6e73;
}
body.krea #seedance #sd-dock .cw-model-option.is-off::after { opacity: 0.35; }
body.krea #seedance #sd-dock .cw-model-menu .cw-model-option,
body.krea #seedance #sd-dock .cw-model-menu .img-menu-note {
  flex: 0 0 auto;
  height: auto;
}
body.krea #seedance #sd-dock #sd-model-menu {
  width: 448px;
  max-height: min(520px, calc(100vh - 140px));
}
body.krea #seedance #sd-model-menu .cw-model-option {
  flex: 0 0 auto;
  grid-template-columns: 36px minmax(0, 1fr) 32px 16px;
  align-items: start;
  column-gap: 12px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 12px 14px;
  box-sizing: border-box;
}
body.krea #seedance #sd-model-menu .cw-model-option::after {
  grid-column: 4;
  grid-row: 1;
}
body.krea #seedance #sd-model-menu .img-fav {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8d8d93;
  cursor: pointer;
}
body.krea #seedance #sd-model-menu .img-fav svg {
  width: 16px;
  height: 16px;
}
body.krea #seedance #sd-model-menu .img-fav.is-on { color: #ff5a7a; }
body.krea #seedance #sd-model-menu .img-fav:hover,
body.krea #seedance #sd-model-menu .img-fav:focus-visible {
  color: #ff8aa0;
  background: #232428;
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #seedance #sd-model-menu .img-fav.is-on:hover,
body.krea #seedance #sd-model-menu .img-fav.is-on:focus-visible { color: #ff5a7a; }
body.krea #seedance #sd-model-menu .img-fav:active { transform: scale(0.96); }
body.krea #seedance #sd-model-menu .img-fav:disabled {
  opacity: 0.45;
  cursor: default;
}
body.krea #seedance #sd-model-menu .cw-model-option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(209, 254, 23, 0.28);
}
body.krea #seedance #sd-model-menu .img-model-logo {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #101114;
}
body.krea #seedance #sd-model-menu .img-model-logo svg {
  width: 22px;
  height: 22px;
}
body.krea #seedance #sd-model-menu .cw-model-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  text-align: left;
}
body.krea #seedance #sd-model-menu .cw-model-copy strong {
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body.krea #seedance #sd-model-menu .img-model-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
body.krea #seedance #sd-model-menu .img-model-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: #2a2b30;
  color: #d7d7dc;
  font-size: 11px;
  line-height: 1.4;
}
body.krea #seedance #sd-model-menu .img-model-logo,
body.krea #seedance #sd-model-menu .img-fav,
body.krea #seedance #sd-model-menu .cw-model-option::after {
  margin-top: 2px;
}
body.krea #seedance #sd-model-menu .img-model-strengths {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
body.krea #seedance #sd-model-menu .img-model-tag {
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: default;
}
body.krea #seedance #sd-model-menu .img-model-about {
  display: grid;
  place-items: center;
  flex: none;
  align-self: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #c8c8ce;
  cursor: pointer;
}
body.krea #seedance #sd-model-menu .img-model-about svg {
  width: 16px;
  height: 16px;
}
body.krea #seedance #sd-model-menu .img-model-about:hover,
body.krea #seedance #sd-model-menu .img-model-about:focus-visible {
  color: #fff;
  background: #232428;
  outline: none;
  box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.45);
}
body.krea #seedance #sd-model-menu .cw-model-copy small {
  display: block;
  grid-column: auto;
  margin-top: 4px;
  color: #dedee3;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.krea #seedance #sd-dock .cw-model-menu {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--ds-popover-in, 160ms) var(--ds-ease, ease), transform var(--ds-popover-in, 160ms) var(--ds-ease, ease);
}
body.krea #seedance #sd-dock .cw-model-menu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body.krea #seedance #sd-dock .cw-model-menu.is-closing {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition-duration: var(--ds-popover-out, 120ms);
}
@media (prefers-reduced-motion: reduce) {
  body.krea #seedance #sd-dock .cw-model-menu,
  body.krea .img-model-sheet,
  body.krea .img-model-sheet-card,
  body.krea .img-model-sheet-pick,
  body.krea .img-model-sheet-back {
    transition-duration: 1ms;
    transform: none;
  }}
body.krea #seedance #sd-dock .cw-ratio-menu { width: 196px; }
body.krea #seedance #sd-ratio-menu .cw-model-option {
  grid-template-columns: 36px 1fr 16px;
  column-gap: 10px;
}
body.krea #seedance #sd-ratio-menu .cw-model-option::after { grid-column: 3; }
body.krea #seedance #sd-ratio-menu .ratio-frame {
  display: grid;
  width: 36px;
  height: 28px;
  place-items: center;
}
body.krea #seedance #sd-ratio-menu .ratio-frame i {
  display: block;
  box-sizing: border-box;
  border: 1.5px solid #d7d7dc;
  border-radius: 2px;
  background-image:
    linear-gradient(to right, transparent 33%, rgba(215, 215, 220, 0.7) 33%, rgba(215, 215, 220, 0.7) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(215, 215, 220, 0.7) 66%, rgba(215, 215, 220, 0.7) calc(66% + 1px), transparent calc(66% + 1px)),
    linear-gradient(to bottom, transparent 33%, rgba(215, 215, 220, 0.7) 33%, rgba(215, 215, 220, 0.7) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(215, 215, 220, 0.7) 66%, rgba(215, 215, 220, 0.7) calc(66% + 1px), transparent calc(66% + 1px));
  background-repeat: no-repeat;
}
body.krea #seedance .img-dock.is-sent .cw-field,
body.krea #videos .img-dock.is-sent .cw-field {
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
}

body.krea #seedance {
  display: block;
  padding: 0;
}
@media (max-width: 900px) {
  body.krea #seedance { padding: 0; }
}

body.krea .lib-head h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}
body.krea .lib-card[role="button"] { cursor: pointer; }
body.krea .lib-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #121316;
  color: #9a9aa0;
  font-size: 13px;
}
body.krea .lib-fail-link {
  justify-self: start;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d1fe17;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea .lib-work {
  display: grid;
  gap: 12px;
  max-width: 720px;
}
body.krea .lib-work .lib-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
body.krea .lib-diagnostics {
  color: #9a9aa0;
  font-size: 13px;
}
body.krea:has(#genprompt:not([hidden])),
body.krea:has(#genprompt:not([hidden])) .shell,
body.krea:has(#genprompt:not([hidden])) .stage {
  height: 100vh;
  overflow: hidden;
}
body.krea #genprompt {
  display: block;
  height: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
}
body.krea #genprompt .gp-stage {
  position: absolute;
  inset: 0 0 160px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: auto;
  margin: 0;
  pointer-events: none;
}
body.krea #genprompt .gp-stage[hidden] { display: none; }
body.krea #genprompt #gp-form {
  left: 50%;
  bottom: var(--ds-dock-bottom);
  z-index: var(--ds-z-dock);
  gap: var(--ds-dock-gap);
  width: min(var(--ds-dock-width), calc((100% - 24px) * 0.9));
  margin: 0;
  padding: var(--ds-dock-pad);
  border-radius: var(--ds-dock-radius);
  background: var(--ds-dock-bg);
  box-shadow: var(--ds-dock-shadow);
  transform: translateX(-50%);
  animation: none;
}
body.krea #genprompt #gp-form.is-over { box-shadow: inset 0 0 0 1px #fff; }
body.krea #genprompt .cw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.krea #genprompt #gp-add {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 22px;
  background: #2a2b30;
  color: #f4f4f5;
}
body.krea #genprompt #gp-add svg { width: 20px; height: 20px; margin: 0; }
body.krea #genprompt #gp-form .cw-model,
body.krea #genprompt #gp-form .cw-chip {
  height: 32px;
  min-height: 32px;
  max-width: none;
  padding: 0 12px;
  border-radius: 16px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 500;
}
body.krea #genprompt #gp-form .cw-model {
  max-width: 220px;
  padding: 0 28px 0 12px;
  line-height: 32px;
}
body.krea #genprompt #gp-note {
  min-height: 72px;
  font-size: 16px;
  line-height: 24px;
}
body.krea #genprompt #gp-form .cw-model-menu {
  width: 380px;
  max-height: 420px;
}
body.krea #genprompt #gp-form #gp-model-menu {
  width: 448px;
  max-height: min(520px, calc(100vh - 140px));
}
body.krea #genprompt #gp-form #gp-model-menu .cw-model-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 32px 16px;
  align-items: start;
  height: auto;
  flex: none;
}
body.krea #genprompt #gp-form .cw-model-option {
  height: auto;
  align-items: center;
  white-space: normal;
}
body.krea #genprompt #gp-form .cw-model-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body.krea #genprompt #gp-form .cw-model-copy strong {
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 500;
}
body.krea #genprompt #gp-form .cw-model-copy small {
  white-space: normal;
  color: #9a9aa0;
}
body.krea #genprompt .gp-menu-lead {
  margin: 0 8px 8px;
  color: #bdbdc2;
  font-size: 13px;
  line-height: 1.35;
}
body.krea #genprompt .img-thumb .gp-file-name {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: 6px;
  overflow: hidden;
  border-radius: 12px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 10px;
  line-height: 1.2;
  word-break: break-all;
}
body.krea #genprompt .img-file p {
  width: 88px;
  margin: 4px 0 0;
  color: #e7c56a;
  font-size: 12px;
  line-height: 16px;
}
body.krea #genprompt .gp-file-x {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 14px;
  background: #2a2b30;
  color: #f4f4f5;
  cursor: pointer;
}
body.krea #genprompt #gp-go:not(:disabled) { background: #fff; color: #111; }
body.krea #genprompt .gp-wall {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: auto;
}
body.krea #genprompt .gp-masonry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 220px;
}
body.krea #genprompt .gp-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.krea #genprompt .gp-card {
  flex: none;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: #17181b;
}
body.krea #genprompt .gp-card-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #101114;
}
body.krea #genprompt .gp-card-shot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.krea #genprompt .gp-card-shot > .gp-file-name {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px;
  color: #f4f4f5;
  font-size: 14px;
}
body.krea #genprompt .gp-card-shot .img-wait {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(16, 17, 20, 0.55);
  color: #f4f4f5;
}
body.krea #genprompt .gp-stop {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #f4f4f5;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
body.krea #genprompt .gp-card h3 {
  margin: 12px 14px 0;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.krea #genprompt .gp-card-prompt {
  display: -webkit-box;
  margin: 8px 14px 14px;
  overflow: hidden;
  color: #f4f4f5;
  font-size: 14px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
body.krea #genprompt .gp-card.is-ready:hover .img-actions.is-tools,
body.krea #genprompt .gp-card.is-ready:focus-within .img-actions.is-tools {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
body.krea #genprompt .gp-card.is-miss { padding: 16px; }
body.krea #genprompt .gp-card-error {
  margin: 0;
  color: #f4f4f5;
  font-size: 15px;
  line-height: 1.4;
}
body.krea #genprompt .gp-stale {
  margin: 0 14px 14px;
  color: #e7c56a;
  font-size: 13px;
}
body.krea #genprompt .gp-stale[hidden] { display: none; }
body.krea .gp-view {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 72px 24px 48px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.82);
}
body.krea .gp-view-sheet {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(720px, 100%);
  color: #f4f4f5;
}
body.krea .gp-view-sheet h3 { margin: 0; color: #fff; font-size: 18px; }
body.krea .gp-view-sheet p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
}
body.krea .gp-view-x {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 22px;
  cursor: pointer;
}
body.krea .account-nav { flex-wrap: wrap; }
body.krea .account-period { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
body.krea .account-period button,
body.krea .account-custom button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: transparent;
  color: #f4f4f5;
}
body.krea .account-period button[aria-pressed="true"] { background: #f4f4f5; color: #111; }
body.krea .account-custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
body.krea .account-custom[hidden] { display: none; }
body.krea .account-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
body.krea .account-kpi { padding: 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: #17181b; }
body.krea .account-kpi h3 { margin: 0; color: #bdbdc2; font-size: 13px; font-weight: 500; }
body.krea .account-kpi strong { display: block; margin: 6px 0; color: #fff; font-size: 22px; }
body.krea #account-overview h3,
body.krea #account-analytics h3 { margin: 12px 0 4px; color: #f4f4f5; font-size: 16px; }
body.krea #account-overview svg { width: 100%; height: auto; }
body.krea .account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
@media (max-width: 800px) {
  body.krea .account-kpis { grid-template-columns: 1fr; }
}
body.krea:has(#agent:not([hidden])),
body.krea:has(#agent:not([hidden])) .shell,
body.krea:has(#agent:not([hidden])) .stage {
  height: 100vh;
  overflow: hidden;
}
body.krea #agent {
  display: block;
  height: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
}
body.krea #agent .gp-stage {
  position: absolute;
  inset: 0 0 160px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  pointer-events: none;
}
body.krea #agent .gp-stage[hidden] { display: none; }
body.krea #agent #agent-dock {
  left: 50%;
  bottom: var(--ds-dock-bottom);
  z-index: var(--ds-z-dock);
  gap: var(--ds-dock-gap);
  width: min(var(--ds-dock-width), calc((100% - 24px) * 0.9));
  margin: 0;
  padding: var(--ds-dock-pad);
  border-radius: var(--ds-dock-radius);
  background: var(--ds-dock-bg);
  box-shadow: var(--ds-dock-shadow);
  transform: translateX(-50%);
  animation: none;
}
body.krea #agent #agent-draft {
  min-height: 72px;
  font-size: 16px;
  line-height: 24px;
}
body.krea #agent #agent-dock .cw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.krea #agent #agent-add {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 22px;
  background: #2a2b30;
  color: #f4f4f5;
}
body.krea #agent #agent-add svg { width: 20px; height: 20px; margin: 0; }
body.krea #agent #agent-model {
  height: 32px;
  min-height: 32px;
  max-width: 220px;
  padding: 0 28px 0 12px;
  border-radius: 16px;
  background: #2a2b30;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.krea #agent #agent-go {
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin-left: auto;
  border-radius: 50%;
}
body.krea #agent #agent-go:not(:disabled) { background: #d1fe17; color: #17180a; }
body.krea #agent #agent-dock .cw-model-menu {
  width: 380px;
  max-height: 420px;
}
body.krea #agent #agent-dock #agent-model-menu {
  width: 448px;
  max-height: min(520px, calc(100vh - 140px));
}
body.krea #agent #agent-dock #agent-model-menu .cw-model-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 32px 16px;
  align-items: start;
  height: auto;
  flex: none;
}
body.krea #agent #agent-dock .cw-model-option {
  height: auto;
  flex: none;
  align-items: start;
  white-space: normal;
}
body.krea #agent #agent-dock .cw-model-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body.krea #agent #agent-dock .cw-model-copy strong {
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 500;
}
body.krea #agent #agent-dock .cw-model-copy small {
  white-space: normal;
  color: #9a9aa0;
}
body.krea #agent .gp-menu-lead {
  margin: 0 8px 8px;
  color: #bdbdc2;
  font-size: 13px;
  line-height: 1.35;
}
body.krea #agent .agent-thread {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 240px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(720px, calc(100% - 48px));
  margin: 0 auto;
  overflow: auto;
}
body.krea #agent .agent-thread[hidden] { display: none; }
body.krea #agent .agent-msg { max-width: 100%; }
body.krea #agent .agent-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
body.krea #agent .agent-msg.is-user { align-self: end; }
body.krea #agent .agent-msg.is-user p {
  padding: 12px 14px;
  border-radius: 16px;
  background: #2a2b30;
  color: #f4f4f5;
}
body.krea #agent .agent-msg.is-assistant p { color: #f4f4f5; font-size: 16px; line-height: 24px; }
body.krea #agent .agent-who { margin: 0 0 4px; color: #9a9aa0; font-size: 13px; }
body.krea #agent .agent-pics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
body.krea #agent .agent-pics img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
body.krea #agent .agent-pics p { color: #9a9aa0; font-size: 13px; }
body.krea #agent .agent-msg.is-status p { color: #e7c56a; font-size: 14px; }
body.krea #agent #agent-note:empty { display: none; }
@media (max-width: 900px) {
  body.krea:has(#agent:not([hidden])),
  body.krea:has(#agent:not([hidden])) .shell,
  body.krea:has(#agent:not([hidden])) .stage { height: auto; overflow: visible; }
  body.krea #agent { height: calc(100vh - 64px); }
  body.krea #agent .gp-stage h2 { font-size: 32px; }
}
body.krea .sd-brand {
  position: absolute;
  inset: 0 0 160px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}
body.krea .sd-brand[hidden] { display: none; }
body.krea .nb-brand-logo {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  object-fit: cover;
}
body.krea .sd-brand .nb-brand-name,
body.krea #genprompt .gp-mark .nb-brand-name,
body.krea #agent .gp-mark .nb-brand-name,
body.krea #videos .sd-brand .nb-brand-name {
  margin: 0;
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: nb-shimmer 5.5s linear infinite;
}
body.krea .sd-brand .nb-brand-name.is-seed {
  background-image: linear-gradient(100deg, #fff 0%, #e7fffb 16%, #7ee8dc 34%, #fff 50%, #5eb8ff 66%, #fff 82%, #7ee8dc 100%);
}
body.krea #genprompt .gp-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
body.krea #genprompt .gp-mark .nb-brand-name.is-prompt {
  background-image: linear-gradient(100deg, #fff 0%, #f6ecff 16%, #d7b4ff 34%, #fff 50%, #b48cff 66%, #fff 82%, #e4ccff 100%);
}
body.krea #agent .gp-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
body.krea #agent .gp-mark .nb-brand-name.is-agent {
  line-height: 1.2;
  padding: 0.08em 0.06em 0.14em;
  background-image: linear-gradient(100deg, #fff 0%, #f7f7f8 16%, #dedae8 34%, #fff 50%, #c4b5fd 66%, #fff 82%, #eeeaf8 100%);
}
body.krea #videos .sd-brand .nb-brand-name.is-video {
  background-image: linear-gradient(100deg, #fff 0%, #eef4ff 16%, #b9d4ff 34%, #fff 50%, #93c5fd 66%, #fff 82%, #d7e8ff 100%);
}
body.krea #videos .img-menu-note {
  flex: 0 0 auto;
  margin: 0 4px 8px;
  color: #d0d0d6;
  font-size: 13px;
  line-height: 1.35;
}
body.krea #videos #vd-model-menu {
  width: 448px;
  max-height: min(520px, calc(100vh - 140px));
}
body.krea #videos #vd-model-menu .cw-model-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 32px 16px;
  align-items: start;
  height: auto;
  flex: none;
  white-space: normal;
}
body.krea #videos #vd-dock .cw-model-menu {
  width: 380px;
  max-height: min(420px, calc(100vh - 160px));
}
body.krea #videos #vd-dock #vd-model-menu {
  width: 448px;
  max-height: min(520px, calc(100vh - 140px));
}
body.krea #videos .img-tile.ds-template-card:hover .img-use.ds-template-add {
  background: #f4f4f5;
}
body.krea #videos .img-tile.ds-template-card:active .img-use.ds-template-add {
  transform: translate(-50%, -50%) scale(0.98);
  background: #e7e7ea;
}
body.krea #videos .img-tile.is-on .img-use.ds-template-add,
body.krea #videos .img-tile.is-on.ds-template-card:hover .img-use.ds-template-add {
  background: #d1fe17;
  color: #17180a;
}
body.krea #videos .img-tile.is-on.ds-template-card:active .img-use.ds-template-add {
  background: #c3ef12;
  color: #17180a;
  transform: translate(-50%, -50%) scale(0.98);
}
body.krea #videos #vd-dock .cw-model-option,
body.krea #videos #vd-dock .cw-model-menu .img-menu-note {
  flex: 0 0 auto;
  height: auto;
  white-space: normal;
}
body.krea #videos #vd-dock .cw-model-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body.krea #videos #vd-dock .cw-model-copy small {
  white-space: normal;
  color: #9a9aa0;
}
body.krea #videos #vd-model-menu .cw-model-option,
body.krea #genprompt #gp-model-menu .cw-model-option,
body.krea #agent #agent-model-menu .cw-model-option {
  flex: 0 0 auto;
  grid-template-columns: 36px minmax(0, 1fr) 32px 16px;
  align-items: start;
  column-gap: 12px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 12px 14px;
  box-sizing: border-box;
}
body.krea #videos #vd-model-menu .cw-model-option::after,
body.krea #genprompt #gp-model-menu .cw-model-option::after,
body.krea #agent #agent-model-menu .cw-model-option::after {
  grid-column: 4;
  grid-row: 1;
}
body.krea #videos #vd-model-menu .img-model-logo,
body.krea #genprompt #gp-model-menu .img-model-logo,
body.krea #agent #agent-model-menu .img-model-logo {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #101114;
}
body.krea #videos #vd-model-menu .img-model-logo svg,
body.krea #genprompt #gp-model-menu .img-model-logo svg,
body.krea #agent #agent-model-menu .img-model-logo svg {
  width: 22px;
  height: 22px;
}
body.krea #videos #vd-model-menu .cw-model-copy,
body.krea #genprompt #gp-model-menu .cw-model-copy,
body.krea #agent #agent-model-menu .cw-model-copy {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  text-align: left;
}
body.krea #videos #vd-model-menu .cw-model-copy strong,
body.krea #genprompt #gp-model-menu .cw-model-copy strong,
body.krea #agent #agent-model-menu .cw-model-copy strong {
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body.krea #videos #vd-model-menu .img-model-title,
body.krea #genprompt #gp-model-menu .img-model-title,
body.krea #agent #agent-model-menu .img-model-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
body.krea #videos #vd-model-menu .img-fav,
body.krea #genprompt #gp-model-menu .img-fav,
body.krea #agent #agent-model-menu .img-fav {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8d8d93;
  cursor: pointer;
}
body.krea #videos #vd-model-menu .img-fav svg,
body.krea #genprompt #gp-model-menu .img-fav svg,
body.krea #agent #agent-model-menu .img-fav svg {
  width: 16px;
  height: 16px;
}
body.krea #videos #vd-model-menu .img-fav.is-on,
body.krea #genprompt #gp-model-menu .img-fav.is-on,
body.krea #agent #agent-model-menu .img-fav.is-on { color: #ff5a7a; }
body.krea #videos #vd-model-menu .img-model-about,
body.krea #genprompt #gp-model-menu .img-model-about,
body.krea #agent #agent-model-menu .img-model-about {
  display: grid;
  place-items: center;
  flex: none;
  align-self: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #c8c8ce;
  cursor: pointer;
}
body.krea #videos #vd-model-menu .img-model-about svg,
body.krea #genprompt #gp-model-menu .img-model-about svg,
body.krea #agent #agent-model-menu .img-model-about svg {
  width: 16px;
  height: 16px;
}
body.krea #videos #vd-model-menu .cw-model-copy small,
body.krea #genprompt #gp-model-menu .cw-model-copy small,
body.krea #agent #agent-model-menu .cw-model-copy small {
  display: block;
  grid-column: auto;
  margin-top: 4px;
  color: #dedee3;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.krea #videos #vd-model-menu .img-model-logo,
body.krea #videos #vd-model-menu .cw-model-option::after,
body.krea #genprompt #gp-model-menu .img-model-logo,
body.krea #genprompt #gp-model-menu .cw-model-option::after,
body.krea #agent #agent-model-menu .img-model-logo,
body.krea #agent #agent-model-menu .cw-model-option::after {
  margin-top: 2px;
}
body.krea #videos.is-model-open #vd-wall,
body.krea #videos.is-model-open #vd-wall * {
  pointer-events: none !important;
}
body.krea #videos #vd-dock .cw-field {
  position: relative;
  z-index: 1;
}
body.krea #videos #vd-dock .cw-tools {
  position: relative;
  z-index: 2;
}
body.krea #videos #vd-dock .cw-model-pick {
  z-index: 3;
}
body.krea #videos #vd-model-menu {
  z-index: 4;
}
body.krea #vd-model-menu.is-fixed {
  position: fixed;
  z-index: 80;
  right: auto;
  bottom: auto;
}
body.krea #videos #vd-model-menu .cw-model-option {
  position: relative;
  cursor: pointer;
  user-select: none;
}
body.krea #videos #vd-model-menu .img-model-logo,
body.krea #videos #vd-model-menu .cw-model-option::after {
  pointer-events: none;
}
body.krea #videos #vd-model-menu .img-fav,
body.krea #videos #vd-model-menu .img-model-about {
  position: relative;
  z-index: 2;
}
body.krea:has(#home:not([hidden])),
body.krea:has(#home:not([hidden])) .shell,
body.krea:has(#home:not([hidden])) .stage,
body.krea #home,
body.krea #home .k-home {
  overflow-x: clip;
  min-width: 0;
  max-width: 100%;
}
body.krea #home .k-home { background: transparent; }
body.krea #home .home-cosmos {
  min-height: 0;
  background: transparent;
}
body.krea #home .home-cosmos-ui {
  min-height: 0;
  padding: 56px 24px 28px;
}
body.krea #home .home-neon {
  max-width: 14em;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  background-image: linear-gradient(100deg, #fff 0%, #f4ffc8 16%, #d1fe17 38%, #fff 54%, #d1fe17 72%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(209, 254, 23, 0.45));
  animation: nb-shimmer 5.5s linear infinite;
}
body.krea #home.is-guest .home-lead-signed,
body.krea #home.is-signed .home-lead-guest { display: none; }
body.krea #home .home-signs {
  display: grid;
  gap: 12px;
}
body.krea #home .home-signs-lead {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}
body.krea #home .home-sign {
  border: 0;
  border-radius: 20px;
  background: var(--ds-surface);
  color: var(--ds-text);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--ds-line);
}
body.krea #home .home-sign.is-lead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  padding: 0;
  overflow: hidden;
}
body.krea #home .home-sign.is-photo { background: #101114; }
body.krea #home .home-sign.is-photo .home-sign-shot { object-position: center 28%; }
body.krea #home .home-sign.is-photo[data-panel="images"] .home-sign-shot,
body.krea #home .home-sign.is-photo[data-panel="videos"] .home-sign-shot { object-position: center top; }
body.krea #home .home-sign-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.krea #home .home-sign-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  opacity: 0;
  pointer-events: none;
}
body.krea #home .home-sign-film.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.krea #home .home-sign-film { display: none; }
}
body.krea #home .home-sign.is-lead.is-split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 360px;
  min-height: 360px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
body.krea #home .home-sign.is-split .home-sign-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border-radius: 20px;
  background: #101114;
  box-shadow: inset 0 0 0 1px var(--ds-line);
}
body.krea #home .home-sign.is-split .home-sign-gleam {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 10px;
  background: transparent;
  animation: home-mark-glow 9s ease-in-out infinite;
}
body.krea #home .home-sign.is-split .home-sign-gleam .home-sign-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: transparent;
  object-fit: cover;
  display: block;
}
body.krea #home .home-signs-lead .home-sign.is-split:nth-child(2) .home-sign-gleam,
body.krea #home .home-signs-lead .home-sign.is-split:nth-child(2) .home-sign-gleam::after {
  animation-delay: 3s;
}
body.krea #home .home-signs-lead .home-sign.is-split:nth-child(3) .home-sign-gleam,
body.krea #home .home-signs-lead .home-sign.is-split:nth-child(3) .home-sign-gleam::after {
  animation-delay: 6s;
}
body.krea #home .home-sign.is-split .home-sign-gleam::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.36) 50%, rgba(186, 226, 255, 0.2) 58%, transparent 70%);
  transform: translateX(-130%) rotate(10deg);
  opacity: 0;
  animation: home-mark-shine 9s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
  pointer-events: none;
}
@keyframes home-mark-shine {
  0%, 4% {
    transform: translateX(-130%) rotate(10deg);
    opacity: 0;
  }
  10% { opacity: 0.9; }
  22% {
    transform: translateX(130%) rotate(10deg);
    opacity: 0.9;
  }
  28%, 100% {
    transform: translateX(130%) rotate(10deg);
    opacity: 0;
  }
}
@keyframes home-mark-glow {
  0%, 4%, 30%, 100% {
    box-shadow: 0 0 0 rgba(80, 190, 255, 0);
  }
  14% {
    box-shadow:
      0 0 14px rgba(255, 255, 255, 0.26),
      0 0 12px rgba(90, 200, 255, 0.26);
  }
}
body.krea #home .home-sign.is-split .home-sign-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--ds-surface) 92%, transparent);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px var(--ds-line);
}
body.krea #home .home-sign.is-split .home-sign-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
body.krea #home .home-sign.is-split .home-sign-caption .home-sign-name,
body.krea #home .home-sign.is-split .home-sign-caption em {
  color: var(--ds-text);
}
body.krea #home .home-sign.is-split .home-sign-copy > span {
  color: var(--ds-text-secondary);
  font-size: 14px;
  line-height: 1.4;
}
body.krea #home .home-sign.is-split:hover,
body.krea #home .home-sign.is-split:focus-visible {
  box-shadow: none;
}
body.krea #home .home-sign.is-split:hover .home-sign-frame,
body.krea #home .home-sign.is-split:focus-visible .home-sign-frame,
body.krea #home .home-sign.is-split:hover .home-sign-caption,
body.krea #home .home-sign.is-split:focus-visible .home-sign-caption {
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  body.krea #home .home-sign.is-split .home-sign-gleam,
  body.krea #home .home-sign.is-split .home-sign-gleam::after {
    animation: none;
  }
  body.krea #home .home-sign.is-split .home-sign-gleam::after {
    opacity: 0;
  }
}
body.krea #home .home-sign.is-lead .home-sign-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 72px 18px 18px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}
body.krea #home .home-sign.is-lead:not(.is-photo) {
  align-items: flex-start;
}
body.krea #home .home-sign.is-lead:not(.is-photo) .home-sign-body {
  background: none;
  padding: 20px 18px 18px;
}
body.krea #home .home-sign.is-lead .home-sign-mark {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
}
body.krea #home .home-signs-quiet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
body.krea #home .home-sign.is-quiet {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 14px 16px;
}
body.krea #home .home-sign.is-quiet .home-sign-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}
body.krea #home .home-sign-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.krea #home .home-sign:hover,
body.krea #home .home-sign:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
body.krea #home .home-sign-mark {
  border-radius: 12px;
  object-fit: cover;
  background: #101114;
}
body.krea #home .home-sign-name {
  display: block;
  margin: 0;
  color: var(--ds-text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
body.krea #home .home-sign.is-quiet .home-sign-name { font-size: 16px; }
body.krea #home .home-sign em {
  color: var(--ds-text);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
}
body.krea #home .home-sign.is-quiet em {
  color: var(--ds-text-secondary);
  font-weight: 400;
}
body.krea #home .home-sign-body > span {
  color: var(--ds-text-secondary);
  font-size: 14px;
  line-height: 1.4;
}
body.krea #home .home-sign.is-photo .home-sign-name,
body.krea #home .home-sign.is-photo em { color: #fff; }
body.krea #home .home-sign.is-photo .home-sign-body > span { color: rgba(255, 255, 255, 0.82); }
body.krea #home #home-sunburst .sunburst-head p {
  max-width: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.krea #home #home-mai {
  margin-top: 18px;
  border-radius: 28px;
  background: #101820;
  box-shadow: inset 0 0 0 1px rgba(126, 203, 255, 0.22);
}
body.krea #home #home-mai .sunburst-bg {
  background:
    radial-gradient(ellipse 48% 40% at 100% -8%, rgba(90, 180, 255, 0.32), transparent 64%),
    radial-gradient(ellipse 36% 28% at 0% 108%, rgba(40, 110, 190, 0.22), transparent 70%),
    repeating-linear-gradient(118deg, rgba(126, 203, 255, 0.07) 0 1px, transparent 1px 26px);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.5) 68%, transparent 100%);
  mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.5) 68%, transparent 100%);
}
body.krea #home #home-mai .sunburst-head h2,
body.krea #home #home-mai .sunburst-switch button.is-on,
body.krea #home #home-mai .sunburst-more,
body.krea #home #home-mai .sun-weak b {
  color: #7ecbff;
}
body.krea #home #home-mai .sunburst-switch button.is-on {
  background: rgba(126, 203, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(126, 203, 255, 0.55);
}
body.krea #home #home-mai .sunburst-switch button:focus-visible,
body.krea #home #home-mai .sun-frame:focus-visible,
body.krea #home #home-mai .sunburst-more:focus-visible {
  outline-color: #7ecbff;
}
body.krea #home #home-mai .sunburst-more {
  background: rgba(16, 24, 32, 0.82);
  box-shadow: inset 0 0 0 1px rgba(126, 203, 255, 0.55);
}
body.krea #home #home-mai .sunburst-fade {
  background: linear-gradient(to bottom, rgba(16, 24, 32, 0), #101820 76%);
}
body.krea #home #home-mai .sun-note {
  background: #152433;
  box-shadow: inset 0 0 0 1px rgba(126, 203, 255, 0.2);
}
body.krea #home #home-mai .sun-frame {
  border-radius: 18px;
  background: #15202c;
  box-shadow: inset 0 0 0 1px rgba(126, 203, 255, 0.16);
}
body.krea #home .sunburst {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 8px;
  padding: 28px 18px 22px;
  border-radius: 24px;
  background: #0c0d10;
  color: #f4f4f5;
}
body.krea #home #home-sunburst { margin-top: -2.8px; }
@media (max-width: 900px), (max-device-width: 900px) {
  body.krea #home #home-sunburst { margin-top: -0.4px; }
}
body.krea #home .sunburst-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 46% at 10% -12%, rgba(209, 254, 23, 0.2), transparent 58%),
    radial-gradient(ellipse 34% 26% at 94% 6%, rgba(209, 254, 23, 0.09), transparent 64%),
    repeating-conic-gradient(from 208deg at 16% -18%, rgba(209, 254, 23, 0.055) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.4) 62%, transparent 100%);
  mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.4) 62%, transparent 100%);
}
body.krea #home .sunburst-head,
body.krea #home .sunburst-copy,
body.krea #home .sunburst-stage {
  position: relative;
  z-index: 1;
}
body.krea #home .sunburst-head {
  margin: 0 0 16px;
}
body.krea #home .sunburst-head h2 {
  margin: 0;
  color: #d1fe17;
  font-size: 40px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
body.krea #home .sunburst-head p {
  margin: 8px 0 0;
  max-width: 36em;
  color: rgba(244, 244, 245, 0.62);
  font-size: 16px;
  line-height: 1.4;
}
body.krea #home .sunburst-copy { margin: 0 0 16px; }
body.krea #home .sunburst-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
body.krea #home .sunburst-switch button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 244, 245, 0.78);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea #home .sunburst-switch button.is-on {
  background: rgba(209, 254, 23, 0.14);
  color: #d1fe17;
  box-shadow: inset 0 0 0 1px rgba(209, 254, 23, 0.5);
}
body.krea #home .sunburst-switch button:focus-visible {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea #home .sunburst-panels {
  display: grid;
}
body.krea #home .sunburst-panels > .sun-note {
  grid-area: 1 / 1;
  max-width: 52em;
  margin: 0;
}
body.krea #home .sunburst-panels > .sun-note[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}
body.krea #home .sunburst-panels > .sun-note.is-score,
body.krea #home .sunburst-panels > .sun-note.is-score[hidden] {
  display: flex;
  align-items: center;
  gap: 20px;
}
body.krea #home .sunburst-stage {
  max-height: 440px;
  overflow: hidden;
}
body.krea #home .sunburst.is-open .sunburst-stage {
  max-height: none;
  overflow: visible;
}
body.krea #home .sunburst-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 168px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(12, 13, 16, 0), #0c0d10 76%);
}
body.krea #home .sunburst.is-open .sunburst-fade { display: none; }
body.krea #home .sunburst-more {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(12, 13, 16, 0.78);
  color: #d1fe17;
  box-shadow: inset 0 0 0 1px rgba(209, 254, 23, 0.55);
  cursor: pointer;
}
body.krea #home .sunburst-more svg,
body.krea #home .stories-more svg {
  display: block;
  width: 22px;
  height: 22px;
  transition: transform 180ms ease;
}
body.krea #home .sunburst-more[aria-expanded="true"] svg,
body.krea #home .stories-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
body.krea #home .sunburst-more:focus-visible {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea #home .sunburst.is-open .sunburst-more {
  position: relative;
  left: auto;
  bottom: auto;
  margin: 16px auto 0;
  transform: none;
}
body.krea #home .sunburst-grid {
  columns: 4;
  column-gap: 8px;
}
body.krea #home .sun-frame,
body.krea #home .sun-note {
  break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #17181c;
  color: inherit;
  text-align: left;
}
body.krea #home .sun-frame {
  position: relative;
  cursor: zoom-in;
}
body.krea #home .sun-frame img {
  display: block;
  width: 100%;
  height: auto;
}
body.krea #home .sun-frame:focus-visible {
  outline: 2px solid #d1fe17;
  outline-offset: 2px;
}
body.krea #home .sun-weak {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(12, 13, 16, 0.82);
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
}
body.krea #home .sun-weak b {
  color: #d1fe17;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.krea #home .sun-note[hidden] { display: none; }
body.krea #home .sun-note {
  padding: 18px 16px;
}
body.krea #home .sun-note p {
  margin: 0;
  color: rgba(244, 244, 245, 0.86);
  font-size: 15px;
  line-height: 1.45;
}
body.krea #home .sun-note.is-score strong {
  flex: 0 0 auto;
  margin: 0;
  color: #d1fe17;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
}
body.krea #home .stories {
  --stories-accent: var(--ds-accent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 18px;
  padding: 28px 18px 22px;
  border-radius: 24px;
  background: var(--ds-bg);
  color: var(--ds-text);
  box-shadow: inset 0 0 0 1px var(--ds-line);
}
body.krea #home .stories-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 18%, rgba(209, 254, 23, 0.08), transparent 18%),
    radial-gradient(circle at 96% 42%, rgba(255, 255, 255, 0.05), transparent 16%);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.72) 46%, transparent 88%);
  mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.72) 46%, transparent 88%);
}
body.krea #home .stories-bg::before,
body.krea #home .stories-bg::after {
  content: "";
  position: absolute;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
body.krea #home .stories-bg::before {
  width: 228px;
  height: 146px;
  right: 6%;
  top: 26px;
  transform: rotate(8deg);
  background:
    linear-gradient(#d1fe17 0 0) 16px 16px / 54px 8px no-repeat,
    linear-gradient(165deg, rgba(255, 255, 255, 0.16) 0 34%, rgba(209, 254, 23, 0.2) 34% 36%, rgba(255, 255, 255, 0.05) 36% 100%);
}
body.krea #home .stories-bg::after {
  width: 112px;
  height: 148px;
  right: 24%;
  top: 58px;
  transform: rotate(-13deg);
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.72) 0 14px, transparent 15px),
    linear-gradient(200deg, rgba(244, 244, 245, 0.16), rgba(209, 254, 23, 0.12) 58%, transparent 80%);
}
body.krea #home .stories-head,
body.krea #home .stories-copy,
body.krea #home .stories-empty,
body.krea #home .stories-stage {
  position: relative;
  z-index: 1;
}
body.krea #home .stories-head { margin: 0 0 16px; }
body.krea #home .stories-head h2 {
  margin: 0;
  color: var(--stories-accent);
  font-size: 40px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
body.krea #home .stories-head p {
  margin: 8px 0 0;
  overflow: hidden;
  color: rgba(244, 244, 245, 0.62);
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.krea #home .stories-copy { margin: 0 0 16px; }
body.krea #home .stories-copy[hidden] { display: none; }
body.krea #home .stories-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
body.krea #home .stories-switch button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 244, 245, 0.78);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea #home .stories-switch button.is-on {
  background: color-mix(in srgb, var(--ds-accent) 14%, transparent);
  color: var(--stories-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-accent) 50%, transparent);
}
body.krea #home .stories-switch button:focus-visible,
body.krea #home .stories-frame:focus-visible,
body.krea #home .stories-more:focus-visible {
  outline: 2px solid var(--stories-accent);
  outline-offset: 2px;
}
body.krea #home .stories-empty {
  margin: 0;
  max-width: 36em;
  color: rgba(244, 244, 245, 0.72);
  font-size: 16px;
  line-height: 1.45;
}
body.krea #home .stories-empty[hidden] { display: none; }
body.krea #home .stories-stage { position: relative; }
body.krea #home .stories.is-tall .stories-stage {
  height: 440px;
  max-height: 440px;
  overflow: hidden;
}
body.krea #home .stories.is-open .stories-stage {
  max-height: none;
  overflow: visible;
}
body.krea #home .stories-fade {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 168px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 11, 12, 0), var(--ds-bg) 76%);
}
body.krea #home .stories.is-tall .stories-fade { display: block; }
body.krea #home .stories.is-open .stories-fade { display: none; }
body.krea #home .stories-grid {
  columns: 4;
  column-gap: 8px;
}
body.krea #home .stories-grid:empty { display: none; }
body.krea #home .stories-frame {
  break-inside: avoid;
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #17181c;
  color: inherit;
  cursor: zoom-in;
}
body.krea #home .stories-frame img,
body.krea #home .stories-frame video {
  display: block;
  width: 100%;
  height: auto;
}
body.krea #home .stories-frame.is-note {
  min-height: 180px;
  cursor: pointer;
  text-align: left;
}
body.krea #home .stories-note {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 180px;
  padding: 16px;
}
body.krea #home .stories-note b {
  color: var(--stories-accent);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.krea #home .stories-note span {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(244, 244, 245, 0.86);
  font-size: 15px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
body.krea .stories-read {
  position: relative;
  z-index: 81;
  width: min(640px, calc(100vw - 48px));
  max-height: min(70vh, 640px);
  margin: 0;
  padding: 28px 24px;
  overflow: auto;
  border-radius: 16px;
  background: var(--ds-bg);
  color: var(--ds-text);
  box-shadow: inset 0 0 0 1px var(--ds-line);
}
body.krea .stories-read p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  white-space: pre-wrap;
}
body.krea .stories-read .stories-read-kind {
  margin: 0 0 12px;
  color: var(--ds-accent);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.krea #home .stories-more {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 16px auto 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-bg) 78%, transparent);
  color: var(--stories-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-accent) 55%, transparent);
  cursor: pointer;
}
body.krea #home .stories-more[hidden] { display: none; }
body.krea #home .stories.is-tall:not(.is-open) .stories-more {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  margin: 0;
}
body.krea #home .k-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
body.krea #home .home-signs,
body.krea #home .home-signs-lead,
body.krea #home .home-signs-quiet,
body.krea #home .k-rail,
body.krea #home .k-card,
body.krea #home .home-sign {
  min-width: 0;
  max-width: 100%;
}
body.krea #home .k-card {
  flex: none;
  width: auto;
  height: 360px;
}
body.krea #home .k-card:hover,
body.krea #home .k-card:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}
body.krea #home .home-company {
  align-self: flex-start;
  margin: 4px 0 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-text-secondary);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
body.krea #home .home-company:hover,
body.krea #home .home-company:focus-visible {
  color: var(--ds-text);
  outline: none;
}
@media (max-width: 1360px) {
  body.krea #home .home-sign.is-lead.is-split { height: 400px; min-height: 400px; }
  body.krea #home .home-sign.is-split .home-sign-frame { height: 400px; }
  body.krea #home .home-sign.is-split .home-sign-caption {
    height: 168px;
    min-height: 168px;
    max-height: 168px;
  }
}
@media (max-width: 1180px) {
  body.krea #home .home-sign.is-lead.is-split { height: 440px; min-height: 440px; }
  body.krea #home .home-sign.is-split .home-sign-frame { height: 440px; }
  body.krea #home .home-sign.is-split .home-sign-caption {
    height: 216px;
    min-height: 216px;
    max-height: 216px;
  }
}
@media (max-width: 1280px) {
  body.krea #home .k-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.krea #home .home-signs-quiet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.krea #home .sunburst-grid,
  body.krea #home .stories-grid { columns: 3; }
  body.krea #home .sunburst-head h2,
  body.krea #home .stories-head h2 { font-size: 32px; }
}
@media (max-width: 900px) {
  body.krea #home .sunburst-grid,
  body.krea #home .stories-grid { columns: 2; }
}
@media (max-width: 720px) {
  body.krea #home .home-signs-lead,
  body.krea #home .home-signs-quiet,
  body.krea #home .k-row { grid-template-columns: 1fr; }
  body.krea #home .sunburst-grid,
  body.krea #home .stories-grid { columns: 1; }
  body.krea #home .home-sign.is-lead { min-height: 240px; }
  body.krea #home .home-sign.is-lead.is-split { height: 300px; min-height: 300px; }
  body.krea #home .home-sign.is-split .home-sign-frame { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  body.krea #home .home-neon {
    animation: none;
    filter: none;
    background-image: none;
    color: #d1fe17;
    -webkit-text-fill-color: #d1fe17;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.krea .sd-brand .nb-brand-name,
  body.krea #genprompt .gp-mark .nb-brand-name,
  body.krea #agent .gp-mark .nb-brand-name,
  body.krea #videos .sd-brand .nb-brand-name {
    animation: none;
    background-image: none;
  }
  body.krea .sd-brand .nb-brand-name.is-seed {
    color: #d9fff8;
    -webkit-text-fill-color: #d9fff8;
  }
  body.krea #genprompt .gp-mark .nb-brand-name.is-prompt {
    color: #f3e8ff;
    -webkit-text-fill-color: #f3e8ff;
  }
  body.krea #agent .gp-mark .nb-brand-name.is-agent {
    color: #eeeaf8;
    -webkit-text-fill-color: #eeeaf8;
  }
  body.krea #videos .sd-brand .nb-brand-name.is-video {
    color: #e7f1ff;
    -webkit-text-fill-color: #e7f1ff;
  }
}
body.krea #seedance #sd-shape-menu,
body.krea #creatives #cw-shape-menu {
  width: 360px;
}
body.krea #seedance #sd-shape-menu .cw-model-option,
body.krea #creatives #cw-shape-menu .cw-model-option,
body.krea #seedance #sd-shape-menu .img-menu-note,
body.krea #creatives #cw-shape-menu .img-menu-note {
  height: auto;
  white-space: normal;
}
body.krea #seedance #sd-shape-menu .cw-model-copy,
body.krea #creatives #cw-shape-menu .cw-model-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body.krea #seedance #sd-shape-menu .cw-model-copy small,
body.krea #creatives #cw-shape-menu .cw-model-copy small {
  white-space: normal;
  color: #9a9aa0;
}
body.krea #library [hidden] { display: none; }
body.krea #library .lib-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.krea #library .lib-head h2 { margin: 0; }
body.krea #library .lib-head-tools,
body.krea #library .lib-tabs,
body.krea #library .lib-meta-row,
body.krea #library .lib-views {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.krea #library .lib-tabs {
  margin: 0 0 16px;
}
body.krea #library .lib-tabs button,
body.krea #library .lib-tool,
body.krea #library .lib-views button,
body.krea #library .lib-card-actions button,
body.krea #library .lib-menu button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--ds-chip, #2a2b30);
  color: var(--ds-text, #f4f4f5);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.krea #library .lib-tabs button[aria-selected="true"],
body.krea #library .lib-views button[aria-pressed="true"],
body.krea #library .lib-tool[aria-expanded="true"] {
  background: var(--ds-text, #f4f4f5);
  color: #111;
}
body.krea #library .lib-tabs button:focus-visible,
body.krea #library .lib-tool:focus-visible,
body.krea #library .lib-views button:focus-visible,
body.krea #library .lib-card:focus-visible,
body.krea #library .lib-card-actions button:focus-visible,
body.krea #library .lib-menu button:focus-visible {
  outline: 2px solid var(--ds-accent, #d1fe17);
  outline-offset: 2px;
}
body.krea #library .lib-meta-row {
  justify-content: space-between;
}
body.krea #library .lib-select {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-text-secondary, #9a9aa0);
  font-size: 14px;
}
body.krea #library .lib-select select,
body.krea #library .lib-rename {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ds-line, #2c2c31);
  border-radius: 12px;
  background: var(--ds-surface, #1a1b1e);
  color: var(--ds-text, #f4f4f5);
  font: inherit;
}
body.krea #library .lib-grid {
  grid-template-columns: repeat(var(--lib-cols, 4), minmax(0, 1fr));
}
body.krea #library .lib-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 132px;
  z-index: 2;
  margin: 0;
  padding: 8px 0;
  background: #0b0b0c;
}
body.krea #library .lib-day-head h3 {
  margin: 0;
  color: var(--ds-text, #f4f4f5);
  font-size: 16px;
  font-weight: 600;
}
body.krea #library .lib-day-head span {
  color: var(--ds-text-secondary, #9a9aa0);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
body.krea #library .lib-card {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
body.krea #library .lib-face {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ds-surface, #1a1b1e);
  box-shadow: inset 0 0 0 1px var(--ds-line, #2c2c31);
}
body.krea #library .lib-shot {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}
body.krea #library .lib-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  color: var(--ds-text-secondary, #c8c8ce);
  text-align: center;
}
body.krea #library .lib-badge-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #f4f4f5;
  font-size: 12px;
}
body.krea #library .lib-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 160ms ease;
}
body.krea #library .lib-card:hover .lib-card-actions,
body.krea #library .lib-card:focus-within .lib-card-actions,
body.krea #library .lib-card-actions.is-open {
  opacity: 1;
}
body.krea #library .lib-more { min-width: 36px; padding: 0; }
body.krea #library .lib-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 4;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: var(--ds-surface, #1a1b1e);
  box-shadow: inset 0 0 0 1px var(--ds-line, #2c2c31);
}
body.krea #library .lib-menu[hidden] { display: none; }
body.krea #library .lib-menu button {
  border-radius: 8px;
  background: transparent;
  text-align: left;
}
body.krea #library .lib-menu button:hover,
body.krea #library .lib-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}
body.krea #library .lib-title { padding: 0 2px; }
body.krea #library.is-list .lib-grid { grid-template-columns: 1fr; }
body.krea #library.is-list .lib-card {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  padding: 8px;
  border-radius: 16px;
  background: var(--ds-surface, #1a1b1e);
  box-shadow: inset 0 0 0 1px var(--ds-line, #2c2c31);
}
body.krea #library.is-list .lib-face { width: 72px; }
body.krea #library.is-list .lib-card-actions {
  position: static;
  opacity: 1;
  grid-column: 2;
}
body.krea #library .lib-dialogs { display: grid; gap: 12px; }
body.krea #library .lib-dialog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: var(--ds-surface, #1a1b1e);
  box-shadow: inset 0 0 0 1px var(--ds-line, #2c2c31);
}
body.krea #library .lib-dialog h3 {
  margin: 0 0 4px;
  font-size: 16px;
}
body.krea #library .lib-usage { display: grid; gap: 12px; max-width: 720px; }
body.krea #library .lib-figures {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
body.krea #library .lib-figures p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background: var(--ds-surface, #1a1b1e);
}
body.krea #library .lib-figures strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
body.krea #library .lib-figures span,
body.krea #library .lib-days-chart span { color: var(--ds-text-secondary, #c8c8ce); font-size: 13px; }
body.krea #library .lib-days-chart { display: grid; gap: 6px; }
body.krea #library .lib-days-chart div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
}
body.krea #library .lib-meter {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(209, 254, 23, 0.72);
  transform-origin: left center;
}
@media (hover: none) {
  body.krea #library .lib-card-actions { opacity: 1; }
}
@media (max-width: 900px) {
  body.krea #library .lib-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.krea #library .lib-dialog { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.krea #library .lib-card-actions { transition: none; }
}