/* Recognition Physics Design System - Apple-Inspired Clean v3.0 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=SF+Mono:wght@400;500;600&display=swap');

:root { 
  /* Core Colors - Clean & Minimal */
  --white: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --black: #000000;
  
  /* Apple-inspired Blues */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  
  /* Accent Colors */
  --accent: #007AFF;
  --accent-hover: #0056CC;
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  
  /* Scientific Gold */
  --gold: #f59e0b;
  --gold-light: #fbbf24;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body { 
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--white);
  color: var(--gray-900);
  line-height: 1.6;
  font-size: var(--text-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--gray-900);
  margin: 0;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  margin: 0;
  color: var(--gray-700);
}

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

a:hover {
  text-decoration: underline;
}

/* Layout */
.grid-container { 
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
}

/* Header - Hero Section */
.meta-principle { 
  background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-700) 100%);
  color: var(--white);
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  position: relative;
}

.meta-principle h1 {
  font-size: var(--text-5xl);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--white);
  letter-spacing: -0.025em;
}

.meta-principle p {
  font-size: var(--text-lg);
  color: var(--gray-100);
  max-width: 42rem;
  margin: 0 auto var(--space-lg) auto;
}

.meta-principle p:last-of-type {
  margin-bottom: 0;
}

/* Navigation */
.foundation-nav { 
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-section {
  display: flex;
  border-bottom: 1px solid var(--gray-100);
}

.nav-section:last-child {
  border-bottom: none;
}

.nav-section-label {
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-md) var(--space-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid var(--gray-200);
  min-width: 8rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

.foundation-nav a { 
  padding: var(--space-md) var(--space-lg);
  color: var(--gray-700);
  font-weight: 500;
  border-right: 1px solid var(--gray-100);
  transition: all 0.2s ease;
  flex: 1;
  min-width: 8rem;
  text-align: center;
  white-space: nowrap;
}

.foundation-nav a:hover { 
  background: var(--blue-50);
  color: var(--accent);
}

.foundation-nav a:last-child {
  border-right: none;
}

/* Main Content */
.content-container {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--space-2xl);
  flex: 1;
}

/* Theory Sections */
.theory-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.theory-section h2 {
  margin-bottom: var(--space-lg);
  color: var(--gray-900);
}

.theory-section h3 {
  margin: var(--space-xl) 0 var(--space-md) 0;
  color: var(--gray-800);
}

.theory-section p {
  margin-bottom: var(--space-md);
}

.theory-section p:last-child {
  margin-bottom: 0;
}

.theory-section ul, 
.theory-section ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.theory-section li {
  margin-bottom: var(--space-sm);
  color: var(--gray-700);
}

/* Key Insights */
.key-insight {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-left: 4px solid var(--accent);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin: var(--space-lg) 0;
}

.key-insight p {
  color: var(--gray-800);
  margin: 0;
}

.key-insight strong {
  color: var(--accent);
}

/* Math Definitions */
.math-definition {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
}

.math-definition h2 {
  margin-bottom: var(--space-lg);
  color: var(--gray-900);
}

.math-definition p {
  margin-bottom: var(--space-md);
}

.math-definition p:last-child {
  margin-bottom: 0;
}

/* Interactive Sections */
.interactive-section {
  background: var(--gray-900);
  color: var(--white);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-lg);
}

.interactive-section h2 {
  color: var(--white);
  margin-bottom: var(--space-lg);
}

.interactive-section p {
  color: var(--gray-100);
  margin-bottom: var(--space-md);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--accent);
  color: var(--white);
  font-weight: 500;
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.button.gold {
  background: var(--gold);
  color: var(--white);
}

.button.gold:hover {
  background: var(--gold-light);
}

/* Grid Layouts */
.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}

table th {
  background: var(--gray-50);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-weight: 600;
  color: var(--gray-900);
  border-bottom: 1px solid var(--gray-200);
  font-size: var(--text-sm);
}

table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

table tr:last-child td {
  border-bottom: none;
}

table tr:hover {
  background: var(--gray-50);
}

