/* learn.css — the guided path. */
.lhero{max-width:var(--max);margin:0 auto;padding:68px 28px 34px}
.lhero h1{font-size:clamp(2.6rem,5vw,4.4rem);letter-spacing:-.055em;line-height:1;margin:14px 0 16px;max-width:16ch}
.lhero>p{max-width:62ch;color:var(--muted);font-size:1.02rem}
.lprogress{display:flex;align-items:center;gap:12px;margin:24px 0 8px;max-width:420px}
.lbar{height:5px;background:rgba(14,22,38,.08);border-radius:5px;flex:1;overflow:hidden}
.lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--teal2));transition:width .4s}
.lprogress span{font-size:.76rem;color:var(--muted);white-space:nowrap}
.lwrap{max-width:var(--max);margin:0 auto;padding:20px 28px 80px;display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.lrail{position:sticky;top:82px;display:grid;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 1px 2px rgba(14,22,38,.04)}
.lrail a{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:9px 10px;border-radius:10px;color:var(--muted);font-size:.82rem}
.lrail a b{font-family:var(--display);font-size:.7rem;color:var(--coral);grid-row:span 2}
.lrail a i{font-style:normal;font-size:.66rem;color:var(--faint);grid-column:2}
.lrail a:hover{background:rgba(14,22,38,.04);color:var(--ink)}
.lrail a.on{background:var(--ink);color:var(--paper)}
.lrail a.on b{color:var(--coral2)} .lrail a.on i{color:rgba(247,245,240,.55)}
.lrail a.done b{color:var(--teal)}
.lcontent{display:grid;gap:18px;min-width:0}
.lmod{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 1px 2px rgba(14,22,38,.04)}
.lmod-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.lnum{font-family:var(--display);font-size:.72rem;font-weight:700;color:var(--teal);border:1px solid rgba(14,124,134,.28);background:rgba(14,124,134,.05);border-radius:8px;padding:4px 7px;flex:0 0 auto}
.lmod-head h2{font-size:1.5rem;margin-bottom:3px}
.lmod-head p{color:var(--muted);font-size:.86rem}
.ltime{margin-left:auto;font-size:.68rem;color:var(--faint);white-space:nowrap;padding-top:4px}
.lesson p{color:var(--ink2);font-size:.9rem;margin-bottom:10px;line-height:1.68}
.lesson code,.widget code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;background:var(--paper2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.formula-inline{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;color:var(--ink2);background:var(--paper2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin:12px 0;line-height:1.6}
.widget{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:18px;margin:18px 0}
.widget-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:12px;flex-wrap:wrap}
.widget-head b{font-family:var(--display);font-size:.9rem}
.widget-head span{font-size:.72rem;color:var(--muted)}
.wq{font-size:.86rem;font-weight:600;margin-bottom:8px}
.choices3{display:grid;gap:7px}
.choices3 button{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 12px;font-size:.84rem;color:var(--ink2);cursor:pointer}
.choices3 button:hover{border-color:var(--indigo)}
.choices3 button.correct{border-color:var(--teal);background:rgba(14,124,134,.06);color:var(--ink)}
.choices3 button.wrong{border-color:var(--coral);background:rgba(232,69,42,.05)}
.choices2{display:inline-flex;gap:4px;background:#EFEDE7;border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:12px}
.choices2 button{border:0;background:transparent;padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer}
.choices2 button.on{background:var(--ink);color:var(--paper)}
.feedback{font-size:.8rem;color:var(--ink2);margin-top:10px;min-height:1.3em}
.viz{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;position:relative}
.viz-wallet,.viz-spender{border:1px solid var(--line);border-radius:9px;padding:10px;font-size:.78rem;text-align:center;background:var(--paper2)}
.viz-arrow{font-size:1.2rem;color:var(--coral)}
.viz-token{position:absolute;right:12px;bottom:8px;font-size:.68rem;color:var(--teal);border:1px solid rgba(14,124,134,.3);border-radius:999px;padding:2px 8px;background:var(--card)}
.scamcards{display:grid;gap:8px}
.scamcard{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.scamcard p{font-size:.84rem;color:var(--ink2)}
.scam-actions{display:flex;gap:6px;margin-top:8px}
.scam-actions button{border:1px solid var(--line);background:var(--paper2);border-radius:7px;padding:4px 10px;font-size:.74rem;font-weight:600;cursor:pointer}
.scam-actions button:hover{border-color:var(--indigo)}
.scamcard.right{border-color:rgba(14,124,134,.4);background:rgba(14,124,134,.04)}
.scamcard.wrongpick{border-color:rgba(232,69,42,.4)}
.scamcard .why{font-size:.76rem;color:var(--muted);margin-top:8px;display:none}
.scamcard .why.show{display:block}
.lcalc{display:grid;gap:8px;margin-bottom:12px}
.lcalc label{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--ink2)}
.lcalc input[type=range]{flex:1;accent-color:var(--teal)}
.lcalc output{font-family:var(--display);font-weight:700;font-size:.8rem;min-width:20px;text-align:right}
.lscore{display:flex;align-items:baseline;gap:10px}
.lscore b{font-family:var(--display);font-size:2.4rem;line-height:1}
.lscore span{font-family:var(--display);font-weight:700;color:var(--teal);border:1px solid rgba(14,124,134,.3);border-radius:7px;padding:2px 7px}
.checkline{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;color:var(--ink2);padding:7px 0;border-bottom:1px solid var(--line);cursor:pointer}
.checkline:last-of-type{border-bottom:0}
.checkline input{accent-color:var(--teal);margin-top:3px;flex:0 0 auto}
.lmod-foot{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.lmark.done{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.lfinish{background:var(--ink);color:var(--paper);border-radius:20px;padding:30px}
.lfinish h2{font-size:1.9rem;margin:6px 0 8px}
.lfinish p{color:rgba(247,245,240,.68);font-size:.9rem;margin-bottom:16px;max-width:52ch}
.lfinish .eyebrow{color:var(--coral2)}
@media (max-width:1000px){
  .lwrap{grid-template-columns:1fr}
  .lrail{position:static;display:flex;overflow-x:auto;gap:4px;padding:8px}
  .lrail a{min-width:180px;grid-template-columns:24px 1fr}
  .lmod{padding:20px}
}
@media (max-width:700px){
  .lhero{padding:44px 18px 24px}
  .lwrap{padding:14px 18px 60px}
  .lmod-head{flex-wrap:wrap}
  .ltime{margin-left:0}
  .viz{grid-template-columns:1fr;gap:5px}
  .viz-arrow{transform:rotate(90deg);justify-self:center}
}