/* Stable feedback colors are independent of the user's decorative theme. */
:root{--feedback-correct:#16723a;--feedback-wrong:#b42332;--feedback-corrected:#b45309;--feedback-pending:var(--muted);--feedback-correct-bg:#e5f5e9;--feedback-wrong-bg:#fde6e8;--feedback-corrected-bg:#fff0dc}
.dark{--feedback-correct:#86efac;--feedback-wrong:#fda4af;--feedback-corrected:#fdba74;--feedback-correct-bg:#183c2a;--feedback-wrong-bg:#4c232e;--feedback-corrected-bg:#493016}
.typing-text .correct,.dark .typing-text .correct{color:var(--feedback-correct);background:var(--feedback-correct-bg)}
.typing-text .wrong,.dark .typing-text .wrong{color:var(--feedback-wrong);background:var(--feedback-wrong-bg)}
.typing-text .corrected,.dark .typing-text .corrected{color:var(--feedback-corrected);background:var(--feedback-corrected-bg)}
.typing-text .typed-letter{border-radius:2px}
.typing-text .typed-space{text-decoration:none}
.typing-text .hindi-word{display:inline-block;margin:0;padding:0;background:none;box-shadow:none;color:inherit;border-radius:0}
.typing-text .hindi-glyph{position:relative;letter-spacing:0;border-radius:2px}
.typing-text .hindi-glyph.mixed{background:var(--glyph-colors);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.typing-text .hindi-glyph.cursor{border:0;margin:0}
.typing-text .hindi-glyph.cursor:after{content:'';position:absolute;bottom:0;left:var(--cursor-start);width:var(--cursor-width);height:2px;background:var(--theme-ink);border-radius:2px}
.typing-text .hindi-glyph.pending.cursor{background:var(--mint);color:var(--ink)}
.feedback-legend{display:flex;gap:12px;align-items:center;font-size:10px;white-space:nowrap}
.feedback-legend span:before{content:'';display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:currentColor}
.feedback-legend .is-correct{color:var(--feedback-correct)}.feedback-legend .is-wrong{color:var(--feedback-wrong)}.feedback-legend .is-corrected{color:var(--feedback-corrected)}

/* One language group replaces the separate English and Hindi sidebar entries. */
.lesson-nav-group summary{list-style:none;cursor:pointer;user-select:none}.lesson-nav-group summary::-webkit-details-marker,.public-lessons-menu summary::-webkit-details-marker{display:none}
.nav-chevron{margin-left:auto;transition:transform .2s}.lesson-nav-group:not([open]) .nav-chevron{transform:rotate(-90deg)}
.lesson-submenu{margin:2px 0 7px 20px;padding-left:10px;border-left:1px solid var(--line);display:grid;gap:3px}
.sidebar .lesson-submenu .nav-link{font-size:12px;padding:9px 10px;line-height:1.45}
.lesson-submenu .nav-link.active{color:var(--theme-ink);background:var(--mint)}
.public-lessons-menu{position:relative}.public-lessons-menu summary{cursor:pointer;list-style:none}.public-lessons-menu summary:after{content:'⌄';margin-left:7px}
.public-lessons-menu>div{position:absolute;top:calc(100% + 12px);left:0;min-width:210px;display:grid;gap:4px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #0001;z-index:30}
.public-lessons-menu>div>a{padding:10px;border-radius:7px}.public-lessons-menu>div>a:hover{background:var(--soft)}

/* The lesson title, feedback, text, keyboard and navigation form one compact view. */
.practice-layout .topbar{height:54px;padding-inline:24px}
.practice-layout .main{max-width:1300px;padding:14px 24px 8px}
.practice-ready #app{position:absolute!important;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.practice-layout #practice-page{margin-top:0;min-height:0;border-radius:15px}
.practice-layout #practice-page .practice-head{padding:12px 20px;gap:18px;background:var(--panel)}
.practice-title{min-width:0;flex:1}.practice-layout .practice-head small{font-size:9px;letter-spacing:1.2px}
.practice-layout .practice-head h2{font-size:clamp(17px,1.5vw,22px);line-height:1.45;margin:2px 0 0;overflow-wrap:anywhere}
.practice-layout .practice-head .live-stats{margin:0;gap:24px;flex-shrink:0}
.practice-layout .practice-head .live-stats strong{font-size:23px;line-height:1.25;letter-spacing:-.6px}
.practice-layout .practice-head .live-stats small{font-size:8px;letter-spacing:.7px}
.practice-layout #practice-page .practice-body{padding:12px 20px 11px}
.practice-layout .typing-wrap{padding:12px 16px;min-height:0}
.practice-layout .typing-text,.practice-layout .typing-text.source-hindi{height:clamp(80px,14vh,136px);max-height:136px!important;overflow:hidden;font-size:clamp(21px,2.05vw,28px);line-height:1.8;padding:3px 0 0;letter-spacing:.5px}
.practice-layout .typing-text.source-hindi{letter-spacing:0;line-height:1.95}
.typing-feedback{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:28px;margin:2px 0}
.practice-layout .typing-tip{font-size:10px;line-height:1.5;margin:0;min-height:0;text-align:right}
.practice-options{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:6px;margin-bottom:7px}
.practice-layout .practice-toolbar{margin:0;padding:0;border:0;justify-content:flex-start;gap:14px;min-height:32px}
.practice-layout .practice-toolbar label{font-size:10px;gap:6px}
.practice-layout .practice-toolbar select{padding:5px 7px;max-width:115px}
.practice-layout .practice-controls{margin:0;gap:6px}
.practice-layout .practice-controls .secondary{font-size:10px;min-height:32px;padding:6px 10px;gap:5px}
.practice-layout .practice-controls svg{width:13px;height:13px}
.practice-layout .keyboard-caption{max-width:650px;margin:0 auto 5px;font-size:10px}
.practice-layout .keyboard-caption>span{padding:2px 7px;font-size:8px}
.practice-layout .keyboard-stage{max-width:650px}
.practice-layout .keyboard-stage .keyboard{gap:4px}
.practice-layout .keyboard-stage .keyboard-row{gap:4px}
.practice-layout .keyboard-stage .key,.practice-layout .keyboard-stage.krutidev-keyboard .key:not(.space):not(.shift){height:clamp(30px,5vh,44px);width:42px;border-radius:5px}
.practice-layout .keyboard-stage .key.space{width:240px;height:25px}.practice-layout .keyboard-stage .key.shift{width:65px;height:25px}
.practice-layout .krutidev-keyboard .key-main-glyph{top:1px;font-size:20px}
.practice-layout .krutidev-keyboard .key-alt-glyph{font-size:8px;bottom:2px}.practice-layout .krutidev-keyboard .key-physical{font-size:7px;bottom:2px}
.practice-layout .key-legend{margin-top:3px;gap:12px;font-size:9px;line-height:1.5}
.practice-layout .key-legend>span{display:inline-flex;align-items:center}
.practice-layout .exercise-pagination{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 0;font-size:14px}
.lesson-nav-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:11px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--theme-ink);font-weight:650;transition:background .15s,border-color .15s}
.lesson-nav-button svg{width:16px;height:16px}.lesson-nav-button>span{font-size:19px;line-height:1}
.lesson-nav-button:hover{border-color:var(--theme-ink);background:var(--mint)}
.lesson-nav-button.next{background:var(--green);color:var(--button-text);border-color:var(--green)}.lesson-nav-button.next:hover{filter:brightness(1.1)}
.lesson-nav-button.is-disabled{opacity:.4;cursor:default;user-select:none}
.practice-layout .passage-details{margin-top:14px;font-size:11px;color:var(--muted)}
.practice-layout .passage-details p{font-size:13px}.practice-layout .workspace-footer{padding-top:20px}
@media(max-height:720px) and (min-width:701px){
 .practice-layout .topbar{height:48px}.practice-layout .main{padding-top:9px}
 .practice-layout #practice-page .practice-head{padding-block:8px}.practice-layout #practice-page .practice-body{padding-block:9px}
 .practice-layout .typing-text,.practice-layout .typing-text.source-hindi{height:82px;font-size:23px}
 .practice-layout .keyboard-stage .key,.practice-layout .keyboard-stage.krutidev-keyboard .key:not(.space):not(.shift){height:31px}
 .practice-layout .krutidev-keyboard .key-main-glyph{font-size:17px;top:0}.practice-layout .krutidev-keyboard .key-alt-glyph{font-size:7px}
 .practice-layout .exercise-pagination{margin-top:8px}.lesson-nav-button{min-height:44px;padding-block:9px}
 .practice-layout .side-bottom .local-note{display:none}
}
@media(max-width:1000px){.practice-layout .main{padding-inline:16px}.practice-layout .practice-head .live-stats{gap:15px}.practice-layout .practice-toolbar .volume-control{display:none}}
@media(max-width:700px){
 .practice-layout .topbar{height:50px;padding-inline:12px}.practice-layout .topbar .saved{display:none}.practice-layout .main{padding:9px 9px 6px}
 .practice-layout #practice-page .practice-head{padding:10px;gap:8px;flex-wrap:wrap}.practice-layout .practice-head h2{font-size:17px}.practice-layout .practice-head .icon-btn{width:27px;height:27px}
 .practice-layout .practice-head small{font-size:8px;letter-spacing:.6px}.practice-layout .practice-head .live-stats{gap:12px}.practice-layout .practice-head .live-stats strong{font-size:18px}.practice-layout .practice-head .live-stats small{font-size:7px;letter-spacing:0}
 .practice-layout #practice-page .practice-body{padding:9px}.practice-layout .typing-wrap{padding:8px 10px}.practice-layout .typing-text,.practice-layout .typing-text.source-hindi{height:110px;font-size:23px;line-height:1.8}
 .typing-feedback{gap:2px;align-items:center;flex-direction:column;margin:4px 0;min-height:35px}.feedback-legend{gap:10px;font-size:9px}.practice-layout .typing-tip{font-size:9px;text-align:center}
 .practice-options{gap:5px;flex-wrap:wrap;justify-content:center;margin-bottom:6px;padding-top:6px}.practice-layout .practice-toolbar{gap:10px;justify-content:center;min-height:28px}.practice-layout .practice-toolbar label{font-size:9px}
 .practice-layout .practice-toolbar select{font-size:9px;max-width:85px;padding:4px}.practice-layout .practice-controls .secondary{font-size:9px;padding:4px 8px;min-height:28px}
 .practice-layout .keyboard-caption{font-size:9px;margin-bottom:5px}.practice-layout .keyboard-caption>span{font-size:8px}
 .practice-layout .keyboard-stage .keyboard-row{gap:2px}.practice-layout .keyboard-stage .keyboard{gap:3px}
 .practice-layout .keyboard-stage .key,.practice-layout .keyboard-stage.krutidev-keyboard .key:not(.space):not(.shift){width:7%;height:35px;border-radius:4px;font-size:10px}
 .practice-layout .keyboard-stage .key.space{width:45%;height:24px}.practice-layout .keyboard-stage .key.shift{width:13%;height:24px}
 .practice-layout .krutidev-keyboard .key-main-glyph{font-size:16px;top:1px}.practice-layout .krutidev-keyboard .key-alt-glyph{font-size:7px;right:1px;bottom:1px}.practice-layout .krutidev-keyboard .key-physical{font-size:6px;left:1px;bottom:1px}
 .practice-layout .key-legend{gap:2px;font-size:8px;flex-direction:column;align-items:center;margin-top:2px}.practice-layout .key-legend>span:last-child{font-size:8px}
 .practice-layout .exercise-pagination{gap:6px;font-size:11px;margin-top:8px}.lesson-nav-button{min-height:46px;padding:9px 5px;gap:5px;border-radius:9px}.lesson-nav-button svg{width:13px;height:13px}.lesson-nav-button>span{font-size:16px}
 .practice-layout .passage-details{margin-top:12px}
}
@media(max-width:380px){.practice-layout .practice-head .live-stats{width:100%;order:3;justify-content:center;gap:32px}.practice-layout .typing-text,.practice-layout .typing-text.source-hindi{height:88px}}

.practice-ready .exercise-intro>a,.practice-ready .exercise-intro>p{display:none}
.lesson-nav-group summary:focus-visible,.public-lessons-menu summary:focus-visible{outline:2px solid var(--theme-ink);outline-offset:3px;border-radius:6px}
@media(max-width:700px) and (max-height:740px){
 .practice-layout .topbar{height:44px}.practice-layout .main{padding:6px 7px}
 .practice-layout #practice-page .practice-head{padding:8px;gap:6px}.practice-layout .practice-title{flex:1 1 125px}
 .practice-layout .practice-head h2{font-size:15px}.practice-layout .practice-head .live-stats{width:auto;order:0;gap:7px}
 .practice-layout .practice-head .live-stats strong{font-size:15px}.practice-layout .practice-head .live-stats small{font-size:6px}
 .practice-layout .practice-head .icon-btn{width:24px;height:24px}
 .practice-layout #practice-page .practice-body{padding:7px}.practice-layout .typing-wrap{padding:6px 9px}
 .practice-layout .typing-text,.practice-layout .typing-text.source-hindi{height:76px;font-size:21px;line-height:1.75}
 .typing-feedback{min-height:29px;margin:3px 0;gap:1px}.feedback-legend{font-size:8px}.practice-layout .typing-tip{font-size:8px}
 .practice-options{padding-top:4px;margin-bottom:4px;gap:3px}.practice-layout .practice-toolbar{min-height:26px}
 .practice-layout .practice-controls .secondary{min-height:25px}.practice-layout .keyboard-caption{margin-bottom:3px}
 .practice-layout .keyboard-stage .key,.practice-layout .keyboard-stage.krutidev-keyboard .key:not(.space):not(.shift){height:28px}
 .practice-layout .krutidev-keyboard .key-main-glyph{font-size:14px;top:0}.practice-layout .krutidev-keyboard .key-alt-glyph{font-size:6px}
 .practice-layout .keyboard-stage .key.space,.practice-layout .keyboard-stage .key.shift{height:22px}
 .practice-layout .key-legend>span:last-child{display:none}
 .practice-layout .exercise-pagination{margin-top:6px}.lesson-nav-button{min-height:44px;padding-block:7px}
}