@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700;800&display=swap');

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

:root {
  --bg: #0f1115; 
  --surface: #191c23; 
  --surface2: #262b36;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  --text: #f8f9fa;
  --muted: #8f9bb3;
  --dim: #545d73;
  --accent: #FF7D00; 
  --gold: #f5c842;
  --gold-dim: rgba(245,200,66,0.15);
  --green: #23D18B;
  --mono: 'DM Mono', monospace;
  --sans: 'Syne', sans-serif;
}

/* 網頁大背景，稍微留點邊距看起來像獨立圖卡 */
body {
  background: var(--bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  padding: 10px; /* 這裡原本是 40px 20px，改小就能減少最外圍的黑邊 */
  display: flex;
  justify-content: center;
  color: var(--text);
}

/* 中央的主容器 */
.container {
  width: 100%;
  max-width: 1200px;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 30px 40px; /* 這裡原本是 50px 60px，改小就能縮減框內的上下左右留白 */
  display: flex;
  flex-direction: column;
  gap: 30px; /* 這裡原本是 50px，改小能讓上下兩個區塊靠得更近一點 */
  container-type: inline-size;
}

.slide-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.divider {
  height: 1px;
  background: var(--border-strong);
  margin: 10px 0;
}

/* 文字設定 */
.eyebrow { font-family: var(--mono); font-size: max(12px, 1.3cqi); letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; }
h1 { font-size: max(24px, 3.8cqi); font-weight: 800; line-height: 1.1; margin: 10px 0;}
h1 span { color: var(--accent); }
/* 標題下方的說明小字 */
.subtitle { 
  font-family: var(--mono); 
  font-size: max(15px, 1.6cqi); /* 稍微放大 */
  color: #cbd5e1; /* 從暗灰改為明亮的淺灰 */
  font-weight: 500; /* 加粗，去除原本纖細的感覺 */
  margin-top: 8px; 
}

/* 三個框框裡的上方標籤 (例如 Workflow Speed) */
.stat-label { 
  font-family: var(--mono); 
  font-size: max(12px, 1.3cqi); /* 放大 */
  color: #e2e8f0; /* 改為非常接近白色的亮灰 */
  letter-spacing: 0.08em; 
  text-transform: uppercase; 
  margin-bottom: 0.6cqi; 
  font-weight: 600; /* 明顯加粗 */
}

/* 三個框框裡的下方說明 (例如 Fastest image opening time) */
.stat-sub { 
  font-family: var(--mono); 
  font-size: max(12px, 1.3cqi); /* 放大 */
  color: #cbd5e1; /* 調亮 */
  margin-top: 0.8cqi; 
  font-weight: 500; /* 加粗 */
}

/* 卡片與資料列 */
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; }
.stat-card { 
  background: var(--surface); 
  border: 1px solid var(--border); 
  border-radius: 12px; 
  padding: 2cqi 2.5cqi; 
  /* 加上轉場動畫屬性 */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
/* 滑鼠碰到的浮起效果 */
.stat-card:hover { 
  transform: translateY(-6px); 
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 125, 0, 0.5); /* 邊框會微微亮起橘色 */
}
.stat-label { font-family: var(--mono); font-size: max(10px, 1.1cqi); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.6cqi; }
.stat-val { font-size: max(20px, 3.1cqi); font-weight: 800; line-height: 1; }
.stat-sub { font-family: var(--mono); font-size: max(10px, 1.1cqi); color: var(--muted); margin-top: 0.6cqi; }

.feature-block { 
  background: var(--surface); 
  border: 1px solid var(--border); 
  border-radius: 12px; 
  padding: 2cqi 2.5cqi; 
  /* 加上轉場動畫屬性 */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}
/* 滑鼠碰到的浮起效果 */
.feature-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
.feature-name { font-size: max(16px, 2cqi); font-weight: 700; margin-bottom: 1.6cqi; display: flex; align-items: center; gap: 1cqi; }
.crown-badge { font-family: var(--mono); font-size: max(10px, 1.1cqi); background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(245,200,66,0.3); border-radius: 6px; padding: 0.5cqi 1cqi; }

