/* Layout requested from the supplied reference. NH colors stay unchanged. */
.nh-brand-icon{display:block;width:100%;height:100%;object-fit:contain;border-radius:15%}
#topControls{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 grid-template-rows:auto auto auto;gap:10px 12px;width:100%;min-width:0;
 align-items:stretch;
}
#topControls #practiceMode{grid-area:2/1;width:100%;min-width:0}
#topControls #headerLevel{grid-area:2/2;width:100%;min-width:0}
#topControls #settingsButton{grid-area:1/1;width:100%;min-height:46px;height:auto}
#topControls .language-switch{grid-area:1/2;display:flex;justify-self:start;width:auto;max-width:100%;min-width:0;margin:0}
#topControls .language-switch button{min-width:0;min-height:46px;height:auto}
#topControls #nhLearningTools{grid-area:3/1/4/3;min-width:0;margin:0}
#nhLearningTools .banner-learning-tools{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:12px;align-items:stretch}
#nhLearningTools .goal-split{display:flex;align-items:stretch;min-width:0}
#nhLearningTools .btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;height:auto;border:2px solid #e5c48e;border-radius:14px;background:#fff3d9;color:#70491e;padding:8px 10px;cursor:pointer;font-size:16px;font-weight:700;line-height:1.3}
#nhLearningTools .btn-sm:hover{background:#ffedc5}
#nhLearningTools #goalsButton{flex:1;min-width:0;white-space:nowrap;border-radius:14px 0 0 14px}
#nhLearningTools #goalCameraButton{flex:0 0 44px;min-width:44px;border-radius:0 14px 14px 0;border-left:0;padding:8px 4px;font-size:20px}
#nhLearningTools .goal-count{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:28px;width:auto;height:28px;padding:0 6px;border-radius:50%;background:#ba0017;color:#fff;font-size:16px;line-height:1}
#nhLearningTools #wordBankButton{width:100%;min-width:0;background:#f0f7e9;border-color:#cddfbd;color:#385d28}
#nhLearningTools #wordBankButton:hover{background:#e5f0da}
#nhLearningTools .bank-label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#nhLearningTools .bank-sprout{font-size:23px;line-height:1;flex:none}
#nhLearningTools #wordBankCount{display:block;flex:none;font-size:16px;line-height:1.3}
#nhLearningTools #wordBankButton.bank-count-below{flex-direction:column;gap:2px}
#cycle .cycle-arrow{pointer-events:none;user-select:none}
#cycle .cycle-arrow-loop{display:none}
/* DOM and keyboard order remain 1, 2, 3, 4. */
@media(max-width:1000px){
 #cycle .cycle-flow{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);grid-template-rows:auto 28px auto;column-gap:4px;row-gap:5px;align-items:start}
 #cycle .cycle-unit[data-cycle-step="1"]{grid-area:1/1}
 #cycle .cycle-unit[data-cycle-step="2"]{grid-area:1/3}
 #cycle .cycle-unit[data-cycle-step="3"]{grid-area:3/3}
 #cycle .cycle-unit[data-cycle-step="4"]{grid-area:3/1}
 #cycle .cycle-stage{height:auto;min-height:112px;flex-direction:column;text-align:center;justify-content:center;gap:8px;padding:12px 8px}
 #cycle .cycle-stage>div{max-width:100%;overflow-wrap:anywhere}
 #cycle .cycle-stage b{font-size:15px;line-height:1.4}
 #cycle .cycle-stage small{display:none}
 #cycle .cycle-arrow{display:grid;width:24px;height:24px;line-height:1;justify-self:center;align-self:center;font-size:22px}
 #cycle .cycle-arrow-1{grid-area:1/2;align-self:start;margin-top:44px}
 #cycle .cycle-arrow-2{grid-area:2/3;transform:rotate(90deg)}
 #cycle .cycle-arrow-3{grid-area:3/2;align-self:start;margin-top:44px;transform:rotate(180deg)}
 #cycle .cycle-arrow-loop{grid-area:2/1;transform:rotate(-90deg)}
}
@media(max-width:600px){
 #topControls{grid-template-rows:auto auto auto;gap:8px}
 #topControls .language-switch{justify-self:stretch;width:100%}
 #topControls .language-switch button{flex:1;padding:8px 4px}
 #nhLearningTools .banner-learning-tools{gap:8px}
 #nhLearningTools .btn-sm{font-size:14px;padding:8px 4px;gap:5px}
 #nhLearningTools .goal-count,#nhLearningTools #wordBankCount{font-size:14px}
 #nhLearningTools .goal-count{min-width:23px;height:23px;padding:0 5px}
 #nhLearningTools .bank-sprout{font-size:20px}
}
@media(max-width:360px){
 #nhLearningTools .banner-learning-tools{gap:7px}
 #nhLearningTools .btn-sm{font-size:12px;gap:3px}
 #nhLearningTools #goalCameraButton{flex-basis:36px;min-width:36px;font-size:18px}
 #nhLearningTools .bank-sprout{font-size:18px}
 #nhLearningTools .goal-count{min-width:21px;height:23px;padding:0 4px}
}