@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root {
  --primary: #1a1a2e;
  --secondary: #16213e;
  --accent: #c9a84c;
  --accent2: #e2b659;
  --text: #e8e8e8;
  --text-dim: #c0c0cc;
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(201,168,76,0.15);
  --glow: rgba(201,168,76,0.25);
  --danger: #e74c3c;
  --success: #2ecc71;
  --info: #3498db;
  --sidebar-w: 220px;
  --sidebar-collapsed: 56px;
}

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

a {
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(201,168,76,0.3);
  transition:all 0.2s;
}
a:hover {
  color:var(--accent2);
  border-bottom-color:var(--accent2);
}

html, body {
  width:100%; height:100%;
  overflow:hidden;
  font-family:'Noto Sans SC', sans-serif;
  background: var(--primary);
  color: var(--text);
  font-size:18px;
}

body::before {
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(52,152,219,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(231,76,60,0.03) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}

.sidebar {
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--sidebar-w);
  background:rgba(22,33,62,0.97);
  border-right:1px solid var(--card-border);
  z-index:500;
  display:flex;
  flex-direction:column;
  transition:width 0.3s ease;
  overflow:hidden;
}
.sidebar.collapsed { width:var(--sidebar-collapsed); }

.sidebar-logo {
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  border-bottom:1px solid var(--card-border);
  flex-shrink:0;
  cursor:pointer;
}
.sidebar-logo img {
  height:40px;
  width:auto;
  background:#fff;
  padding:3px 6px;
  border-radius:4px;
  flex-shrink:0;
}
.sidebar-logo-text {
  font-family:'Noto Serif SC',serif;
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  line-height:1.4;
  text-align:center;
  white-space:normal;
  overflow:hidden;
  transition:opacity 0.2s;
}
.sidebar.collapsed .sidebar-logo-text { opacity:0; width:0; }

.sidebar-toggle {
  position:absolute;
  top:18px;
  right:-14px;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--secondary);
  border:1px solid var(--card-border);
  color:var(--text-dim);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  z-index:501;
  transition:all 0.3s;
}
.sidebar-toggle:hover {
  background:rgba(201,168,76,0.15);
  border-color:var(--accent);
  color:var(--accent);
}

.sidebar-list {
  flex:1;
  overflow-y:auto;
  padding:8px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(201,168,76,0.2) transparent;
}
.sidebar-list::-webkit-scrollbar { width:4px; }
.sidebar-list::-webkit-scrollbar-track { background:transparent; }
.sidebar-list::-webkit-scrollbar-thumb { background:rgba(201,168,76,0.2); border-radius:2px; }

.sidebar-section {
  padding:8px 14px 4px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-dim);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  transition:opacity 0.2s;
}
.sidebar.collapsed .sidebar-section { opacity:0; height:0; padding:0; }

.sidebar-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  text-decoration:none;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.4;
  transition:all 0.2s;
  white-space:nowrap;
  overflow:hidden;
  border-left:2px solid transparent;
}
.sidebar-item:hover {
  background:rgba(201,168,76,0.08);
  color:var(--text);
}
.sidebar-item.active {
  background:rgba(201,168,76,0.12);
  color:var(--accent);
  border-left-color:var(--accent);
}
.sidebar-item-num {
  font-size:11px;
  color:var(--text-dim);
  min-width:20px;
  text-align:center;
  flex-shrink:0;
}
.sidebar-item.active .sidebar-item-num { color:var(--accent); }
.sidebar-item-icon {
  font-size:16px;
  flex-shrink:0;
  width:20px;
  text-align:center;
}
.sidebar-item-title {
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity 0.2s;
}
.sidebar.collapsed .sidebar-item-title { opacity:0; width:0; }
.sidebar.collapsed .sidebar-item { padding:8px 0; justify-content:center; }
.sidebar.collapsed .sidebar-item-num { display:none; }

.main-area {
  margin-left:var(--sidebar-w);
  width:calc(100% - var(--sidebar-w));
  height:100vh;
  transition:margin-left 0.3s ease, width 0.3s ease;
}
.sidebar.collapsed ~ .main-area {
  margin-left:var(--sidebar-collapsed);
  width:calc(100% - var(--sidebar-collapsed));
}

.slide-page {
  width:100%; height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  padding:40px 60px;
}

.slide-inner {
  max-width:1100px;
  width:100%;
  max-height:900px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.progress-bar {
  position:fixed;
  top:0;left:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  z-index:1000;
  box-shadow:0 0 10px var(--glow);
}

.slide-counter {
  position:fixed;
  bottom:16px;right:30px;
  font-size:13px;
  color:var(--text-dim);
  z-index:100;
  font-variant-numeric:tabular-nums;
}

.nav-btn {
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--card-border);
  color:var(--text-dim);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  transition:all 0.3s;
  z-index:100;
  text-decoration:none;
}
.nav-btn:hover {
  background:rgba(201,168,76,0.15);
  border-color:var(--accent);
  color:var(--accent);
}
.nav-prev { left:calc(var(--sidebar-w) + 12px); }
.nav-next { right:16px; }
.sidebar.collapsed ~ .main-area .nav-prev { left:calc(var(--sidebar-collapsed) + 12px); }

