.drill-shell{max-width:1040px}.drill-set-nav{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 10px;margin-bottom:6px;scrollbar-width:thin}.drill-set-chip{flex:0 0 auto;text-decoration:none;color:#676274;background:#fff;border:1px solid #e7e2f1;border-radius:999px;padding:9px 14px;font-weight:900;font-size:14px}.drill-set-chip.is-current{background:var(--purple-soft);border-color:var(--purple);color:#5b49c8}.drill-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border:1px solid rgba(143,124,246,.15);border-radius:24px;padding:18px 22px;margin-bottom:12px;box-shadow:var(--shadow)}.drill-hero h1{margin:4px 0 6px;font-size:28px}.drill-hero p{margin:0;color:var(--muted);font-weight:700}.drill-progress{min-width:72px;text-align:center;background:var(--purple-soft);color:#5c4cc4;border-radius:999px;padding:9px 13px;font-weight:900}.drill-character-nav{display:grid;grid-template-columns:repeat(var(--drill-count,5),minmax(0,1fr));gap:8px;margin:0 0 16px}.drill-char-button{border:2px solid transparent;background:#fff;border-radius:16px;padding:13px 8px;font-size:26px;font-weight:900;cursor:pointer;box-shadow:0 5px 16px rgba(80,67,124,.06);position:relative}.drill-char-button.is-current{border-color:var(--purple);background:var(--purple-soft);color:#5b49c8}.drill-char-button.is-done::after{content:'★';position:absolute;right:7px;top:4px;font-size:11px;color:#e2b922}
.drill-flow{display:grid;gap:14px}.drill-step{background:#fff;border:1px solid rgba(143,124,246,.13);border-radius:24px;padding:18px 20px;box-shadow:var(--shadow)}.drill-step[hidden]{display:none}.step-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.step-heading>div{display:flex;align-items:center;gap:10px}.step-heading h2{margin:0;font-size:21px}.step-number{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;font-weight:900}.stroke-status{color:#685ac5;font-size:13px;font-weight:900}.stroke-order-stage{width:min(100%,330px);aspect-ratio:1;margin:0 auto 8px;background:#fbfaff;border:1px solid #ece7ff;border-radius:22px;padding:12px}.stroke-order-stage svg{width:100%;height:100%;display:block}.stroke-loading,.stroke-fallback,.stroke-empty{height:100%;display:grid;place-items:center;color:var(--muted);font-weight:800;text-align:center}.stroke-fallback strong{font-size:90px;display:block;color:#786acb}.replay-button{display:block;width:min(100%,260px);margin:0 auto}
.drill-current-character{font-size:38px;color:#5f55c9}.drill-writing-board{width:min(100%,520px)}.start-dot{color:#f08a7b}.drill-writing-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:9px;max-width:520px;margin:0 auto}.word-step{overflow:hidden}.word-lead{text-align:center;color:#5c4cc4;font-size:18px;font-weight:900;margin:2px 0 12px}.word-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.word-card{border:1px solid #e8e4f3;background:#fff;border-radius:18px;padding:15px 12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;cursor:pointer;text-align:left;box-shadow:0 5px 15px rgba(74,65,105,.05)}.word-emoji{font-size:34px}.word-text{font-size:20px;font-weight:900}.target-letter{color:#ef6f82;background:#fff0f4;border-radius:7px;padding:0 3px}.word-sound{opacity:.65}.word-hint{text-align:center;margin-top:13px;background:#fff8dc;border:1px solid #f3e2a0;border-radius:16px;padding:12px;color:#675d46;font-weight:800}.word-hint strong{color:#e56b80;font-size:20px}.word-empty{grid-column:1/-1;text-align:center;padding:22px;border-radius:18px;background:#faf8ff;color:#77718d;font-weight:800}.number-quantity-card{grid-column:1/-1;border:1px solid #e8e4f3;background:#fff;border-radius:20px;padding:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;cursor:pointer;min-height:100px}.count-group{display:flex;gap:6px;padding:8px 10px;background:#faf8ff;border-radius:13px}.count-dot{color:#8f7cf6;font-size:25px;line-height:1}.drill-bottom-nav{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin:16px auto 0;max-width:560px}.drill-bottom-nav button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:720px){.drill-hero{align-items:flex-start}.drill-hero h1{font-size:24px}.word-cards{grid-template-columns:1fr}.word-card{grid-template-columns:52px 1fr auto}.word-emoji{font-size:30px}.drill-step{padding:16px 13px;border-radius:20px}.step-heading h2{font-size:18px}.drill-set-chip{font-size:13px;padding:8px 12px}}
@media(max-width:480px){.drill-character-nav{gap:6px}.drill-char-button{font-size:22px;padding:11px 4px;border-radius:13px}.drill-hero{padding:15px}.drill-progress{min-width:62px;padding:8px 10px}.stroke-order-stage{width:min(100%,280px)}.drill-bottom-nav{grid-template-columns:1fr}.word-lead{font-size:16px}.number-quantity-card{gap:8px;padding:14px}.count-group{gap:4px;padding:7px}.count-dot{font-size:21px}}