.player-wrapper{display:grid;grid-template-rows:auto 48px auto;height:100%;max-height:100%;width:360px}.video-player{display:block;width:100%;height:100%;border-radius:12px}.video-player-container{display:block;border-radius:20px}.controls-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}label span{font-size:14px;color:var(--p12)}.subtitles-container{display:flex;flex-direction:column;background:var(--p2);border:solid 1px var(--p3);border-radius:8px;min-height:0;height:200px;overflow-y:auto}.subtitles-container div{padding:8px 12px}.subtitles-container .line.active{background:var(--p6)}.subtitles-container span.sub{color:var(--p16);font-size:16px}.subtitles-container span.clickable{cursor:pointer;text-decoration:underline;font-weight:500;color:var(--green-dark)}.checkbox{display:flex;align-items:center;gap:8px;cursor:pointer}.checkbox input{display:none}.checkbox .box{width:18px;height:18px;border:2px solid #2A6F0F;border-radius:4px;display:flex;align-items:center;justify-content:center}.checkbox:hover .box{border-color:var(--green-dark);background-color:#78d1556c}.checkbox .box:after{content:"";width:10px;height:10px;background:var(--green-dark);opacity:0;transition:.2s}.checkbox input:checked+.box:after{opacity:1}.controls-option{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}.controls-option select{background-color:var(--green-light);color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer}.controls-option select:hover{background-color:var(--green-dark)}.controls-option select:focus{outline:none}.trainer-wrapper{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%}.cta-prompt{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;width:100%;height:60px;margin:8px}.cta-prompt span{padding:12px 24px;background-color:var(--g4);border-radius:50px;font-size:12px;font-weight:600;color:var(--g16)}.phonicaPlayer-wrapper{display:flex;flex-direction:column;justify-content:center;width:100%;height:100px}.bottom{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:red}#phonicaPlayer{display:block;top:0;left:0;margin:0;padding:0;border:0px solid transparent;box-sizing:border-box;background-color:#fff}.progress-container{display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center}.syllables-progress-container{display:flex;flex-direction:row;gap:4px;justify-content:center;align-items:center}.pbar-bg{display:block;height:4px;background:var(--p4);border-radius:10px;overflow:hidden;visibility:hidden}.syllables-bar{width:100px}.lesson-bar{width:308px}.progressBar{width:0%;height:100%;background:var(--g8);visibility:hidden}.player-control-container{display:flex;justify-content:center;align-items:center;width:100%;padding:16px 0}.canvas-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}.clickable-word{padding:12px 16px;margin:2px;border:0;border-radius:8px;background-color:var(--p8);font-size:12px}.clickable-word:hover{background-color:var(--green-light);cursor:pointer;color:#fff}.phonica-control-button{display:flex;align-items:center;justify-content:center;border:0;height:40px;width:40px;padding:0;cursor:pointer;background-color:transparent}.phonica-control-button.play{color:var(--g8)}.phonica-control-button.play:hover{color:var(--g12)}.phonica-control-button.stop{color:var(--p4)}.phonica-control-button.stop:hover{color:var(--r8)}.cta-prompt.svelte-16tehz6{opacity:0;transform:translateY(6px)}.cta-prompt.animate.svelte-16tehz6{animation:svelte-16tehz6-ctaSequence 2.2s ease forwards}@keyframes svelte-16tehz6-ctaSequence{0%{opacity:0;transform:translateY(6px)}9%{opacity:1;transform:translateY(0)}32%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.overlay.svelte-199rn0s{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;z-index:999}.close.svelte-199rn0s{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50px;border:none;background:#15192224;display:flex;align-items:center;justify-content:center;color:#48474780;cursor:pointer}.icon.svelte-199rn0s{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round}.close.svelte-199rn0s:hover{background:#2f303280}.popup.svelte-199rn0s{display:flex;flex-direction:column;width:100%;max-width:900px;height:100%;max-height:600px;background:#fff;border-radius:12px;overflow:hidden;position:relative}.demo-skeleton-container.svelte-rcw10f{display:flex;flex-direction:column;gap:8px;justify-content:start;width:360px;height:100%}