*{box-sizing:border-box}body{margin:0;background:#f4f5ef;color:#243b32;font:16px/1.65 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:30px 24px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid #d8ded4;padding-bottom:22px}.brand{font-size:13px;font-weight:700;letter-spacing:2px}button{font:inherit;border:1px solid #ccd7ca;border-radius:9px;background:#fff;color:#243b32;padding:9px 15px;cursor:pointer}button:hover{background:#e8eee3}button:disabled{opacity:.5;cursor:wait}nav{display:flex;gap:8px}.eyebrow{color:#658366;font-size:13px;letter-spacing:3px}h1{font-size:38px;margin:10px 0}#intro{padding:38px 0 10px}#subtitle,footer{color:#6e7a70}#content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card{padding:25px;background:#fff;border:1px solid #e0e5dc;border-radius:15px}.card h2{font-size:27px;margin:5px 0;overflow-wrap:anywhere}.meta{color:#778275;min-height:26px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.primary{background:#315b46;color:white}.meaning{border-top:1px solid #e4e9e0;padding-top:15px;margin-top:18px;white-space:pre-wrap}.score{font-size:12px;color:#7a8879}.number{font-size:32px;font-weight:700}.bar{background:#edf0e8;border-radius:6px;height:13px;overflow:hidden}.fill{background:#668a62;height:100%}.wide{grid-column:1/-1}footer{font-size:12px;margin-top:40px}#message{color:#846131;min-height:24px}@media(max-width:650px){#content{grid-template-columns:1fr}h1{font-size:32px}main{padding:20px 16px}}#content.learning{display:block;max-width:680px;margin:0 auto}.progress-area{margin-bottom:22px}.progress-label{font-size:14px;margin-bottom:10px;color:#6e7a70}.progress-area .bar{height:6px}.recall-card{padding:36px 40px;animation:card-enter 240ms ease-out both;min-height:380px}.recall-card h2{font-size:36px;line-height:1.35;margin:14px 0 12px}.recall-card form{margin-top:30px}.recall-card label{display:block;margin-bottom:12px}.recall-card input{display:block;width:100%;font:inherit;color:inherit;border:1px solid #ccd7ca;border-radius:9px;background:#fcfcf8;padding:12px 14px;margin-bottom:16px}.recall-card input:focus{outline:2px solid #668a62;outline-offset:2px}.recall-card form>.primary{min-width:110px}.primary:hover{background:#244835;color:white}.keyboard-hint{font-size:12px;color:#7a8879;margin:16px 0 0}.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.options button{text-align:left;overflow-wrap:anywhere}.options .selected{background:#e8eee3;border-color:#315b46;box-shadow:inset 0 0 0 1px #315b46}.feedback{padding:20px;margin-top:24px;border-radius:10px;border:1px solid}.feedback p{margin:10px 0;white-space:pre-wrap;overflow-wrap:anywhere}.feedback h3{margin:12px 0 0}.correct{background:#edf4ec;border-color:#cedecc;color:#315b46}.wrong{background:#faf0ee;border-color:#e5ceca;color:#8a4941}.partial{background:#fbf5e6;border-color:#e8d9b6;color:#8a6b2c}.recall-card.exit{animation:card-exit 240ms ease-in both}.completion{min-height:0}nav button.active{border-color:#315b46;background:#e8eee3}button:focus-visible{outline:2px solid #315b46;outline-offset:3px}@keyframes card-enter{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes card-exit{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-40px)}}@media(max-width:650px){.recall-card{padding:24px}.recall-card h2{font-size:29px}.options{grid-template-columns:1fr}nav{gap:5px}nav button{padding:7px 10px}}@media(prefers-reduced-motion:reduce){.recall-card,.recall-card.exit{animation:none}}

.account{display:flex;align-items:center;gap:12px;font-size:13px;color:#6e7a70}.account:empty{display:none}
.dont-know{background:transparent;color:#6e7a70;margin-left:8px}
body.study-mode .recall-card:not(.has-feedback) form{grid-template-columns:minmax(0,1fr) auto auto}
body.study-mode .recall-card form>.dont-know{grid-column:3;margin:0;padding:10px 14px}
body.study-mode .has-feedback form>.dont-know{display:none}
@media(max-width:500px){body.study-mode .recall-card:not(.has-feedback) form{grid-template-columns:1fr 1fr}body.study-mode .recall-card form>input{grid-column:1/-1}body.study-mode .recall-card form>.dont-know{grid-column:1;grid-row:3}body.study-mode .recall-card form>.primary{grid-row:3}}
/* Fit practice into the viewport with the question above its answer feedback. */
body.study-mode{--study-gutter:clamp(16px,2.8dvh,28px);--study-card-padding:clamp(20px,3.8dvh,32px);--study-gap:clamp(12px,2dvh,20px)}
body.study-mode main{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;padding:var(--study-gutter) 28px}
body.study-mode header{flex-shrink:0;padding-bottom:clamp(12px,2dvh,18px);gap:16px}
body.study-mode #intro{flex-shrink:0;padding:clamp(16px,3dvh,26px) 0 clamp(8px,1.5dvh,14px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 20px}
body.study-mode #intro .eyebrow{grid-column:1/-1;margin:0;font-size:12px;letter-spacing:2px}
body.study-mode h1{font-size:30px;line-height:1.25;margin:4px 0}
body.study-mode #subtitle{font-size:13px;margin:4px 0}
body.study-mode #message{flex-shrink:0;min-height:0;font-size:13px;line-height:1.4;margin:6px 0}
body.study-mode #message:empty{display:none}
body.study-mode #content.learning{display:flex;flex:1;min-height:0;flex-direction:column;gap:var(--study-gap);width:100%;margin:12px auto 0}
body.study-mode .progress-area{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;margin:0;flex-shrink:0}
body.study-mode .progress-label{font-size:12px;margin:0}
body.study-mode .recall-card{flex:1;min-height:0;max-height:560px;padding:var(--study-card-padding) 36px;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0;margin-bottom:clamp(6px,1.2dvh,12px)}
.card-heading .eyebrow{font-size:12px;letter-spacing:1px;margin:0}
body.study-mode .recall-card h2{font-size:36px;line-height:1.25;margin:14px 0 10px;flex-shrink:0}
body.study-mode .recall-card>.meta{font-size:14px;min-height:22px;flex-shrink:0}
body.study-mode .recall-card form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 14px;align-items:start;margin-top:clamp(18px,3dvh,28px);flex-shrink:0}
body.study-mode .recall-card label{grid-column:1/-1;margin:0;font-size:14px}
body.study-mode .recall-card input{margin:0;padding:10px 12px;min-width:0}
body.study-mode .recall-card form>.primary{grid-column:2;min-width:88px;padding:10px 16px}
body.study-mode .options{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;gap:8px}
body.study-mode .mastery-summary{margin:16px 0 0}
body.study-mode .keyboard-hint{margin:10px 0 0;font-size:11px;flex-shrink:0}
body.study-mode .recall-card.has-feedback{overflow:hidden}
body.study-mode .has-feedback>.mastery-summary,body.study-mode .has-feedback>.keyboard-hint,body.study-mode .has-feedback form>button[type=submit],body.study-mode .has-feedback .options{display:none}
body.study-mode .has-feedback>h2{font-size:clamp(25px,3.8dvh,32px);margin:8px 0 4px;max-height:100px;overflow:auto}
body.study-mode .has-feedback>.meta{font-size:13px;min-height:18px}
body.study-mode .has-feedback form{grid-template-columns:1fr;margin-top:10px;gap:6px}
body.study-mode .has-feedback form label{font-size:12px}
body.study-mode .has-feedback input{padding:6px 10px;color:inherit;opacity:1;background:#fafbf7}
.submitted-choice{margin:0;padding:6px 10px;border:1px solid #ccd7ca;border-radius:8px;background:#fafbf7;font-size:15px;overflow-wrap:anywhere}
body.study-mode .feedback{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:14px;padding:20px 24px;gap:12px}
body.study-mode .feedback>strong{flex-shrink:0}
body.study-mode .has-feedback .feedback{margin-top:14px;padding:12px 16px;gap:8px}
.feedback-details{min-height:0;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere}
.feedback-details:focus-visible{outline:2px solid #668a62;outline-offset:2px}
body.study-mode .feedback h3{font-size:30px;line-height:1.25;margin:10px 0}
body.study-mode .feedback p{margin:10px 0;font-size:15px;line-height:1.6}
.feedback-footer{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;flex-shrink:0;margin-top:auto;padding-top:12px;border-top:1px solid #243b3215}
body.study-mode .feedback-footer .score{font-size:12px;margin:0}
body.study-mode .feedback-footer .keyboard-hint{margin:0}
body.study-mode footer{flex-shrink:0;margin-top:14px;font-size:11px;line-height:1.4}
body.study-mode .completion>p{margin:4px 0;font-size:14px}
.session-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:12px 0}
body.study-mode .session-summary p{margin:0;padding:8px 10px;background:#f4f5ef;border-radius:7px;font-size:13px}
.session-summary p:last-child{grid-column:1/-1}
body.study-mode .completion .actions{margin-top:12px;flex-shrink:0}
body.study-mode #content.learning>.meaning{min-height:0;overflow:auto;margin:0;padding:12px;flex:1}
@media(max-width:650px){body.study-mode main{padding:16px}body.study-mode header{gap:10px;padding-bottom:12px}body.study-mode #intro{grid-template-columns:1fr;padding:16px 0 8px;gap:3px}body.study-mode #intro .eyebrow{display:none}body.study-mode h1{font-size:25px}body.study-mode #subtitle{font-size:12px}body.study-mode .recall-card{padding:22px}body.study-mode .recall-card h2{font-size:30px}body.study-mode .feedback{padding:16px}body.study-mode .feedback h3{font-size:27px}body.study-mode .feedback p{font-size:14px}body.study-mode footer{font-size:10px;margin-top:10px}}
@media(max-height:700px){body.study-mode main{padding-top:14px;padding-bottom:14px}body.study-mode #intro{padding-top:12px;padding-bottom:6px}body.study-mode #intro .eyebrow{display:none}body.study-mode h1{font-size:25px}body.study-mode #content.learning{gap:12px;margin-top:10px}body.study-mode .recall-card{padding:20px 26px}body.study-mode .card-heading{margin-bottom:6px}body.study-mode .recall-card h2{font-size:30px;margin:10px 0 6px}body.study-mode .recall-card form{margin-top:16px;gap:10px 12px}body.study-mode .mastery-summary{margin-top:10px}body.study-mode .keyboard-hint{margin-top:8px}body.study-mode .feedback{margin-top:10px;padding:16px 18px;gap:10px}body.study-mode .feedback h3{font-size:27px}body.study-mode .feedback p{margin:8px 0;line-height:1.45}body.study-mode .session-summary{gap:6px;margin:8px 0}body.study-mode .session-summary p{padding:5px 8px}body.study-mode .completion .actions{margin-top:8px}body.study-mode footer{margin-top:8px}}

.brand{display:inline-flex;align-items:center;gap:10px}.brand-mark{display:block;flex-shrink:0;object-fit:contain;border-radius:7px}