:root{
    --bg:#faf7ef; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
    --accent: #63c600; --bad:#c2410c; --good:#15803d; --line:#e5e7eb;
    --bg1: #f3fff5;     /* very light soft green */
    --bg2: #cfeedd;     /* soft green */
  }
  body{ margin:0; font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); }
  .wrap{ max-width:920px; margin:0 auto; padding:10px; }
  .header{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--card);
    border:1px solid var(--line); border-radius:14px;
    padding:14px 16px; box-shadow:0 2px 10px rgba(0,0,0,.04);
  }

  
  .brand{ display:flex; gap:12px; align-items:center; }

  .title{ line-height:1.15; }
  .title .h{ font-size:18px; font-weight:800; }
  .title .s{ font-size:13px; color:var(--muted); margin-top:2px; }
  .user{ display:flex; gap:10px; align-items:center; }
  .avatar{ width:60px; height:60px; border-radius:999px; border:1px solid var(--line); object-fit:cover; background:#fff; }
  .user .name{ font-size:13px; color:var(--muted); text-align:right; }

  .card{
    margin-top:14px; background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.04);
  }
  .topbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .pill{
    display:inline-flex; gap:8px; align-items:center;
    padding:8px 10px; border-radius:999px; border:1px solid var(--line); background:#fff;
    font-size:13px; color:var(--muted);
  }
  .pill b{ color:var(--ink); }
  .prompt{
    margin-top:14px; font-size:18px; line-height:1.35;
    padding:14px; border-radius:12px; border:1px dashed var(--line); background:#fff;
    min-height:64px;
  }
  .radios{ margin-top:12px; display:flex; gap:14px; align-items:center; }
  .opt{
    display:inline-flex; gap:8px; align-items:center;
    padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer;
    user-select:none;
  }
  .opt input{ transform:scale(1.15); }
  .feedback{
    margin-top:10px; font-weight:700; display:none;
    padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff;
  }
  .feedback.good{ color:var(--good); }
  .feedback.bad{ color:var(--bad); }

  .controls{
    margin-top:14px; display:flex; flex-wrap:wrap; gap:10px;
    align-items:center;
  }
  button{
    border:1px solid var(--line); background:#fff; color:var(--ink);
    padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700;
  }
  button.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
  button:disabled{ opacity:.45; cursor:not-allowed; }
  .small-links{
    margin-top:10px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    font-size:13px;
  }
  .small-links a{ color:var(--accent); text-decoration:none; font-weight:700; }
  .small-links a:hover{ text-decoration:underline; }

  .hint{ color:var(--muted); font-size:13px; margin-top:8px; }
  audio{ width:100%; margin-top:10px; }
  
  
 .footerNav{
     max-width:920px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 15px;
      border: 1px color white;
      display:flex;
      justify-content:center;
    }
    .footer.link{
        border: 1px color white;
    }
    .homelink{
      margin-top: 25px;
      width:54px; height:54px;
      border-radius: 999px;
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(31,122,70,.18);
      display:grid;
      place-items:center;
      text-decoration:none;
      color: var(--accent2);
      box-shadow:  0 10px 25px rgba(0,0,0,.30);
      font-size: 24px;
      transition: transform 0.3s ease; /* Smooth transition */
    }
.homelink:hover{
    transform: scale(1.1); 
}