/* Code Blocks */
pre {
  background: var(--gray-900);
  color: var(--gray-100);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--space-lg) 0;
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: var(--text-sm);
  line-height: 1.5;
}

code {
  font-family: 'SF Mono', 'Monaco', monospace;
  font-size: var(--text-sm);
  background: var(--gray-100);
  color: var(--gray-800);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* Canvas & Diagrams */
canvas {
  border-radius: var(--radius-lg);
  background: var(--gray-900);
  display: block;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
}

.soul-diagram, 
.diagram-container {
  text-align: center;
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

/* Dark Mode Toggle */
#dark-mode-toggle {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

#dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* Footer */
footer { 
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: var(--space-xl);
  text-align: center;
  color: var(--gray-600);
  margin-top: auto;
}

footer p {
  color: var(--gray-600);
  margin-bottom: var(--space-md);
}

.back-to-top {
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-md);
}

/* Responsive Design */
@media (max-width: 768px) {
  .content-container {
    padding: var(--space-lg);
  }
  
  .theory-section {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
  }
  
  .meta-principle {
    padding: var(--space-xl) var(--space-lg);
  }
  
  .meta-principle h1 {
    font-size: var(--text-3xl);
  }
  
  .meta-principle p {
    font-size: var(--text-base);
  }
  
  .nav-section {
    flex-direction: column;
  }
  
  .nav-section-label {
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    min-width: auto;
  }
  
  .nav-links {
    flex-direction: column;
  }
  
  .foundation-nav a {
    border-right: none;
    border-bottom: 1px solid var(--gray-100);
    min-width: auto;
  }
  
  .foundation-nav a:last-child {
    border-bottom: none;
  }
  
  .button-grid {
    grid-template-columns: 1fr;
  }
  
  #dark-mode-toggle {
    position: static;
    margin-top: var(--space-lg);
  }
  
  table {
    font-size: var(--text-sm);
  }
  
  canvas {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  .content-container {
    padding: var(--space-md);
  }
  
  .theory-section {
    padding: var(--space-md);
  }
  
  .meta-principle {
    padding: var(--space-lg) var(--space-md);
  }
} 

/* ==============================
   Encyclopedia v6.0 - Academic Style
   Matching academic.html design exactly
   ============================== */

/* Base container */
.template-section.encyclopedia-entry {
  padding: 2rem 0;
  background: #ffffff;
  position: relative;
}

.template-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}

.template-reading {
  max-width: 100%;
  line-height: 1.7;
}

/* Hero section with framed box - matching academic.html */
.encyclopedia-hero {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* Hero/Title section - matching academic.html */
.encyclopedia-entry h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0.75rem 0 1rem 0;
  color: #000;
}

/* Accent text in titles */
.template-accent-text {
  color: #ff006e;
}

/* Breadcrumb badge */
.template-hero-badge {
  font-size: 0.75rem;
  color: #475569;
  margin-bottom: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Lead text in hero - prominent intro paragraph */
.encyclopedia-hero .lead-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #475569;
  margin: 0.75rem 0 0 0;
  font-weight: 400;
}

/* Lead text outside hero */
.lead-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #1e293b;
  margin-bottom: 2rem;
  font-weight: 400;
}

/* Meta badges - inside hero box */
.encyclopedia-hero .meta-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 1rem 0 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Meta badges outside hero */
.meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 2rem 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.meta-badges span {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
}

.category-badge::before {
  content: "Category: ";
  font-weight: 400;
  color: #94a3b8;
}

.difficulty-badge::before {
  content: "Level: ";
  font-weight: 400;
  color: #94a3b8;
}

.tags::before {
  content: "Topics: ";
  font-weight: 400;
  color: #94a3b8;
}

/* Summary/Essence - as lead text */
.summary, .essence {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #1e293b;
  margin: 1.5rem 0 2rem 0;
  font-weight: 400;
}

/* Definition box - academic expansion style */
.definition-box {
  background: #fafbfc;
  border-left: 3px solid #ff006e;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 0 8px 8px 0;
  position: relative;
}

.definition-box h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #002855;
}

