.pinyin-writing-stage{--pwa-ink:#4c3522;--pwa-stroke-width:12px;background:#201811;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.pinyin-writing-stage>img,.pwa-writing-ink{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.pwa-writing-ink{overflow:visible}.pwa-writing-guide-line,.pwa-writing-guide-divider{fill:none;vector-effect:non-scaling-stroke}.pwa-writing-guide-line{stroke:#527873;stroke-opacity:.64;stroke-width:2.25px;stroke-linecap:round;stroke-dasharray:none}.pwa-writing-guide-divider{stroke:#77928a;stroke-dasharray:5 8;stroke-opacity:.28;stroke-width:1.5px}.pwa-writing-model-stroke{fill:none;opacity:.17;stroke:var(--pwa-ink);stroke-width:calc(var(--pwa-stroke-width) * .72);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.pwa-writing-model-dot{fill:var(--pwa-ink);opacity:.14}.uniform-pinyin-page .pinyin-writing-stage>img{filter:saturate(.95)brightness(.86)}.pwa-writing-stroke{fill:none;opacity:0;stroke:var(--pwa-ink);stroke-width:var(--pwa-stroke-width);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--pwa-draw-length,1);stroke-dashoffset:var(--pwa-draw-length,1);vector-effect:non-scaling-stroke}.pwa-writing-dot{fill:var(--pwa-ink);opacity:0;transform-box:fill-box;transform-origin:50%;transform:scale(0)}.pinyin-writing-stage[data-writing-ready=true] .pwa-writing-stroke{animation-name:pwa-draw-stroke;animation-delay:var(--pwa-draw-delay);animation-duration:var(--pwa-draw-duration);animation-timing-function:linear;animation-fill-mode:both}.pinyin-writing-stage[data-writing-ready=true] .pwa-writing-dot{animation-name:pwa-draw-dot;animation-delay:var(--pwa-draw-delay);animation-duration:var(--pwa-draw-duration);animation-timing-function:ease-out;animation-fill-mode:both}.pinyin-writing-stage[data-writing-mode=frame] .pwa-writing-pass,.pinyin-writing-stage[data-writing-mode=frame] .pwa-writing-stroke,.pinyin-writing-stage[data-writing-mode=frame] .pwa-writing-dot{animation:none!important}.pinyin-writing-stage[data-writing-ready=true][data-writing-passes="2"] .pwa-writing-pass--first{animation-name:pwa-clear-first-pass;animation-delay:var(--pwa-clear-delay);animation-duration:1ms;animation-timing-function:step-end;animation-fill-mode:both}.pinyin-writing-stage.is-paused .pwa-writing-pass,.pinyin-writing-stage.is-paused .pwa-writing-stroke,.pinyin-writing-stage.is-paused .pwa-writing-dot{animation-play-state:paused}.pinyin-writing-stage.is-playing .pwa-writing-pass,.pinyin-writing-stage.is-playing .pwa-writing-stroke,.pinyin-writing-stage.is-playing .pwa-writing-dot{animation-play-state:running}.pinyin-writing-stage[data-writing-clock=audio] .pwa-writing-stroke,.pinyin-writing-stage[data-writing-clock=audio] .pwa-writing-dot{animation-delay:calc(var(--pwa-draw-delay) - var(--pwa-audio-elapsed));animation-play-state:paused}.pinyin-writing-stage[data-writing-clock=audio][data-writing-passes="2"] .pwa-writing-pass--first{animation-delay:calc(var(--pwa-clear-delay) - var(--pwa-audio-elapsed));animation-play-state:paused}@keyframes pwa-draw-stroke{0%{opacity:0;stroke-dashoffset:var(--pwa-draw-length,1)}.01%{opacity:1;stroke-dashoffset:var(--pwa-draw-length,1)}to{opacity:1;stroke-dashoffset:0}}@keyframes pwa-draw-dot{0%{opacity:0;transform:scale(0)}.01%{opacity:1;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes pwa-clear-first-pass{0%{opacity:1}to{opacity:0}}.pinyin-writing-stage.is-loop-clearing .pwa-writing-pass--first,.pinyin-writing-stage.is-loop-clearing .pwa-writing-pass--second{opacity:0;transition:opacity .35s}.reduce-motion .pinyin-writing-stage.is-loop-clearing .pwa-writing-pass--first,.reduce-motion .pinyin-writing-stage.is-loop-clearing .pwa-writing-pass--second{opacity:1;transition:none}.reduce-motion .pinyin-writing-stage[data-writing-passes="2"] .pwa-writing-pass--first{display:none}.reduce-motion .pwa-writing-pass--second,.reduce-motion .pwa-writing-stroke,.reduce-motion .pwa-writing-dot{animation:none!important}.reduce-motion .pwa-writing-stroke{opacity:1;stroke-dashoffset:0}.reduce-motion .pwa-writing-dot{opacity:1;transform:scale(1)}@media (prefers-reduced-motion:reduce){.pinyin-writing-stage[data-writing-passes="2"] .pwa-writing-pass--first{display:none}.pwa-writing-pass--second,.pwa-writing-stroke,.pwa-writing-dot{animation:none!important}.pwa-writing-stroke{opacity:1;stroke-dashoffset:0}.pwa-writing-dot{opacity:1;transform:scale(1)}.pinyin-writing-stage.is-loop-clearing .pwa-writing-pass--first,.pinyin-writing-stage.is-loop-clearing .pwa-writing-pass--second{opacity:1;transition:none}}.bpmf-page{--pwa-ink:#4c3522}.bpmf-page .opening-art{filter:saturate(.96)brightness(.82)}.bpmf-page .opening-vignette{background:linear-gradient(#0000 55%,#0d0910e0),radial-gradient(circle at 50% 40%,#0000 0 43%,#0d09103d 92%)}.bpmf-page .cinema-subtitles p{max-width:1120px;font-size:clamp(22px,2.65vw,38px)}.bpmf-picture{opacity:1;transition:opacity .18s linear;animation:none!important}.bpmf-focus-picture{--bpmf-focus-x:50%;position:absolute;inset:0}.bpmf-focus-picture.is-b{--bpmf-focus-x:31.6%}.bpmf-focus-picture.is-p{--bpmf-focus-x:43.5%}.bpmf-focus-picture.is-m{--bpmf-focus-x:55.6%}.bpmf-focus-picture.is-f{--bpmf-focus-x:68.4%}.bpmf-letter-focus{z-index:1;top:56.8%;left:var(--bpmf-focus-x);opacity:0;background:#a53f2d;border-radius:999px;width:clamp(42px,5.8vw,92px);height:clamp(3px,.42vw,7px);transition:left .26s cubic-bezier(.22,1,.36,1),opacity .18s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 7px #ab3e2b94,0 0 18px #ab3e2b47}.bpmf-focus-picture[data-focus]:not([data-focus=all]) .bpmf-letter-focus{opacity:.98}.bpmf-page .pinyin-writing-stage>img{filter:saturate(.96)brightness(.82)}@media (prefers-reduced-motion:reduce){.bpmf-letter-focus{transition:none}}.dtnl-page{--pwa-ink:#4c3522}.dtnl-page .opening-art{filter:saturate(.96)brightness(.82)}.dtnl-page .opening-vignette{background:linear-gradient(#0000 55%,#0d0910e0),radial-gradient(circle at 50% 40%,#0000 0 43%,#0d09103d 92%)}.dtnl-page .cinema-subtitles p{max-width:1120px;font-size:clamp(22px,2.65vw,38px)}.dtnl-picture{opacity:1;transition:opacity .18s linear;animation:none!important}.dtnl-focus-picture{--dtnl-focus-x:50%;position:absolute;inset:0}.dtnl-focus-picture.is-d,.dtnl-focus-picture.is-dt{--dtnl-focus-x:33.5%}.dtnl-focus-picture.is-t{--dtnl-focus-x:44.6%}.dtnl-focus-picture.is-n{--dtnl-focus-x:55.6%}.dtnl-focus-picture.is-l{--dtnl-focus-x:66.7%}.dtnl-letter-focus{z-index:1;top:54.2%;left:var(--dtnl-focus-x);opacity:0;background:#a53f2d;border-radius:999px;width:clamp(42px,5.8vw,92px);height:clamp(3px,.42vw,7px);transition:left .26s cubic-bezier(.22,1,.36,1),opacity .18s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 7px #ab3e2b94,0 0 18px #ab3e2b47}.dtnl-focus-picture[data-focus]:not([data-focus=all])>.dtnl-letter-focus:not(.dtnl-letter-focus--pair){opacity:.98}.dtnl-letter-focus--pair{left:44.6%}.dtnl-focus-picture.is-dt .dtnl-letter-focus--pair{opacity:.98}.dtnl-page .pinyin-writing-stage>img{filter:saturate(.96)brightness(.82)}@media (prefers-reduced-motion:reduce){.dtnl-letter-focus{transition:none}}.gkh-page{--pwa-ink:#4c3522}.gkh-page .opening-art{filter:saturate(.96)brightness(.82)}.gkh-page .opening-vignette{background:linear-gradient(#0000 55%,#0d0910e0),radial-gradient(circle at 50% 40%,#0000 0 43%,#0d09103d 92%)}.gkh-page .cinema-subtitles p{max-width:1120px;font-size:clamp(22px,2.65vw,38px)}.gkh-picture{opacity:1;transition:opacity .18s linear;animation:none!important}.gkh-page .pinyin-writing-stage>img{filter:saturate(.96)brightness(.82)}.jqx-page{--pwa-ink:#4c3522}.jqx-page .opening-art{filter:saturate(.96)brightness(.82)}.jqx-page .opening-vignette{background:linear-gradient(#0000 55%,#0d0910e0),radial-gradient(circle at 50% 40%,#0000 0 43%,#0d09103d 92%)}.jqx-page .cinema-subtitles p{max-width:1120px;font-size:clamp(22px,2.65vw,38px)}.jqx-picture{opacity:1;transition:opacity .18s linear;animation:none!important}.jqx-page .pinyin-writing-stage>img{filter:saturate(.96)brightness(.82)}.sound-basics-writing-picture{opacity:1;animation:none!important}