/* Practice mode (public/site/practice-mode.js): one big card at a time */
body.practice-mode{background:#f3efff}
.pm-wrap{max-width:760px;min-height:72vh;margin:0 auto;padding:18px 16px 60px}
.pm-top{display:flex;align-items:center;gap:12px}
.pm-x{display:grid;place-items:center;width:40px;height:40px;border:2.5px solid #1b1340;border-radius:50%;background:#fff;color:#1b1340;font-weight:800;text-decoration:none}
.pm-bar{flex:1;height:16px;border:2.5px solid #1b1340;border-radius:10px;background:#fff;overflow:hidden}.pm-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#38d9a9,#6c4de6);transition:width .35s}
.pm-streak,.pm-xp{font:800 16px var(--cm-ui,system-ui);white-space:nowrap}
.pm-title{margin:12px 0 10px;font:600 14px var(--cm-ui,system-ui);color:#5b5277}
.pm-card{padding:26px 26px 20px;border:3px solid #1b1340;border-radius:24px;background:#fff;box-shadow:6px 6px 0 #1b1340;animation:pm-in .35s cubic-bezier(.34,1.56,.64,1)}
.pm-card h2{margin:4px 0 14px;font:700 clamp(21px,3.2vw,27px)/1.3 var(--cm-ui,system-ui);color:#1b1340}
.pm-eyebrow{margin:0;font:800 12px var(--cm-ui,system-ui);letter-spacing:.08em;text-transform:uppercase;color:#6c4de6}
.pm-text{margin:0 0 12px;font:500 18px/1.55 var(--cm-ui,system-ui)}
.pm-steps{margin:0 0 10px;padding-left:22px;font:500 18px/1.5 var(--cm-ui,system-ui)}.pm-steps li{margin:6px 0}
.pm-answer{display:inline-block;margin:4px 0 6px;padding:6px 12px;border:2px solid #1b1340;border-radius:12px;background:#ffd23f;font:800 18px var(--cm-ui,system-ui)}
.pm-code,.pm-out{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:#1b1340;color:#fff;font:500 15px/1.5 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-x:auto}.pm-out{background:#0f3d2e;color:#c9f7e6}
.pm-input{width:100%;max-width:340px;padding:12px 14px;border:3px solid #1b1340;border-radius:14px;font:700 22px var(--cm-ui,system-ui)}
.pm-input:focus{outline:3px solid #6c4de6;outline-offset:2px}
.pm-hint{margin:10px 0 0;padding:8px 12px;border-left:4px solid #ffd23f;background:#fffaf0;font-size:16px}
.pm-fb{margin-top:14px;padding:12px 14px;border:2.5px solid #1b1340;border-radius:14px;animation:pm-in .3s}.pm-fb.ok{background:#c9f7e6}.pm-fb.no{background:#ffe3ea}.pm-fb p{margin:4px 0 0}
.pm-choices{display:grid;gap:10px}
.pm-choice{padding:13px 16px;border:2.5px solid #1b1340;border-radius:14px;background:#f7f4ff;font:600 18px var(--cm-ui,system-ui);text-align:left;cursor:pointer}
.pm-choice:hover:not(:disabled){background:#fff3bf}.pm-choice.right{background:#c9f7e6;border-color:#1f9d6b}.pm-choice.wrong{background:#ffd0dc;border-color:#d6336c}
.pm-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
.pm-card.right{border-color:#1f9d6b}.pm-card.shake{animation:pm-shake .4s}
.pm-pop{animation:pm-in .3s}
.pm-end{text-align:center}.pm-end .pm-foot{justify-content:center}.pm-big{margin:0;font-size:64px}
@keyframes pm-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes pm-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){.pm-card,.pm-fb,.pm-pop{animation:none}.pm-bar i{transition:none}}
@media(max-width:560px){.pm-card{padding:20px 16px 16px}.pm-foot .btn{flex:1}}
/* the end of a lesson: challenge round, worksheet maker, more warm-ups */
.tc-challenge .tc-think{margin-top:16px;padding:16px 18px;border:3px dashed #6c4de6;border-radius:18px;background:#f7f4ff}.tc-think h3{margin:0 0 6px}
.tc-early{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tc-print-form{display:grid;gap:14px;padding:18px 20px;border:3px solid #1b1340;border-radius:20px;background:#fff;box-shadow:4px 4px 0 #1b1340}
.tc-print-form fieldset{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 16px;margin:0;padding:0;border:0}
.tc-print-form legend{margin-bottom:6px;font:800 13px var(--cm-ui,system-ui);letter-spacing:.06em;text-transform:uppercase;color:#6c4de6}
.tc-print-form label{display:flex;gap:8px;align-items:flex-start;font:500 16px var(--cm-ui,system-ui)}.tc-print-form input{width:18px;height:18px;margin-top:2px;accent-color:#6c4de6}
.tc-print-form .btn{justify-self:start}
.tc-more-warm{max-width:880px;margin:10px auto 0;text-align:right;font-weight:700}
.tc-small{font-size:14px;color:#5b5277}