:root{font-family:Inter,system-ui,sans-serif;color:#132b40;background:#f5f6f2}*{box-sizing:border-box}body{margin:0}header{background:#101f30;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:18px max(18px,calc((100vw - 850px)/2));gap:12px}a{color:inherit}.brand{font-weight:700;text-decoration:none}main{max-width:850px;margin:28px auto;padding:0 16px 60px}h1{font-size:27px;margin:0 0 8px}h2{font-size:21px;margin:0 0 12px}.muted{color:#657684}.panel{background:#fff;border:1px solid #dfe5e3;border-radius:18px;padding:24px;margin:15px 0}.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.button{border:0;background:#12887e;color:#fff;border-radius:10px;padding:12px 17px;font:inherit;cursor:pointer}.button:disabled{opacity:.45;cursor:default}.secondary{background:#edf3f1;color:#153c38}.ghost{background:transparent;color:#12887e;border:1px solid #cddbd6}.choice{display:flex;align-items:flex-start;gap:10px;border:1px solid #dfe5e3;border-radius:12px;padding:13px;margin:9px 0;cursor:pointer}.choice:has(input:checked){border-color:#12887e;background:#f0f8f5}.choice input{margin-top:5px;accent-color:#12887e}.choice.correct{border-color:#117d61}.choice.wrong{border-color:#b64a40}.word{border:0;background:none;color:inherit;font:inherit;padding:2px 3px;border-radius:4px;cursor:pointer}.word:hover,.word:focus-visible{background:#e4f2ee;text-decoration:underline}.question{font-size:24px;font-weight:650;line-height:1.6}.hint{background:#f0f5f2;padding:12px;border-radius:10px;margin:10px 0;font-size:14px}.hint strong{display:block;margin-bottom:4px}.hint button{margin-top:8px}.option-content{flex:1;line-height:1.6}.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.notice{padding:10px 0;font-weight:650}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.tabs button.active{background:#12887e;color:#fff}.small{font-size:13px}.row{display:flex;justify-content:space-between;gap:12px;align-items:center}.entry{padding:12px 0;border-bottom:1px solid #dfe5e3}.entry:last-child{border:0}.progress{height:5px;background:#e7eeea;border-radius:5px;margin:14px 0}.progress i{display:block;height:100%;background:#12887e;border-radius:5px}select{font:inherit;padding:10px;border:1px solid #cbd7d1;border-radius:8px;background:#fff}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e1ad53;outline-offset:2px}@media(max-width:560px){header{padding:16px}.panel{padding:16px}.question{font-size:21px}main{margin-top:18px}}
/* Compact question layout: retain separation without excessive empty space. */
.filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;max-width:100%}.filters label{display:flex;flex-direction:column;gap:4px;font-size:13px;min-width:0}.filters select{max-width:100%;font-size:14px}.filters label:first-child{flex:1;min-width:180px}.level-note{margin:7px 0}.instruction{margin:7px 0}.question{font-weight:650}.explanation{padding-top:5px;font-size:15px;line-height:1.45}.explanation p{margin:6px 0}.language-cue{padding:8px 10px;background:#f0f5f2;border-radius:8px}.full-translation p{margin:5px 0}.stat-grid,.level-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-grid strong{display:block;font-size:25px;margin-top:5px}.stat-grid>div{background:#f0f5f2;border-radius:10px;padding:12px}.entry h2{font-size:17px;margin:5px 0 10px}.choice.correct{background:#edf8f1}.choice.wrong{background:#fff0ee}select:focus-visible{outline:3px solid #e1ad53;outline-offset:2px}@media(max-width:560px){.filters{width:100%;gap:8px}.filters label:first-child{min-width:0}.filters select{width:100%;font-size:12px;padding:9px 6px}.level-progress{grid-template-columns:1fr}.entry .small{font-size:12px}}
main{margin:14px auto;padding:0 14px 30px}
.panel{padding:17px 20px;margin:9px 0;border-radius:14px}
.tabs{margin:8px 0;gap:6px}
.tabs .button{padding:8px 12px;min-height:36px}
.toolbar{gap:8px}
.toolbar h1{font-size:23px;margin-bottom:2px}
.question{font-size:22px;line-height:1.38;margin:8px 0 4px}
.choice{padding:8px 10px;margin:5px 0;gap:8px;border-radius:9px}
.choice input{margin-top:4px}
.option-content{line-height:1.42}
.word{padding:1px 2px}
.hint{margin:5px 0;padding:9px 11px;line-height:1.4}
.hint button{margin-top:5px}
.controls{margin-top:11px;gap:8px}
.controls .button{padding:9px 13px}
.progress{margin:8px 0}
.notice{padding:7px 0}
@media(max-width:560px){main{margin-top:8px;padding:0 10px 22px}.panel{padding:12px 13px;margin:7px 0}.question{font-size:20px}.choice{padding:8px;margin:4px 0}.tabs{gap:5px}.tabs .button{font-size:13px;padding:7px 9px}header{padding:12px 14px}}