:root{font-family:Arial,sans-serif;color:#17324a;background:#0b2634}*{box-sizing:border-box}body{margin:0;overflow:hidden}.studio-player-shell{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#edf7fa}.studio-player-header{display:flex;align-items:center;gap:18px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));background:#fff;border-bottom:1px solid #d8e6ed;min-width:0}.studio-player-brand img{display:block;width:128px;max-height:38px;object-fit:contain}.studio-player-title{min-width:0;flex:1}.studio-player-title strong,.studio-player-title span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-player-title strong{font-size:18px}.studio-player-title span{font-size:12px;color:#718696;margin-top:2px}.studio-player-actions{display:flex;gap:7px}.studio-player-actions button,.studio-player-actions a,.studio-player-controls button{display:grid;place-items:center;width:42px;height:38px;border:1px solid #d4e2e8;background:#fff;border-radius:10px;color:#17324a;text-decoration:none;font-size:22px;cursor:pointer}.studio-player-stage{position:relative;min-height:0;overflow:hidden;background:#e9dfd1}.studio-player-board{position:absolute;left:1.4%;top:3%;bottom:4%;width:87.5%;border:13px solid #8b5d36;border-radius:12px;background:#153f35;box-shadow:inset 0 0 35px rgba(0,0,0,.26)}.theme-dark .studio-player-board{background:#15191e;border-color:#6b4a32}.theme-light .studio-player-board{background:#eef3f5}.theme-paper .studio-player-board{background:#f8f0dc}.studio-player-board-content{height:100%;padding:5% 6%;color:#f7f8f2;display:flex;flex-direction:column;justify-content:center;gap:3%;font-family:"Trebuchet MS",Arial,sans-serif;overflow:hidden}.theme-light .studio-player-board-content,.theme-paper .studio-player-board-content{color:#172033}.studio-player-board-content h1{font-size:clamp(28px,4vw,74px);line-height:1.06;margin:0}.studio-player-board-content p{font-size:clamp(18px,2.15vw,38px);line-height:1.38;white-space:pre-line;margin:0}.studio-player-board-content .term{font-size:clamp(22px,2.7vw,46px);font-weight:800;padding:14px 22px;border:2px solid;border-radius:18px;align-self:flex-start}.studio-player-board-content .grammar{font-size:clamp(18px,2vw,34px);padding:16px 18px;background:rgba(255,255,255,.08);border-left:6px solid #f5d86e;white-space:pre-line}.theme-light .studio-player-board-content .grammar,.theme-paper .studio-player-board-content .grammar{background:rgba(0,0,0,.05)}.studio-player-board-content ul{font-size:clamp(18px,2vw,34px);line-height:1.45;margin:0}.studio-player-board-content .note{font-size:clamp(14px,1.4vw,24px);font-style:italic;opacity:.78}.studio-player-teacher{position:absolute;right:-.2%;bottom:0;width:13.8%;height:95%;pointer-events:none}.studio-player-teacher img{width:100%;height:100%;object-fit:contain;object-position:bottom}.studio-player-mouth{position:absolute;left:50%;top:27%;width:5.5%;aspect-ratio:1.7/1;transform:translate(-50%,-50%);border-radius:50%;background:#7d333a;transition:height .05s,transform .05s}.mouth-closed{height:2px;background:#9b5260}.mouth-mid{height:1.5%}.mouth-open{height:2.6%}.mouth-wide{height:1.8%;transform:translate(-50%,-50%) scaleX(1.3)}.anim-fade{animation:fadeIn .45s both}.anim-slide-up{animation:slideUp .45s both}.anim-typewriter{animation:fadeIn .25s both}.anim-none{animation:none}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}.studio-player-controls{display:grid;grid-template-columns:auto auto auto minmax(80px,1fr) auto auto;align-items:center;gap:10px;background:#fff;padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border-top:1px solid #d8e6ed}.studio-player-controls .play{background:linear-gradient(135deg,#078b83,#129bc3);color:#fff;border:0}.studio-player-controls input{width:100%;accent-color:#078b83}.studio-player-controls span{font-size:12px;color:#687f8f;white-space:nowrap}@media(max-width:760px){.studio-player-header{gap:10px}.studio-player-brand img{width:92px}.studio-player-title span{display:none}.studio-player-board{width:79%;border-width:7px}.studio-player-teacher{width:22%;height:88%}.studio-player-controls{grid-template-columns:auto auto 1fr auto}.studio-player-controls #playerCounter,.studio-player-controls #playerNext{display:none}.studio-player-board-content{padding:6%}.studio-player-board-content h1{font-size:clamp(22px,7vw,42px)}.studio-player-board-content p,.studio-player-board-content ul{font-size:clamp(15px,4.2vw,25px)}}@media(max-width:520px){.studio-player-title strong{font-size:14px}.studio-player-actions button{display:none}.studio-player-actions a{width:38px}.studio-player-controls{gap:6px}.studio-player-controls button{width:38px}.studio-player-controls #playerTime{font-size:10px}.studio-player-board{left:2%;top:2%;bottom:3%;width:77%}}
/* v002: professional teacher artwork and independently animated facial layers */
.studio-player-teacher{right:-.5%;bottom:0;width:19%;height:auto}
.studio-player-character-art{position:relative;width:100%}
.studio-player-teacher img{display:block;width:100%;height:auto;object-fit:initial}
.studio-player-eyelid{position:absolute;z-index:3;top:11.15%;width:6.8%;height:2.1%;border-radius:50%;background:#e7a982;border-bottom:1px solid #70442f;opacity:0;transform:scaleY(.1)}
.studio-player-eyelid.left{left:40.2%}.studio-player-eyelid.right{left:53.3%}
.studio-player-character-art.is-blinking .studio-player-eyelid{opacity:1;transform:scaleY(1)}
.studio-player-mouth{top:15.7%;width:5.3%}
@media(max-width:760px){.studio-player-board{width:68%}.studio-player-teacher{width:34%;height:auto}}
@media(max-width:520px){.studio-player-board{width:65%}.studio-player-teacher{width:37%}}
/* v008: the supplied full-body actor stays fixed; only mouth and eyelids animate. */
.studio-player-teacher{right:-.5%;bottom:0;width:auto;height:94%;aspect-ratio:464/1536}
.studio-player-character-body{display:block!important;width:100%!important;height:auto!important;object-fit:initial!important}
@media(max-width:760px){.studio-player-board{width:72%}.studio-player-teacher{width:auto;height:91%}}
@media(max-width:520px){.studio-player-board{width:71%}.studio-player-teacher{width:auto;height:89%}}
.layered-character::before,.layered-character::after{content:none!important}
.layered-character .studio-player-character-body{-webkit-mask-image:none!important;mask-image:none!important}
.layered-character .studio-player-character-head{display:none!important}
.layered-character .studio-player-mouth{display:none!important}
.studio-player-face-patch{position:absolute!important;z-index:4;left:21%!important;top:4.05%!important;width:50%!important;height:auto!important;object-fit:initial!important;pointer-events:none;opacity:0;transform:translateZ(0)}
.studio-player-mouth-patch{-webkit-mask-image:radial-gradient(ellipse 29% 11% at 50% 76%,#000 22%,rgba(0,0,0,.96) 43%,rgba(0,0,0,.55) 62%,transparent 82%);mask-image:radial-gradient(ellipse 29% 11% at 50% 76%,#000 22%,rgba(0,0,0,.96) 43%,rgba(0,0,0,.55) 62%,transparent 82%);transition:opacity .035s linear}
.studio-player-mouth-patch.is-visible{opacity:1}
.studio-player-blink-patch{z-index:5;-webkit-mask-image:radial-gradient(ellipse 39% 15% at 50% 54%,#000 35%,rgba(0,0,0,.92) 58%,rgba(0,0,0,.42) 73%,transparent 88%);mask-image:radial-gradient(ellipse 39% 15% at 50% 54%,#000 35%,rgba(0,0,0,.92) 58%,rgba(0,0,0,.42) 73%,transparent 88%)}
.layered-character.is-blinking .studio-player-blink-patch{animation:studioPatchBlink .18s ease-in-out both}
@keyframes studioPatchBlink{0%,100%{opacity:0}42%,58%{opacity:1}}

/* v011: phoneme timeline animation; only transparent mouth/eyelid assets move. */
.studio-player-character-art{position:relative;width:100%;height:auto}
.studio-player-viseme{position:absolute;z-index:4;left:46%;top:15.55%;width:15.4%;aspect-ratio:1/1;transform:translate(-50%,-50%);background-image:url('/assets/studio/img/teacher-visemes-v1.png');background-repeat:no-repeat;background-size:500% 200%;pointer-events:none;opacity:1}
.studio-player-viseme.viseme-x{opacity:1;background-position:0 0}
.studio-player-viseme.viseme-a{background-position:0 0}
.studio-player-viseme.viseme-b{background-position:25% 0}
.studio-player-viseme.viseme-c{background-position:0 100%}
.studio-player-viseme.viseme-d{background-position:100% 0}
.studio-player-viseme.viseme-e{background-position:75% 100%}
.studio-player-viseme.viseme-f{background-position:75% 0}
.studio-player-viseme.viseme-g{background-position:25% 100%}
.studio-player-viseme.viseme-h{background-position:0 100%}
.studio-player-character-art .studio-player-blink{position:absolute;z-index:5;left:12.5%;top:5.85%;display:block;width:65%;height:auto;object-fit:initial;pointer-events:none;opacity:0}
.studio-player-character-art.is-blinking .studio-player-blink{animation:studioNaturalBlink .19s ease-in-out both}
@keyframes studioNaturalBlink{0%,100%{opacity:0}38%,62%{opacity:1}}
.studio-player-viseme.viseme-a,.studio-player-viseme.viseme-x{transform:translate(-53.7%,-62.3%) scaleY(var(--mouth-opening,1))}
.studio-player-viseme.viseme-b{transform:translate(-52.5%,-62.8%) scaleY(var(--mouth-opening,1))}
.studio-player-viseme.viseme-c{transform:translate(-54%,-47.5%) scaleY(var(--mouth-opening,1))}
.studio-player-viseme.viseme-d{transform:translate(-49.8%,-61.5%) scaleY(var(--mouth-opening,1))}
.studio-player-viseme.viseme-e{transform:translate(-51.5%,-47.8%) scaleY(var(--mouth-opening,1))}
.studio-player-viseme.viseme-f{transform:translate(-51.5%,-61.8%) scaleY(var(--mouth-opening,1))}
.studio-player-viseme.viseme-g{transform:translate(-53%,-45%) scaleY(var(--mouth-opening,1))}
.studio-player-viseme.viseme-h{transform:translate(-54%,-47.5%) scaleY(var(--mouth-opening,1))}
.studio-player-character-art:not(.default-character) .studio-player-blink{display:none}
.studio-player-teacher{max-width:27%;display:flex;align-items:flex-end;aspect-ratio:1/3}
/* Scale around the registered centre of each sprite, never around the head. */
.studio-player-viseme.viseme-a,.studio-player-viseme.viseme-x{transform-origin:53.7% 62.3%}
.studio-player-viseme.viseme-b{transform-origin:52.5% 62.8%}
.studio-player-viseme.viseme-c,.studio-player-viseme.viseme-h{transform-origin:54% 47.5%}
.studio-player-viseme.viseme-d{transform-origin:49.8% 61.5%}
.studio-player-viseme.viseme-e{transform-origin:51.5% 47.8%}
.studio-player-viseme.viseme-f{transform-origin:51.5% 61.8%}
.studio-player-viseme.viseme-g{transform-origin:53% 45%}
.studio-player-language{display:flex;justify-content:flex-end;gap:4px;margin:0;flex-shrink:0}.studio-player-language a{padding:6px 10px;border-radius:8px;text-decoration:none;color:#738797;font:600 12px Arial,sans-serif}.studio-player-language .active{background:#dff5f8;color:#078397}