/* 1. Import the actual fonts from Google */
    @import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Serif+Text:ital@0;1&family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Quicksand:wght@300..700&display=swap");

    :root {
      --font-1            : "Public Sans", sans-serif;
      --font-2            : "DM Serif Display", serif;
      --font-3            : "Quicksand", sans-serif; 
      --color-1           : #6db5ca;
     --color-gray-2       : #d0d0d0; /*big heading text */
     --color-gray-4       : #a1a1a2; /*about & work text */
     --color-gray-6       : #727373; /*contents & code block*/
     --color-gray-12      : #101112;  /* code blocks */
     --color-gray-7       : #5b5b5c; /* copyright & content boarder & header footer lines */
      --color-black       : #000000;
      --space             : 1.6rem;
      --vspace-1          : var(--space);
      --vspace-1_5        : calc(1.5 * var(--space));
    }
       /* Default styles provided by pandoc.
    ** See https://pandoc.org/MANUAL.html#variables-for-html for config info.
    */
    html {
      color: #1a1a1a;
      background-color: #000000;
    }
    body {
      margin: 0 auto;
      max-width: 55em;
      padding: 0 50px 50px 50px; /* Removed top padding for the sticky header */
      
      font-family: var(--font-1); /* Public Sans */
      font-size: 1.06rem;
      line-height: var(--vspace-1); /* Using 32px vertical rhythm */
      color: var(--color-gray-4);   /* #515151 about text color */
      
      background-color: var(--color-black);
      -webkit-font-smoothing: antialiased;
    }

    p {
      margin-bottom: var(--vspace-1); /* Consistent vertical spacing */
    }
    /* Clean Header Styling */
   .project-header {
      background-color: #000000; 
      padding: 1.2rem 2rem;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 0 15px rgba(109, 181, 202, 0.4); /* Soft glow using color */
      margin-bottom: var(--vspace-1_5);
      
      width: 100vw; 
      margin-left: calc(-50vw + 50%);
      box-sizing: border-box;
      
      display: flex;
      align-items: center;
      /* FIX: This pushes the items to the opposite ends */
      justify-content: space-between; 
    }

    /* Make sure the text color stays dark against the white background */
    .back-btn {
      text-decoration: none;
      font-family: var(--font-3);
      color: var(--color-1) !important; /* Forces the blue color */     
      font-weight: 700;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      text-transform: uppercase;
      letter-spacing: .2rem;
      transition: all 0.3s ease-in-out; 
    }

    .back-btn:hover {
    text-shadow: 0 0 10px var(--color-1); /* Adds a blue glow effect */
    transform: translateX(-2px); /* Subtle "push" to the left */
}
/* Style for the "Detailed Code" label */
    .github-container {
      display: flex;
      align-items: center;
      gap: 10px; /* Space between text and badge */
    }
    /* Arrow icon spacing */
    .back-btn i {
      margin-right: 12px;
      font-size: 1.1rem;
    }
    @media (max-width: 600px) {
      body {
        font-size: 0.9em;
        padding: 12px;
      }
      h1 {
        font-size: 1.8em;
      }
    }
    @media print {
      html {
        background-color: white;
      }
      body {
        background-color: transparent;
        color: black;
        font-size: 12pt;
      }
      p, h2, h3 {
        orphans: 3;
        widows: 3;
      }
      h2, h3, h4 {
        page-break-after: avoid;
      }
    }
    p {
      margin: 1em 0;
    }
    a {
      color: var(--color-1);
    }
    a:visited {
      color: var(--color-1);
    }
    img {
      max-width: 100%;
    }
    svg {
      height: auto;
      max-width: 100%;
    }
   h1, h2, h3, h4, h5, h6 {
      margin-top: 1.4em;
      font-family: var(--font-1);
      font-weight: 550; /* Increased from 300 to make it bolder/darker */
      color: var(--color-gray-2); /* Changed from dim grey to solid black */
      line-height: 1.3;
      margin-bottom: 0.5em;
    }
    h1 {
      margin-bottom: 0.8em;
    }
    h5, h6 {
      font-size: 1em;
      font-style: italic;
    }
    h6 {
      font-weight: normal;
    }
    ol, ul {
      padding-left: 1.7em;
      margin-top: 1em;
    }
    li > ol, li > ul {
      margin-top: 0;
    }
    blockquote {
      margin: 1em 0 1em 1.7em;
      padding-left: 1em;
      border-left: 4px solid var(--color-1);
      box-shadow: 0 0 15px rgba(109, 181, 202, 0.4); /* Soft glow using color */
      color: var(--color-gray-4);
    }
    code {
      font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
      font-size: 85%;
      margin: 0;
      hyphens: manual;
    }
    pre {
      margin: 1em 0;
      overflow: auto;
      font-size: 0.9rem;    /* Makes the font smaller */
      padding: 10px 15px;   /* Shrinks the block size */
      border-radius: 4px;
    }
    pre code {
      padding: 0;
      overflow: visible;
      overflow-wrap: normal;
      line-height: 1.4;     /* Keeps the code lines compact */
    }
    .sourceCode {
     background-color: transparent;
     overflow: visible;
    }
    hr {
      border: none;
      border-top: 1px solid var(--color-gray-7);
      height: 1px;
      margin: 1em 0;
    }
    table {
      margin: 1em 0;
      border-collapse: collapse;
      width: 100%;
      overflow-x: auto;
      display: block;
      font-variant-numeric: lining-nums tabular-nums;
    }
    table caption {
      margin-bottom: 0.75em;
    }
    tbody {
      margin-top: 0.5em;
      border-top: 1px solid var(--color-gray-7);
      border-bottom: 1px solid var(--color-gray-7);
    }
    th {
      border-top: 1px solid var(--color-gray-7);
      padding: 0.25em 0.5em 0.25em 0.5em;
    }
    td {
      padding: 0.125em 0.5em 0.25em 0.5em;
    }
    header {
      margin-bottom: 4em;
      text-align: center;
    }
    #TOC li {
      list-style: none;
    }
    #TOC ul {
      padding-left: 1.3em;
    }
    #TOC > ul {
      padding-left: 0;
    }
    #TOC a:not(:hover) {
      text-decoration: none;
    }
    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    div.columns{display: flex; gap: min(4vw, 1.5em);}
    div.column{flex: auto; overflow-x: auto;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    /* The extra [class] will increases specificity enough to
       override a similar rule in reveal.js */
    ul.task-list[class]{list-style: none;}
    ul.task-list li input[type="checkbox"] {
      font-size: inherit;
      width: 0.8em;
      margin: 0 0.8em 0.2em -1.6em;
      vertical-align: middle;
    }
    .display.math{display: block; text-align: center; margin: 0.5rem auto;}

 /* ===================================================================
  * # FOOTER
  * ------------------------------------------------------------------- */
 .s-footer {
     margin-top     : auto;
     padding-top    : var(--vspace-1);
     padding-bottom : var(--vspace-3);
     color          : var(--color-gray-7);
 }
 /* ------------------------------------------------------------------- 
  * ## copyright
  * ------------------------------------------------------------------- */
.s-footer {
    background-color: #000000;
    text-align: center;
}

.ss-copyright {
    font-family: var(--font-3); /* Quicksand */
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    color: var(--color-gray-7); 
}
 
 .ss-copyright span {
     font-size : var(--text-sm);
     display   : inline-block;
 }
 
 .ss-copyright span::after {
     content : "|";
     display : inline-block;
     padding : 0 .8rem 0 2rem;
     color   : var(--color-gray-7);
 }
 
 .ss-copyright span:last-child::after {
     display : none;
 }
/* ===================================================================
/* --- TABLE OF CONTENTS ---
=====================================================================*/
   
    /* 1. The Toggle Button */
    #toc-toggle {
        position: fixed;
        right: 1.5rem;
        top: 155px;
        z-index: 1001;
        background: transparent;
        border: none;
        color: var(--color-1); 
        font-size: 1.3rem;
        cursor: pointer;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    #toc-toggle:hover {
        transform: scale(1.2);
        color: var(--color-gray-7);
    }

    /* 2. The Menu Container */
    .toc {
        position: fixed;
        right: 0.1rem;
        top: 155px; 
        width: 140px;
        padding: 0.5rem 1rem;
        background-color: transparent;
        border-left: 1px solid var(--color-gray-7);
        font-family: var(--font-3); 
        z-index: 900;
        transition: all 0.4s ease; 
    }

    /* 3. The Hidden State Logic */
    .is-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(20px);
    }

    /* 4. Inside the Menu Typography */
    .toc h3 {
        font-size: 0.70rem;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        margin-bottom: 1rem;
        color: var(--color-1);
        margin-top: 0;
    }

    .toc ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .toc ul li {
        margin-bottom: 0.7rem;
        line-height: 1.2;
    }

    .toc ul li a {
        text-decoration: none;
        font-size: 0.85rem;
        color: var(--color-gray-4);
        /* Line added below for smooth movement */
        transition: all 0.3s ease; 
        display: inline-block; /* Required for the nudge effect to work */
    }

    .toc ul li a:hover {
        color: var(--color-1);
        /* Line added below for the "little effect" nudge */
        transform: translateX(4px); 
    }

    /* 5. Mobile & Jump Logic */
    @media (max-width: 1200px) {
        .toc, #toc-toggle { display: none; }
    }

    h1, h2, h3 {
        scroll-margin-top: 100px; 
    }
    .para-gap {
    display: block;
    height: 10px; /* Adjust gaps btw paragraphs */
    content: "";
    }