/* English interaction geometry only. Shell and UI controls come from Math. */
.jk-five { color:var(--main); --main_text:var(--main); }
.jk-five [hidden] { display:none !important; }
.jk-five .five-prompt:focus,.jk-five .five-finished h2:focus { outline:none; }
.jk-five .five-live { width:100%; display:flex; flex:1; flex-direction:column; }
.jk-five .five-board { width:100%; display:flex; flex-direction:column; align-items:center; gap:18px; }
.jk-five .five-target { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; min-width:0; text-align:center; font-size:64px; overflow-wrap:anywhere; }
.jk-five .five-target.name-target { font-size:38px; padding:16px 0; }
.jk-five .five-picture { display:block; width:100%; max-width:180px; height:160px; object-fit:contain; margin-inline:auto; }
.jk-five .five-target .five-picture { max-width:300px; height:260px; }
.jk-five .five-choices { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:100%; }
/* Preserve the approved inherited English glyph appearance. */
.jk-five .five-choice { flex:1 1 100px; max-width:250px; min-width:0; min-height:80px; font-family:inherit; font-weight:var(--main_boldest_weight); font-size:28px; line-height:normal; text-transform:none; white-space:normal; overflow-wrap:anywhere; }
.jk-five .five-choice:disabled { color:var(--main); opacity:1; transform:none; cursor:default; }
.jk-five .five-choice.is-correct,.jk-five .five-choice[data-matched] { border-color:var(--green); background:color-mix(in srgb,var(--green) 8%,var(--white)); }
.jk-five .five-choice.is-incorrect { border-style:dashed; border-color:var(--red); }
.jk-five .five-choice[aria-pressed="true"] { outline:3px solid var(--blue3); outline-offset:3px; }
.jk-five .five-choice[data-choice][aria-pressed="true"]:not(.is-correct) { border-color:var(--blue3); background:color-mix(in srgb,var(--blue3) 8%,var(--white)); }
.jk-five button:focus-visible,.jk-five input:focus-visible,.jk-five summary:focus-visible { outline:3px solid var(--blue3); outline-offset:4px; }
.jk-five .five-choice-wrap { flex:1 1 120px; max-width:270px; min-width:0; display:flex; align-items:center; gap:6px; }
.jk-five .five-choice-wrap .five-choice { flex:1; width:100%; }
.jk-five .five-choice-wrap:has(.five-picture) { flex-direction:column; }
.jk-five .five-choice-wrap:has(.five-picture) .five-choice { flex:auto; }
.jk-five .five-choice.long-text { font-size:22px; }
.jk-five .five-category-label { display:flex; flex-direction:column; align-items:center; gap:8px; }
.jk-five .five-category-label .five-picture { height:80px; }
.jk-five .five-pair-column { flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }
.jk-five .five-pair-column .five-choice-wrap { flex:auto; width:100%; max-width:none; }
.jk-five .five-pair-column button.five-choice { width:100%; max-width:none; }
.jk-five .five-tray { font-size:32px; max-width:100%; overflow-wrap:anywhere; letter-spacing:3px; text-align:center; }
.jk-five .five-audio-row { display:flex; align-items:center; flex:none; }
.jk-five .five-prompt { order:1; }
.jk-five.five-audio-first .trainer-prompt { flex-direction:column; }
.jk-five.five-audio-first .five-prompt { order:0; width:100%; display:grid; text-align:center; }
/* Reserve the authored question's wrapped height while the short cue is shown. */
.jk-five.five-audio-first .five-prompt::before { content:attr(data-question); visibility:hidden; grid-area:1 / 1; }
.jk-five.five-audio-first .five-prompt > span { grid-area:1 / 1; align-self:center; }
.jk-five.five-audio-first .five-audio-row { order:1; justify-content:center; width:160px; height:52px; }
.jk-five .five-listen.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:160px; min-height:48px; }
.jk-five .five-listen.btn svg { width:28px; height:23px; flex:none; }
.jk-five.five-awaiting-listen .five-choice:disabled { border-style:dashed; background:var(--secondary_background); cursor:not-allowed; }
.jk-five.five-awaiting-listen .five-hear-choice { visibility:hidden; }
.jk-five .five-listening-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.jk-five .trainer-speaker { min-width:44px; min-height:44px; }
.jk-five .five-audio-status,.jk-five .five-sound-warning { font-size:14px; color:var(--secondary); }
.jk-five .five-audio-status:empty,.jk-five .five-tray:empty,.jk-five .five-choices:empty { display:none; }
.jk-five .five-feedback { justify-content:center; padding-left:0; text-align:center; }
.jk-five .five-feedback.success { color:color-mix(in srgb,var(--main) 60%,var(--green)); }
.jk-five .five-feedback.error { color:color-mix(in srgb,var(--main) 60%,var(--red)); }
.jk-five .five-hear-feedback { align-self:center; }
.jk-five .trainer-actions { flex-wrap:wrap; }
.jk-five .trainer-actions:not(:has(button:not([hidden]))) { display:none; }
.jk-five .five-adult { width:100%; color:var(--main); font-size:14px; }
.jk-five summary { min-height:44px; display:list-item; cursor:pointer; padding:12px 0; }
.jk-five .five-adult p { margin:10px 0; }
.jk-five .five-placeholder { display:flex; align-items:center; justify-content:center; min-height:96px; padding:16px; font-size:18px; font-weight:normal; color:var(--main); }
.jk-five .five-name-entry form { display:flex; flex-direction:column; max-width:540px; margin:auto; gap:16px; }
.jk-five .five-name-entry label { font-size:24px; font-weight:var(--main_bolder_weight); }
.jk-five input { box-sizing:border-box; width:100%; min-height:56px; font-size:28px; background:var(--white); color:var(--main); border:var(--border); border-radius:8px; padding:12px; }
.jk-five .five-finished { display:flex; flex-direction:column; align-items:center; gap:24px; padding:32px 0; }
.jk-five .five-static section { border-bottom:var(--border); padding:24px 0; }
.jk-five .five-static h2 { font-size:22px; }
.jk-five .five-sound-controls { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; }
.jk-five .five-sound-take { max-width:100%; min-height:48px; background:var(--white); color:var(--main); border:var(--border); border-radius:8px; font-size:16px; }
.jk-five .five-letter-pair { display:flex; justify-content:center; align-items:baseline; gap:clamp(44px,8vw,100px); font-size:104px; line-height:1; font-weight:var(--main_bolder_weight); padding:28px 0; }
.jk-five[data-interaction="follow_letter"] .five-target { max-width:min(480px,max(280px,calc((100svh - 400px) * 1.06667))); min-height:0; padding:10px; }
.jk-five[data-interaction="follow_letter"] .five-progress { padding-top:16px; }
.jk-five[data-interaction="follow_letter"] .trainer-training { padding-top:16px; padding-bottom:16px; }
.jk-five[data-interaction="follow_letter"] .trainer-content { gap:10px; }
.jk-five[data-interaction="follow_letter"] .trainer-prompt { min-height:32px; }
.jk-five .five-exit-fullscreen { display:none; }
.training_fullscreen .jk-five .five-exit-fullscreen { display:flex; position:static; width:fit-content; align-self:flex-end; margin:8px; }
@media(max-width:520px) {
 .jk-five .five-choice { flex-basis:70px; font-size:26px; padding:12px 8px; }
 .jk-five .five-choice-wrap { flex-basis:90px; flex-direction:column; align-items:stretch; }
 .jk-five .five-choice-wrap .five-choice { flex:auto; }
 .jk-five .five-choice.long-text { font-size:20px; }
 .jk-five .five-choice .five-picture { height:110px; }
 .jk-five .five-target .five-picture { height:210px; }
 .jk-five .five-category-label .five-picture { height:64px; }
 .jk-five .five-target { font-size:52px; }
 .jk-five .five-target.name-target { font-size:32px; }
 .jk-five .five-choices { gap:10px; }
 .jk-five .five-letter-pair { font-size:88px; }
}
@media(prefers-reduced-motion:reduce) { .jk-five *, .jk-five *::before, .jk-five *::after { animation:none !important; transition:none !important; } }
.jk-trace { width:100%; }
.jk-trace .jk-trace-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; min-height:0; }
.jk-trace-canvas { display:block; width:100%; height:auto; aspect-ratio:32 / 30; touch-action:none; user-select:none; -webkit-user-select:none; cursor:crosshair; }
.jk-trace-base,.jk-trace-fill { fill:none; stroke-width:34; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.jk-trace-base { stroke:color-mix(in srgb,var(--main) 55%,var(--white)); }
.jk-trace-fill { stroke:var(--blue3); }
.jk-trace-base.jk-trace-dot { fill:color-mix(in srgb,var(--main) 55%,var(--white)); stroke:none; }
.jk-trace-fill.jk-trace-dot { fill:var(--blue3); stroke:none; }
.jk-trace-start { fill:var(--blue3); stroke:var(--white); stroke-width:4; pointer-events:none; }
.jk-trace-guidance { min-height:1.5em; margin:6px 0; font-size:16px; line-height:1.5; font-weight:normal; color:var(--main); }
.jk-trace-fallback { font-size:14px; text-align:left; font-weight:normal; color:var(--secondary); }
.jk-trace-fallback p { margin:8px 0; line-height:1.5; }
.jk-trace .jk-trace-advance { font-size:16px; min-height:48px; }
.jk-trace-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.jk-trace-tools .jk-trace-fallback { flex:1; min-width:140px; }
.jk-trace-tools .jk-trace-fallback[open] { flex-basis:100%; }
@media(max-width:480px) {
 .jk-five[data-interaction="follow_letter"] .five-target { padding:10px; }
 .jk-trace-canvas { min-width:0; }
}