body { font-family: sans-serif; max-width:800px; margin:30px auto; padding:0 20px; background:#f7f7f7;}
textarea{width:100%;height:300px;font-size:16px;padding:10px;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;resize:vertical;}
button{padding:10px 20px;font-size:16px;margin-top:10px;cursor:pointer;border-radius:4px;border:none;color:#fff;transition:0.3s;}
button[type="submit"]{background:#0073e6;}
button[type="submit"]:hover{background:#005bb5;}
button#clear-btn{background:#aaa;margin-left:10px;}
.result{margin-top:20px;padding:15px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:16px;opacity:0;transition:opacity 0.5s;}
.progress-bar-container{width:100%;height:20px;background-color:#ddd;border-radius:10px;overflow:hidden;margin:10px 0;}
.progress-bar, #engagement-bar{height:100%;width:0%;border-radius:10px 0 0 10px;transition:width 1s ease, background-color 0.5s ease;}
.progress-bar{background-color:#4caf50;}
#engagement-bar{background-color:#2196f3;}
#error{color:red;font-weight:bold;}
#char-count{margin-top:5px;font-size:14px;color:#555;}
#rhythm-header{margin-top:20px; display:none;}
#rhythm{display:flex;align-items:flex-end;height:100px;overflow-x:auto;padding-bottom:5px;}
.rhythm-bar{width:10px;margin-right:2px;background-color:#2196f3;transition:height 0.5s ease, opacity 0.5s;flex-shrink:0;opacity:0;}
@media (max-width:600px){
    textarea{height:240px;font-size:14px;}
    body{margin:15px auto;padding:0 10px;}
    button{width:100%;margin:8px 0 0 0;font-size:14px;}
    button#clear-btn{margin-left:0;}
    .result{font-size:14px;padding:10px;}
    #rhythm{height:80px;}
    .rhythm-bar{width:6px;margin-right:1px;}
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.nav-links a {
  color: #0073e6;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: all 0.3s;
}

.nav-links a:hover {
  color: #005bb5;
  text-decoration: underline;
}