.definition-box p {
  color: #1e293b;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.definition-box p:last-child {
  margin-bottom: 0;
}

/* Math notes - monospace style */
.math-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  color: #475569;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Why it matters - card style */
.why-matters-callout {
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  transition: all 0.2s;
}

.why-matters-callout:hover {
  border-color: #ff006e;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.why-matters-callout h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #002855;
}

.why-matters-callout ul {
  list-style: none;
  padding: 0;
}

.why-matters-callout li {
  position: relative;
  padding: 0.5rem 0;
  color: #1e293b;
  line-height: 1.6;
  font-size: 0.95rem;
}

.why-matters-callout li::before {
  content: "→";
  color: #ff006e;
  margin-right: 0.75rem;
}

.why-matters-callout li strong {
  color: #002855;
  font-weight: 600;
}

/* Section headings - academic style */
.encyclopedia-entry h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  margin: 3rem 0 1.5rem 0;
  color: #002855;
  position: relative;
}

.encyclopedia-entry h2:first-of-type {
  margin-top: 2rem;
}

.encyclopedia-entry h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 2rem 0 1rem 0;
  color: #002855;
}

/* Mechanism steps - numbered list style */
.mechanism-steps {
  margin: 2rem 0;
  counter-reset: step-counter;
}

.mechanism-steps .step {
  background: transparent;
  border: none;
  padding: 1rem 0 1rem 2.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  counter-increment: step-counter;
}

.mechanism-steps .step::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  background: #ff006e;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.mechanism-steps .step h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #002855;
}

.mechanism-steps .step p {
  color: #1e293b;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}

/* Properties grid - calc card style */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.property-card {
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s;
}

.property-card:hover {
  border-color: #ff006e;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.property-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #002855;
  margin: 0 0 0.75rem 0;
}

.property-card p {
  font-size: 0.95rem;
  color: #1e293b;
  line-height: 1.6;
  margin: 0;
}

.property-card .value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  color: #ff006e;
  font-weight: 600;
  margin: 0.5rem 0;
  display: block;
}

/* Math section - formula box style */
details.math-section {
  margin: 2rem 0;
}

details.math-section summary {
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  color: #002855;
  background: #fafbfc;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 1rem;
}

details.math-section summary:hover {
  background: #f8f9fa;
  color: #ff006e;
}