.part-label {
  display:inline-block;
  font-size:20px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--card-border);
  padding:8px 24px;
  border-radius:20px;
  margin-bottom:16px;
  font-weight:500;
}

h1 {
  font-family:'Noto Serif SC', serif;
  font-size:48px;
  font-weight:900;
  line-height:1.2;
  margin-bottom:12px;
}

h2 {
  font-family:'Noto Serif SC', serif;
  font-size:36px;
  font-weight:700;
  line-height:1.3;
  margin-bottom:12px;
}

h3 {
  font-family:'Noto Serif SC', serif;
  font-size:24px;
  font-weight:600;
  line-height:1.4;
  margin-bottom:10px;
  color:var(--accent);
}

.subtitle {
  font-size:20px;
  color:var(--text-dim);
  font-weight:300;
  margin-bottom:24px;
  line-height:1.6;
}

.highlight { color:var(--accent); font-weight:600; }
.danger { color:var(--danger); font-weight:600; }
.success { color:var(--success); font-weight:600; }
.info-c { color:var(--info); font-weight:600; }

.card-grid { display:grid; gap:16px; margin-top:18px; }
.card-grid-2 { grid-template-columns:repeat(2,1fr); }
.card-grid-3 { grid-template-columns:repeat(3,1fr); }
.card-grid-4 { grid-template-columns:repeat(2,1fr); }

@media(min-width:900px) {
  .card-grid-4 { grid-template-columns:repeat(4,1fr); }
}

.card {
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:22px;
  transition:all 0.3s ease;
  cursor:default;
  position:relative;
  overflow:hidden;
}

.card::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;
  transition:opacity 0.3s;
}

.card:hover {
  border-color:rgba(201,168,76,0.35);
  background:rgba(255,255,255,0.06);
  transform:translateY(-2px);
}

.card:hover::before { opacity:1; }

.card-icon {
  font-size:32px;
  margin-bottom:10px;
  display:block;
}

.card-title {
  font-weight:600;
  font-size:17px;
  margin-bottom:8px;
  color:var(--accent);
}

.card-text {
  font-size:16px;
  line-height:1.7;
  color:var(--text-dim);
}

.mapping-row {
  display:flex;
  align-items:stretch;
  gap:20px;
  margin-top:18px;
}

.mapping-left, .mapping-right {
  flex:1;
  padding:18px 22px;
  border-radius:10px;
  font-size:16px;
  line-height:1.7;
}

.mapping-left {
  background:rgba(52,152,219,0.1);
  border:1px solid rgba(52,152,219,0.2);
}

.mapping-right {
  background:rgba(231,76,60,0.1);
  border:1px solid rgba(231,76,60,0.2);
}

.mapping-arrow {
  font-size:24px;
  color:var(--accent);
  display:flex;align-items:center;
  flex-shrink:0;
}

.tip-box {
  background:rgba(201,168,76,0.08);
  border-left:3px solid var(--accent);
  padding:16px 22px;
  border-radius:0 8px 8px 0;
  margin-top:18px;
  font-size:16px;
  line-height:1.75;
  color:var(--text-dim);
}

.danger-box {
  background:rgba(231,76,60,0.08);
  border-left:3px solid var(--danger);
  padding:16px 22px;
  border-radius:0 8px 8px 0;
  margin-top:18px;
  font-size:16px;
  line-height:1.75;
  color:var(--text-dim);
}

.code-block {
  background:rgba(0,0,0,0.3);
  border:1px solid var(--card-border);
  border-radius:8px;
  padding:16px 22px;
  font-family:'Courier New', monospace;
  font-size:16px;
  line-height:1.7;
  color:#a8d8a8;
  margin-top:14px;
  white-space:pre-wrap;
  word-break:break-all;
}

.output-block {
  background:rgba(46,204,113,0.05);
  border:1px solid rgba(46,204,113,0.15);
  border-radius:8px;
  padding:16px 22px;
  font-size:16px;
  line-height:1.75;
  margin-top:12px;
}