.bar-row { display: flex; align-items: center; gap: 1.3cqi; margin-bottom: 1.1cqi; }
.bar-row:last-child { margin-bottom: 0; }
.bar-name { 
  font-family: var(--mono); 
  font-size: max(12px, 1.5cqi); 
  color: var(--muted); 
  width: 180px; /* 改為固定寬度 */
  text-align: right; 
  flex-shrink: 0; /* 防止被進度條擠壓 */
}
.bar-name.phd-name { color: var(--accent); font-weight: bold; }
.bar-track { flex: 1; height: 1.3cqi; background: rgba(255,255,255,0.05); border-radius: 8px; }

/* 長條圖動畫 */
.bar-fill { 
  height: 100%; 
  border-radius: 8px; 
  width: 0%;
  animation: growBar 1.2s cubic-bezier(0.1, 1, 0.1, 1) forwards;
}
.bar-fill.phd-bar { background: var(--accent); }
.bar-fill.comp-bar { 
  background: rgba(255, 255, 255, 0.2); /* 這裡設定為半透明的白色，數值可依喜好微調 (例如 0.15~0.3) */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 邊框也稍微提亮一點 */
}
.bar-val { 
  font-family: var(--mono); 
  font-size: max(12px, 1.5cqi); 
  color: var(--muted); 
  width: 150px; /* 原本是 8%，改為固定寬度給足空間 */
  text-align: left; /* 靠左對齊，視覺上會跟進度條比較一致 */
  flex-shrink: 0; /* 防止被進度條擠壓 */
  white-space: nowrap; /* 強制文字不換行 */
}
.bar-val.phd-val { color: var(--accent); font-weight: bold; }
.faster-tag { color: var(--green); background: rgba(78,203,141,0.08); border: 1px solid rgba(78,203,141,0.3); padding: 0.3cqi 0.8cqi; border-radius: 4px; font-size: max(10px, 1.1cqi); margin-left: 10px; }

/* 下半部品質區塊 */
.quality-note { font-family: var(--mono); font-size: max(12px, 1.4cqi); color: var(--muted); padding: 1.5cqi 2cqi; background: var(--surface); border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; margin-bottom: 15px;}
.quality-grid { display: flex; flex-direction: column; gap: 1.5cqi; }
.q-block { 
  background: var(--surface); 
  border: 1px solid var(--border); 
  border-radius: 12px; 
  padding: 1.5cqi 2.5cqi; 
  display: flex; 
  align-items: center; 
  gap: 3cqi; 
  /* 加上轉場動畫屬性 */
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; 
}
/* 滑鼠碰到的浮起與高亮效果 */
.q-block:hover { 
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.03); 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.q-feat { font-size: max(14px, 1.8cqi); font-weight: 700; width: 20%; flex-shrink: 0; }
.q-ranks { display: flex; align-items: center; gap: 1cqi; flex-wrap: wrap; }
/* 1. 調整所有膠囊的基礎大小與粗細 */
.rank-pill { 
  font-family: var(--mono); 
  font-size: max(13px, 1.5cqi); /* 字體稍微放大 */
  padding: 0.6cqi 1.6cqi; 
  border-radius: 30px; 
  font-weight: 700; /* 全面強制加粗 */
}

/* 第一名保持你的橘色設定 (如果之前沒動到這行，可以不理它) */
.rank-1-phd { background: rgba(255, 125, 0, 0.15); color: var(--accent); border: 1px solid rgba(255, 125, 0, 0.4); font-size: max(14px, 1.6cqi); font-weight: 800;}

/* 2. 第 2 名：大幅提高亮度 */
.rank-2 { 
  background: rgba(255, 255, 255, 0.15); /* 背景色變白、變明顯 */
  color: #ffffff; /* 直接使用純白字體，絕對最顯眼！ */
  border: 1px solid rgba(255, 255, 255, 0.4); /* 邊框加強 */
}

/* 3. 第 3 名：也加上底色並提亮 */
.rank-3 { 
  background: rgba(255, 255, 255, 0.05); /* 原本沒底色，現在加上淡淡的底色 */
  color: #f1f5f9; /* 使用非常接近白色的亮灰色 */
  border: 1px solid rgba(255, 255, 255, 0.2); 
}

/* 4. 箭頭：變亮、變大 */
.rank-arrow { 
  color: #cbd5e1; /* 箭頭提亮 */
  font-size: max(16px, 1.8cqi); /* 箭頭放大 */
  font-weight: 800; /* 箭頭特粗 */
}

/* 動畫設定 */
@keyframes growBar {
  to { width: var(--w); }
}