/* Dedicated practice layout. Game and competition workspaces keep their layout. */
body:has(.practice-layout) #target{height:clamp(180px,24vh,270px);min-height:180px;max-height:none;overflow-y:auto;scroll-behavior:auto}
body:has(.practice-layout) #typing{height:clamp(155px,20vh,230px);min-height:155px;max-height:none;overflow-y:auto}
.practice-stage{min-width:0}
body:has(.practice-layout) .practice-controls .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 0;padding:10px 0;margin-top:12px}
.practice-controls .metrics>div:nth-child(2){border-right:0}
body:has(.practice-layout) .practice-controls .studio-heading{align-items:start;flex-wrap:wrap}
body:has(.practice-layout) .practice-controls .controls{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0}
.practice-controls .controls label{min-width:0}
.practice-controls .controls button{width:100%}
.practice-controls .guided-option{font-size:11px;line-height:1.5}
.practice-controls .guided-option small{display:block;margin-top:3px}
.practice-controls .shuffle-note{font-size:11px;line-height:1.5;margin:8px 0}
.practice-controls .custom-options{margin-bottom:10px}
.practice-controls #custom-text{font-size:17px}
body:has(.practice-layout) .practice-stage .input-mode-note{font-size:11px!important;margin:3px 0!important}
body:has(.practice-layout) .practice-stage #status{margin:0 0 6px}
@media(min-width:1100px){
 body:has(.practice-layout) main{max-width:1700px;padding-left:20px;padding-right:20px}
 body:has(.practice-layout) .workspace{grid-template-columns:165px minmax(0,1fr);gap:16px}
 body:has(.practice-layout) .studio.practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:18px;padding:16px;align-items:start}
 .practice-controls{grid-column:2;grid-row:1;border-left:1px solid var(--line);padding-left:16px}
 .practice-stage{grid-column:1;grid-row:1}
 body:has(.practice-layout) .practice-sidebar h1{font-size:23px}
 body:has(.practice-layout) .practice-sidebar .lesson-nav{padding:14px 8px}
 body:has(.practice-layout) .practice-sidebar .lesson-nav>a{font-size:12px;padding:8px 5px;gap:6px}
 body:has(.practice-layout) .practice-sidebar .continue-card{font-size:12px}
}
@media(max-width:1099px){
 .practice-controls{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
 body:has(.practice-layout) .practice-controls .controls{grid-template-columns:minmax(0,1fr) minmax(120px,.4fr)}
 .practice-controls .controls button{grid-column:1/-1}
 body:has(.practice-layout) .practice-controls .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:650px){
 body:has(.practice-layout) .workspace{display:block}
 .practice-sidebar .lesson-nav,.practice-sidebar .continue-card{display:none}
 body:has(.practice-layout) .practice-controls .controls{grid-template-columns:1fr}
 body:has(.practice-layout) #target{height:220px}
 body:has(.practice-layout) #typing{height:185px}
}
@media(min-width:1100px){
 body:has(.practice-layout) #target{height:clamp(180px,22vh,230px)}
 body:has(.practice-layout) #typing{height:clamp(155px,18vh,195px)}
 body:has(.practice-layout) #keyboard .key:not(.wide):not(.space){height:54px;min-height:54px}
 body:has(.practice-layout) #keyboard .key:not(.wide):not(.space)>span:not(.key-shift-hint){font-size:32px;line-height:1.1}
 body:has(.practice-layout) #keyboard .key .key-shift-hint{font-size:22px;line-height:1}
 body:has(.practice-layout) #keyboard .key small{font-size:12px}
 body:has(.practice-layout) #keyboard .key.wide,body:has(.practice-layout) #keyboard .key.space{height:30px;min-height:30px}
 body:has(.practice-layout) #keyboard[lang=ur] .key:not(.wide):not(.space){height:62px;min-height:62px}
 body:has(.practice-layout) #keyboard-panel .keyboard-tools{margin-top:3px;margin-bottom:3px}
 body:has(.practice-layout) #keyboard-panel .finger{margin:2px 0}
 body:has(.practice-layout) #keyboard-panel .finger-legend{margin-top:2px}
}

.practice-controls .typing-actions{display:flex;flex-direction:column;align-items:stretch;margin-top:12px!important}.practice-controls .typing-actions button{width:100%}.practice-controls #input-feedback{font-size:11px;line-height:1.5;margin:8px 0}.practice-stage #keyboard-panel{margin-top:8px}