:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #27233a;
  background: #f4f0ea;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% 10%, rgba(174, 154, 221, .28), transparent 32rem),
    radial-gradient(circle at 90% 90%, rgba(236, 183, 144, .24), transparent 30rem),
    #f4f0ea;
}

main {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 64px max(16px, env(safe-area-inset-right)) max(64px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
header { margin-bottom: 32px; }
.eyebrow { letter-spacing: .2em; font-size: 12px; color: #736a91; }
h1 { margin: 8px 0 12px; font-family: Georgia, "Songti SC", serif; font-size: clamp(34px, 6vw, 60px); font-weight: 500; }
.intro { color: #6d6679; }

form, #result {
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid rgba(53, 45, 75, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 22px 70px rgba(53, 45, 75, .09);
  backdrop-filter: blur(18px);
}

label { display: block; margin-bottom: 9px; font-weight: 650; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; }
.label-row span { color: #8b8297; font-size: 13px; }

textarea {
  width: 100%; min-height: 180px; resize: vertical; padding: 16px;
  border: 1px solid #d8d0df; border-radius: 14px; background: #fffdfb;
  color: inherit; font-family: inherit; font-size: 16px; line-height: 1.65;
}
textarea:focus { outline: 3px solid rgba(111, 85, 160, .18); border-color: #7964a1; }

button, #download {
  display: inline-flex; justify-content: center; margin-top: 24px; padding: 14px 22px;
  min-height: 48px;
  border: 0; border-radius: 999px; background: #342b4b; color: white;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
}
button:disabled { opacity: .55; cursor: wait; }
#status { min-height: 1.5em; margin-bottom: 0; color: #6d6679; }
#result { margin-top: 28px; text-align: center; }
#result img { display: block; width: min(100%, 531px); height: auto; margin: 0 auto; border-radius: 16px; box-shadow: 0 12px 35px rgba(30, 24, 45, .18); }

@media (max-width: 560px) {
  main {
    padding: max(24px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  header { margin-bottom: 22px; padding: 0 4px; }
  h1 { font-size: clamp(32px, 10vw, 44px); line-height: 1.15; }
  .intro { line-height: 1.6; }
  form, #result { padding: 18px; border-radius: 18px; }
  textarea { min-height: 152px; padding: 14px; }
  #prompt { min-height: 260px; }
  button, #download { width: 100%; align-items: center; }
  #status { line-height: 1.5; }
  #result { margin-top: 18px; }
  #result img { border-radius: 12px; }
}