:root {
      --bg: #0d1117;
      --card: #161b22;
      --accent: #007acc;
      /* ZainCodes Blue */
      --border: #30363d;
      --text: #c9d1d9;
      --white: #ffffff;
  }

  * {
      box-sizing: border-box;
  }

  body {
      background-color: #0f172a;
      color: var(--text);
      font-family: 'Segoe UI', system-ui, sans-serif;
      margin: 0;
      padding: 20px;
      overflow-x: hidden;
  }

  /* --- Animations --- */
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(30px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .container {
      max-width: 850px;
      margin: 0 auto;
      animation: fadeInUp 0.8s ease-out;
  }

  /* --- Header Section --- */
  .page-header {
      text-align: center;
      margin-bottom: 50px;
  }

  .page-header h1 {
      font-size: 2.5rem;
      color: var(--white);
      margin-bottom: 10px;
  }

  .page-header .underline {
      width: 100px;
      height: 4px;
      background: var(--accent);
      margin: 0 auto;
      border-radius: 2px;
  }

  /* --- Repository Article Style --- */
  .repo-box {
      background: #0f172a;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 30px;
      margin-bottom: 40px;
      transition: 0.3s;
      position: relative;
  }

  .repo-box:hover {
      border-color: var(--accent);
      box-shadow: 0 10px 30px rgba(0, 122, 204, 0.1);
  }

  .repo-title {
      color: var(--white);
      font-size: 1.8rem;
      margin: 0 0 15px 0;
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .repo-title i {
      color: var(--accent);
  }

  .repo-para {
      font-size: 1.1rem;
      line-height: 1.7;
      margin-bottom: 20px;
      color: var(--text);
  }

  /* --- Normal Style Heading for Tech --- */
  .tech-heading {
      font-size: 14px;
      color: var(--accent);
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-top: 20px;
  }

  .tech-info {
      font-size: 15px;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border);
  }

  /* --- VS Code Like Editor --- */
  .editor-container {
      border-radius: 10px;
      overflow: hidden;
      background: #1d1f21;
      /* Prism Tomorrow BG */
      border: 1px solid var(--border);
      margin-top: 20px;
  }

  .editor-top {
      background: #252526;
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .dots {
      display: flex;
      gap: 6px;
  }

  .dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
  }

  .r {
      background: #ff5f56;
  }

  .y {
      background: #ffbd2e;
  }

  .g {
      background: #27c93f;
  }

  .copy-btn {
      background: var(--accent);
      color: white;
      border: none;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
      font-weight: 600;
      transition: 0.2s;
  }

  .copy-btn:hover {
      background: #005fa3;
  }

  /* Multi-color adjustments for Prism */
  pre[class*="language-"] {
      margin: 0 !important;
      padding: 20px !important;
      font-size: 14px !important;
      background: transparent !important;
  }

  /* --- Updated Header Section --- */
  .page-header {
      text-align: center;
      margin-bottom: 50px;
      padding-top: 80px;
      /* Ye line h1 ko top se space degi taakay animation hide na ho */
      position: relative;
      z-index: 10;
  }

  .page-header h1 {
      font-size: 2.5rem;
      color: var(--white);
      margin: 0 0 10px 0;
      /* Margin reset kiya taakay koi default issue na ho */
      line-height: 1.2;
  }

  /* --- Container Adjustment --- */
  .container {
      max-width: 850px;
      margin: 0 auto;
      padding: 0 15px;
      /* Mobile par sides se gap ke liye */
      animation: fadeInUp 0.8s ease-out forwards;
      /* forwards lagane se animation end state par ruk jayegi */
  }

  /* --- Desktop & Global Scrollbar Styling --- */

  /* 1. Poore page (body) aur har element ke liye scrollbar ki width */
  ::-webkit-scrollbar {
      width: 10px;
      /* Vertical scrollbar ki motai */
      height: 8px;
      /* Horizontal scrollbar ki motai */
  }

  /* 2. Scrollbar Track (Peeche wala hissa) */
  ::-webkit-scrollbar-track {
      background: var(--bg);
      /* Dark background */
  }

  /* 3. Scrollbar Handle (Thumb) - Jo move hota hai */
  ::-webkit-scrollbar-thumb {
      background: #21262d;
      /* Shuru mein thora halka color */
      border-radius: 20px;
      border: 2px solid var(--bg);
      /* Track aur handle ke darmiyan gap */
      transition: 0.3s ease;
  }

  /* 4. Handle Hover - Jab mouse upar le jayen */
  ::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
      /* ZainCodes Blue on Hover */
  }

  /* --- Code Editor ke liye specific (optional) --- */
  pre[class*="language-"]::-webkit-scrollbar-thumb {
      background: #30363d;
      /* Editor ke andar thora zyada visible */
  }

  pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
  }

  /* Firefox Support */
  * {
      scrollbar-width: thin;
      scrollbar-color: #30363d var(--bg);
  }

  /* Code Container Style - No Horizontal Scroll, Auto Wrap */
  .vs-code-display {
      background-color: #1e1e1e; 
      color: #d4d4d4; 
      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
      padding: 20px;
      border-radius: 8px;
      line-height: 1.5;
      /* Horizontal scroll khatam karne aur wrap karne ke liye ye settings: */
      overflow-x: hidden;
      /* Horizontal scroll bar ko hide karta ha */
      white-space: pre-wrap;
      /* Code ki formatting rakhta ha par lambi line ko wrap karta ha */
      word-wrap: break-word;
      /* Bohat lambe words ko break karke niche lata ha */
      word-break: break-all;
      /* Ensures no overflow on mobile */
      border: 1px solid var(--border);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      margin: 20px 0;
  }


  /* Syntax Highlighting Colors (Custom) */
  .vs-code-display .tag {
      color: #569cd6;
  }

  /* Blue for tags */
  .vs-code-display .attr {
      color: #9cdcfe;
  }

  /* Light Blue for attributes */
  .vs-code-display .val {
      color: #ce9178;
  }

  /* Orange/Brown for strings */
  .vs-code-display .comm {
      color: #6a9955;
  }

  /* Green for comments */
  .vs-code-display .doctype {
      color: #808080;
  }

  /* Gray for doctype */