:root {
      --ink:#16232C;
      --ink-soft:#3E4C54;
      --paper:#F1F3EE;
      --paper-raised:#E7EAE2;
      --navy:#142A38;
      --navy-soft:#1D3A4B;
      --amber:#D8952F;
      --amber-deep:#B87A1F;
      --teal:#3C7D74;
      --line:#D8DCD3;
      --line-dark:#2B4250;
      --cream-text:#EDEEE7;
      --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
      --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-mono:'IBM Plex Mono', 'Courier New', monospace;
    }

    @media (prefers-color-scheme: dark){
      :root:not([data-theme="light"]){
        --ink:#ECEDE7;
        --ink-soft:#B9C1C4;
        --paper:#10161B;
        --paper-raised:#182129;
        --line:#2A343B;
        --cream-text:#EDEEE7;
      }
    }
    :root[data-theme="dark"]{
      --ink:#ECEDE7;
      --ink-soft:#B9C1C4;
      --paper:#10161B;
      --paper-raised:#182129;
      --line:#2A343B;
      --cream-text:#EDEEE7;
    }
  
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: Arial, sans-serif;
    }
 

    .course-layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      height: 100vh;
      gap: 0;
    }

    .course-sidebar {
      background: var(--paper-raised);
      color: var(--ink);
      padding: 20px;
      height: 100%;
      box-sizing: border-box;
      overflow-y: auto;
      border-right: 1px solid var(--line);
    }

    .course-content {
      background: var(--paper);
      color: var(--ink);
      padding: 30px;
      height: 100%;
      box-sizing: border-box;
      overflow-y: auto;
    }

    .course-content section {
      margin-bottom: 50px;
    }

    .course-topic-content {
      display: none;
    }

    .course-topic-content.active {
      display: block;
    }
    
    .course-topics a {
      display: block;
      padding: 10px 12px;
      text-decoration: none;
      color: var(--ink);
      border-radius: 6px;
      transition: background .2s ease, color .2s ease;
    }

    .course-topics a:hover {
      background: var(--line);
      color: var(--teal);
    }

    .course-topics a.active {
      background: var(--navy);
      color: var(--cream-text);
    }
    
    .topic-card {
      background: var(--paper-raised);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 20px;
      margin: 24px 0;
    }

    .equation {
      text-align: center;
      font-size: 22px;
      margin: 28px 0;
    }

      .code-block {
        background: var(--navy);
        color: var(--cream-text);
        padding: 18px;
        border-radius: 8px;
        overflow-x: auto;
        font-family: "Courier New", monospace;
        font-size: 13px;
        line-height: 1.6;
      }

     .back-link {
        display: inline-block;
        margin-bottom: 20px;
        color: var(--teal);
        text-decoration: none;
        font-size: 13px;
      }

      .back-link:hover {
        color: var(--amber-deep);
      }

      @media (max-width: 700px) {
      .course-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
      }

      .course-sidebar {
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
      }

      .course-content {
        height: auto;
        min-height: 500px;
      }
    }

    .lesson h2{
      font-family:var(--font-display);
      font-size:28px;
      margin:0 0 16px;
    }

    .lesson p{
      font-size:15px;
      line-height:1.7;
    }

    .topic-card{
      background:var(--paper-raised);
      border:1px solid var(--line);
      border-radius:8px;
      padding:20px;
      margin:24px 0;
    }

    .equation{
      text-align:center;
      font-size:22px !important;
      margin:28px 0 !important;
    }

    .code-block{
      background:var(--navy);
      color:var(--cream-text);
      padding:18px;
      border-radius:8px;
      overflow-x:auto;
      font-family:var(--font-mono);
      font-size:13px;
      line-height:1.6;
    }

    .lesson-table{
      width:100%;
      border-collapse:collapse;
      margin:20px auto;
    }

    .lesson-table th,
    .lesson-table td{
      border:1px solid var(--line);
      padding:10px 14px;
      text-align:center;
    }

    .lesson-table th{
      background:var(--navy);
      color:var(--cream-text);
      font-weight:600;
    }

    .lesson-table td{
      background:var(--paper);
    }

    .lesson-image{
      display:block;
      width:80%;
      max-width:700px;
      height:auto;
      margin:24px auto;
      border-radius:8px;
    }