:root{
      --primary:#2563eb;
      --text:#1f2937;
      --light:#6b7280;
      --border:#e5e7eb;
      --background:#f8fafc;
      --card:#ffffff;
      --success:#ecfdf5;
      --warning:#fff7ed;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
      color:var(--text);
      background:var(--background);
      line-height:1.75;
      font-size:17px;
    }

    .container{
      max-width:900px;
      margin:auto;
      padding:60px 24px;
    }

    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:16px;
      padding:50px;
      box-shadow:
      0 8px 30px rgba(0,0,0,.04);
    }

    @media(max-width:768px){

      .card{
        padding:30px 22px;
      }

      .container{
        padding:20px;
      }

    }

    h1,h2,h3,h4{
      line-height:1.25;
      font-weight:700;
      margin-top:2em;
      margin-bottom:.6em;
    }

    h1{
      font-size:2.6rem;
      margin-top:0;
    }

    h2{
      font-size:1.7rem;
      border-bottom:1px solid var(--border);
      padding-bottom:.4rem;
    }

    h3{
      font-size:1.25rem;
    }

    p{
      margin-bottom:1.2rem;
    }

    ul,ol{
      margin:1rem 0 1.5rem 1.5rem;
    }

    li{
      margin-bottom:.5rem;
    }

    a{
      color:var(--primary);
      text-decoration:none;
    }

    a:hover{
      text-decoration:underline;
    }

    small{
      color:var(--light);
    }

    hr{
      border:none;
      border-top:1px solid var(--border);
      margin:2.5rem 0;
    }

/* Table of contents */

.toc{
  background:#f3f4f6;
  border-radius:12px;
  padding:24px;
  margin:2rem 0;
}

.toc ul{
  margin:.75rem 0 0 1.25rem;
}

/* Tables */

.table-responsive{
  width:100%;
  overflow-x:auto;
  margin:2rem 0;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:600px;
}

th{
  background:#f8fafc;
  text-align:left;
  font-weight:600;
}

th,
td{
  padding:14px 16px;
  border:1px solid var(--border);
  vertical-align:top;
}

tbody tr:nth-child(even){
  background:#fafafa;
}

/* Notice boxes */

.notice{
  padding:18px 22px;
  border-left:5px solid var(--primary);
  background:#eff6ff;
  border-radius:8px;
  margin:2rem 0;
}

.success{
  background:var(--success);
  border-left-color:#16a34a;
}

.warning{
  background:var(--warning);
  border-left-color:#ea580c;
}

/* Quotes */

blockquote{
  border-left:5px solid var(--primary);
  padding:1rem 1.5rem;
  margin:2rem 0;
  background:#f9fafb;
  font-style:italic;
}

/* Code */

code{
  background:#f3f4f6;
  padding:.2rem .4rem;
  border-radius:4px;
  font-size:.95em;
}

/* Footer */

.footer{
  margin-top:4rem;
  text-align:center;
  color:var(--light);
  font-size:.9rem;
}

/* Print */

@media print{

  body{
    background:#fff;
  }

  .card{
    border:none;
    box-shadow:none;
    padding:0;
  }

  .toc{
    display:none;
  }

  a{
    color:#000;
  }

}

/* Dark Mode */

@media (prefers-color-scheme: dark){

  :root{
    --background:#0f172a;
    --card:#111827;
    --text:#f3f4f6;
    --light:#9ca3af;
    --border:#374151;
  }

  .toc{
    background:#1f2937;
  }

  .notice{
    background:#172554;
  }

  .success{
    background:#052e16;
  }

  .warning{
    background:#431407;
  }

  table th{
    background:#1f2937;
  }

  tbody tr:nth-child(even){
    background:#18212f;
  }

  blockquote{
    background:#1f2937;
  }

  code{
    background:#374151;
  }

}