.short-drama-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 20%, rgba(209, 95, 165, 0.42), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(77, 147, 234, 0.34), transparent 30%),
    #16131b;
}

.short-drama-hero h1 em {
  white-space: normal;
}

.short-drama-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 30px auto 0;
}

.short-drama-hero-actions .button {
  white-space: normal;
  text-align: center;
}

.short-drama-workflow-link {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.short-drama-status {
  color: #ffd36e;
}

[data-drama-create][aria-busy="true"] {
  opacity: 0.65;
  cursor: progress;
}

.short-drama-hero-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.64;
}

.short-drama-frame {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 80px rgba(5, 3, 10, 0.45);
  object-fit: cover;
}

.frame-one {
  top: 10%;
  left: -7%;
  width: min(47vw, 700px);
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  transform: rotate(-7deg);
}

.frame-two {
  right: 5%;
  bottom: -8%;
  width: min(25vw, 360px);
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  transform: rotate(8deg);
}

.frame-three {
  top: 12%;
  right: 15%;
  width: min(18vw, 270px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  transform: rotate(-4deg);
}

.short-drama-hero .hero-shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(15, 12, 22, 0.54), rgba(15, 12, 22, 0.48) 38%, rgba(15, 12, 22, 0.87)),
    linear-gradient(90deg, rgba(15, 12, 22, 0.54), rgba(15, 12, 22, 0.05) 50%, rgba(15, 12, 22, 0.48));
}

.short-drama-hero-art,
.short-drama-hero .hero-shade {
  z-index: -2;
}

.short-drama-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -8px auto 24px;
}

.short-drama-tags span {
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(15, 12, 22, 0.32);
  backdrop-filter: blur(10px);
  font-size: 0.72rem;
  font-weight: 700;
}

.short-drama-credit {
  display: flex;
  max-width: 620px;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  margin: 16px auto 0 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
}

.short-drama-credit svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #ffd36e;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: #a33474;
  font-family: var(--font-display);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.short-drama-intro {
  background: linear-gradient(180deg, #fff 0%, #faf8fd 100%);
}

.short-drama-intro h2 {
  text-wrap: balance;
}

.short-drama-story-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.short-drama-story-grid article {
  min-height: 215px;
  padding: 25px;
  border: 1px solid #e7e0ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 13px 32px rgba(48, 35, 65, 0.07);
}

.short-drama-story-grid svg {
  width: 24px;
  height: 24px;
  margin-bottom: 25px;
  color: #bd4089;
}

.short-drama-story-grid article:nth-child(2) svg { color: #7257d4; }
.short-drama-story-grid article:nth-child(3) svg { color: #2786cb; }
.short-drama-story-grid article:nth-child(4) svg { color: #e37c4a; }

.short-drama-story-grid strong {
  display: block;
  margin-bottom: 9px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
}

.short-drama-story-grid p,
.short-drama-steps p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.7;
}

.short-drama-workflow {
  background: #18141e;
  color: #fff;
  scroll-margin-top: 96px;
}

.short-drama-workflow h2,
.short-drama-workflow .split-heading > p,
.short-drama-workflow .section-kicker {
  color: #fff;
}

.short-drama-workflow .split-heading > p {
  color: rgba(255, 255, 255, 0.64);
}

.short-drama-workflow .section-kicker {
  color: #f49dcc;
}

.short-drama-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 58px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.short-drama-steps li {
  position: relative;
  padding: 22px 21px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.short-drama-steps li::after {
  position: absolute;
  top: 39px;
  right: -24px;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
  content: "";
}

.short-drama-steps li:last-child::after { display: none; }

.short-drama-steps span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin-bottom: 35px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #cf4d9b, #7f5ce2);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
}

.short-drama-steps h3 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 1.04rem;
}

.short-drama-steps p { color: rgba(255, 255, 255, 0.63); }

.short-drama-cases { background: #faf9fc; }

.short-drama-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.short-drama-case {
  display: grid;
  min-height: 330px;
  grid-template-columns: minmax(150px, 0.76fr) minmax(0, 1.24fr);
  overflow: hidden;
  border: 1px solid #e4deea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(42, 28, 56, 0.08);
}

.short-drama-case > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.short-drama-case > div { padding: 26px 24px; }

.short-drama-case span {
  color: #a23d78;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.short-drama-case h3 {
  margin: 10px 0 12px;
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.38;
}

.short-drama-case p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.66;
}

.short-drama-case button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0;
  border: 0;
  color: #a23d78;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.short-drama-case button:hover { color: #72224f; }
.short-drama-case button svg { width: 15px; height: 15px; }

.short-drama-features { background: linear-gradient(180deg, #fff 0%, #f5f3f8 100%); }

@media (max-width: 1080px) {
  .short-drama-story-grid,
  .short-drama-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .short-drama-steps li::after { display: none; }
}

@media (max-width: 760px) {
  .frame-one { top: 5%; left: -34%; width: 106vw; }
  .frame-two { right: -18%; width: 46vw; }
  .frame-three { top: 16%; right: 0; width: 31vw; }
  .short-drama-case-grid { grid-template-columns: 1fr; }
  .short-drama-case { min-height: 280px; }
}

@media (max-width: 580px) {
  body[data-generator-id="ai-short-drama-generator"] .nav-cta {
    max-width: min(36vw, 150px);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .short-drama-hero {
    min-height: 0;
    place-items: start center;
    padding: 104px 0 58px;
  }

  .short-drama-tags { gap: 6px; margin-bottom: 18px; }
  .short-drama-tags span { padding: 6px 9px; font-size: 0.65rem; }
  .short-drama-credit { font-size: 0.71rem !important; text-align: left; }
  .short-drama-story-grid,
  .short-drama-steps,
  .short-drama-case-grid { grid-template-columns: 1fr; }
  .short-drama-story-grid article { min-height: auto; }
  .short-drama-steps { margin-top: 35px; }
  .short-drama-steps span { margin-bottom: 18px; }
  .short-drama-case { grid-template-columns: 112px minmax(0, 1fr); min-height: 250px; }
  .short-drama-case > div { padding: 18px 16px; }
  .short-drama-case h3 { font-size: 1rem; }
  .short-drama-case p { font-size: 0.8rem; }
}