:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#142c3d;background:#f3f7f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{touch-action:manipulation;cursor:pointer;border:1px solid #cad9e2;background:white;color:#18384c;border-radius:12px;padding:12px 14px;font-weight:700}button:focus-visible,select:focus-visible{outline:3px solid #51a4be;outline-offset:2px}button:active{transform:scale(.985)}button.primary{background:#14627a;color:#fff;border-color:#14627a}button.secondary{background:#eaf1f4}.hidden{display:none!important}#app{max-width:950px;margin:auto;padding:clamp(12px,3vw,28px);padding-bottom:48px}.top,.card-header,.bottom,.present-header,.present-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}.top h1{font-size:clamp(22px,3vw,31px);margin:3px 0 16px}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:800;color:#617987;margin:0}.iconbutton{font-size:25px;min-width:47px}.toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;background:#fff;padding:13px;border:1px solid #dae5e8;border-radius:16px}.seg{display:flex;background:#eef4f5;padding:4px;border-radius:12px}.seg button{border:0;background:none;padding:10px 13px}.seg button.active{background:#14627a;color:white}.selector{display:flex;flex-direction:column;gap:4px;flex:1 1 130px}.selector label{font-size:12px;color:#45606c;font-weight:700}select{width:100%;border:1px solid #c9dbe1;border-radius:10px;padding:10px;background:#fff}.check{font-size:12px;display:flex;align-items:center;gap:6px;padding:8px 0}.check input{accent-color:#14627a}.online-tools{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.muted{color:#6c8190;font-size:12px}.vocab-card{margin-top:16px;background:white;border:1px solid #dce7e9;border-radius:22px;box-shadow:0 7px 28px #12283c0c;padding:clamp(20px,4vw,40px)}.card-header{font-size:12px;color:#5c7786;margin-bottom:32px}.center{text-align:center}.hanzi{text-align:center;font-weight:650;line-height:1.35;font-size:clamp(55px,11vw,100px);overflow-wrap:anywhere;margin:15px auto}.pinyin{text-align:center;color:#446b82;font-size:clamp(23px,4vw,37px);margin-bottom:35px}.answer-area{border-top:1px solid #e0e9ec;min-height:130px;padding-top:22px}.answer{text-align:center;font-size:clamp(25px,4.7vw,43px);font-weight:800;line-height:1.35;margin:15px auto;overflow-wrap:anywhere}.hidden-answer{color:#b5c3ca;letter-spacing:.07em}.actions{margin:14px 0;display:grid;grid-template-columns:1fr 1.8fr 1fr;gap:9px}.actions button{min-height:55px}.small{font-size:10px;opacity:.8}.teacher-note{text-align:center;color:#526f7f;font-size:13px;margin:10px auto}.bottom{justify-content:center;flex-wrap:wrap;margin-top:22px}.info{margin-top:30px;font-size:13px;color:#506875}.info summary{cursor:pointer;font-weight:700}.info p{line-height:1.6}.presentation{position:fixed;inset:0;background:#f8fcfd;display:flex;flex-direction:column;color:#102f41;padding:clamp(16px,3vw,38px)}.present-header{font-size:clamp(14px,2vw,20px);font-weight:700;color:#53758a}.present-body{flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:0;gap:clamp(16px,3vh,32px)}.present-zh{text-align:center;font-size:clamp(58px,11vw,175px);font-weight:750;line-height:1.35;overflow-wrap:anywhere}.present-py{text-align:center;font-size:clamp(30px,4.5vw,70px);color:#47748b}.present-answer{border-top:2px solid #d5e4e9;padding:18px 28px;text-align:center;font-size:clamp(26px,4vw,60px);font-weight:800;color:#087493}.present-bottom{font-size:12px;letter-spacing:.1em;color:#81949d}@media(max-width:480px){.actions{grid-template-columns:1fr 1fr}.actions #physical-reveal,.actions #online-reveal{grid-column:1 / -1;grid-row:1}.actions #previous{grid-column:1;grid-row:2}.actions #next{grid-column:2;grid-row:2}.toolbar{gap:8px}.selector{flex:1 1 110px}.hanzi{margin-top:10px}.card-header{margin-bottom:20px}.answer-area{min-height:110px}.vocab-card{padding:22px 16px}}

