/* Supplied h.png: show x=22..686, y=48..480 only.
   The real shared navigation replaces the menu printed in the image.
   CSS framing also excludes the screenshot's outer border and white bottom. */
.pr-studio{
  aspect-ratio:664/432;
  width:100%;
  background-image:url('/assets/pronunciation-studio-enhanced.webp');
  background-size:106.626506% 122.931442%;
  background-position:center 61.855670%;
}
/* Match Listening's paper/room width; let the page scroll naturally. */
#pronunciation-main{max-width:1300px;margin:0 auto 28px}
#pronunciation-hub{box-shadow:0 15px 25px #080807}
.pr-keyboard{left:6.4%;top:61%;width:25%;height:13%}
.pr-speaker-left{left:24%;top:31.5%;width:7%;height:29%}
.pr-speaker-right{left:68.2%;top:31.5%;width:7.4%;height:29.5%}
.pr-turntable{left:80.3%;top:62.5%;width:17%;height:10%}
.pr-microphone{left:44.5%;top:38.5%;width:17%;height:21%}
.pr-lights i:nth-child(1){left:12%;top:36%}
.pr-lights i:nth-child(2){left:29%;top:27%}
.pr-lights i:nth-child(3){left:65%;top:43%}
.pr-lights i:nth-child(4){left:93%;top:48%}
.pr-lights i:nth-child(5){left:33%;top:67%}
.pr-lights i:nth-child(6){left:80%;top:80%}
.pr-lights i.pr-static-light{left:49.4%;top:27.3%}
/* Keep the same functional header spacing and colors as the other sections. */
.pronunciation-body .alpha-nav nav{gap:clamp(15px,2.5vw,39px)}
@media(max-width:780px){
  .pronunciation-body .alpha-nav{height:auto;min-height:74px;padding:8px 0;gap:12px;flex-wrap:wrap}
  .pronunciation-body .alpha-nav nav{display:flex;width:100%;gap:10px 16px;flex-wrap:wrap;padding:6px 0}
  .pr-studio{width:100%}
}