statics/styles.css

/* Simple, clean aesthetic */
:root {
  --primary: #0052cc;
  --accent:  #ff6666;
  --bg:      #f8f9fc;
  --mono:    "Courier New", monospace;
}

html,body {
  margin: 0; padding: 0; background: var(--bg); font-family: Arial, sans-serif;
}

.container {
  max-width: 720px; margin: 40px auto; padding: 24px;
  background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

h1 { margin-top: 0; text-align: center; color: var(--primary); }
.subtitle { text-align: center; color: #444; margin-bottom: 32px; }

.record-btn {
  display: block; margin: 0 auto 24px; padding: 14px 28px;
  background: var(--accent); color: #fff; border: none; border-radius: 50px;
  font-size: 17px; cursor: pointer; transition: background .25s;
}

.record-btn:hover { background: #ff4d4d; }

.output-section h2 { margin: 24px 0 8px; color: var(--primary); }

.output {
  background: #000; color: #0f0; padding: 16px; min-height: 60px;
  border-radius: 4px; overflow-x: auto; font-family: var(--mono);
  white-space: pre-wrap; word-wrap: break-word;
}

/* --- new markdown styling --- */
.output.markdown h3, .output.markdown h2 { color:#55f; margin:6px 0; }
.output.markdown strong   { font-weight:bold; color:#fff; background:#333; padding:0 4px; border-radius:3px; }
.output.markdown em       { font-style:italic;  color:#ffd700; }
.output.markdown ul       { margin:4px 0 4px 20px; }