:root {
  --accent:#2b8cff;
  --accent-2:#ff8b3d;
  --bg:#2e3141;
  --card-bg:#bafbbd;
}

body {
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial;
  margin:0;
  background:var(--bg);
  color:#351e7c;
}

.wrap {
  display:flex;
  gap:24px;
  padding:24px;
  max-width:1200px;
  margin:0 auto;
}

/* ===== 左側 timeline ===== */
.timeline-wrap {
  width:160px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.timeline-svg {
  height:100vh;
  overflow:visible;
}

.year-list {
  position:fixed;
  left:18px;
  top:24px;
  width:120px;
}

.year-item {
  position: absolute;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  cursor:pointer;
  color:#fefefe;
  transition:transform .18s;
}

.year-item .dot {
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ccc;
  transition:all .25s;
}

.year-item .label {
  font-weight:600;
  transition:all .25s;
}

.year-item .count {
  color:#eee;
  font-size:13px;
  margin-left:auto;
}

/* hover 效果 */
.year-item:hover .dot {
  transform:scale(1.5);
  background:var(--accent);
}

.year-item:hover .label {
  color:var(--accent);
}

/* 點擊選中 */
.year-item.active .label {
  color:var(--accent-2);
  font-size:18px;
  font-weight:700;
  transition:all .25s ease;
}

.year-item.active .dot {
  background:var(--accent-2);
  transform:scale(1.8);
}

/* ====== 年份文字 (右側SVG) ====== */
.year-label {
  fill:#fff;
  font-size:12px;
  font-weight:600;
  text-anchor:start;
  dominant-baseline:middle;
}

/* ====== 右側內容 ====== */
.content-wrap { flex:1; min-height:100vh; }

.card-area {
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}

.year-card {
  width:80%;
  max-width:800px;
  background:var(--card-bg);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  padding:18px;
  transform-origin:center;
  transition:all .25s;
}

.year-card h2 { margin:0 0 10px; font-size:22px; }

.list-area {
  padding:0 18px;
  display:grid;
  gap:12px;
}

/* paper */
.paper {
  background:#f9dfed;
  padding:12px;
  border-radius:8px;
  box-shadow:0 6px 14px rgba(20,30,50,0.04);
  display:flex;
  gap:12px;
}

.paper .meta { flex:1; }
.paper .meta h4 { margin:0 0 6px; font-size:16px; color:#006400;}
.paper .meta p { margin:2px 0; color:#555; font-size:14px; }
.paper .meta i { margin:2px 0; color:#7b3dcc; font-size:14px; }
.paper .authors { font-weight:600; color:#333; }

.fade-in {
  animation:fadeIn .6s ease forwards;
}
@keyframes fadeIn {
  from {opacity:0; transform:translateY(10px);}
  to {opacity:1; transform:translateY(0);}
}

/* responsive */
@media(max-width:800px){
  .wrap{flex-direction:column}
  .timeline-wrap{width:100%;order:-1}
  .year-list{position:static;display:flex;gap:8px;overflow:auto;padding:6px}
  .timeline-svg{display:none}