.global-controls{display:flex;gap:6px;margin-left:auto}.global-controls button{padding:7px 10px;white-space:nowrap}.global-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.global-controls #starTotal{font-weight:800}.module-nav{width:100%;order:3;gap:4px}.module-nav a{padding:6px 9px;font-size:11px}header{padding:9px 28px;gap:7px}.brand{font-size:17px}.learning-dialog{border:1px solid #d5dfd1;border-radius:20px;padding:22px;color:#294e40;max-width:480px;width:calc(100% - 28px);max-height:85dvh;overflow:auto;box-shadow:0 20px 90px #183d3944}.learning-dialog::backdrop{background:#12352d77;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.dialog-heading button{padding:5px 9px}.learning-dialog label{display:grid;gap:7px;font-size:13px;margin:14px 0}.learning-dialog input:not([type=checkbox]):not([type=range]),.learning-dialog select{font:inherit;color:inherit;padding:9px;border:1px solid #d2dccf;border-radius:8px;min-width:0}.learning-dialog input[type=range]{accent-color:#2d6654;width:100%}.learning-dialog .check-setting{display:flex;align-items:center;gap:9px}.learning-dialog p{font-size:11px;line-height:1.5;color:#718170}.settings-divider{border-top:1px solid #e2e7df}.dialog-actions{display:flex;justify-content:space-between;gap:9px}.primary{background:#2d6654!important;color:white!important;border-color:#2d6654!important}.progress-summary{font-weight:800;background:#fff4cb;padding:14px;border-radius:10px}.progress-module{display:grid;gap:5px;padding:12px 0;border-bottom:1px solid #e9eee5;font-size:13px}.progress-module span{font-size:11px;color:#748171}.awards{color:#947233!important}#rewardToast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#fff3bd;border:1px solid #e1c35e;border-radius:12px;padding:12px 18px;box-shadow:0 4px 20px #23392c33;z-index:10;font-size:13px;font-weight:700;max-width:90%;text-align:center}body:has(dialog[open]){overflow:hidden}.timer-settings label:has(#duration),#quarterTimer .timer-settings,#spanTimerPanel>label{display:none!important}.timer-settings:has(#withSeconds){justify-content:flex-end;margin-bottom:5px}.hear-controls{display:flex;gap:8px;align-items:center;margin:10px 0}.hear-controls button{flex:1}.hear-note{font-size:12px;color:#718170}.mode-switch button{padding:8px 4px;font-size:11px}
@media(min-width:651px){body[data-mode=quarters] #clock{max-width:min(390px,calc(100dvh - 370px))}body[data-mode=practice] #clock{max-width:min(410px,calc(100dvh - 330px))}body[data-mode=quarters] #scene{height:min(240px,max(95px,calc(100dvh - 540px)))}}
@media(max-width:650px){header{padding:10px 14px}.module-nav{margin-left:0}.module-nav a{font-size:10px;padding:6px}.brand{font-size:15px}.global-controls button{padding:6px 8px}}

.progress-trend{color:#467558;font-size:10px}.progress-dialog .progress-module{padding:9px 0}

@media(min-width:651px){body:not([data-mode]) #clock{max-width:min(420px,calc(100dvh - 325px))}body:not([data-mode]) #scene{height:min(322px,max(140px,calc(100dvh - 445px)))}}

#hearAnswerForm .answer-fields{margin-top:6px}#hearAnswerForm .answer-fields input{padding:5px;font-size:22px}#hearControls .hear-note{margin:7px 0}#hearAnswerForm .hear-input-hint{font-size:10px;margin:5px 0}#hearControls .hear-controls{margin:7px 0}#hearControls .hear-controls button{padding:8px 10px}#hearControls #hearHint{padding:6px 9px;font-size:11px}#hearControls input[aria-invalid=true]{border-color:#d77d6c}
@media(min-width:651px){body[data-quarter-mode=hear] #scene{height:min(200px,max(85px,calc(100dvh - 630px)))}}

#hearControls .hear-controls #hearHint{font-size:10px;padding:6px}#hearControls .hear-controls{flex-wrap:wrap}body[data-quarter-mode=hear] .quarter-answer{padding:12px}body[data-quarter-mode=hear] .quarter-answer #feedback{margin:4px 0}body[data-quarter-mode=hear] .hear-controls button{font-size:11px}@media(min-width:651px) and (max-height:650px){body[data-quarter-mode=hear] #scene{height:65px}body[data-quarter-mode=hear] .sultan-badge{width:26px;height:26px}body[data-quarter-mode=hear] .scene-caption small{display:none}body[data-quarter-mode=hear] .day-progress{padding-top:10px}body[data-quarter-mode=hear] .progress-labels{margin-top:6px}}

/* Taller day/night scenes, with the time period inside the illustration. */
body:is([data-mode=span],[data-mode=quarters],[data-mode=matching],[data-mode=stories],[data-mode=mixed],[data-mode=periods]) .day-card{padding:12px}body:is([data-mode=span],[data-mode=quarters],[data-mode=matching],[data-mode=stories],[data-mode=mixed],[data-mode=periods]) .day-card .landscape{margin:0}body:is([data-mode=span],[data-mode=quarters],[data-mode=matching],[data-mode=stories],[data-mode=mixed],[data-mode=periods]) #scene{height:clamp(210px,calc(100dvh - 490px),280px)!important}.day-card .landscape>.period{position:absolute;top:10px;left:12px;z-index:2;font-size:10px;font-weight:800;box-shadow:0 2px 8px #18352d22}.span-controls{margin-top:12px;margin-bottom:0}body[data-mode=span] .workspace{margin-top:0}@media(max-width:650px){body:is([data-mode=span],[data-mode=quarters],[data-mode=matching],[data-mode=stories],[data-mode=mixed],[data-mode=periods]) #scene{height:230px!important}}