#focus-settings{display:none}
.practice-page #focus{color:var(--accent)}
body.focus header,body.focus .setup,body.focus .details,body.focus footer,body.focus .actions,body.focus .ruler,body.focus .line-numbers{display:none}
body.focus main{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:56px 88px}
body.focus main>section{width:100%}
body.focus .status{height:62px;justify-content:flex-start;align-items:center}
body.focus .count,body.focus .activity,body.focus .metrics>i,body.focus .wpm-metric,body.focus .accuracy-metric{display:none}
body.focus .metrics{gap:32px}
body.focus .metrics b{font-size:22px;color:var(--accent)}
body.focus.focus-show-wpm .wpm-metric,body.focus.focus-show-accuracy .accuracy-metric{display:flex}
body.focus:not(.focus-show-wpm):not(.focus-show-accuracy) .status{display:none}
body.focus .typing-area{height:clamp(138px,32svh,220px);padding-top:8px}
body.focus #input{left:0;width:100%}
body.focus #focus-settings{display:grid;place-items:center;position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:calc(50% - 22px);width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--bg);z-index:5}
#focus-settings img{width:20px;height:20px}
.focus-option{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);gap:20px;cursor:pointer}
.focus-option input{width:20px;height:20px;accent-color:var(--accent)}
.focus-dialog-actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px}
@media(max-width:600px){.practice-page .actions{flex-wrap:wrap;height:auto;padding-block:16px}.practice-page .actions #focus{flex-basis:100%;justify-content:center;min-height:44px;font-size:12px}}

.focus-help{color:var(--muted);font-size:11px;line-height:1.7;margin:0 0 20px;max-width:660px}
.focus-exit-hint{display:none}
body.focus .focus-help{display:none}
body.focus #focus-settings{display:flex;justify-content:center;gap:9px;left:50%;transform:translateX(-50%);width:auto;min-width:156px;padding:0 16px;border-radius:8px;bottom:max(38px,env(safe-area-inset-bottom));color:var(--text)}
body.focus .focus-exit-hint{display:block;position:fixed;bottom:8px;left:0;width:100%;text-align:center;margin:0;font-size:10px;color:var(--muted);pointer-events:none}
#caps-warning{color:var(--error);font-size:12px;line-height:1.5;margin:0 0 10px}#caps-warning[hidden]{display:none}