/* Scoped translation only: no changes to the native canvas, letters, or controls. */
#alphabetTranslation{position:absolute;inset:0;pointer-events:none;font-family:ui-rounded,"PingFang SC","Microsoft YaHei",sans-serif}
#alphabetTranslation [hidden]{display:none!important}
#alphabetTranslation #translationScene{position:absolute;z-index:10;left:50%;top:66%;width:50%;aspect-ratio:540/218;transform:translateX(-50%);pointer-events:none;contain:layout}
#alphabetTranslation .sticker{position:absolute;opacity:0;transform-origin:center}
#alphabetTranslation .sticker svg{width:100%;height:100%;display:block;overflow:hidden}
#alphabetTranslation .hands{left:0;top:29%;width:45%;height:63%;transform-origin:53% 58%}
#alphabetTranslation .heart{left:17%;top:0;width:11%;height:24%}
#alphabetTranslation .chinese{left:47%;top:0;width:50%;height:65%}
#alphabetTranslation .rays{left:9%;top:0;width:28%;height:32%;fill:none;stroke:#f3b535;stroke-width:11;stroke-linecap:round}
#alphabetTranslation .pos{left:48%;top:62%;width:49%;height:13%}
#alphabetTranslation .line{left:48%;top:77%;width:49%;height:5%;transform-origin:left center}
#alphabetTranslation .meaning{left:48%;top:85%;width:49%;height:14%}
#alphabetTranslation .beat-unit{width:100%;height:100%;transform-origin:50% 65%;will-change:transform}
#alphabetTranslation .chinese>svg{overflow:visible}
#alphabetTranslation #storyTranslation{position:absolute;z-index:25;left:50%;bottom:4.5%;transform:translateX(-50%);max-width:72%;width:max-content;pointer-events:none;background:#fff4decf;color:#634934;border:1px solid #fff9e9;border-radius:12px;padding:8px 20px;font-size:clamp(11px,2.1vw,20px);box-shadow:0 3px 9px #82644315;white-space:nowrap}
#alphabetTranslation #storyTranslation strong{color:#cb654d;margin-right:.8em;font-weight:800}
#alphabetTranslation #storyTranslation[data-settled="false"]{animation:alphabet-subtitle-in .32s ease-out both}
/* Native replay button remains bottom-center; the subtitle leaves room when it appears. */
#videoControls.is-finished ~ #alphabetTranslation #storyTranslation{bottom:calc(max(8px,env(safe-area-inset-bottom)) + clamp(54px,7vw,88px) + 10px)}
#alphabetTranslation .translation-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes alphabet-subtitle-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#alphabetTranslation #storyTranslation{animation:none!important}}

/* The pilot uses unique roots and clipped atlas layers; original FORGIVE is unchanged. */
.alphabet-pilot-translation{position:absolute;inset:0;pointer-events:none;font-family:ui-rounded,"PingFang SC","Microsoft YaHei",sans-serif}
.alphabet-pilot-translation [hidden]{display:none!important}
.pilot-scene{position:absolute;left:50%;transform:translateX(-50%);aspect-ratio:540/224;pointer-events:none;z-index:10}
.pilot-stage{position:absolute;width:540px;height:224px;transform-origin:0 0}
.pilot-icon{position:absolute;left:0;top:10px;width:240px;height:205px;transform-origin:50% 65%}
.pilot-word{position:absolute;inset:0;transform-origin:75% 55%}
.pilot-sprite{position:absolute;transform-origin:50% 65%}
.pilot-sprite svg{display:block;width:100%;height:100%;overflow:hidden}
.pilot-candidate-caption{position:absolute;left:247px;width:292px;text-align:center;white-space:nowrap;color:#624331;font-family:"STKaiti","Kaiti SC","KaiTi",serif;font-weight:700;letter-spacing:.035em;text-shadow:0 1px 0 #fff5e5;transform-origin:50% 50%}
.pilot-candidate-caption-0{top:148px;height:32px;line-height:32px}
.pilot-candidate-caption-1{left:284px;top:186px;width:214px;height:4px;border-radius:80% 70% 90% 60%;background:#efb948;box-shadow:0 1px 0 #dca93e;transform-origin:0 50%}
.pilot-candidate-caption-2{top:194px;height:30px;line-height:30px}
.pilot-subtitle{position:absolute;z-index:25;left:50%;bottom:4.5%;transform:translateX(-50%);max-width:72%;width:max-content;pointer-events:none;background:#fff4decf;color:#634934;border:1px solid #fff9e9;border-radius:12px;padding:8px 20px;font-size:clamp(11px,2.1vw,20px);box-shadow:0 3px 9px #82644315;white-space:nowrap}
.pilot-subtitle strong{color:var(--word-color);margin-right:.8em}
.pilot-subtitle[data-settled="false"]{animation:alphabet-subtitle-in .32s ease-out both}
/* At video end use the gap between previous and replay; do not lift text over
   the native English word/character simply to avoid the center replay button. */
#videoControls.is-finished ~ .alphabet-pilot-translation .pilot-subtitle{left:12%;bottom:3.5%;transform:none;max-width:32%;padding:6px 10px;font-size:clamp(10px,1.5vw,18px);white-space:normal}
.pilot-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.local-pilot-nav{position:fixed;top:5px;left:50%;transform:translateX(-50%);z-index:100;padding:3px 10px;border:1px solid #d9c5a6;border-radius:18px;background:#fff9eae8;color:#69503b;font:12px ui-rounded,"PingFang SC",sans-serif;white-space:nowrap}
.local-pilot-nav select{background:transparent;border:0;color:inherit;font:inherit;padding:2px 3px;max-width:180px}
@media(prefers-reduced-motion:reduce){.pilot-subtitle{animation:none!important}}