/* TA308 only affects grade 1-5 lesson screens. Other typing screens remain untouched. */
.ta308-screen{position:fixed;inset:0;z-index:2147481000;background:linear-gradient(145deg,#e7f6ff 0%,#eef3ff 56%,#fff6df 100%);overflow-y:auto;color:#173866;font-family:inherit}.ta308-screen *{box-sizing:border-box}.ta308-inner{max-width:1360px;margin:auto;padding:16px clamp(12px,2vw,30px) 28px;min-height:100dvh;display:flex;flex-direction:column;gap:12px}.ta308-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.ta308-back,.ta308-voice{border:1px solid #b7d1f8;background:white;color:#2254a6;text-decoration:none;padding:11px 15px;border-radius:15px;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}.ta308-title{font-weight:900;text-align:center;font-size:clamp(15px,2vw,23px);color:#274b92}.ta308-welcome{display:flex;align-items:center;gap:16px;background:linear-gradient(100deg,#b9eafa,#e7e2ff);padding:12px 22px;border-radius:22px;border:2px solid white;box-shadow:0 8px 26px #adc5e33d}.ta308-character{font-size:clamp(38px,5vw,64px)}.ta308-star{margin-left:auto;font-size:26px;white-space:nowrap}.ta308-welcome h1{font-size:clamp(22px,2.5vw,32px);color:#183b86;margin:0 0 4px;font-weight:900}.ta308-welcome p{font-size:14px;color:#4c6898;margin:0}.ta308-panel{padding:clamp(12px,1.5vw,22px);background:white;border-radius:24px;box-shadow:0 12px 40px #9baacb2b;border:2px solid #dceaff;flex:1}.ta308-tag{font-size:14px;font-weight:900;color:#4355a8;margin-bottom:10px}.ta308-panel .typing-console{width:100%;max-width:none;margin:0}.ta308-panel .typing-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ta308-panel .typing-stat{border-radius:15px;background:#edf7ff;border:1px solid #d7eaff;padding:10px;text-align:center}.ta308-panel .typing-stat strong{font-size:clamp(18px,2vw,27px)}.ta308-panel .typing-passage{min-height:95px;font-size:clamp(20px,2.2vw,34px);line-height:1.65;border:2px dashed #b3c9ed;border-radius:18px;padding:18px;background:#fbfdff;max-height:30vh;overflow-y:auto}.ta308-panel .typing-entry{font-size:clamp(18px,1.7vw,25px);line-height:1.6;border:2px solid #a4bef5;border-radius:16px;min-height:85px}.ta308-panel .ta20-focus-toolbar{background:#eff7ff;border-radius:14px}.ta308-panel .typing-virtual{max-height:170px;overflow:hidden}.ta308-footer{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:800;color:#617ba4}.ta308-language-note{padding:8px 12px;border-radius:10px;background:#fff7df}.ta308-done[hidden]{display:none!important}.ta308-done{position:fixed;inset:0;background:#10234e7a;display:flex;justify-content:center;align-items:center;z-index:2147481100}.ta308-done-card{text-align:center;background:#fff9e8;border-radius:25px;padding:28px 40px;box-shadow:0 20px 60px #0018}.ta308-done-card h2{font-size:26px;margin:12px 0 4px;color:#2b669d}.ta308-done-card p{color:#5c7595}.ta308-screen .typing-console:fullscreen{z-index:2147481001}.ta308-screen button:focus-visible,.ta308-screen a:focus-visible{outline:3px solid #255dda;outline-offset:3px}@media(max-width:750px){.ta308-top{flex-wrap:wrap}.ta308-title{order:-1;flex-basis:100%}.ta308-welcome{padding:10px 13px}.ta308-star{display:none}.ta308-inner{gap:10px}.ta308-panel .typing-head{grid-template-columns:repeat(2,minmax(0,1fr))}.ta308-panel .typing-passage{max-height:27vh;padding:12px}.ta308-footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.ta308-screen *{animation:none!important;transition:none!important}}