/* ─── Reset & Base ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --indigo-50:  #EEF2FF;
  --indigo-200: #C7D2FE;
  --indigo-400: #818CF8;
  --indigo-600: #4F46E5;
  --indigo-800: #3730A3;
  --slate-100:  #F1F5F9;
  --slate-200:  #E2E8F0;
  --slate-400:  #94A3B8;
  --slate-600:  #64748B;
  --slate-800:  #334155;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* ─── Method Page Layout ─── */
.method-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 48px;
  border-bottom: 1px solid var(--slate-200);
}

.back-link {
  font-size: 13px;
  color: var(--slate-600);
  letter-spacing: 0.5px;
  transition: color 0.2s;
}

.back-link:hover { color: var(--indigo-600); }

.stage-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.stage       { color: var(--slate-400); }
.stage.done  { color: var(--slate-400); }
.stage.current { color: var(--indigo-600); font-weight: 500; }
.stage-sep   { color: var(--slate-200); }

.method-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 52px 24px 80px;
}

/* ─── Method Header ─── */
.badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--indigo-600);
  background: var(--indigo-50);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.method-header h1 {
  font-size: 34px;
  font-weight: 500;
  color: var(--slate-800);
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.method-desc {
  font-size: 15px;
  color: var(--slate-600);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 40px;
}

/* ─── Simulator ─── */
.simulator-section canvas {
  display: block;
  width: 100%;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  cursor: pointer;
}

.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 22px;
}

.ctrl-group label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--slate-600);
  margin-bottom: 8px;
  font-weight: 500;
}

.ctrl-val {
  color: var(--indigo-600);
  font-weight: 500;
}

.ctrl-group input[type=range] {
  width: 100%;
  accent-color: var(--indigo-600);
  cursor: pointer;
}

.ctrl-hint {
  font-size: 11px;
  color: var(--slate-400);
  margin-top: 7px;
  line-height: 1.6;
}

.stats-row {
  display: flex;
  gap: 0;
  margin-top: 22px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  overflow: hidden;
}

.stat {
  flex: 1;
  padding: 16px 20px;
  border-right: 1px solid var(--slate-200);
}

.stat:last-child { border-right: none; }

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--slate-400);
  display: block;
  margin-bottom: 6px;
}

.stat-val {
  font-size: 20px;
  font-weight: 500;
  color: var(--slate-800);
}

.insight-box {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--indigo-50);
  border-radius: 8px;
  font-size: 13px;
  color: var(--indigo-800);
  line-height: 1.7;
  border-left: 3px solid var(--indigo-400);
  transition: background 0.3s;
}

/* ─── Publications Page ─── */
.pub-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 52px 24px 100px;
}

.pub-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--slate-800);
  line-height: 1.35;
  letter-spacing: -0.4px;
  margin-top: 20px;
  margin-bottom: 48px;
  max-width: 680px;
}

.pub-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--slate-400);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--slate-200);
}

.pub-abstract {
  font-size: 15px;
  color: var(--slate-600);
  line-height: 1.85;
  max-width: 680px;
  margin-bottom: 56px;
}

.pub-framework {
  width: 100%;
  max-width: 680px;
  border-radius: 12px;
  border: 1px solid var(--slate-200);
  display: block;
}