*{box-sizing:border-box}.learn-shell{max-width:1000px;margin:auto;padding:32px 18px 70px}.learn-heading{text-align:center;margin:12px 0 28px}.learn-heading>a{display:inline-block;color:#a80016;text-decoration:none;margin-bottom:18px}.learn-heading h1{font-size:clamp(2rem,6vw,3.2rem);margin:8px}.learn-panel,.practice-panel,.stroke-panel,.quiz-panel{background:#fff;border:1px solid #f0dce0;border-radius:22px;padding:22px;margin:18px 0;box-shadow:0 10px 28px #6d1a2510}.progress-row{display:flex;align-items:center;gap:14px;color:#6a2530;font-weight:700}.progress-track{height:9px;background:#f6e4e7;border-radius:20px;flex:1;overflow:hidden}.progress-track span{display:block;height:100%;width:2%;background:#d71930;transition:width .2s}.lesson-card{display:flex;align-items:center;justify-content:center;gap:clamp(20px,7vw,70px);padding:28px 8px}.lesson-glyph{font-size:clamp(6rem,24vw,11rem);line-height:1.2;color:#b80f27;min-width:1.2em;text-align:center}.lesson-meta h2{font-size:2rem;margin:0}.lesson-meta p{font-size:1.2rem;color:#6b5360}.lesson-controls,.practice-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.button{border:0;border-radius:30px;padding:12px 22px;font-weight:700;cursor:pointer}.button-primary{background:#c9142d;color:#fff}.button-secondary{background:#f8e9ec;color:#8b1024}.practice-panel h2,.stroke-panel h2,.quiz-panel h2{margin-top:0}.practice-panel canvas{width:100%;height:auto;display:block;background:repeating-linear-gradient(0deg,#fff,#fff 63px,#f4dfe3 64px);border:2px dashed #e8b9c2;border-radius:14px;touch-action:none}.feedback{padding:12px;background:#fff5f6;border-radius:10px}.stroke-demo{height:160px;display:grid;place-items:center;background:#fff7f8;border-radius:14px;margin:12px 0}.stroke-demo span{font-size:100px;color:#be142c}.stroke-demo.animate span{animation:trace 1.8s ease-in-out}@keyframes trace{0%{opacity:.08;filter:blur(5px);transform:scale(.9)}100%{opacity:1;filter:blur(0);transform:scale(1)}}.stroke-note{font-size:.9rem;color:#775d63}.quiz-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.quiz-area{background:#fff7f8;border-radius:14px;padding:18px;min-height:100px}.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quiz-options button{padding:14px;border:1px solid #e7cbd0;border-radius:12px;background:#fff;font-size:1.1rem}.quiz-options button:disabled{opacity:.7}.quiz-question{font-size:2rem;color:#b80f27}footer{text-align:center;padding:25px;background:#101b42;color:white}@media(max-width:600px){.learn-shell{padding:20px 12px 45px}.learn-panel,.practice-panel,.stroke-panel,.quiz-panel{padding:15px;border-radius:16px}.lesson-card{flex-direction:column;gap:4px;text-align:center;padding:12px}.lesson-glyph{font-size:8rem}.lesson-meta h2{font-size:1.6rem}.quiz-head{align-items:flex-start;flex-direction:column}.quiz-options{grid-template-columns:1fr 1fr}.button{padding:11px 16px}}.stroke-demo{min-height:210px;height:auto;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.stroke-order-svg{display:block;width:min(100%,220px);height:auto;max-height:220px;overflow:visible}.stroke-order-svg path{transition:opacity .2s ease}.stroke-count{font-size:.92rem;color:#6a2530;margin:4px 0}.stroke-loading,.stroke-fallback{font-size:3rem;color:#be142c}.stroke-demo .stroke-fallback{font-size:5rem}.practice-panel canvas{touch-action:none;max-width:100%;height:auto;aspect-ratio:600/260}.button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:600px){.stroke-demo{min-height:190px;padding:12px}.stroke-order-svg{width:min(100%,190px);max-height:190px}.practice-panel canvas{min-height:150px}}