/* Tutorial page in "learning" state: the lesson list moves into a narrow left column and the
   lesson player (tutorial-panel-v2.css, .tp.is-inline) takes the right side. */
#main .learn{--learn-purple:#7532d6;--learn-soft:color-mix(in srgb,var(--ink) 4%,var(--bg));--learn-purple-soft:color-mix(in srgb,#7532d6 10%,var(--bg));display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start;color:var(--ink)}
:root[data-theme=dark] #main .learn{--learn-purple:#b39cf7;--learn-soft:color-mix(in srgb,var(--ink) 7%,var(--bg));--learn-purple-soft:color-mix(in srgb,#b39cf7 16%,var(--bg))}
#main div.learn :is(p,ul,li){margin:0}
#main .learn .learn-list{position:sticky;top:0;max-height:calc(100dvh - var(--header-height) - 96px);overflow:auto;padding:0 4px 16px 0;scrollbar-width:thin}
#main .learn .learn-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 16px;padding:6px 12px 6px 8px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
#main .learn .learn-back:hover{background:var(--learn-soft);color:var(--ink)}
#main .learn .learn-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#main .learn .learn-group{margin:0 0 20px}
#main .learn .learn-group>p{margin:0 0 6px;padding:0 12px;font-size:13px;font-weight:600;color:var(--muted)}
#main .learn .learn-group ul{margin:0;padding:0;list-style:none}
#main .learn .learn-item{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:8px;min-height:46px;padding:8px 12px;border-radius:12px;font-size:15px;line-height:1.4;color:var(--ink);text-decoration:none;transition:background-color .15s}
#main .learn a.learn-item:hover{background:var(--learn-soft)}
#main .learn .learn-item>span:first-child{font-size:12px;color:var(--muted)}
#main .learn .learn-item svg{display:block;width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#main .learn .learn-item[aria-current=page]{background:var(--learn-purple-soft);color:var(--learn-purple);font-weight:600}
#main .learn .learn-item[aria-current=page]>span:first-child{color:var(--learn-purple)}
#main .learn .learn-item.is-coming{color:var(--muted)}
#main .learn .learn-item:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media(max-width:760px){
 #main .learn{grid-template-columns:1fr;gap:12px}
 #main .learn .learn-list{position:static;max-height:none;overflow:visible;padding:0}
 #main .learn .learn-group{display:none}
 #main .learn .learn-back{margin:0}
}