:root {
      --blue: var(--color-accent);
      --blue-dark: var(--color-accent-strong);
      --blue-soft: #eef5ff;
      --ink: var(--color-text);
      --muted: var(--color-text-muted);
      --line: var(--color-line);
      --soft: #f7f9fc;
      --white: #ffffff;
      --success: #257a4b;
      --max: 1180px;
      --content: 780px;
      --shadow: 0 16px 42px rgba(34, 58, 98, .07);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: #fff;
      color: var(--ink);
      font-family: var(--font-sans);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button { font: inherit; }
    .container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(31, 115, 234, .10);
      background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .95));
      backdrop-filter: blur(16px);
      box-shadow: 0 8px 24px rgba(24, 36, 58, .04);
    }
    .header-inner {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .logo img { width: 174px; }
    .main-nav {
      display: flex;
      align-items: center;
      gap: 28px;
      color: #526176;
      font-size: 14px;
      font-weight: 750;
    }
    .main-nav a:hover,
    .main-nav a:focus-visible { color: var(--blue); }
    .header-actions { display: flex; align-items: center; gap: 9px; }
    .icon-button {
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      color: var(--ink);
    }
    .icon-button:hover { border-color: #cfd9e6; color: var(--blue); }
    .menu-button { display: none; }

    /* Article header */
    .article-hero {
      padding: 34px 0 36px;
      border-bottom: 1px solid var(--line);
      background:
        radial-gradient(circle at 52% 0, rgba(31, 115, 234, .05), transparent 34%),
        linear-gradient(#fff, #fbfcff);
    }
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 26px;
      color: #7b889a;
      font-size: 13px;
    }
    .breadcrumb a:hover { color: var(--blue); }
    .breadcrumb svg { width: 12px; opacity: .65; }
    .article-header {
      max-width: 920px;
    }
    .category-pill {
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      padding: 0 11px;
      border-radius: 999px;
      background: var(--blue-soft);
      color: var(--blue);
      font-size: var(--text-label);
      font-weight: 900;
      letter-spacing: .065em;
      text-transform: uppercase;
    }
    h1 {
      max-width: 900px;
      margin: 16px 0 0;
      font-size: clamp(40px, 5.2vw, 62px);
      line-height: 1.035;
      letter-spacing: -.052em;
    }
    .article-description {
      max-width: 830px;
      margin: 20px 0 0;
      color: var(--muted);
      font-size: var(--text-lead-desktop);
      line-height: 1.55;
    }
    .article-meta {
      margin-top: 22px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px 13px;
      color: #778599;
      font-size: var(--text-meta);
    }
    .article-meta strong { color: var(--ink); }
    .meta-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #bbc5d2;
    }

    /* Layout */
    .article-shell {
      display: grid;
      grid-template-columns: 246px minmax(0, var(--content));
      justify-content: center;
      gap: 66px;
      margin: 0 auto;
      padding: 46px 0 0;
    }
    .article-sidebar {
      align-self: stretch;
      min-width: 0;
    }
    .toc {
      position: sticky;
      top: 102px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 12px 32px rgba(34, 58, 98, .045);
    }
    .toc-title {
      margin: 0 0 12px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .075em;
      text-transform: uppercase;
      color: var(--blue);
    }
    .toc ul { list-style: none; padding: 0; margin: 0; }
    .toc li + li { border-top: 1px solid #edf1f6; }
    .toc a {
      display: block;
      padding: 10px 0;
      color: #617086;
      font-size: var(--text-meta);
      font-weight: 700;
      line-height: 1.35;
    }
    .toc a:hover { color: var(--blue); }
    .toc-note {
      margin: 15px 0 0;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      color: #8490a1;
      font-size: var(--text-label);
      line-height: 1.5;
    }

    .article-content {
      min-width: 0;
      font-size: var(--text-body-desktop);
      line-height: var(--leading-body);
    }
    .article-content > p:first-child {
      margin-top: 0;
    }
    .article-content p { margin: 0 0 21px; }
    .article-content h2 {
      scroll-margin-top: 104px;
      margin: 50px 0 19px;
      font-size: clamp(28px, 3.4vw, 36px);
      line-height: 1.16;
      letter-spacing: -.038em;
    }
    .article-content h2::before {
      content: "";
      display: block;
      width: 42px;
      height: 4px;
      margin-bottom: 13px;
      border-radius: 5px;
      background: var(--blue);
    }
    .article-content strong { color: #142239; }

    /* Contextual links inside editorial copy */
    .article-content p a:not([class]),
    .article-content blockquote a:not([class]),
    .article-content :where(ul, ol):not(.mcg-sources-list) a:not([class]) {
      color: var(--blue);
      text-decoration-line: underline;
      text-decoration-color: rgba(23, 105, 210, .48);
      text-decoration-thickness: .08em;
      text-underline-offset: .18em;
      text-decoration-skip-ink: auto;
      transition: color .16s ease, text-decoration-color .16s ease, text-decoration-thickness .16s ease;
    }
    .article-content p a:not([class]):hover,
    .article-content p a:not([class]):focus-visible,
    .article-content blockquote a:not([class]):hover,
    .article-content blockquote a:not([class]):focus-visible,
    .article-content :where(ul, ol):not(.mcg-sources-list) a:not([class]):hover,
    .article-content :where(ul, ol):not(.mcg-sources-list) a:not([class]):focus-visible {
      color: var(--blue-dark);
      text-decoration-color: currentColor;
      text-decoration-thickness: .12em;
    }

    /* Table */
    .mcg-table-wrap {
      margin: 23px 0 15px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: var(--shadow);
    }
    .mcg-table-wrap table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 14px;
      line-height: 1.48;
    }
    .mcg-table-wrap col.course { width: 25%; }
    .mcg-table-wrap col.institution { width: 17%; }
    .mcg-table-wrap col.hours { width: 11%; }
    .mcg-table-wrap col.content { width: 31%; }
    .mcg-table-wrap col.access { width: 16%; }
    .mcg-table-wrap thead { background: #f3f7fc; }
    .mcg-table-wrap th {
      padding: 15px 14px;
      text-align: left;
      color: #46566c;
      font-size: var(--text-label);
      font-weight: 900;
      letter-spacing: .055em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--line);
    }
    .mcg-table-wrap th:last-child { text-align: center; }
    .mcg-table-wrap td {
      padding: 18px 15px;
      vertical-align: middle;
      border-bottom: 1px solid #edf1f6;
      color: #4d5c70;
    }
    .mcg-table-wrap tbody tr {
      transition: background-color .16s ease;
    }
    .mcg-table-wrap tbody tr:nth-child(even) { background: #fbfcfe; }
    .mcg-table-wrap tbody tr:last-child td { border-bottom: 0; }
    .mcg-table-wrap tbody tr:hover { background: #f6f9fd; }
    .mcg-table-wrap td:first-child {
      color: var(--ink);
      font-weight: 800;
      line-height: 1.4;
    }
    .mcg-table-wrap td:last-child {
      padding-right: 8px;
      padding-left: 8px;
      text-align: center;
    }
    .mcg-table-wrap .course-short { display: none; }
    .mcg-table-wrap .official-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      max-width: 100%;
      padding: 7px 6px;
      border: 1px solid #cfe0f7;
      border-radius: 9px;
      color: var(--blue);
      background: #f1f6ff;
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
      transition: color .16s ease, background-color .16s ease, border-color .16s ease;
    }
    .mcg-table-wrap .official-link svg {
      width: 12px;
      height: 12px;
      flex: 0 0 auto;
    }
    .mcg-table-wrap .official-link:hover {
      color: var(--blue-dark);
      border-color: #abc9f4;
      background: #e8f1ff;
    }
    .mcg-table-wrap .official-link:focus-visible {
      outline: 3px solid rgba(31, 115, 234, .24);
      outline-offset: 2px;
    }

    .mcg-table-note {
      margin: 15px 0 0;
      padding: 15px 17px;
      border: 1px solid #dce8f8;
      border-radius: 14px;
      background: #f5f9ff;
      color: #53657c;
      font-size: var(--text-meta);
      line-height: 1.6;
    }
    .mcg-table-note strong { color: var(--blue-dark); }

    /* Sources — compact and secondary */
    .sources-heading {
      margin-bottom: 13px !important;
    }
    .mcg-sources-compact {
      margin: 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .mcg-sources-compact summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 16px 2px;
      cursor: pointer;
      list-style: none;
      color: #526176;
      font-size: 14px;
      font-weight: 800;
    }
    .mcg-sources-compact summary::-webkit-details-marker { display: none; }
    .mcg-sources-summary-main {
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }
    .mcg-sources-count {
      min-width: 24px;
      height: 24px;
      padding: 0 7px;
      border-radius: 999px;
      background: #f0f4f9;
      color: #7f8b9c;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-label);
      font-weight: 850;
    }
    .mcg-sources-toggle {
      width: 26px;
      height: 26px;
      border: 1px solid var(--line);
      border-radius: 50%;
      position: relative;
      flex: 0 0 auto;
      color: var(--blue);
      font-size: 0;
      transition: background .18s ease;
    }
    .mcg-sources-toggle::before,
    .mcg-sources-toggle::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transform: translate(-50%, -50%);
    }
    .mcg-sources-toggle::after {
      transform: translate(-50%, -50%) rotate(90deg);
      transition: opacity .18s ease, transform .18s ease;
    }
    .mcg-sources-compact[open] .mcg-sources-toggle {
      background: var(--blue-soft);
    }
    .mcg-sources-compact[open] .mcg-sources-toggle::after {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
    }
    .mcg-sources-list {
      list-style: none;
      margin: 0;
      padding: 0 2px 15px 2px;
    }
    .mcg-sources-list li + li {
      margin-top: 9px;
    }
    .mcg-sources-list a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--muted);
      font-size: var(--text-meta);
      line-height: 1.55;
    }
    .mcg-sources-list a:hover {
      color: var(--blue);
    }
    .mcg-sources-list svg {
      width: 12px;
      height: 12px;
      flex: 0 0 auto;
    }

    /* End matter */
    .article-disclaimer {
      margin-top: 42px;
      padding: 20px 22px;
      border-left: 4px solid var(--blue);
      border-radius: 0 15px 15px 0;
      background: var(--soft);
      color: #596a80;
      font-size: 15px;
      line-height: 1.6;
    }
    .article-disclaimer strong { color: var(--ink); }

    .suggest {
      margin-top: 52px;
      padding: 31px;
      border: 1px solid #dce7f5;
      border-radius: 22px;
      background:
        radial-gradient(circle at 90% 35%, rgba(31, 115, 234, .09), transparent 30%),
        linear-gradient(115deg, #f4f8ff, #fff 72%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }
    .suggest h2 {
      margin: 0;
      font-size: 27px;
      letter-spacing: -.035em;
    }
    .suggest h2::before { display: none; }
    .suggest p {
      max-width: 540px;
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.6;
    }
    .button {
      min-height: 46px;
      padding: 0 19px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #fff;
      background: linear-gradient(var(--blue), var(--blue-dark));
      font-size: 15px;
      font-weight: 850;
      box-shadow: 0 12px 25px rgba(31, 115, 234, .2);
    }

    /* Footer */
    .site-footer {
      margin-top: 72px;
      padding: 42px 0 22px;
      background: #16263f;
      color: #d4deeb;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr repeat(3, .75fr);
      gap: 34px;
    }
    .footer-brand img {
      width: 174px;
      filter: brightness(0) invert(1);
      opacity: .95;
    }
    .footer-brand p {
      max-width: 330px;
      margin: 14px 0 0;
      color: #9fb0c5;
      font-size: 14px;
    }
    .footer-col h3 {
      margin: 0 0 13px;
      color: #fff;
      font-size: 14px;
    }
    .footer-col a {
      display: block;
      margin: 8px 0;
      color: #aebcd0;
      font-size: 13px;
    }
    .footer-col a:hover { color: #fff; }
    .footer-bottom {
      margin-top: 32px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.09);
      color: #8395ac;
      font-size: 12px;
    }

    /* Mobile menu */
    .mobile-panel {
      position: fixed;
      z-index: 80;
      inset: 0 0 0 auto;
      width: min(365px, 89vw);
      padding: 23px;
      background: #fff;
      box-shadow: -20px 0 55px rgba(20, 39, 70, .2);
      transform: translateX(110%);
      transition: transform .24s ease;
    }
    .mobile-panel.open { transform: translateX(0); }
    .mobile-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .mobile-panel-head img { width: 155px; }
    .mobile-panel nav {
      display: grid;
      margin-top: 30px;
    }
    .mobile-panel nav a {
      padding: 14px 3px;
      border-bottom: 1px solid var(--line);
      font-weight: 800;
      color: #425168;
    }
    .backdrop {
      position: fixed;
      z-index: 70;
      inset: 0;
      background: rgba(16, 29, 50, .42);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }
    .backdrop.open { opacity: 1; pointer-events: auto; }

    .preview-label {
      position: fixed;
      z-index: 60;
      left: 14px;
      bottom: 14px;
      padding: 7px 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.95);
      box-shadow: var(--shadow);
      color: var(--muted);
      font-size: var(--text-label);
    }

    @media (max-width: 1040px) {
      .main-nav { display: none; }
      .menu-button { display: grid; }
      .article-shell {
        grid-template-columns: 210px minmax(0, 720px);
        gap: 40px;
      }
      .footer-grid { grid-template-columns: 1.25fr repeat(2, 1fr); }
      .footer-col:last-child { grid-column: 2 / -1; }
    }

    @media (max-width: 820px) {
      .article-shell {
        display: block;
        width: min(760px, calc(100% - 32px));
      }
      .article-sidebar { margin-bottom: 28px; }
      .toc {
        position: static;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
      }
      .toc details {
        border: 1px solid var(--line);
        border-radius: 15px;
        background: #fff;
      }
      .toc summary {
        cursor: pointer;
        padding: 15px 17px;
        color: var(--blue);
        font-size: 13px;
        font-weight: 850;
        list-style: none;
      }
      .toc summary::-webkit-details-marker { display: none; }
      .toc summary::after { content: "+"; float: right; font-size: 18px; line-height: 1; }
      .toc details[open] summary::after { content: "−"; }
      .toc .toc-inner { padding: 0 17px 13px; }
      .toc-title { display: none; }
      .suggest { align-items: flex-start; flex-direction: column; }
    }

    @media (min-width: 821px) {
      .toc details { display: contents; }
      .toc summary { display: none; }
    }

    @media (max-width: 700px) {
      .container { width: min(var(--max), calc(100% - 36px)); }
      .header-inner { min-height: 76px; }
      .logo img { width: 151px; }
      .search-button { display: none; }
      .article-hero { padding: 25px 0 29px; }
      .breadcrumb { margin-bottom: 20px; font-size: 12px; }
      h1 {
        margin-top: 14px;
        font-size: clamp(36px, 11vw, 48px);
        line-height: 1.05;
      }
      .article-description {
        margin-top: 17px;
        font-size: var(--text-lead-mobile);
        line-height: 1.55;
      }
      .article-meta { margin-top: 18px; align-items: flex-start; }
      .article-shell {
        width: min(100% - 36px, 760px);
        padding-top: 31px;
      }
      .article-content {
        font-size: var(--text-body-mobile);
        line-height: var(--leading-body);
      }
      .article-content h2 {
        margin-top: 42px;
        font-size: 28px;
      }

      /* Card-like responsive table */
      .mcg-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .mcg-table-wrap table,
      .mcg-table-wrap tbody,
      .mcg-table-wrap tr,
      .mcg-table-wrap td {
        display: block;
        width: 100%;
      }
      .mcg-table-wrap colgroup,
      .mcg-table-wrap thead { display: none; }
      .mcg-table-wrap tbody {
        display: grid;
        gap: 13px;
      }
      .mcg-table-wrap tbody tr,
      .mcg-table-wrap tbody tr:nth-child(even) {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(34, 58, 98, .055);
      }
      .mcg-table-wrap tbody tr:hover { background: #fff; }
      .mcg-table-wrap td {
        display: grid;
        grid-template-columns: 108px 1fr;
        gap: 12px;
        padding: 11px 15px;
        border-bottom: 1px solid #edf1f6;
        font-size: 15px;
        line-height: 1.5;
      }
      .mcg-table-wrap td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: var(--text-label);
        font-weight: 900;
        letter-spacing: .05em;
        text-transform: uppercase;
      }
      .mcg-table-wrap td:first-child {
        display: block;
        padding: 17px 15px 13px;
        background: #f5f8fc;
        font-size: 17px;
      }
      .mcg-table-wrap td:first-child::before { display: none; }
      .mcg-table-wrap td:last-child {
        display: block;
        padding: 13px 15px 15px;
        border-bottom: 0;
      }
      .mcg-table-wrap td:last-child::before { display: none; }
      .mcg-table-wrap .course-full { display: none; }
      .mcg-table-wrap .course-short { display: inline; }
      .mcg-table-wrap .official-link {
        width: 100%;
        min-height: 42px;
        padding: 0 15px;
        border: 0;
        justify-content: center;
        border-radius: 11px;
        color: #fff;
        background: var(--blue);
        font-size: var(--text-meta);
      }
      .mcg-table-wrap .official-link:hover { color: #fff; background: var(--blue-dark); }
      .mcg-table-note { margin-top: 13px; }

      .suggest {
        margin-top: 43px;
        padding: 25px 22px;
      }
      .suggest h2 { font-size: 25px; }
      .button { width: 100%; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-col:last-child { grid-column: auto; }
      .preview-label { display: none; }
    }

    @media (max-width: 470px) {
      .category-pill { font-size: var(--text-label); }
      h1 { font-size: 37px; }
      .article-meta .meta-dot { display: none; }
      .article-meta {
        display: grid;
        gap: 3px;
      }
      .mcg-table-wrap td {
        grid-template-columns: 95px 1fr;
      }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-brand, .footer-col:last-child { grid-column: auto; }
    }