.learning-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 34px}
.learning-index a{display:flex;align-items:center;gap:12px;min-width:0;min-height:54px;padding:13px 16px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-size:13px;font-weight:600;overflow-wrap:anywhere}
.learning-index a:hover{border-color:var(--ink)}
.learning-index a>span:last-child{margin-left:auto;flex-shrink:0}
.learning-index-number{font:11px 'Courier New',monospace;color:var(--muted)}
.learning-index .learning-index-comparisons{font-weight:400;color:var(--muted)}
.learning-level{display:inline-block;margin-top:14px;padding:4px 9px;border:1px solid var(--line);border-radius:100px;font-size:10px;color:var(--muted);line-height:1.5}
.learn-page .learning-path{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.learn-page .path-intro,.learn-page .learning-steps,.learn-page .learning-steps a>div{min-width:0;overflow-wrap:anywhere}
.learn-page .learning-steps a>span:last-child{flex-shrink:0}
.learning-comparisons{border-top:1px solid var(--line);padding:40px 0;scroll-margin-top:25px}
.learning-comparisons h2{font-size:36px;font-weight:500;margin:14px 0 12px}
.learning-comparisons-intro{font-size:14px;color:var(--muted);max-width:650px;margin-bottom:24px}
.learning-comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.learning-comparison{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:23px;overflow-wrap:anywhere}
.learning-comparison h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 10px;font-size:20px;line-height:1.3;letter-spacing:-.03em;margin-bottom:14px}
.learning-comparison h3 span{font:11px 'Courier New',monospace;color:var(--muted)}
.learning-comparison h3 a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.learning-comparison h3 a:hover{color:var(--forest)}
.learning-comparison p{font-size:13px;line-height:1.75;color:var(--muted)}
@media(max-width:800px){.learn-page .learning-path{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.learning-index{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-index a{font-size:12px;padding:12px}}
@media(max-width:600px){.learn-page .learning-path{grid-template-columns:minmax(0,1fr)}.learning-index{gap:8px;margin-bottom:25px}.learning-index a{gap:8px;min-height:58px;font-size:11px}.learning-index-number{font-size:10px}.learning-index .cd-icon{width:15px;height:15px}.learning-comparisons{padding:32px 0}.learning-comparisons h2{font-size:30px}.learning-comparisons-intro{font-size:13px}.learning-comparison-grid{grid-template-columns:minmax(0,1fr);gap:12px}.learning-comparison{padding:20px}.learning-comparison h3{font-size:20px}}

.learning-index-number{flex-shrink:0;min-width:2ch;white-space:nowrap}

.thread-page .page-intro{max-width:840px}
.thread-page .learning-level{margin-top:0}
.thread-start{display:inline-flex;align-items:center;gap:12px;max-width:100%;margin:5px 0 22px;padding:13px 18px;border:1px solid var(--forest);border-radius:8px;background:var(--forest);color:var(--white);font-size:14px;font-weight:600;overflow-wrap:anywhere}
.thread-start .cd-icon{flex-shrink:0}
.thread-start:hover{opacity:.85}
.thread-navigation{margin:32px 0;padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.thread-position{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.thread-position a{font-weight:600;color:var(--forest)}
.thread-position>span{font:11px 'Courier New',monospace;color:var(--muted)}
.thread-navigation .path-progress{font-size:12px;color:var(--muted);margin:10px 0 18px}
.thread-navigation-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding-top:16px}
.thread-navigation-links a{min-width:0;overflow-wrap:anywhere;font-size:15px;font-weight:600;line-height:1.5}
.thread-navigation-links a>span{display:block;font:10px 'Courier New',monospace;color:var(--muted);margin-bottom:5px}
.thread-next{text-align:right}
.thread-navigation-links a:hover{color:var(--forest)}
@media(max-width:600px){.thread-navigation{padding:18px}.thread-navigation-links{gap:18px}.thread-navigation-links a{font-size:13px}.thread-start{font-size:13px}}