.learn{flex-direction:column;gap:1.5rem;display:flex}.learn-tabs{margin-bottom:0}.learn-head h1{margin:0 0 .35rem;font-size:clamp(2rem,4vw,2.9rem)}.learn-goal{max-width:62ch;margin:0 0 .75rem;font-size:1.08rem}.learn-goal span{color:var(--accent);font-weight:700}.learn-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:clamp(1rem,3vw,2.25rem);display:grid}.learn-board{width:100%;max-width:max(320px, calc((100dvh - var(--nav-h) - 3rem) * .86));justify-self:center}.learn-board .stage{padding:.75rem .4rem}.lesson-count{color:var(--ink-soft);font-size:var(--step--1);font-variant-numeric:tabular-nums;margin:0 0 .2rem;font-weight:600}.lesson-title{margin:0 0 .6rem;font-size:clamp(1.6rem,3vw,2.1rem)}.lesson-text{margin-bottom:1rem;font-size:1.04rem;line-height:1.65}.lesson-task{border-left:3px solid var(--gold);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;padding:.8rem 1rem;line-height:1.55;transition:background-color .2s,border-color .2s}.lesson-task.status-done{border-left-color:var(--ok);background:color-mix(in srgb, var(--ok) 12%, var(--surface))}.lesson-task.status-done strong{color:var(--ok)}.lesson-task.status-wrong{border-left-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface));animation:.3s ease-out nudge}.lesson-task.status-wrong strong{color:var(--accent)}@keyframes nudge{30%{transform:translate(-4px)}60%{transform:translate(3px)}}.lesson-hint{color:var(--ink-soft);font-size:var(--step--1);margin-top:.4rem;display:block}.lesson-actions{flex-wrap:wrap;align-items:center;gap:.5rem;margin:.9rem 0 1.4rem;display:flex}.lesson-finished{color:var(--ok);font-weight:600}.lesson-steps{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}.lesson-steps li{border-bottom:1px solid var(--line)}.lesson-steps button{width:100%;color:var(--ink-soft);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;gap:.7rem;padding:.5rem .35rem;display:flex}.lesson-steps button:hover{color:var(--ink);background:var(--surface)}.lesson-steps button.on{color:var(--ink);font-weight:700}.step-n{border:1.5px solid var(--line);font-variant-numeric:tabular-nums;border-radius:50%;flex-shrink:0;place-items:center;width:1.75rem;height:1.75rem;font-size:.8rem;font-weight:700;display:grid}.lesson-steps .on .step-n{border-color:var(--accent);color:var(--accent)}.lesson-steps .passed .step-n{background:var(--ok);border-color:var(--ok);color:#fff}.learn-ref{border-top:1px solid var(--line);grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);padding-top:1.5rem;display:grid}.learn-ref h2{margin-bottom:.75rem;font-size:1.5rem}.rule-list{margin:0;padding:0;list-style:none}.rule-list li{max-width:64ch;padding:0 0 .7rem 1.25rem;line-height:1.6;position:relative}.rule-list li:before{content:"";border:1.5px solid var(--accent);border-radius:50%;width:7px;height:7px;position:absolute;top:.62em;left:.15rem}.rule-list.tips li:before{background:var(--gold);border-color:var(--gold)}.learn-cta{background:var(--lacquer);color:var(--eggshell);border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--gold-soft);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;display:flex}.learn-cta h2{color:var(--gold);margin:0 0 .2rem;font-size:1.45rem}.learn-cta p{color:#efe6d2bf;margin:0}.learn-cta .btn:not(.btn-primary){color:var(--eggshell);border-color:var(--gold-soft);background:0 0}@media (width<=860px){.learn-grid,.learn-ref{grid-template-columns:minmax(0,1fr)}.learn-board{max-width:min(100%,560px);margin:0 auto}}.learn-more{flex-wrap:wrap;gap:.5rem 1.25rem;display:flex}.learn-more a{color:var(--accent)}