details.math-section[open] summary {
  background: #fafbfc;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

.math-content {
  padding: 1.5rem;
  background: #fafbfc;
  border-radius: 0 0 8px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.125rem;
}

/* Testable predictions - calc card style */
.testable-box {
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  transition: all 0.2s;
}

.testable-box:hover {
  border-color: #ff006e;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.testable-box h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #002855;
}

.testable-box ul {
  list-style: none;
  padding: 0;
}

.testable-box li {
  padding: 0.75rem 0;
  position: relative;
  color: #1e293b;
  line-height: 1.6;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.testable-box li:last-child {
  border-bottom: none;
}

.testable-box li.prediction {
  font-weight: 500;
}

.testable-box li.test-method {
  margin-top: 0.5rem;
  color: #475569;
  font-size: 0.875rem;
}

/* Misconceptions - comparison style */
.misconception {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 2rem 0;
}

.misconception .wrong {
  color: #475569;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  text-decoration: line-through;
  display: flex;
  align-items: flex-start;
}

.misconception .wrong::before {
  content: "✗";
  color: #dc2626;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.misconception .right {
  color: #002855;
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
}

.misconception .right::before {
  content: "✓";
  color: #16a34a;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* FAQ section - collapsible style */
.faq-section {
  margin: 3rem 0;
}

.faq-section details {
  margin-bottom: 1rem;
}

.faq-section summary {
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  color: #002855;
  transition: all 0.2s ease;
  font-size: 1rem;
  background: #fafbfc;
  border-radius: 8px;
}

.faq-section summary:hover {
  background: #f8f9fa;
  color: #ff006e;
}

.faq-section details[open] summary {
  background: #fafbfc;
  color: #ff006e;
  border-radius: 8px 8px 0 0;
}

.faq-section details p {
  padding: 1.5rem;
  background: #fafbfc;
  border-radius: 0 0 8px 8px;
  color: #1e293b;
  line-height: 1.6;
  margin: 0;
  font-size: 0.95rem;
}

/* Related topics - calc grid style */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.related-card {
  display: block;
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 1.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.related-card:hover {
  border-color: #ff006e;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.related-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #002855;
  margin: 0 0 0.5rem 0;
}

.related-card p {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
}

.relation-type {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ff006e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Further reading - expandable style */
details.further-reading {
  margin: 3rem 0;
}

details.further-reading summary {
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  color: #002855;
  background: #fafbfc;
  font-size: 1rem;
  transition: all 0.2s ease;
  border-radius: 8px;
}

details.further-reading summary:hover {
  background: #f8f9fa;
  color: #ff006e;
}

details.further-reading[open] summary {
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

details.further-reading ul {
  padding: 1.5rem;
  list-style: none;
  background: #fafbfc;
  border-radius: 0 0 8px 8px;
}

details.further-reading li {
  padding: 0.5rem 0;
}

details.further-reading li:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

details.further-reading a {
  color: #1e293b;
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}

details.further-reading a:hover {
  color: #ff006e;
  text-decoration: underline;
}

/* Content paragraphs - academic style */
.encyclopedia-entry p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #1e293b;
  margin-bottom: 1.25rem;
}

.encyclopedia-entry ul, .encyclopedia-entry ol {
  margin: 1.5rem 0;
  padding-left: 0;
  list-style: none;
}

.encyclopedia-entry li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
  color: #1e293b;
  position: relative;
  padding-left: 1.75rem;
}

.encyclopedia-entry ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #ff006e;
  font-weight: 600;
}

.encyclopedia-entry ol {
  counter-reset: ol-counter;
}

.encyclopedia-entry ol li {
  counter-increment: ol-counter;
}

.encyclopedia-entry ol li::before {
  content: counter(ol-counter) ".";
  position: absolute;
  left: 0;
  color: #ff006e;
  font-weight: 600;
}

/* Links within content - subtle underline */
.encyclopedia-entry a {
  color: #002855;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 0, 110, 0.2);
  transition: all 0.2s ease;
}

.encyclopedia-entry a:hover {
  color: #ff006e;
  border-bottom-color: #ff006e;
}

/* Additional academic styles */

/* Constant/value displays */
.constant-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: #fafbfc;
  border-radius: 8px;
  margin: 1.5rem 0;
}

.constant-name {
  font-weight: 700;
  font-size: 1.125rem;
  color: #002855;
}

.constant-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 1.125rem;
  color: #ff006e;
}

/* Theorem boxes */
.theorem-box {
  background: #0a0e1a;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
}

.theorem-box h3 {
  color: #60a5fa;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.theorem-box .proof {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
}

/* Derivation links */
.derivation-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #ff006e;
  text-decoration: none;
  font-weight: 500;
}

.derivation-link:hover {
  text-decoration: underline;
}

/* Key test indicators */
.key-test {
  display: inline-block;
  background: rgba(255, 0, 110, 0.1);
  color: #ff006e;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.5rem;
}

