*{box-sizing:border-box}
:root{
  --bg:#eef7ff; --fg:#122; --card:#ffffffcc; --border:#bcd;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0e1620; --fg:#eaf2ff; --card:#0f2030; --border:#2a445c; }
}
html,body{height:100%;margin:0}
body{font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;gap:12px}
header,footer{width:100%;padding:12px 16px}
header{display:flex;align-items:center;gap:16px}
header img{height:56px}
header h1{margin:0 auto;text-align:center}
main{width:min(1000px,96%);display:flex;flex-direction:column;gap:16px;align-items:center;margin:0 auto}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;width:100%;box-shadow:0 2px 12px #00000014}
.controls .row{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
label{display:flex;flex-direction:column;gap:6px;font-weight:600}
select,input[type=text]{font-size:1.1rem;padding:10px;border-radius:10px;border:2px solid var(--border)}
input[type=range],input[type=number]{padding:6px;border-radius:10px;border:2px solid var(--border);width:160px}
button{font-size:1.05rem;padding:10px 16px;border:none;border-radius:12px;background:#4f8bd9;color:white;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
button:hover:not(:disabled){background:#3b6db0}
.play #prompt{font-size:1.8rem;min-height:2.2rem;text-align:center;margin:12px 0}
.play input{width:100%;text-align:center;font-size:1.5rem}
#feedback{min-height:1.6rem;font-weight:700;margin-top:8px}
#progress{margin-top:6px;opacity:.8}
#certificate{text-align:center}
#certificate input{width:240px}
@media print{
  header,.controls,#checkBtn,#startBtn,#speakBtn,#printBtn,#certificate button,footer { display:none !important }
  .card{box-shadow:none;border:none}
}
.mini{font-size:.95rem}
.muted{opacity:.75}