@media screen and (min-width:760px) and (min-height:540px){
  body:has(#typing-area){overflow:hidden}
  body:has(#typing-area) .workspace{height:100dvh;overflow:hidden}
  body:has(#typing-area) .workspace>footer{display:none}
  body:has(#typing-area) #app{height:min(calc(100dvh - 74px),800px);min-height:0;max-width:1250px;padding:14px 18px;display:grid;grid-template-rows:auto 50px minmax(70px,1fr) 4px clamp(180px,30dvh,320px) 38px;gap:10px;overflow:hidden}
  body:has(#typing-area) #app>.page-head{min-width:0;margin:0}
  body:has(#typing-area) #app>.page-head h1{font-size:18px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body:has(#typing-area) #app>.page-head .eyebrow,body:has(#typing-area) #app>.page-head p,body:has(#typing-area) #app>.help,body:has(#typing-area) #app>.mobile-notice{display:none}
  body:has(#typing-area) .session-meta{margin:0;padding:6px 10px;gap:12px;align-items:center}
  body:has(#typing-area) .session-meta strong{font-size:19px}
  body:has(#typing-area) .session-meta>div{min-width:0}
  body:has(#typing-area) .typing-area{min-height:0;margin:0;padding:10px 14px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px}
  body:has(#typing-area) .typing-text{min-height:0;max-height:none;overflow:hidden;scroll-behavior:auto;scrollbar-width:none;font-size:21px;line-height:1.6}
  body:has(#typing-area) .typing-status{min-width:0;margin:0;font-size:10px;line-height:1.3}
  body:has(#typing-area) .typing-status span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body:has(#typing-area) .typing-status span:last-child{display:none}
  body:has(#typing-area) .typing-area .pause-overlay{padding:8px;gap:4px}
  body:has(#typing-area) .typing-area .pause-overlay h2{font-size:16px;line-height:1.3}
  body:has(#typing-area) .typing-area .pause-overlay p{display:none}
  body:has(#typing-area) .typing-area .pause-overlay .primary{font-size:13px;line-height:1.2;min-height:28px;padding:4px 12px}
  body:has(#typing-area) #session-progress .mini-progress{margin:0}
  body:has(#typing-area) #guidance{min-height:0;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(200px,1fr);gap:16px;align-items:center}
  body:has(#typing-area) #guidance:not(:has(.finger-guide)){grid-template-columns:1fr}
  body:has(#typing-area) .keyboard{width:100%;max-width:none;margin:0}
  body:has(#typing-area) .key-row{gap:3px;margin-bottom:3px}
  body:has(#typing-area) .key{height:clamp(32px,5dvh,52px);font-size:14px}
  body:has(#typing-area) .key.wide{font-size:10px}
  body:has(#typing-area) .finger-guide{min-width:0;flex-direction:column;gap:4px;margin:0;text-align:center}
  body:has(#typing-area) .hands{gap:6px}
  body:has(#typing-area) .hand-svg{width:clamp(90px,11dvh,130px);height:clamp(80px,10dvh,116px)}
  body:has(#typing-area) .finger-copy{max-width:100%}
  body:has(#typing-area) .finger-copy strong{font-size:13px;line-height:1.3;margin-bottom:5px}
  body:has(#typing-area) .finger-copy p{font-size:11px;line-height:1.4}
  body:has(#typing-area) .session-bottom{margin:0;align-items:center}
  body:has(#typing-area) .session-bottom .secondary{min-height:32px;padding:5px 12px}
  body:has(#typing-area) .sidebar{overflow:hidden;padding-top:14px}
  body:has(#typing-area) .sidebar .brand{padding-bottom:16px}
  body:has(#typing-area) .sidebar .nav-label{margin-bottom:6px}
  body:has(#typing-area) .sidebar nav{gap:2px}
  body:has(#typing-area) .sidebar .nav-item{padding-top:7px;padding-bottom:7px;line-height:1.3}
  body:has(#typing-area) .sidebar .sidebar-bottom{display:none}
  body:has(#typing-area) .sidebar .profile{margin-top:auto;padding-top:10px;padding-bottom:10px}
}
@media screen and (min-width:760px) and (max-width:1150px) and (min-height:540px){
  body:has(#typing-area) #app{padding-left:12px;padding-right:12px}
  body:has(#typing-area) .key .key-full{display:none}
  body:has(#typing-area) .key .key-short{display:block;font-size:10px}
}
@media screen and (min-width:760px) and (min-height:540px) and (max-height:639px){
  body:has(#typing-area) .topbar{height:50px}
  body:has(#typing-area) #app{height:calc(100dvh - 50px);padding:8px 12px;grid-template-rows:auto 42px minmax(60px,1fr) 4px 132px 34px;gap:4px}
  body:has(#typing-area) #app>.page-head h1{font-size:16px;line-height:1.2}
  body:has(#typing-area) .session-meta strong{font-size:17px}
  body:has(#typing-area) .key{height:24px}
  body:has(#typing-area) .key{font-size:11px}
  body:has(#typing-area) .key.wide{font-size:8px}
  body:has(#typing-area) .key-row{margin-bottom:2px}
  body:has(#typing-area) .hand-svg{width:60px;height:54px}
  body:has(#typing-area) .finger-copy p{font-size:8.5px}
  body:has(#typing-area) .finger-copy strong{font-size:11px}
  body:has(#typing-area) .sidebar .nav-item{padding-top:4px;padding-bottom:4px;line-height:1.2}
}