@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500;700&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; 
  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; 
  display: flex;
  flex-direction: column;
  gap: 30px; 
  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; }

/* 速度長條圖區塊與互動效果 */
.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; }

.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); border: 1px solid rgba(255, 255, 255, 0.3); }

/* 右側數值加亮加粗 */
.bar-val { font-family: var(--mono); font-size: max(13px, 1.6cqi); color: #e2e8f0; width: 150px; text-align: left; flex-shrink: 0; white-space: nowrap; font-weight: 600; }
.bar-val.phd-val { color: var(--accent); font-weight: 800; font-size: max(14px, 1.7cqi); }
.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: 220px; flex-shrink: 0; }
.q-ranks { display: flex; align-items: center; gap: 1cqi; flex-wrap: wrap; }

/* 強調亮度的膠囊樣式 */
.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;}
.rank-2 { background: rgba(255, 255, 255, 0.15); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.4); }
.rank-3 { background: rgba(255, 255, 255, 0.05); color: #f1f5f9; border: 1px solid rgba(255, 255, 255, 0.2); }
.rank-arrow { color: #cbd5e1; font-size: max(16px, 1.8cqi); font-weight: 800; }

@keyframes growBar {
  to { width: var(--w); }
}