/*  Simple, modern, fully-responsive look  */
:root {
  --bg: #f6f8fb;
  --card-bg: #ffffff;
  --primary: #2d6cdf;
  --radius: 12px;
  --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html,body{
  margin:0;
  padding:0;
  font-family:var(--font-stack);
  background:var(--bg);
  color:#222;
}

.card{
  max-width:800px;
  margin:4rem auto;
  padding:2rem;
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,.07);
}

h1{
  margin-top:0;
  font-size:clamp(1.6rem,4vw,2.2rem);
}

form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

textarea{
  min-height:240px;
  padding:1rem;
  border:1px solid #ccc;
  border-radius:var(--radius);
  resize:vertical;
  font-size:1rem;
  line-height:1.4;
}

button{
  align-self:flex-start;
  padding:.75rem 1.5rem;
  font-size:1rem;
  border:none;
  border-radius:var(--radius);
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  transition:background .2s;
}
button:hover{background:#1d54c0;}
pre, .result{
  white-space:pre-wrap;
  line-height:1.45;
  background:#f0f3fa;
  padding:1rem;
  border-radius:var(--radius);
  overflow-x:auto;
}
/* --- extra typography / sections --- */
.tagline{margin-top:.25rem;font-size:1.05rem;color:#555}
.info{margin-top:2.5rem}
.info h2{font-size:1.25rem;margin:.5rem 0 1rem}

/* mic button */
#micBtn{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border:none;
  border-radius:var(--radius);background:#eee;cursor:pointer;
  transition:background .2s;
}
#micBtn:hover{background:#ddd}
#micBtn.recording{background:var(--primary);color:#fff}

/* small status line */
.mic-note{display:block;margin-top:.25rem;color:#666;font-size:.9rem}

/* mic button: default blue, becomes lighter on hover, red when recording */
#micBtn{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border:none;border-radius:var(--radius);
  background:var(--primary);          /* vivid, not grey */
  color:#fff;cursor:pointer;transition:background .2s;
}
#micBtn:hover{background:#1d54c0;}
#micBtn.recording{background:#d92b04;}        /* nice “live” red */
#micBtn:disabled{background:#b8bfcf;cursor:not-allowed;}