/* Inter Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* KaTeX CSS Import */
@import url('https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css');

/* Highlight.js CSS Import */
@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css');

/* CSS Variables for Color System */
:root {
  /* Stone Color Palette */
  --stone-50: #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;
  
  /* Slate Color Palette */
  --slate-200: #E2E8F0;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  
  /* Semantic Colors */
  --emerald-100: #D1FAE5;
  --emerald-200: #A7F3D0;
  --emerald-500: #10B981;
  
  --red-100: #FEE2E2;
  --red-200: #FCA5A5;
  --red-300: #FCA5A5;
  --red-800: #991B1B;
  
  --amber-200: #FDE68A;
  --amber-300: #FDE68A;
  --amber-800: #92400E;
  
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-600: #2563EB;
  --blue-800: #1E40AF;
  
  --sky-600: #0284C7;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-600: #4F46E5;
  
  /* Typography */
  --font-family: 'Inter', sans-serif;
  
  /* Layout */
  --max-width: 64rem; /* 5xl */
  --border-radius: 0.5rem;
  --border-radius-lg: 0.75rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Base Styles */
body {
  font-family: var(--font-family);
  background-color: var(--stone-100);
  color: var(--stone-900);
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout Components */
.blog-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem;
}

.header {
  background-color: var(--stone-200);
  padding: 2.5rem 1.5rem;
  border-radius: var(--border-radius-lg);
  margin-bottom: 2rem;
  text-align: center;
}

.header h1 {
  color: var(--stone-900);
}

.header p {
  color: var(--stone-700);
}

.content-card {
  background-color: #FFFFFF;
  padding: 1.5rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}

.content-card img {
  max-width: 100%;
  height: auto;
  display: block; /* Ensures margin auto works correctly */
}

.section-header {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--stone-700);
  border-bottom: 2px solid var(--stone-300);
  padding-bottom: 0.5rem;
}

/* Code Blocks */
.code-block {
  background-color: #282c34; /* atom-one-dark background */
  padding: 1rem;
  border-radius: var(--border-radius);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.5;
}

pre code {
  display: block;
  white-space: pre;
}

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Interactive Elements */
.mask-grid {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--stone-300);
  border-radius: var(--border-radius);
  background-color: var(--stone-50);
  justify-content: center;
  margin: 1rem auto;
  max-width: 300px;
}

.mask-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 1.25rem;
}

.mask-zero {
  background-color: #FFFFFF;
  border: 1px solid var(--stone-200);
  color: var(--stone-900);
}

.mask-inf {
  background-color: var(--red-100);
  border: 1px solid var(--red-300);
  color: var(--red-800);
}

.mask-nan {
  background-color: var(--amber-200);
  border: 1px solid var(--amber-300);
  color: var(--amber-800);
  font-size: 0.8rem;
}

.mask-sink {
  background-color: var(--blue-100);
  border: 1px solid var(--blue-200);
  color: var(--blue-800);
}

/* Matrix and Vector Components */
.matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--stone-300);
  border-radius: var(--border-radius);
  background-color: var(--stone-50);
  max-width: 220px;
}

.vector {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--stone-300);
  border-radius: var(--border-radius);
  background-color: var(--stone-50);
  max-width: 120px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background-color: #FFFFFF;
  border: 1px solid var(--stone-200);
  font-weight: 500;
  min-width: 80px;
}

.highlight-result {
  background-color: var(--emerald-100);
  border-color: var(--emerald-200);
}

.highlight-mxfp4 {
  background-color: var(--indigo-100);
  border-color: var(--indigo-200);
}

/* Chart Container */
.chart-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  height: 300px;
  max-height: 400px;
}

@media (min-width: 768px) {
  .chart-container {
    height: 350px;
  }
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }
.text-slate-700 { color: var(--slate-700); }
.text-slate-800 { color: var(--slate-800); }

.text-stone-700 { color: var(--stone-700); }
.text-stone-900 { color: var(--stone-900); }

.text-red-700 { color: var(--red-800); }
.text-blue-600 { color: var(--blue-600); }

.bg-slate-100 { background-color: var(--slate-200); }
.bg-stone-50 { background-color: var(--stone-50); }

.p-1 { padding: 0.25rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }

.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: var(--border-radius); }

.border { border: 1px solid var(--stone-200); }
.border-stone-200 { border-color: var(--stone-200); }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-12 > * + * { margin-top: 3rem; }

.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\\:p-8 { padding: 2rem; }
}

@media (min-width: 640px) {
  .sm\\:text-4xl { font-size: 2.25rem; }
  .sm\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

.max-w-5xl { max-width: 64rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.shadow-sm { box-shadow: var(--shadow-sm); }
.tracking-tight { letter-spacing: -0.025em; }

.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }

.hover\\:text-slate-800:hover { color: var(--slate-800); }
.hover\\:underline:hover { text-decoration: underline; }