/* BrainPremium BETA — Learn window (learn.css 1.1.0, learn.js 1.1.0): the ordered lesson list with ticks and a progress bar on the left,
   the lesson with its animated figure on the right; one column on a phone (list, then the lesson with a back button). */
.learn{display:grid;grid-template-columns:272px minmax(0,1fr);gap:0;min-height:100%;width:100%}
.learn-list{position:sticky;top:0;align-self:start;max-height:100%;overflow:auto;scrollbar-width:thin;border-right:1px solid var(--hair);padding:14px 10px 24px 14px}
.learn-prog{padding:4px 6px 12px}
.learn-prog .lp-t{font-size:12px;color:var(--muted);letter-spacing:.04em}
.learn-prog .lp-t b{color:var(--text);font-size:15px;font-weight:600;margin-right:4px}
.learn-prog .lp-bar{height:4px;border-radius:2px;background:var(--hair-2);margin-top:8px;overflow:hidden}
.learn-prog .lp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--up));border-radius:2px;transition:width .4s}
.learn-list ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.learn-group{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:12px 8px 4px}
.learn-item button{display:grid;grid-template-columns:22px 1fr 18px;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 8px;border-radius:9px;color:var(--text-2);font-size:12.5px;line-height:1.25}
.learn-item button:hover{background:var(--lift);color:var(--text)}
.learn-item.cur button{background:rgba(61,220,239,.1);color:var(--text)}
.learn-item .num{width:22px;height:22px;border-radius:50%;border:1px solid var(--hair-2);display:grid;place-items:center;font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.learn-item.done .num{border-color:var(--up);color:var(--up)}
.learn-item .tick{color:var(--up);font-weight:700;text-align:center}
.learn-item.done .t{color:var(--muted)}
.learn-body{padding:22px 32px 120px;max-width:760px}
.learn-body .eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.learn-body h2{margin:0 0 14px;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.learn-body h3{margin:18px 0 6px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.learn-body p{margin:0;font-size:14px;line-height:1.55;color:var(--text-2);max-width:66ch}
.learn-body p.learn-not{color:var(--text-2);border-left:2px solid var(--warn);padding-left:12px}
.learn-note{font-size:12.5px;color:var(--muted);margin-top:10px}
.learn-intro .btn{margin-top:18px}
.learn-figwrap{margin:4px 0 6px;max-width:640px}
.learn-figbox{border:1px solid var(--hair);border-radius:12px;background:var(--ground);padding:8px}
.learn-fig{display:block;width:100%;height:auto;font-family:var(--mono)}
.learn-fig .st{opacity:0;animation:learnIn .45s ease-out forwards}
.learn-fig .st[data-c]{animation:learnCandle .34s cubic-bezier(.2,.9,.3,1.25) forwards;transform-box:fill-box;transform-origin:50% 50%}
.learn-fig .draw{animation:learnDraw 1.1s ease-out forwards}
.learn-fig .pop{transform-box:fill-box;transform-origin:50% 50%;animation:learnPop .5s cubic-bezier(.2,.9,.3,1.35) both}
.learn-fig .grow{transform-box:fill-box;transform-origin:0 50%;animation:learnGrow .8s cubic-bezier(.2,.8,.3,1) both}
.learn-fig .ph{animation:learnSweep linear both}
.learn-replay{margin-top:8px;font-size:11.5px}
.learn-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--hair)}
.learn-back{display:none;margin-bottom:10px;color:var(--signal);font-size:12px}
.learn-end{font-size:12.5px;color:var(--muted)}
@keyframes learnIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes learnDraw{to{stroke-dashoffset:0}}
@keyframes learnCandle{from{opacity:0;transform:scaleY(.08)}to{opacity:1;transform:none}}
@keyframes learnPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes learnGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes learnSweep{from{opacity:.9;transform:translateX(0)}90%{opacity:.9}to{opacity:0;transform:translateX(var(--sw))}}
/* no prefers-reduced-motion rule here on purpose (1.1.0): the figure's motion IS the lesson (what appears after what), and
   the operator's Windows has animations switched off system-wide, which froze every figure to its last frame. Replay
   restarts it; nothing else on the page moves because of this. */
@media (max-width:799px){
  .learn{grid-template-columns:1fr}
  .learn-list{position:static;border-right:0;border-bottom:1px solid var(--hair);max-height:none}
  .learn[data-view="lesson"] .learn-list{display:none}
  .learn[data-view="list"] .learn-body:not(.learn-intro){display:none}
  .learn-body{padding:16px 16px 140px}
  .learn-back{display:inline-block}
  .learn-body h2{font-size:20px}
}