/* Academic notes */
.academic-note {
  background: linear-gradient(135deg, #fffbf0 0%, #fff7e6 100%);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  color: #713f12;
}

.academic-note strong {
  color: #92400e;
}

/* Reading tips */
.reading-tip {
  background: rgba(255, 0, 110, 0.05);
  border-left: 3px solid #ff006e;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0 8px 8px 0;
}

.reading-tip p {
  margin: 0;
  color: #1e293b;
  font-size: 0.95rem;
  line-height: 1.6;
}

.reading-tip strong {
  color: #002855;
  font-weight: 600;
}

/* Plain language box */
.plain-language {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.plain-language p {
  color: #075985;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.plain-language p:last-child {
  margin-bottom: 0;
}

/* Accent bar */
.template-accent-bar {
  width: 60px;
  height: 3px;
  background: #ff006e;
  margin-bottom: 1rem;
}

/* Section title styling - matching academic */
.template-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  margin: 3rem 0 1.5rem 0;
  color: #002855;
  position: relative;
}

/* Theorem/detail grid */
.theorems-grid {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.theorem-detail {
  background: transparent;
  border: none;
  margin-bottom: 1rem;
}

.theorem-detail summary {
  padding: 1rem 1.5rem;
  background: #fafbfc;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #002855;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.theorem-detail summary:hover {
  background: #f8f9fa;
  color: #ff006e;
}

.theorem-detail[open] summary {
  background: #fafbfc;
  color: #ff006e;
  border-radius: 8px 8px 0 0;
}

.theorem-detail .theorem-content {
  padding: 1.5rem;
  background: #fafbfc;
  border-radius: 0 0 8px 8px;
  line-height: 1.7;
}

.theorem-detail .theorem-content p {
  margin-bottom: 1rem;
  color: #1e293b;
}

.theorem-detail .theorem-content p:last-child {
  margin-bottom: 0;
}

.theorem-detail .theorem-content strong {
  color: #002855;
  font-weight: 600;
}

.theorem-detail .theorem-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
}

/* Constants list */
.constants-list {
  margin: 2rem 0;
}

.constant {
  margin-bottom: 2rem;
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s;
}

.constant:hover {
  border-color: #ff006e;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.constant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.constant-desc {
  color: #475569;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

.constant details {
  margin-top: 1rem;
}

.constant details summary {
  cursor: pointer;
  color: #ff006e;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 0;
}

.constant details summary:hover {
  text-decoration: underline;
}

.details-content {
  padding: 1rem 0 0 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 0.5rem;
}

.details-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  background: #f8f9fa;
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
}

.details-content ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}

.details-content li {
  padding: 0.5rem 0;
  color: #475569;
  font-size: 0.875rem;
}

/* Calculation grid */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.calc-card {
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s;
}

.calc-card:hover {
  border-color: #ff006e;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.calc-card h3 {
  color: #002855;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.calc-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  color: #ff006e;
  font-weight: 600;
  margin: 0.5rem 0;
  display: block;
}

.calc-formula {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  color: #475569;
  margin: 0.5rem 0;
  display: block;
}

/* Comparison cards */
.comparison-card {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.comparison-card h3 {
  color: #002855;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.comparison-point {
  display: flex;
  align-items: flex-start;
  margin: 0.75rem 0;
}

.comparison-point::before {
  content: "→";
  color: #ff006e;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* Interactive terms */
.term {
  border: none;
  cursor: pointer;
  position: relative;
  background: none;
  padding: 0 2px;
  margin: 0 -2px;
  font: inherit;
  color: inherit;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 0, 110, 0.10);
  transition: all 0.15s ease;
}

.term:hover {
  background: rgba(255, 0, 110, 0.08);
  color: #ff006e;
  box-shadow: inset 0 0 0 1px rgba(255, 0, 110, 0.25);
}

.term.active {
  background: rgba(255, 0, 110, 0.12);
  color: #ff006e;
  box-shadow: inset 0 0 0 1px #ff006e;
  font-weight: 500;
}

/* Expansion boxes for terms */
.expansion {
  display: none;
  background: #fafbfc;
  border-left: 3px solid #ff006e;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  font-size: 0.95rem;
  line-height: 1.6;
  border-radius: 0 8px 8px 0;
}

.expansion.active {
  display: block;
}

/* Formula display sections */
.formula-section {
  background: #fafbfc;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  text-align: center;
}

.formula-section .formula {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  color: #002855;
  margin: 1rem 0;
  display: block;
}

.formula-section .description {
  color: #475569;
  font-size: 0.95rem;
  margin-top: 1rem;
  text-align: left;
}

@media (max-width: 768px) {
  .template-section.encyclopedia-entry {
    padding: 1rem;
  }
  
  .template-container {
    padding: 0 1rem;
  }
  
  .encyclopedia-hero {
    padding: 1rem;
  }
  
  .calc-grid {
    grid-template-columns: 1fr;
  }
  
  .template-reading h1 {
    font-size: 1.875rem;
  }
  
  .properties-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }
}