.bonus-page .hero-example{display:flex;justify-content:center;background:#f0ecff}
.bonus-page .hero-example img{width:min(100%,300px);height:auto;max-height:390px}
.bonus-page .practice-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px;align-items:start}
.bonus-page .practice-card{min-width:0;padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:24px;background:#fff}
.bonus-page .practice-card h3{font-size:clamp(24px,3vw,32px);line-height:1.2;margin-bottom:18px}
.bonus-page .practice-card img{display:block;width:100%;height:auto;border-radius:16px}
.bonus-page .practice-card p,.bonus-page .practice-card li{font-size:19px;line-height:1.55}
.bonus-page .practice-card ol{margin:22px 0 0;padding-left:24px}
.bonus-page .practice-card li+li{margin-top:12px}
.bonus-page .practice-card .caption{margin-top:12px}
.bonus-page .point-diagram{margin:28px 0;padding:clamp(12px,2vw,24px);border:1px solid var(--line);border-radius:24px;background:#fff}
.bonus-page .point-diagram img{display:block;width:100%;height:auto}
.bonus-page .point-diagram figcaption{margin-top:16px;font-size:18px;color:var(--muted);line-height:1.5}
.bonus-page .character-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:30px}
.bonus-page .character-card{min-width:0;margin:0;padding:18px 14px;border:1px solid var(--line);border-radius:22px;background:#f7f4ff}
.bonus-page .character-card img{display:block;width:100%;height:auto;aspect-ratio:280/340;object-fit:contain}
.bonus-page .character-card figcaption{font-size:18px;font-weight:850;line-height:1.3;margin-top:14px;overflow-wrap:anywhere}
.bonus-page .level{display:block;margin-bottom:12px;font-size:14px;font-weight:800;color:var(--muted)}
.bonus-page .music-note{padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--lilac);margin-top:28px}
.bonus-page .task-steps{display:grid;gap:14px;margin:30px 0 0;padding:0;list-style:none;counter-reset:task}
.bonus-page .task-steps li{counter-increment:task;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;padding:22px;border:1px solid #786795;border-radius:18px;background:#ffffff0a;font-size:21px;line-height:1.5}
.bonus-page .task-steps li:before{content:counter(task);display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--yellow);color:var(--deep);font-size:18px;font-weight:900}
.bonus-page .template-link{font-size:clamp(19px,2.5vw,25px);padding:20px 26px;text-align:center;justify-content:center;min-height:70px}
.bonus-page .checks{grid-auto-rows:auto}
.bonus-page .check-item{line-height:1.5;min-height:0}
.bonus-page .check-item input{margin-top:2px}
.bonus-page .progress{min-height:30px}
.bonus-page kbd{padding:2px 7px;border:1px solid #c8bae9;border-radius:6px;background:var(--lilac);font-family:inherit;font-weight:850}
@media(max-width:1000px){.bonus-page .character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.bonus-page .practice-pair{grid-template-columns:1fr}.bonus-page .point-diagram img{min-height:170px;object-fit:contain}}
@media(max-width:580px){.bonus-page .character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bonus-page .character-card{padding:14px 10px}.bonus-page .character-card figcaption{font-size:17px}.bonus-page .task-steps li{padding:18px;gap:12px;font-size:19px;grid-template-columns:32px minmax(0,1fr)}.bonus-page .task-steps li:before{width:30px;height:30px}.bonus-page .template-link{width:100%;padding:18px 14px}.bonus-page .point-diagram{margin-left:0;margin-right:0;padding:12px}.bonus-page .checks{grid-template-columns:1fr}.bonus-page .tool-key{flex-basis:100%}}