/* Beginner course */
.learn-outline{list-style:none;padding:0;margin:24px auto;max-width:var(--wrap);display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.learn-card{display:flex;gap:14px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;color:var(--ink);text-decoration:none}
.learn-card:hover{border-color:var(--berry)}
.learn-card small{display:block;color:var(--ink-soft)}
.learn-n{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--paper-2);font-weight:700;margin-right:10px}
.learn-card .learn-n{margin-right:0}
.learn-n.is-done{background:var(--sage);color:#fff}
.learn-progress{font-weight:700;color:var(--berry)}
.learn-need{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:6px 20px;margin:18px 0}
.learn-video{background:var(--blush);border-radius:16px;padding:12px 20px;margin:18px 0}
.learn-video p{margin:.4em 0}
.learn-steps{list-style:none;padding:0;counter-reset:none}
.learn-step{margin:0 0 22px}
.learn-step h3{display:flex;align-items:center;margin:0 0 6px}
.dg{margin:10px 0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px}
.dg svg{display:block;width:100%;height:auto;max-width:680px}
.dg-yarn{fill:none;stroke:var(--berry);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.dg-yarn2{fill:none;stroke:var(--mustard);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.dg-hook{fill:none;stroke:#7d8288;stroke-width:6;stroke-linecap:round}
.dg-num{fill:var(--ink)}
.dg-numt{fill:#fff;font:700 13px var(--sans);text-anchor:middle}
.dg-label{fill:var(--ink);font:400 14px var(--sans)}
.dg-mark{fill:var(--sage)}
.dg-pin{fill:var(--denim)}
.learn-mistakes dt{font-weight:700;margin-top:10px}
.learn-mistakes dd{margin:2px 0 0}
.learn-practice{background:var(--paper-2);border-radius:16px;padding:6px 20px 14px;margin:20px 0}
.learn-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0 12px}
