:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#302323;background:#fffaf1;font-size:16px;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;height:100dvh;display:flex;flex-direction:column;border-top:5px solid #bf2631}button,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #9e202a;outline-offset:3px}header,main{width:min(100%,780px);margin-inline:auto}header{padding:18px 24px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}.brand{font-size:24px;font-weight:750;letter-spacing:-.7px;line-height:1.15;color:#302323;text-decoration:none}.brand span{color:#b51f2b}.progress{font-size:12px;color:#755e54;white-space:nowrap}.progress strong{color:#b51f2b}.track{height:4px;background:#f1e2c4;border-radius:4px;margin-top:6px;overflow:hidden}.track i{display:block;height:100%;background:#bf2631}main{padding:0 24px 16px;display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}nav{display:flex;gap:4px;background:#f6e9ce;padding:4px;border-radius:12px;flex-shrink:0}nav button{flex:1;padding:11px 4px;border:0;border-radius:9px;color:#715346;background:transparent;font-size:14px;font-weight:650;min-height:44px}nav button.active{background:#bf2631;color:white;box-shadow:0 2px 4px #84202819}.workspace{display:flex;flex:1;flex-direction:column;min-height:0;gap:12px}.toolbar{display:flex;gap:12px;flex-shrink:0}.toolbar>div{flex:1;min-width:0}label{display:block;font-size:12px;color:#796459;margin:0 0 5px}select{width:100%;border:1px solid #e4d6bd;border-radius:9px;background:#fffcf6;color:#302323;padding:10px;font-size:14px;min-height:42px}#surface{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}.card{background:#fff;border:1px solid #ebddc5;border-radius:19px;padding:20px;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;min-height:min-content;box-shadow:0 4px 20px #5d301107;position:relative;overflow-wrap:anywhere}.cardmeta{width:100%;display:flex;justify-content:space-between;color:#8a6b56;font-size:12px;letter-spacing:1px;position:absolute;left:0;top:18px;padding:0 20px}.word{font-size:clamp(27px,5vw,42px);letter-spacing:-.7px;line-height:1.15;text-align:center;margin:30px 0 18px;font-weight:720;max-width:100%;text-wrap:balance}.secondary,.primary{border:0;border-radius:11px;padding:13px 15px;min-height:46px;font-size:16px;font-weight:650}.primary{background:#bf2631;color:white}.primary:hover{background:#a91b27}.secondary{background:#f7e9d0;color:#62462e}#listen{font-size:14px;min-height:40px;padding:9px 20px;background:#ffdf70;color:#563908}#listen:before{content:'◖))';font-size:12px;margin-right:8px}#speech-status{font-size:12px;margin:7px 0 0;text-align:center}#speech-status:empty{display:none}#exercise{width:100%}.translation{color:#a81f2a;font-size:23px;line-height:1.2;text-align:center;margin:20px 0 0;text-wrap:balance}.actions{display:flex;gap:10px;flex-shrink:0}.actions button{flex:1}.actions:empty{display:none}.hint{font-size:13px;color:#806956;text-align:center;margin:14px 0 10px}.options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.options button{border:1px solid #e8d8bc;background:#fffcf5;color:#443024;border-radius:10px;min-height:48px;padding:10px;font-size:15px;line-height:1.25;text-align:center;overflow-wrap:anywhere}.options button:hover:not(:disabled){border-color:#bf2631;background:#fff4d5}.options button.correct{background:#e2f2e4;border-color:#398649;color:#24542c}.options button.wrong{background:#ffe2e2;border-color:#b62731;color:#8d1d25}.feedback{font-size:14px;line-height:1.3;text-align:center;margin:10px 0 0;color:#77332c}.feedback:empty{display:none}.list{overflow-y:auto;min-height:0;background:#fff;border:1px solid #eadcc5;border-radius:14px}.row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px 16px;border-bottom:1px solid #f0e6d4;font-size:15px;line-height:1.4}.row span{color:#7c6353}#storage-note:empty{display:none}#storage-note{font-size:12px;margin:0}.eyebrow{color:#ac2630;font-weight:700;font-size:13px}h2,p{max-width:100%}body[data-mode=quiz] .card{justify-content:center}body[data-mode=quiz] .word{font-size:29px;margin:25px 0 10px}@media(max-width:500px){header{padding:14px 16px 12px}.brand{font-size:21px;max-width:210px}.progress{font-size:11px}main{padding:0 14px max(12px,env(safe-area-inset-bottom));gap:10px}.workspace,#surface{gap:10px}.card{padding:16px}.cardmeta{padding:0 16px;top:16px}.word{font-size:32px}body[data-mode=quiz] .word{font-size:26px}.translation{font-size:21px}.options button{font-size:14px;min-height:46px}.toolbar{gap:10px}}@media(max-height:620px){header{padding-top:9px;padding-bottom:9px}.card{padding:14px}.word{margin:25px 0 10px;font-size:28px}.translation{margin-top:12px;font-size:20px}body[data-mode=quiz] .word{font-size:24px;margin-top:23px}.hint{margin:8px 0}.options button{padding:8px;min-height:42px}main,.workspace,#surface{gap:8px}}@media(max-height:480px){body{height:auto;min-height:100dvh}.card{min-height:220px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}
/* Spanish school theme */
:root{background:#fffcf6;color:#322319}body{border-top:0}body:before{content:'';height:9px;flex-shrink:0;background:linear-gradient(#b91e2b 0 33%,#ffcb38 33% 77%,#b91e2b 77%)}header{padding-top:12px;padding-bottom:12px}.brand{font-weight:800;letter-spacing:-.9px;font-size:25px}.brand small{display:block;font-size:10px;letter-spacing:2.5px;font-weight:600;margin-bottom:5px}.brand span{color:#ba1c2b}.progress{color:#54453c}.progress strong{color:#ba1c2b}nav{background:none;padding:0;gap:7px;border-radius:0}nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-height:62px;border:1px solid #e4dad0;background:#fffdfa;border-radius:11px;padding:8px 3px;color:#322319;font-size:14px}nav button.active,.primary{background:#ba1c2b;color:white;border-color:#ba1c2b}svg{width:21px;height:21px;flex-shrink:0}nav svg{width:24px;height:24px}.brand{white-space:nowrap}#hard-toggle{display:flex;align-items:center;gap:10px;border:1px solid #ffd15b;background:#fff2c9;color:#46331b;border-radius:11px;min-height:42px;padding:8px 13px;font-size:14px;font-weight:650;flex-shrink:0}#hard-toggle>span{font-size:26px;line-height:1}#hard-count{margin-left:auto;background:#ba1c2b;color:#fff;border-radius:50%;min-width:26px;height:26px;display:grid;place-items:center;padding:0 5px;font-size:12px}#hard-toggle[aria-pressed=true]{background:#ffda64;border-color:#ba1c2b;box-shadow:inset 0 0 0 1px #ba1c2b}.card{border-radius:14px;border-color:#e8dac8;box-shadow:0 3px 14px #4830160a;padding:16px}.secondary,#listen{background:#ffce44;color:#322319}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:8px}#listen:before{content:none}.word{font-weight:750;font-size:clamp(26px,5vw,38px)}.translation{font-weight:650;color:#ba1c2b}.translation:before{content:'';display:block;width:48px;height:2px;background:#e7ded4;margin:16px auto}.card-help{color:#806f60;font-size:12px;text-align:center;margin:15px 0 0}.actions button{font-size:15px}.actions svg{width:20px;height:20px}.cardmeta{top:15px}.toolbar label{font-size:12px}#type-form{margin-top:18px}#type-form label{font-size:14px;text-align:center}#answer{width:100%;min-height:46px;border:1px solid #baa88f;border-radius:9px;font:inherit;font-size:16px;padding:10px 12px;color:#322319;background:white}#answer:focus{outline:2px solid #ba1c2b;outline-offset:2px}#answer.correct{border-color:#398649;background:#e2f2e4}#answer.wrong{border-color:#ba1c2b;background:#ffe8e8}body[data-mode=type] .word{font-size:27px}.card h2{text-align:center}.card>p{text-align:center;line-height:1.4}@media(max-width:500px){.brand{font-size:21px}.brand small{font-size:9px;letter-spacing:2px}header{gap:8px;padding:10px 14px}.progress{font-size:11px}.word{font-size:30px}nav button{min-height:58px;font-size:13px}.workspace,main,#surface{gap:9px}.actions button{padding:12px 8px;font-size:14px}}@media(max-height:680px){nav button{min-height:48px;flex-direction:row;gap:4px}nav svg{width:18px;height:18px}header{padding-top:8px;padding-bottom:8px}.card-help{margin-top:8px}.translation:before{margin:10px auto}.card{padding:14px}.word{margin:23px 0 10px}body[data-mode=quiz] .word,body[data-mode=type] .word{font-size:24px}.options button{min-height:42px;padding:8px}.hint{margin:8px 0}#hard-toggle{min-height:38px;padding:5px 11px}#type-form{margin-top:10px}}@media(max-height:520px){body{height:auto;min-height:100dvh}.card{min-height:190px}body[data-mode=type] .card{min-height:160px}}@media(prefers-reduced-motion:no-preference){.word{animation:appear .18s ease-out}@keyframes appear{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}}

/* Keep the app within the visible viewport; scroll content, never empty page space. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none}
main,.workspace,#surface{min-height:0}
.card{min-height:0;overflow-y:auto;overscroll-behavior:contain;justify-content:safe center}
.card>*{flex-shrink:0}
body[data-mode=quiz] .card{justify-content:safe center}
.list{overscroll-behavior:contain}
@media(max-height:520px){main{overflow-y:auto;overscroll-behavior:contain}.workspace{flex-shrink:0;min-height:280px}.card,body[data-mode=type] .card{min-height:0}}