*{box-sizing:border-box}body{margin:0;background:#f2f5f6;color:#192331;font:16px system-ui}nav,main{max-width:920px;margin:auto;padding:18px}nav{display:flex;justify-content:space-between}a{color:#17476d;font-weight:700}header{padding:18px 0}header p{color:#177d78;font-weight:800;text-transform:uppercase;font-size:.75rem;letter-spacing:.1em}h1{font:700 clamp(2.4rem,7vw,4.5rem)/.95 Georgia;margin:0;color:#18324b}small,p{color:#657286;line-height:1.55}.panel,article{background:#fffdf9;border:1px solid #dce3e8;border-radius:16px;padding:22px;margin:16px 0;box-shadow:0 12px 30px #18324b14}.dash,.levels,.choices,.diag{display:grid;gap:10px}.dash{grid-template-columns:1.4fr .6fr}.levels{grid-template-columns:repeat(2,1fr)}button,input{font:inherit;border-radius:10px;padding:11px;border:1px solid #c9d5db;background:white}.go{background:#18324b;color:white;font-weight:750}.level{text-align:left;min-height:82px}.level b,.level span{display:block}.level span{font-size:.82rem;color:#657286}.level:disabled{opacity:.4}.meta{color:#177d78;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.prompt{font:700 clamp(1.5rem,4vw,2.3rem)/1.18 Georgia;color:#18324b}.context,.feedback,.callout{padding:14px;background:#f1f6f6;border-left:4px solid #177d78;line-height:1.55}.answer{display:flex;gap:10px}.answer input{flex:1}.choice{text-align:left}.ok{background:#e9f7f3;border-color:#177d78}.bad{background:#fff0ef;border-color:#a84740}.study{margin-top:16px;padding:12px;background:#f7f9fa}.study dt{color:#177d78;font-weight:800}.study dd{margin:3px 0 11px;color:#657286}@media(max-width:600px){.dash,.levels,.diag{grid-template-columns:1fr}.answer{display:grid}}

.eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#177d78}.actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.lesson{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;line-height:1.5;background:#f7fafb;padding:16px;border-radius:12px}.lesson dt{font-weight:800;color:#177d78}.lesson dd{margin:0;color:#4b5a68}.next{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.feedback{margin-top:18px}.actions button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:650px){.actions,.lesson{grid-template-columns:1fr}.next{display:grid}}

/* study guide, learning flow, audio, sync status */
.sync{font-size:.78rem;font-weight:700;padding:8px 12px;border-radius:999px;display:inline-block;margin-bottom:4px}
.sync.ok{background:#e9f7f3;color:#14615d}
.sync.off{background:#fff5e8;color:#8a5a17}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.step{text-align:left;min-height:86px;line-height:1.35}
.step b,.step span{display:block}
.step span{font-size:.8rem;font-weight:500;opacity:.8;margin-top:5px}
.step:disabled{opacity:.45;cursor:not-allowed}
.audio{display:flex;gap:10px;margin:14px 0}
.say{font-weight:700;cursor:pointer;flex:0 1 auto;min-height:46px}
.say.quiet{font-weight:600;color:#4b5a68}
.zh{font-size:1.05rem;line-height:1.7}
.lesson dd.zh{color:#18324b}
.chip{display:inline-block;background:#e9f7f3;color:#14615d;font-size:.76rem;font-weight:800;padding:5px 11px;border-radius:999px}
@media(max-width:650px){.flow{grid-template-columns:1fr}.audio{display:grid;grid-template-columns:1fr 1fr}}
/* PWA-only additions, appended to the shared stylesheet at build time. */

main { padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
button { min-height: 48px; -webkit-tap-highlight-color: transparent; }
body { -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none; overscroll-behavior-y: contain; }
input { -webkit-user-select: text; user-select: text; font-size: 16px; }

.sync { line-height: 1.5; }
.actions.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 16px 0; }
.stat { background: #f1f6f6; border-left: 4px solid #177d78; border-radius: 10px; padding: 12px 14px; }
.stat b { display: block; font: 700 1.5rem/1.1 Georgia; color: #18324b; }
.stat span { font-size: .78rem; color: #657286; }
h3 { margin: 18px 0 4px; font: 700 1rem/1.3 system-ui; color: #18324b; }

@media (max-width: 700px) { .actions.two { grid-template-columns: 1fr; } }

/* Only rendered in WORDWORK_TEST builds. */
.testbar { background:#c0392b; color:#fff; font:700 .85rem/1.35 system-ui; padding:10px 16px; text-align:center;
  padding-top: max(10px, env(safe-area-inset-top)); }
.testbar span { display:block; font-weight:500; opacity:.92; }

.audiostate { font-size:.85rem; color:#4b5a68; align-self:center; }
.audiostate.on { font-weight:700; }
.audiostate.bad { color:#a84740; font-weight:700; }
.audio { flex-wrap:wrap; align-items:center; }