:root{
  color-scheme:light dark;
  --page:var(--tg-theme-bg-color,#f5f3ed);
  --ink:var(--tg-theme-text-color,#222b26);
  --muted:var(--tg-theme-hint-color,#58655d);
  --line:color-mix(in srgb,var(--ink) 18%,transparent);
  --accent:var(--tg-theme-button-color,#285e45);
  --accent-ink:var(--tg-theme-button-text-color,#fff);
  --surface:var(--tg-theme-secondary-bg-color,#fff);
  --surface-soft:color-mix(in srgb,var(--surface) 72%,var(--page));
  --success:#23653d;
  --warning:#8b5b15;
}
*{box-sizing:border-box}
html{min-width:320px;background:var(--page);color:var(--ink)}
body{margin:0;min-width:320px;min-height:100vh;background:var(--page);color:var(--ink);font:1rem/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
main{width:min(100%,48rem);margin:0 auto;padding-block-start:.45rem;padding-block-end:max(1rem,var(--tg-viewport-content-safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));padding-inline-start:max(.75rem,var(--tg-viewport-content-safe-area-inset-left,env(safe-area-inset-left,0px)));padding-inline-end:max(.75rem,var(--tg-viewport-content-safe-area-inset-right,env(safe-area-inset-right,0px)))}
.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.35rem .75rem;min-width:0;margin-bottom:.15rem;padding-top:max(.15rem,var(--tg-viewport-content-safe-area-inset-top,env(safe-area-inset-top,0px)))}
.topbar-links{display:flex;align-items:center;flex-wrap:wrap;gap:.15rem .55rem;min-width:0}.home-link,.leaderboard-link{display:inline-block;max-width:100%;color:var(--muted);font-size:.84rem;text-underline-offset:.2em;overflow-wrap:anywhere}
h1{min-width:0;margin:0;font-size:clamp(1.1rem,3vw,1.4rem);line-height:1.2;letter-spacing:-.02em;text-align:end;overflow-wrap:anywhere}
.status{min-width:0;margin:.1rem 0 .35rem;padding:.2rem .45rem;border-inline-start:.18rem solid var(--accent);border-radius:.15rem;color:var(--muted);font-size:.82rem;line-height:1.35;overflow-wrap:anywhere}
#training,.exercise-panel,.exercise-panel article{min-width:0}
.progress-panel{margin:.4rem 0;padding:.15rem 0;border:0;border-radius:0;background:transparent}
.progress-panel summary{width:fit-content;max-width:100%;min-height:2rem;align-content:center;color:var(--muted);font-size:.85rem;cursor:pointer;overflow-wrap:anywhere}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:.35rem;min-width:0;margin:.3rem 0 0}
.stat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .5rem;min-width:0;padding:.45rem .55rem;border-radius:.35rem;background:var(--surface-soft);font-size:.8rem;line-height:1.3}
.stat>*{min-width:0;overflow-wrap:anywhere}
.stat strong{font-variant-numeric:tabular-nums;font-size:1rem}
.exercise-panel{min-height:0;margin:.3rem 0 .4rem;padding:clamp(.7rem,2vw,1rem);border:1px solid var(--line);border-radius:.55rem;background:var(--surface)}
.exercise-title{margin:0 0 .45rem;color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;overflow-wrap:anywhere}
.prompt{min-width:0;margin:.2rem 0 .65rem;font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.context{min-width:0;margin:.25rem 0 .55rem;padding:.55rem .65rem;border-inline-start:.2rem solid var(--accent);border-radius:.2rem;background:var(--surface-soft);font-size:clamp(1rem,2.4vw,1.12rem);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.target-expression{font-weight:750;text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.13em}
.translation{margin:.25rem 0 .55rem;font-weight:650;overflow-wrap:anywhere}
.hint{min-width:0;margin:.25rem 0 .55rem;color:var(--muted);font-size:.88rem;overflow-wrap:anywhere}
.choice-list{display:grid;gap:.4rem;min-width:0;margin:.55rem 0 0}
.answer-form{display:grid;gap:.45rem;min-width:0;margin-top:.6rem}
.answer-form label{min-width:0;font-weight:650;overflow-wrap:anywhere}
.answer-form input{width:100%;min-width:0;min-height:2.8rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:.35rem;background:var(--page);color:var(--ink);font:inherit;font-size:1rem}
.controls{width:100%;min-width:0;margin:.4rem 0}
button{max-width:100%;min-width:0;min-height:2.65rem;padding:.55rem .8rem;border:1px solid var(--accent);border-radius:.35rem;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:650;text-align:start;white-space:normal;overflow-wrap:anywhere;cursor:pointer;touch-action:manipulation}
.choice-list button{width:100%}
button.secondary,.choice-list button{border-color:var(--line);background:var(--surface-soft);color:var(--ink)}
button:disabled{opacity:.6;cursor:wait}
button[hidden],section[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.feedback{min-width:0;padding:.6rem;border-radius:.35rem;background:var(--surface-soft);overflow-wrap:anywhere}
.feedback strong{color:var(--success)}
.feedback.is-warning strong{color:var(--warning)}
@media(prefers-color-scheme:dark){:root{--line:color-mix(in srgb,var(--ink) 24%,transparent);--success:#8bd39e;--warning:#f0c77c}}
@media(max-width:360px){.exercise-panel{padding:.65rem}.summary{grid-template-columns:minmax(0,1fr)}}
@media(max-height:600px) and (min-width:640px){main{padding-block-start:.25rem}.exercise-panel{padding:.65rem}.exercise-title{margin-bottom:.3rem}.prompt{margin-bottom:.45rem}.context{padding:.4rem .55rem}}