/* Learn pages (web/learn_web.py), round 31: on the shared shell (site.css) and help.css's article sheet. A guide page is
   a sticky 'On this page' list on the left and the article on the right (display-font title, long-form type, tables and
   code on dark panels), related guides as cards, then a call-to-action band; /learn is the hero and the guide cards by category. */
:root { --lr-link: #6f9bff; --lr-soft: rgba(41,98,255,.10); }
@media (prefers-color-scheme: light) { :root { --lr-link: #1e53e5; --lr-soft: rgba(41,98,255,.06); } }
body { overflow-x: hidden; }
.learn { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; max-width: 1200px; margin: 0 auto; padding: 48px 40px 56px; }
.ltoc { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.ltoc .back { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-text); font-size: 14px; font-weight: 500; margin: 0 0 20px 14px; }
.ltoc .back::before { content: '\2190'; color: var(--sx-dim); }
.ltoc .back:hover { color: var(--lr-link); }
.ltoc b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sx-dim); margin: 0 0 8px 14px; font-weight: 600; }
.ltoc a:not(.back) { display: block; padding: 7px 14px; border-radius: 8px; color: var(--sx-body); font-size: 14px; line-height: 1.4; }
.ltoc a:not(.back):hover { color: var(--sx-text); background: var(--sx-ghost-hover); }
.learn article { max-width: 800px; min-width: 0; color: var(--sx-body); }
.crumb { font-size: 14px; color: var(--sx-dim); margin: 0 0 16px; }
.crumb a { color: var(--sx-body); }
.crumb a:hover { color: var(--sx-text); }
.learn h1 { font: 600 clamp(36px, 5vw, 56px)/1.08 var(--sx-display); letter-spacing: -.035em; margin: 0 0 18px; }
.lede { font-size: 19px; line-height: 1.6; color: var(--sx-body); margin: 0 0 36px; padding-bottom: 32px; border-bottom: 1px solid var(--sx-line); }
.learn h2 { font: 600 30px/1.2 var(--sx-display); letter-spacing: -.02em; margin: 48px 0 14px; }
.learn h3 { font: 600 20px/1.35 var(--sx-display); letter-spacing: -.01em; margin: 30px 0 8px; }
.learn p, .learn li { font-size: 16px; line-height: 1.75; }
.learn p { margin: 0 0 16px; }
.learn ul, .learn ol { padding-left: 24px; margin: 0 0 18px; }
.learn li { margin: 6px 0; }
.learn strong { color: var(--sx-text); font-weight: 600; }
.learn article a { color: var(--lr-link); }
.learn article a:hover { text-decoration: underline; }
.learn code { font: 14px/1.4 ui-monospace, Consolas, Menlo, monospace; color: var(--sx-text); background: var(--sx-card2); border: 1px solid var(--sx-line); border-radius: 6px; padding: 1px 6px; }
.learn pre { background: var(--sx-bg2); border: 1px solid var(--sx-line); border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 0 0 18px; }
.learn pre code { background: none; border: 0; padding: 0; font-size: 13.5px; }
.learn blockquote { margin: 20px 0; padding: 14px 20px; border: 1px solid var(--sx-line); border-left: 3px solid var(--sx-accent); background: var(--lr-soft); border-radius: 0 12px 12px 0; color: var(--sx-text); }
.tbl { overflow-x: auto; margin: 20px 0; border: 1px solid var(--sx-line); border-radius: 12px; }
.tbl table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tbl th, .tbl td { border-bottom: 1px solid var(--sx-line); padding: 12px 14px; text-align: left; vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { background: var(--sx-card); color: var(--sx-text); font-weight: 600; }
.tbl td:first-child { color: var(--sx-text); }
/* related guides */
.related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--sx-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.related h2 { grid-column: 1 / -1; font-size: 24px; margin: 0 0 8px; }
.learn .related a { display: block; padding: 20px 22px; border: 1px solid var(--sx-line); border-radius: 16px; background: linear-gradient(180deg, var(--sx-card2), var(--sx-card)); color: var(--sx-body); transition: border-color .15s; }
.learn .related a:hover { border-color: var(--sx-line2); text-decoration: none; }
.related b { display: block; color: var(--sx-text); font: 600 16px/1.35 var(--sx-display); margin-bottom: 6px; }
.related span { color: var(--sx-body); font-size: 14px; line-height: 1.5; display: block; }
/* the /learn index */
.lindex { max-width: 1360px; margin: 0 auto; padding: 0 0 40px; }
.lindex section { margin-top: 40px; }
.lindex h2 { padding: 0 40px; margin: 0 0 18px; font: 600 28px/1.2 var(--sx-display); letter-spacing: -.02em; }
/* call-to-action band */
.lcta { position: relative; max-width: 1280px; margin: 40px auto 24px; padding: 64px 24px; text-align: center; border: 1px solid var(--sx-line); border-radius: 24px; overflow: hidden;
  background: radial-gradient(700px 300px at 50% 0%, rgba(41,98,255,.30), rgba(120,60,255,.10) 45%, transparent 75%), var(--sx-card); }
.lcta h2 { margin: 0 0 12px; font: 600 clamp(28px, 4vw, 44px)/1.15 var(--sx-display); letter-spacing: -.03em; }
.lcta p { color: var(--sx-body); margin: 0 auto 28px; max-width: 620px; font-size: 17px; }
.lbtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (prefers-color-scheme: light) { .lcta { background: radial-gradient(700px 300px at 50% 0%, rgba(41,98,255,.14), rgba(120,60,255,.05) 45%, transparent 75%), var(--sx-bg2); } }
@media (max-width: 860px) {
  .learn { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 16px 40px; }
  .ltoc { position: static; margin-bottom: 20px; } .ltoc .back { margin-left: 0; } .ltoc b, .ltoc a:not(.back) { display: none; }
  .learn h2 { font-size: 24px; margin-top: 36px; }
  .lede { font-size: 17px; }
  .related { grid-template-columns: minmax(0, 1fr); }
  .lindex h2 { padding: 0 16px; font-size: 24px; }
  .lcta { margin: 24px 16px; padding: 44px 20px; border-radius: 20px; }
}
/* category pills under the /learn hero */
.lcats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1000px; margin: 0 auto 8px; padding: 0 16px; }
.lcats a { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 40px; border: 1px solid var(--sx-line); background: var(--sx-card); color: var(--sx-text); font-size: 15px; font-weight: 500; transition: background .15s, border-color .15s; }
.lcats a:hover { background: var(--sx-card2); border-color: var(--sx-line2); }
@media (max-width: 860px) { .lcats { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .lcats a { flex: none; height: 38px; padding: 0 16px; font-size: 14px; } }