:root{ --accent:#0071e3; --bg:#f8f8f8; --text:#333; --card:#fff; --shadow:0 8px 16px rgba(0,0,0,.05); }
.course-page{ background:var(--bg); color:var(--text); margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; }
/* .course-page  */
header.hero{ background:#000; color:#fff; text-align:center; padding:90px 20px 70px; }
/* .course-page  */
header.hero h1{ font-size:44px; font-weight:600; margin:0; }
/* .course-page  */
header.hero p{ font-size:18px; margin:14px auto 0; max-width:980px; opacity:.9; }
/* .course-page  */
.container{ max-width:1200px; margin:0 auto; padding:24px; }
/* .course-page  */
section{ margin:42px 0; }
/* .course-page  */
.card{ background:var(--card); border-radius:12px; box-shadow:var(--shadow); padding:24px; }
/* .course-page  */
h2.section-title{ font-size:28px; font-weight:600; text-align:center; margin:0 0 22px; }
/* .course-page  */
p.lead{ font-size:18px; line-height:1.6; margin:0 auto 18px; max-width:960px; text-align:center; }
/* .course-page  */
.grid{ display:grid; gap:20px; }
/* .course-page  */
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* .course-page  */
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
/* .course-page  */
.grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .course-page .grid.cols-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){ .course-page .grid.cols-2,.course-page .grid.cols-3,.course-page .grid.cols-4{ grid-template-columns:1fr;} }
/* .course-page  */
.badge{ display:inline-block; font-size:12px; letter-spacing:.4px; text-transform:uppercase; background:#111; color:#fff; border-radius:999px; padding:6px 10px; }
/* .course-page  */
.pill{ background:#eef5ff; color:#0b58b0; border-radius:999px; padding:6px 10px; font-size:13px; display:inline-block; margin:4px 6px 0 0; }
/* .course-page  */
.cta-bar{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:12px; }
/* .course-page  */
.btn{ display:inline-block; border-radius:10px; padding:12px 18px; text-decoration:none; font-weight:600; box-shadow:var(--shadow); background:#fff; color:#111; border:1px solid #e7e7e7; }
/* .course-page  */
.btn.primary{ background:var(--accent); color:#fff; border:none; }
/* .course-page  */
.slide{ padding:20px; border-radius:12px; background:#fff; box-shadow:var(--shadow); }
/* .course-page  */
.slide h3{ margin-top:0; font-size:22px; }
/* .course-page  */
.slide ul{ list-style:none; padding:0; margin:0; }
/* .course-page  */
.slide li{ margin:12px 0; padding:12px; background:#fafafa; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,.04); opacity:0; transform:translateY(30px); transition:all .5s ease; }
/* .course-page  */
.slide li.visible{ opacity:1; transform:translateY(0); }
/* .course-page  */
.subnav{ position:sticky; top:0; z-index:10; background:rgba(248,248,248,.92); backdrop-filter:saturate(180%) blur(6px); border-bottom:1px solid #eee; }
/* .course-page  */
.subnav .inner{ max-width:1200px; margin:0 auto; display:flex; gap:10px; padding:10px 16px; overflow:auto; }
/* .course-page  */
.subnav a{ color:#111; text-decoration:none; font-weight:600; padding:8px 12px; border-radius:999px; white-space:nowrap; }
/* .course-page  */
.subnav a.active, .course-page .subnav a:hover{ background:#eaf3ff; color:#0b58b0; }
/* .course-page  */
.diagram{ background:#fff; border-radius:12px; padding:16px; box-shadow:var(--shadow); }
/* .course-page  */
.diagram svg{ width:100%; height:auto; }
/* .course-page  */
footer{ text-align:center; color:#888; font-size:14px; padding:40px 0 60px; }
/* .course-page  */
.loading{ text-align:center; padding:40px; color:#666; }
/* .course-page  */
.spinner{ width:28px; height:28px; border-radius:50%; border:3px solid #ddd; border-top-color:var(--accent); display:inline-block; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .course-page .slide li{ transition:none; transform:none; opacity:1; } }
/* replace .course-page .spinner { ... } with: */
.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid #ddd; border-top-color:var(--accent);
  display:inline-block; animation:spin 1s linear infinite;
}

.blog-page {
    background: var(--bg);
    color: var(--text);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    line-height: 1.7;
  }
  .blog-page main {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 20px;
  }
  .blog-page h1, .blog-page h2, .blog-page h3 {
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2em;
  }
  .blog-page h1 { font-size: 38px; margin-top: 0; }
  .blog-page h2 { font-size: 28px; }
  .blog-page h3 { font-size: 22px; }
  .blog-page p { margin: 1em 0; }
  .blog-page .callout {
    background: #fefefe;
    border-left: 4px solid var(--accent);
    padding: 12px 16px;
    margin: 1.2em 0;
    border-radius: 6px;
    box-shadow: var(--shadow);
  }
  .blog-page .diagram {
    text-align: center;
    margin: 2em 0;
  }
  .blog-page footer {
    text-align: center;
    color: #888;
    font-size: 14px;
    margin: 40px 0 60px;
  }