.tag-group { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tag {
  display:inline-block;
  padding:4px 12px;
  border-radius:16px;
  font-size:13px;
  font-weight:500;
}
.tag-gold { background:rgba(201,168,76,0.15); color:var(--accent); border:1px solid rgba(201,168,76,0.25); }
.tag-red { background:rgba(231,76,60,0.12); color:var(--danger); border:1px solid rgba(231,76,60,0.2); }
.tag-blue { background:rgba(52,152,219,0.12); color:var(--info); border:1px solid rgba(52,152,219,0.2); }
.tag-green { background:rgba(46,204,113,0.12); color:var(--success); border:1px solid rgba(46,204,113,0.2); }

.case-box {
  background:rgba(231,76,60,0.06);
  border:1px solid rgba(231,76,60,0.15);
  border-radius:10px;
  padding:20px;
  margin-top:18px;
}
.case-label {
  font-size:13px;
  letter-spacing:2px;
  color:var(--danger);
  font-weight:600;
  margin-bottom:8px;
  text-transform:uppercase;
}
.case-name {
  font-family:'Noto Serif SC', serif;
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}
.case-desc {
  font-size:16px;
  line-height:1.75;
  color:var(--text-dim);
}

.vs-container {
  display:flex;
  align-items:stretch;
  gap:24px;
  margin-top:18px;
}
.vs-side { flex:1; padding:24px; border-radius:12px; }
.vs-left { background:rgba(52,152,219,0.08); border:1px solid rgba(52,152,219,0.2); }
.vs-right { background:rgba(201,168,76,0.08); border:1px solid var(--card-border); }
.vs-label {
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:12px;
}
.vs-left .vs-label { color:var(--info); }
.vs-right .vs-label { color:var(--accent); }
.vs-item {
  font-size:16px;
  line-height:1.7;
  color:var(--text-dim);
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.vs-item:last-child { border-bottom:none; }
.vs-divider {
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  font-weight:900;
  color:var(--accent);
  flex-shrink:0;
}

.interactive-item {
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:8px;
  padding:16px 20px;
  margin-bottom:10px;
  cursor:pointer;
  transition:all 0.3s;
  display:flex;
  align-items:center;
  gap:12px;
}
.interactive-item:hover {
  border-color:rgba(201,168,76,0.35);
  background:rgba(255,255,255,0.06);
}
.interactive-item.expanded { border-color:var(--accent); }
.interactive-item .arrow {
  transition:transform 0.3s;
  color:var(--accent);
  font-size:14px;
  flex-shrink:0;
}
.interactive-item.expanded .arrow { transform:rotate(90deg); }

.interactive-detail {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease, padding 0.4s ease;
  font-size:16px;
  line-height:1.75;
  color:var(--text-dim);
  padding-left:30px;
}
.interactive-item.expanded + .interactive-detail {
  max-height:300px;
  padding-top:6px;
  padding-bottom:12px;
}

.discussion-card {
  background:linear-gradient(135deg, rgba(201,168,76,0.08), rgba(52,152,219,0.06));
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:28px;
  margin-top:18px;
  cursor:pointer;
  transition:all 0.3s;
}
.discussion-card:hover {
  border-color:rgba(201,168,76,0.4);
  transform:translateY(-2px);
}
.discussion-num {
  display:inline-flex;
  align-items:center;justify-content:center;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--accent);
  color:var(--primary);
  font-weight:700;
  font-size:15px;
  margin-right:14px;
  flex-shrink:0;
}
.discussion-q {
  font-family:'Noto Serif SC', serif;
  font-size:18px;
  font-weight:600;
  line-height:1.5;
  display:flex;
  align-items:flex-start;
}
.discussion-detail {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.5s ease;
}
.discussion-card.open .discussion-detail { max-height:400px; }

.quote-mark {
  font-family:'Noto Serif SC',serif;
  font-size:56px;
  color:rgba(201,168,76,0.2);
  line-height:1;
}

.cover-anim {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  overflow:hidden;
  pointer-events:none;
}
.float-char {
  position:absolute;
  font-size:18px;
  color:rgba(201,168,76,0.08);
  font-family:'Noto Serif SC',serif;
  animation:floatUp linear infinite;
}
@keyframes floatUp {
  0% { transform:translateY(1080px) rotate(0deg); opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100% { transform:translateY(-100px) rotate(360deg); opacity:0; }
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(15px); }
  to { opacity:1; transform:translateY(0); }
}
.fade-in { animation:fadeIn 0.6s ease forwards; }
.stagger-1 { animation-delay:0.1s; opacity:0; }
.stagger-2 { animation-delay:0.2s; opacity:0; }
.stagger-3 { animation-delay:0.3s; opacity:0; }
.stagger-4 { animation-delay:0.4s; opacity:0; }

@media(max-width:768px) {
  .sidebar { width:var(--sidebar-collapsed); }
  .sidebar .sidebar-logo-text,
  .sidebar .sidebar-section,
  .sidebar .sidebar-item-title,
  .sidebar .sidebar-item-num { opacity:0; width:0; }
  .sidebar .sidebar-item { padding:8px 0; justify-content:center; }
  .main-area { margin-left:var(--sidebar-collapsed); width:calc(100% - var(--sidebar-collapsed)); }
  .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns:1fr; }
  .vs-container { flex-direction:column; }
  .vs-divider { display:none; }
  .mapping-row { flex-direction:column; }
  .nav-btn { display:none; }
  .slide-page { padding:30px 30px; }
  h1 { font-size:32px; }
  h2 { font-size:26px; }
  .subtitle { font-size:16px; }
  .card-text, .vs-item, .interactive-detail, .tip-box, .danger-box { font-size:14px; }
}