.span-controls{display:flex;gap:13px;align-items:end;margin-bottom:12px;flex-wrap:wrap}.span-controls label{display:grid;gap:4px;font-size:10px;color:#6a7c70}.span-controls select{font:inherit;font-size:12px;padding:7px 10px;border:1px solid #d7e2d4;border-radius:8px;background:white;color:#365b48}.span-controls .score{margin-left:auto;padding-bottom:5px}.two-clocks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}.two-clocks>div{text-align:center;min-width:0}.two-clocks h3{font-size:12px;margin:0 0 3px;color:#657e6d}.two-clocks #clock,.two-clocks #end-clock{display:block;width:100%;max-width:245px!important;margin:0 auto;touch-action:none;user-select:none}.two-clocks input[type=time]{width:106px;font:700 15px Manrope,sans-serif;border:1px solid #d7e2d4;border-radius:7px;padding:4px;color:#2d5c47;text-align:center;background:#f7faf4}.two-clocks input:disabled{opacity:1;border-color:transparent;background:transparent}.two-clocks small{display:block;font-size:10px;color:#7d867a;margin-top:3px}.end-clock-wrap{position:relative}#clockQuestion{position:absolute;inset:0;display:grid;place-items:center;font:800 90px Manrope;color:#b7c9b5;background:#f4f7ef;border-radius:50%;max-width:245px;margin:auto}.free-settings{display:flex;gap:10px;align-items:center;font-size:11px;margin:8px 0}.free-settings input[type=number]{width:85px;font:inherit;padding:5px;border:1px solid #d7e2d4;border-radius:6px}.timeline-area{border-top:1px solid #edf0e7;padding-top:10px}.timeline-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}.timeline-heading button{font-size:10px;padding:7px 9px}.timeline{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:38px;padding-top:8px}.time-node{font-weight:700;font-size:12px;border:1px solid #d8e4d3;padding:5px 7px;border-radius:7px;background:#f1f6ec}.jump{font-size:11px;color:#77768c}.timeline-placeholder{font-size:11px;color:#8a9686}#guide{background:#f7f4eb;border-radius:10px;padding:9px 11px;margin-top:7px}#guide p{margin:0 0 6px;font-size:12px}#guideForm{display:flex;align-items:center;gap:8px;font-size:11px}#guideForm input{width:58px;font:700 18px Manrope;padding:5px;border:1px solid #d9dac7;border-radius:6px}#guideForm small{color:#87917c}#guideFeedback{color:#6c855d;margin-top:7px!important}#spanTimerPanel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px;font-size:11px;border-top:1px solid #edf0e7;margin-top:10px;padding-top:8px}#spanTimerPanel input[type=text]{width:38px;padding:3px;border:1px solid #ddd;border-radius:5px}#spanTimerPanel .barbox{flex-basis:100%;height:9px;margin:0}.span-answer-card #taskText{font-size:14px;color:#4d6957;line-height:1.4;margin:9px 0}.span-answer-card .answer-fields{margin-top:8px}.span-answer-card #spanAnswerHint{font-size:10px;margin:7px 0}#spanFeedback{font-size:12px;font-weight:700;margin:7px 0}#spanSolution{font-size:13px;font-weight:700;background:#f1f6e9;border-radius:8px;padding:8px;margin-top:7px}body[data-result=correct] .span-answer-card{background:#eaf8eb;border-color:#93c494}body[data-result=wrong] .span-answer-card{background:#fff4ef;border-color:#e7b7a5}body[data-mode=span] .hand{cursor:grab}body[data-mode=span] #scene{height:min(260px,max(100px,calc(100dvh - 500px)))}#spanStop{margin-left:auto;color:#a25b4b}#spanNext{background:#2d6654;color:white}body[data-mode=span] .workspace{align-items:start}
@media(min-width:901px){.two-clocks #clock,.two-clocks #end-clock{max-width:min(245px,max(150px,calc(100dvh - 420px)))!important}}
@media(max-width:900px){.two-clocks #clock,.two-clocks #end-clock{max-width:210px!important}.span-controls{gap:7px}.span-controls label{flex:1}.span-controls select{max-width:100%;font-size:11px}body[data-mode=span] #scene{height:150px}}
@media(max-width:650px){.span-controls label{flex-basis:45%}.span-controls .score{margin:0}.two-clocks{gap:5px}.two-clocks input[type=time]{width:93px;font-size:13px}.timeline{gap:4px}.time-node{font-size:11px}.span-controls{margin-bottom:9px}body[data-mode=span] #scene{height:210px}.module-nav{flex-wrap:wrap}.module-nav a{font-size:10px;padding:6px 7px}}
body[data-mode=span] #scene{height:min(200px,max(90px,calc(100dvh - 600px)))}
@media(min-width:651px) and (max-height:650px){body[data-mode=span] .day-card,body[data-mode=span] .span-answer-card{padding:12px}body[data-mode=span] .landscape{margin-top:6px}body[data-mode=span] .day-progress{padding-top:10px}.span-answer-card .answer-fields input{font-size:21px;padding:4px}.span-answer-card .answer-fields{margin-top:5px}.span-answer-card #taskText{font-size:12px;margin:5px 0}.span-answer-card #spanAnswerHint{margin:4px 0}#spanFeedback{margin:4px 0}#spanSolution{padding:5px;margin-top:4px;font-size:12px}.span-answer-card .exercise-actions{margin-top:5px}body[data-mode=span].guiding .two-clocks #clock,body[data-mode=span].guiding .two-clocks #end-clock{max-width:120px!important}body[data-mode=span] .scene-caption small{display:none}}
@media(max-width:650px){body[data-mode=span] #scene{height:210px}}