/* TTS Interactive Lab — shared base styles (site palette). Maps the lab widgets' design tokens to the Technical Trade School course theme. */
:root{
  --surface-0:#faf9f5; --surface-1:#f0efe9; --surface-2:#ffffff;
  --text-primary:#18191B; --text-secondary:#5f5e5a; --text-muted:#9a9a95;
  --text-accent:#207049; --bg-accent:#eaf3ee; --border-accent:#7fc4a3; --fill-accent:#2E9B68;
  --text-success:#207049; --bg-success:#eef7f2; --border-success:#a9dcc4;
  --text-danger:#9e2b1a; --bg-danger:#fbeae4; --border-danger:#e6b3a4;
  --text-warning:#8a5312; --bg-warning:#fdf1ea; --border-warning:#f3d2bf;
  --border:#e4e2da; --border-strong:#cfcdc4; --radius:10px;
}
*{box-sizing:border-box;}
.tts-lab{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text-primary);line-height:1.55;max-width:880px;margin:0 auto;padding:8px 4px 24px;}
.tts-lab .lab-head{border-left:5px solid var(--fill-accent);padding:2px 0 2px 14px;margin-bottom:20px;}
.tts-lab .lab-eyebrow{color:var(--text-accent);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;}
.tts-lab .lab-title{font-size:22px;font-weight:700;margin-top:2px;}
.tts-lab .lab-sub{font-size:14px;color:var(--text-secondary);margin-top:4px;}
.tts-lab h2.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.tts-lab label{font-size:14px;color:var(--text-secondary);}
.tts-lab input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:var(--border-strong);outline:none;}
.tts-lab input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--fill-accent);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tts-lab input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--fill-accent);cursor:pointer;border:2px solid #fff;}
.tts-lab select,.tts-lab input[type=number]{height:36px;border:1px solid var(--border-strong);border-radius:var(--radius);background:#fff;padding:0 10px;font-size:14px;color:var(--text-primary);}
.tts-lab button{border:1px solid var(--border-strong);background:#fff;border-radius:var(--radius);padding:0.5rem 0.9rem;font-size:14px;color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .12s;}
.tts-lab button:hover{background:var(--surface-1);}
.tts-lab button:active{transform:scale(.98);}
.tts-lab input[type=checkbox]{accent-color:var(--fill-accent);}
.tts-lab canvas{display:block;}