:root{
  --bg1:#eef2ff;        /* indigo-50 */
  --bg2:#ffffff;
  --bg3:#f3e8ff;        /* purple-100 */
  --ink:#0f172a;        /* slate-900 */
  --muted:#475569;      /* slate-600 */
  --muted-2:#64748b;    /* slate-500 */
  --border:#c7d2fe;     /* indigo-200 */
  --ring:#c7d2fe;
  --card:#ffffffb3;     /* white/70 */
  --shadow: 0 6px 25px rgba(99,102,241,.15);
  --radius: 16px;
  --pad: 16px;
  --pad-lg: 24px;
  --gap: 24px;
  --maxw: 1100px;
  --ring-focus: 0 0 0 3px rgba(99,102,241,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(135deg,var(--bg1),var(--bg2) 45%,var(--bg3));
}

.page{min-height:100dvh; display:flex; flex-direction:column;}
.center{text-align:center}

.header{max-width:var(--maxw); margin:62px auto 0; padding:0 106px}
.title{font-weight:1000; font-size:clamp(54px,3.5vw,34px); color:#4338ca; /* indigo-700 */ margin:3 0 6px}
.subtitle{margin:0; color:var(--muted)}

.container{
  max-width:var(--maxw);
  margin: 40px auto 0;
  padding: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px){
  .container{ grid-template-columns: repeat(3, 1fr); gap:22px; padding: 24px 16px 40px; }
}

.card{
  background: var(--card);
  backdrop-filter: blur(4px);
  border:2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pad{padding: var(--pad)}
.io{padding: var(--pad)}
.flexcol{display:flex; flex-direction:column}
.between{justify-content:space-between}
.row{display:flex; align-items:center}
.gap-8{gap:8px}
.mt-12{margin-top:8px}

.eyebrow{
  font-size:15px;
  letter-spacing:.2em;
  font-weight:800;
  color: var(--muted-2);
  text-transform:uppercase;
}
.hint{font-size:15px; color:#94a3b8} /* slate-400 */

.textarea{
  margin-top:15px;
  width:100%;
  height: 11rem;        /* ~ h-44 */
  border-radius: 12px;
  border:1px solid var(--border);
  background: #ffffff99; /* white/60 */
  padding:12px;
  outline:none;
  box-shadow: inset 0 1px 3px rgba(15,23,42,.05);
  resize:none;
  color:var(--ink);
}
@media (min-width:768px){
  .textarea{ height: 18rem; } /* ~ md:h-72 */
}
.textarea:focus{ box-shadow: var(--ring-focus), inset 0 1px 3px rgba(15,23,42,.05); }

.output{
  margin-top:15px;
  width:100%;
  height: 11rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff99;
  padding:12px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  box-shadow: inset 0 1px 3px rgba(15,23,42,.05);
}
@media (min-width:768px){
  .output{ height: 18rem; }
}

.muted{ color:#94a3b8 } /* slate-400 */
.tiny{ font-size:12px; color:var(--muted-2) }
.mb-12{ margin-bottom:12px }

/* Buttons */
.btn-col{ display:flex; flex-direction:column; gap:10px; margin-top:8px }
.btn{
  width:100%;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight:600;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: var(--shadow);
}
.btn:hover{ transform: translateY(-2px); background:#eef2ff; /* indigo-50 */ }
.btn:active{ transform: scale(.98) }
.btn.active{ outline:2px solid #cbd5ff; /* indigo-200 */ }

.copy{
  width:auto; padding:10px 24px;
}

/* Footer */
.footer{
  max-width:var(--maxw);
  margin: 40px auto 32px;
  padding: 0 16px;
  font-size:21px;
  color:#64748b;
}
.inline{display:inline-flex; align-items:center}
.inline.gap-6{gap:6px}