:root { --ink:#20242b; --muted:#6e6a63; --line:#e5e7eb; --blue:#2563eb; --red:#dc2626; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#fff; color:var(--ink); }
body,button { font-family:Arial,Helvetica,sans-serif; }
[hidden] { display:none !important; }
.page { min-height:100vh; position:relative; padding:54px 88px 42px; }
.progress { position:fixed; z-index:2; inset:0 0 auto; height:3px; background:#eef2f7; }
.progress span { display:block; height:100%; background:#94a3b8; transition:width .2s ease; }
.question { width:min(980px,100%); margin:0 auto; }
.question h1 { margin:0; text-align:center; font-size:clamp(42px,5vw,58px); line-height:1.1; }
.pronunciation { margin:11px 0 17px; text-align:center; color:var(--muted); font-size:16px; }
hr { height:1px; margin:0 0 25px; border:0; background:var(--line); }
.answers { display:grid; gap:12px; }
.answers button { min-height:64px; padding:12px 22px; text-align:left; color:var(--ink); font-size:clamp(16px,2vw,21px); border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; transition:border-color .12s,background .12s; }
.answers button:hover { border:2px solid var(--blue); background:#f8fafc; }
.answers button:active { border-color:#1d4ed8; background:#eff6ff; }
.reveal { min-height:calc(100vh - 96px); display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px; }
.reveal img { display:block; width:100%; height:100%; max-height:calc(100vh - 150px); object-fit:contain; transition:opacity .18s ease; }
.reveal img.entering { opacity:0; }
.reveal nav { display:flex; justify-content:center; gap:12px; }
.reveal nav button { width:64px; height:48px; color:var(--ink); font-size:25px; border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; }
.reveal nav button:hover { border:2px solid var(--blue); background:#f8fafc; }
.complete { min-height:calc(100vh - 96px); display:grid; place-content:center; justify-items:center; text-align:center; }
.complete h1 { margin:0; font-size:38px; }
.complete p { color:var(--muted); font-size:18px; }
.complete-actions { display:flex; gap:12px; margin-top:8px; }
.complete-actions button { min-width:190px; min-height:50px; padding:0 20px; border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; }
.complete-actions button:hover { border:2px solid var(--blue); background:#f8fafc; }
.complete-actions .primary { color:#fff; border-color:var(--blue); background:var(--blue); }
@media (max-width:700px) { .page{padding:42px 22px 24px}.question h1{font-size:42px}.answers button{font-size:16px}.complete-actions{flex-direction:column} }
@media (prefers-reduced-motion:reduce) { *{transition:none!important} }