.training-options{display:flex;gap:7px;margin-top:10px}.training-options button{flex:1;padding:8px 4px;font-size:11px}.training-options button[aria-pressed=true]{background:#2d6654;color:white}.training-caption{font-size:12px;color:#77877a;text-align:center;margin:8px 0}.source-digital{display:grid;place-items:center;min-height:210px;margin:10px 0;background:#fafcf7;border-radius:16px}.source-digital strong{font-family:DSEG7,monospace;font-size:48px;color:red;background:#000;padding:20px;border-radius:14px}.source-digital span{font-size:12px;font-weight:700}.training-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.training-choices button{font-size:16px;min-height:48px}.training-choices button svg{width:100%;height:105px;display:block}.training-choices button.rejected{background:#e8eae7;color:#909b91;opacity:.65}.training-choices button.accepted{background:#d8f1da;border-color:#78ab7d}.training-choices button:disabled{opacity:1}.training-answer[data-feedback=wrong]{background:#ffe2df;border-color:#eaa79b}.training-answer[data-feedback=correct]{background:#e9f7e8;border-color:#96c795}.training-answer #trainingFeedback{font-size:12px;min-height:17px;margin:8px 0}.training-answer #trainingPrompt{font-size:15px;line-height:1.5;font-weight:600;color:#3b594b;margin:10px 0}.training-answer .answer-fields{margin-top:8px}.training-answer .answer-fields input{font-size:23px}.story-icon{font-size:46px;text-align:center;margin:8px}.training-answer #trainingSolution{padding:9px;background:#f3f7ec;border-radius:9px;font-size:13px}.training-answer #trainingHint{font-size:11px}.training-actions{display:flex;gap:8px;margin-top:9px}.training-actions #trainingStop{margin-left:auto}.round-position{font-size:12px;font-weight:700;color:#79629a}.round-summary{background:#fff7d7;padding:18px;border-radius:14px;margin:12px 0;font-size:14px;line-height:1.7}.training-timer{border-top:1px solid #e8ede4;padding-top:10px;margin-top:8px}.training-timer .timerrow{align-items:center}.training-answer #trainingForm button{margin:10px 0 0}.training-clock #clock{max-width:min(390px,calc(100dvh - 330px))}.training-clock .source-digital{min-height:min(350px,max(170px,calc(100dvh - 350px)))}body[data-mode=matching] #scene,body[data-mode=mixed] #scene{height:min(210px,max(95px,calc(100dvh - 600px)))}body[data-mode=stories] #scene,body[data-mode=periods] #scene{height:min(245px,max(95px,calc(100dvh - 555px)))}
@media(min-width:651px) and (max-height:650px){.training-choices button svg{height:80px}.training-clock #clock{max-width:calc(100dvh - 340px)}.training-answer #trainingPrompt{font-size:13px}.training-choices button{min-height:41px;padding:8px}.training-answer #trainingHint{margin:6px 0}}
@media(max-width:650px){.training-clock #clock{max-width:320px}.source-digital strong{font-size:40px}body[data-mode=matching] #scene,body[data-mode=mixed] #scene,body[data-mode=stories] #scene,body[data-mode=periods] #scene{height:200px}}

.training-clock .source-digital{min-height:125px;gap:8px;padding:14px}.source-digital strong{font-size:38px;padding:13px}.source-digital span{font-size:10px}.training-clock #trainingChoices button{font-size:11px;padding:6px}.training-clock #trainingChoices button svg{height:100px}.training-clock #trainingChoices{margin:8px 0}.training-clock #trainingChoices button svg text{font-family:Arial,sans-serif}@media(min-width:651px) and (max-height:650px){.training-clock .source-digital{min-height:90px;padding:8px}.source-digital strong{font-size:30px;padding:10px}.training-clock #trainingChoices button svg{height:75px}}

@media(min-width:651px) and (max-height:650px){.training-clock .source-digital{min-height:70px}.training-clock #trainingChoices button svg{height:65px}}

@media(min-width:651px) and (max-height:650px){body:has(#clock[hidden]) #clockCaption{display:none}}

/* Compact questions and continuous practice. */
.training-choices[data-feedback=wrong]{background:#ffe2df;outline:4px solid #f5c2ba;border-radius:10px}.training-choices[data-feedback=wrong] button:not(.rejected){background:#fff0ee}.training-choices[data-feedback=correct]{background:#e3f4e2;outline:4px solid #bbdbb9;border-radius:10px}.training-answer .training-timer{margin:6px 0 9px;padding-top:6px}.training-answer .training-timer .barbox{height:9px;margin-top:4px}.training-answer .training-timer .timerrow{font-size:11px}.training-answer .training-timer strong{font-size:14px}.training-answer .training-timer .round-position{font-size:10px}
body[data-mode=stories] .training-answer{padding:12px 16px}body[data-mode=stories] .training-answer #trainingPrompt{font-size:14px;line-height:1.4;margin:7px 0}body[data-mode=stories] .story-icon{font-size:24px;margin:0;text-align:right;float:right}body[data-mode=stories] .training-answer .answer-fields{margin-top:6px}body[data-mode=stories] .training-answer .answer-fields input{padding:5px;font-size:21px}body[data-mode=stories] .training-answer #trainingHint{margin:5px 0}body[data-mode=stories] .training-answer #trainingFeedback{margin:4px 0}body[data-mode=stories] .training-actions{margin-top:5px}body[data-mode=stories] .training-actions button{padding:7px 10px}
@media(min-width:651px){body[data-mode=matching] .training-clock #clock,body[data-mode=periods] .training-clock #clock{max-width:min(390px,calc(100dvh - 310px))}body[data-mode=matching] .training-answer,body[data-mode=periods] .training-answer{padding:12px 16px}body[data-mode=matching] #scene,body[data-mode=periods] #scene{height:min(220px,max(85px,calc(100dvh - 575px)))}body[data-mode=stories] #scene{height:min(225px,max(85px,calc(100dvh - 565px)))}}

@media(min-width:651px){body:is([data-mode=matching],[data-mode=periods]) #scene{height:min(220px,max(70px,calc(100dvh - 610px)))}body:is([data-mode=matching],[data-mode=periods]) .training-answer #trainingPrompt{margin:6px 0}body:is([data-mode=matching],[data-mode=periods]) .training-choices{margin:6px 0}body:is([data-mode=matching],[data-mode=periods]) .training-choices button{font-size:14px;min-height:38px;padding:7px}body:is([data-mode=matching],[data-mode=periods]) #trainingFeedback{margin:4px 0}body:is([data-mode=matching],[data-mode=periods]) .training-actions button{padding:7px 10px}body:is([data-mode=matching],[data-mode=periods]) .day-progress{padding-top:10px}body:is([data-mode=matching],[data-mode=periods]) .progress-labels{margin-top:6px}body:is([data-mode=matching],[data-mode=periods]) .landscape{margin-top:8px}body:is([data-mode=matching],[data-mode=periods]) #trainingSolution{padding:5px;font-size:12px}}
@media(min-width:651px) and (max-height:650px){body:is([data-mode=matching],[data-mode=periods]) .sultan-badge{width:26px;height:26px}body:is([data-mode=matching],[data-mode=periods]) .scene-caption small{display:none}}