:root {
  --primary:#0052cc; --accent:#ff4d4d; --sub:#66adff; --bg:#f8f9fc;
  --mono:"Courier New",monospace;
}

/* Layout -----------------------------------------------------------------*/
html,body{margin:0;padding:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif}
.container{max-width:720px;margin:20px 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:16px}

/* Buttons ----------------------------------------------------------------*/
.record-btn,.screenshot-btn{
  display:block;margin:0 auto 10px;padding:14px 28px;border:none;border-radius:50px;
  font-size:17px;color:#fff;cursor:pointer;transition:background .25s}
.record-btn   {background:var(--accent)}   .record-btn:hover   {background:#b80e0e}
.screenshot-btn{background:var(--sub)}     .screenshot-btn:hover{background:#1f5089}

/* Output blocks -----------------------------------------------------------*/
.output-section h2{margin:22px 0 8px;color:var(--primary);display:flex;align-items:center;gap:6px}
.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}

/* Edit icon ---------------------------------------------------------------*/
.edit-icon{width:18px;height:18px;cursor:pointer;opacity:.6;transition:opacity .2s}
.edit-icon:hover{opacity:1}

/* Markdown tweaks ---------------------------------------------------------*/
.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}