/* v1.1: viewport-height-aware layout; all lesson controls visible on laptop screens. */
html,body{min-height:100%;}
#app{max-width:1050px;min-height:100dvh;display:flex;flex-direction:column;padding:clamp(8px,1.5vh,16px) clamp(10px,2.2vw,22px);padding-bottom:clamp(8px,1.2vh,14px);gap:clamp(5px,1vh,10px)}
.top{flex:0 0 auto;min-height:36px}
.top h1{font-size:clamp(19px,2.7vw,28px);margin:0}
.eyebrow{font-size:10px}
.iconbutton{padding:5px 11px;min-height:35px}
.toolbar{flex:0 0 auto;padding:clamp(6px,1vh,10px);gap:8px}
.seg button{padding:8px 10px}
.selector{gap:2px}
select{padding:7px 9px}
.online-tools{margin:0;flex:0 0 auto}
.vocab-card{margin:0;flex:1 1 auto;min-height:0;padding:clamp(10px,2vh,19px) clamp(12px,2vw,22px);display:flex;flex-direction:column;justify-content:space-between}
.card-header{margin:0}
.hanzi{font-size:clamp(48px,min(9vw,12vh),96px);line-height:1.12;margin:clamp(4px,1vh,10px) auto}
.pinyin{font-size:clamp(22px,min(3.5vw,5vh),36px);margin:0 auto clamp(5px,1vh,10px)}
.answer-area{min-height:0;flex:0 0 auto;padding-top:clamp(7px,1.2vh,12px)}
.answer{font-size:clamp(22px,min(4vw,5vh),38px);margin:clamp(6px,1vh,10px) auto;line-height:1.18}
.actions{flex:0 0 auto;margin:0;gap:8px}
.actions button{min-height:clamp(38px,6vh,52px);padding:7px 10px}
.teacher-note{flex:0 0 auto;margin:0;font-size:11px}
.bottom{flex:0 0 auto;margin:0;gap:8px}
.bottom button{padding:7px 10px}
.info{margin:0;flex:0 0 auto;font-size:11px}
.info[open]{max-height:21vh;overflow:auto}
@media(max-height:700px) and (min-width:600px){
 #app{gap:5px;padding-top:6px;padding-bottom:6px}
 .top h1{font-size:21px}
 .toolbar{padding:5px}
 .vocab-card{padding:10px 16px}
 .hanzi{font-size:clamp(48px,9vh,78px)}
 .pinyin{font-size:clamp(21px,4.3vh,31px)}
 .answer{font-size:clamp(21px,4.5vh,33px)}
 .actions button{min-height:38px}
 .bottom button{padding:5px 10px}
}
@media(max-width:599px){
 #app{min-height:100dvh;gap:7px;padding:8px 10px}
 .top h1{font-size:21px}
 .toolbar{gap:6px;padding:7px}
 .selector{flex:1 1 38%;min-width:0}
 .check{padding:3px 0}
 .vocab-card{padding:12px;min-height:170px}
 .hanzi{font-size:clamp(48px,12vw,90px)}
 .pinyin{font-size:clamp(22px,5.5vw,34px)}
 .actions{grid-template-columns:1fr 1fr}
 .actions #physical-reveal,.actions #online-reveal{grid-column:1/-1;grid-row:1}
 .actions #previous{grid-column:1;grid-row:2}
 .actions #next{grid-column:2;grid-row:2}
 .teacher-note{font-size:11px}
 .bottom{gap:5px}
 .bottom button{padding:6px}
}
@media(max-height:590px){
 .teacher-note{display:none}
 .info:not([open]){display:none}
 .vocab-card{min-height:120px}
 .hanzi{font-size:clamp(40px,10vh,68px)}
 .pinyin{font-size:clamp(19px,4.5vh,28px)}
 .answer{font-size:clamp(19px,4.5vh,29px)}
}