:root{
  --bg-gradient: linear-gradient(160deg, #fffacd 0%, #eaf4ee 100%);
  --text: #222610;
  --accent: #718532;
  --subtle: #657540;
  --divider: rgba(113,133,50,0.30);
  --quote-bg: rgba(113,133,50,0.08);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body{
  min-height:100%;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
}

.wrap{ max-width:600px; margin:0 auto; padding:48px 22px 96px; }

.eyebrow{
  font-size:10px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color: var(--subtle);
  margin-bottom:10px;
}

h1{
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 40px);
  font-weight:300;
  line-height:1.15;
  color: var(--text);
  margin-bottom:14px;
}

.intro{
  font-size:14px;
  line-height:1.82;
  color: var(--text);
  max-width:52ch;
  margin-bottom:8px;
}

.divider{
  height:1px;
  background: var(--divider);
  margin:28px 0;
  border:none;
}

.field-label{
  display:block;
  font-family: var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  color: var(--text);
  margin:26px 0 10px;
  max-width:50ch;
}
.field-label:first-child{ margin-top:0; }

textarea{
  width:100%;
  min-height:96px;
  border:none;
  border-left:2px solid var(--accent);
  border-radius:0 5px 5px 0;
  background: var(--quote-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size:14px;
  line-height:1.75;
  padding:14px 16px;
  resize:vertical;
}
textarea::placeholder{ color: var(--subtle); opacity:0.7; }
textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.action-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:22px;
  background:none;
  border:none;
  cursor:pointer;
  font-family: var(--font-body);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--accent);
  padding:6px 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
}
.action-button::before{ content:'→'; font-size:15px; }
.action-button:hover{ opacity:0.65; }
.action-button:active{ opacity:0.45; }
.action-button:disabled{ opacity:0.32; cursor:not-allowed; }
.action-button:disabled:hover{ opacity:0.32; }

.ghost-button{
  display:inline-block;
  margin-top:22px;
  margin-left:18px;
  background:none;
  border:none;
  cursor:pointer;
  font-family: var(--font-body);
  font-size:14px;
  font-style:italic;
  text-decoration:underline;
  text-underline-offset:3px;
  color: var(--accent);
  padding:0;
  transition: opacity 0.2s;
}
.ghost-button:hover{ opacity:0.65; }
.ghost-button:active{ opacity:0.45; }

.small-link{
  display:inline-block;
  margin-top:22px;
  background:none;
  border:none;
  cursor:pointer;
  font-family: var(--font-body);
  font-size:12px;
  letter-spacing:0.06em;
  color: var(--subtle);
  padding:0;
  text-decoration:underline;
  text-underline-offset:2px;
  transition: opacity 0.2s;
}
.small-link:hover{ opacity:0.65; }

#output-section{ margin-top:8px; }

.output-label{
  font-family: var(--font-display);
  font-size:16px;
  font-weight:600;
  color: var(--text);
  margin-bottom:12px;
  max-width:50ch;
}

pre{
  white-space:pre-wrap;
  word-wrap:break-word;
  border-left:2px solid var(--accent);
  border-radius:0 5px 5px 0;
  background: var(--quote-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size:13.5px;
  line-height:1.75;
  padding:18px 20px;
  max-height:420px;
  overflow-y:auto;
}

.copied{
  font-size:12px;
  font-style:italic;
  color: var(--accent);
  margin-left:10px;
}