.learning-path-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:20px; }
.learning-path-card { display:flex; flex-direction:column; gap:14px; padding:26px; color:#22334b; text-decoration:none; border:1px solid #ced7e2; border-radius:12px; background:linear-gradient(155deg,#f3f7fc,#fff 60%); }
.learning-path-card:hover { border-color:#255da3; }
.learning-path-card strong { font-size:1.25rem; line-height:1.6; }
.learning-path-card > span:not(.learning-path-label) { line-height:1.8; }
.learning-path-label { font-size:.8rem; color:#285a96; font-weight:700; letter-spacing:.08em; }
.learning-path-read { margin-top:auto; color:#24578f; font-weight:700; }
.learning-path-section { padding:30px 0 55px; }
.learning-path-section h2 { margin:0 0 12px; }
.learning-path-section > .container > p { margin:0 0 24px; }
.hub-skip { position:absolute; left:16px; top:-100px; z-index:100; background:#fff; padding:12px; }
.hub-skip:focus { top:8px; }
.learning-hub { color:#22334b; }
.hub-header { padding-top:40px; padding-bottom:40px; }
.hub-breadcrumb { font-size:.9rem; margin-bottom:35px; }
.hub-header h1 { max-width:850px; font-size:clamp(1.85rem,4vw,3rem); line-height:1.45; margin:12px 0 22px; }
.hub-header .lead { max-width:850px; line-height:1.9; }
.hub-jumps { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hub-jumps a { color:#24578f; border:1px solid #cad7e7; border-radius:6px; padding:10px 14px; background:#f4f7fb; }
.hub-content { max-width:1060px; }
.hub-stage { padding:32px 0; border-top:1px solid #d8e0e9; scroll-margin-top:110px; }
.hub-stage-heading { display:flex; align-items:flex-start; gap:20px; margin-bottom:24px; }
.hub-stage-number { color:#376493; font-size:2.1rem; line-height:1.5; font-weight:700; }
.hub-stage-heading h2 { margin:0 0 8px; font-size:1.45rem; }
.hub-stage-heading p { margin:0; line-height:1.9; }
.hub-guide { margin:0 0 20px; line-height:1.9; }
.hub-reading-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; list-style:none; counter-reset:reading; padding:0; margin:0; }
.hub-reading-list li { counter-increment:reading; min-width:0; }
.hub-reading-list a { display:flex; flex-direction:column; gap:10px; height:100%; box-sizing:border-box; border:1px solid #d4deea; border-radius:10px; padding:22px; text-decoration:none; color:inherit; background:#fff; }
.hub-reading-list a:hover { background:#f4f7fb; border-color:#527bac; }
.hub-reading-list a::before { content:"READ " counter(reading,decimal-leading-zero); font-size:.75rem; color:#436082; font-weight:700; letter-spacing:.1em; }
.hub-reading-list strong { font-size:1.13rem; line-height:1.65; }
.hub-reading-list span { line-height:1.85; }
.hub-reading-list .hub-read { color:#24578f; font-weight:700; font-size:.9rem; margin-top:auto; }
.hub-finish { padding:26px; background:#edf3fa; border-left:4px solid #376493; border-radius:6px; margin:30px 0 55px; }
.hub-finish h2 { margin-top:0; }
.hub-finish p { line-height:1.9; }
.hub-other { margin-bottom:60px; }
.article-path { padding:20px; margin:32px 0; border:1px solid #ced7e2; border-left:4px solid #376493; border-radius:6px; }
.article-path strong,.article-path a { display:block; line-height:1.8; }
.article-diagram { margin:0 0 36px; border:1px solid #d4deea; border-radius:12px; overflow:hidden; background:#f6f8fb; }
.article-diagram img { display:block; width:100%; height:auto; margin:0; border-radius:0; }
.article-diagram figcaption { padding:20px 24px; background:#fff; color:#22334b; font-size:1rem; line-height:1.8; }
.article-diagram figcaption ol { margin:12px 0; padding-left:1.5em; }
.article-diagram figcaption p { margin-bottom:0; }
.learning-hub a:focus-visible,.learning-path-card:focus-visible,.article-path a:focus-visible { outline:3px solid #255da3; outline-offset:4px; }
@media(max-width:650px) {
  .hub-reading-list { grid-template-columns:1fr; }
  .hub-stage-heading { gap:12px; }
  .hub-header { padding-top:24px; }
  .hub-jumps { flex-direction:column; }
  .hub-jumps a { font-size:.95rem; }
  .learning-path-card { padding:22px; }
  .article-diagram figcaption { padding:16px; }
}