/* ============================================================
   Obsidian Vault — Modern Research Journal Theme for Docsify
   Clean dark workspace · Purple-blue accent · Glass surfaces
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* ---- Variables ---- */
:root {
  --bg:            #09090b;
  --bg-surface:    #111114;
  --bg-elevated:   #18181b;
  --bg-hover:      #1f1f23;
  --border:        rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --text:          #a1a1aa;
  --text-strong:   #e4e4e7;
  --text-muted:    #52525b;
  --accent:        #818cf8;
  --accent-bright: #a5b4fc;
  --accent-dim:    #6366f1;
  --accent-glow:   rgba(129, 140, 248, 0.08);
  --accent-glow-s: rgba(129, 140, 248, 0.15);
  --green:         #4ade80;
  --amber:         #fbbf24;
  --red:           #f87171;
  --font-sans:     'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-serif:    'Newsreader', Georgia, serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --radius:        8px;
  --radius-lg:     12px;
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-w:     280px;

  /* docsify-themeable overrides */
  --theme-color:                var(--accent) !important;
  --base-background-color:      var(--bg) !important;
  --base-color:                 var(--text) !important;
  --sidebar-background:         var(--bg-surface) !important;
  --sidebar-border-color:       var(--border) !important;
  --sidebar-border-width:       1px !important;
  --sidebar-width:              var(--sidebar-w) !important;
  --sidebar-name-color:         var(--text-strong) !important;
  --sidebar-name-font-weight:   700 !important;
  --sidebar-nav-link-color--active: var(--accent) !important;
  --sidebar-nav-link-font-weight--active: 600 !important;
  --link-color:                 var(--accent) !important;
  --link-color--hover:          var(--accent-bright) !important;
  --heading-color:              var(--text-strong) !important;
  --code-theme-background:      var(--bg-elevated) !important;
  --code-inline-background:     var(--bg-elevated) !important;
  --code-inline-color:          var(--accent) !important;
  --blockquote-border-color:    var(--accent-dim) !important;
  --notice-tip-border-color:    var(--accent) !important;
  --search-input-background-color: var(--bg-elevated) !important;
  --search-input-border-color:     var(--border-strong) !important;
  --search-input-color:            var(--text) !important;
  --search-result-heading-color:   var(--accent) !important;
  --cover-background-color:     var(--bg) !important;
  --cover-button-primary-color: var(--accent) !important;
  --table-head-background:      var(--bg-elevated) !important;
  --table-row-even-background:  transparent !important;
  --table-row-odd-background:   rgba(255, 255, 255, 0.015) !important;
  --table-cell-border-color:    var(--border) !important;
  --pagination-title-color:     var(--text-strong) !important;
  --docsifytabs-tab-highlight-color: var(--accent) !important;

  /* Remove sidebar link arrows */
  --sidebar-nav-link-before-content:              "" !important;
  --sidebar-nav-link-before-content-l1:           "" !important;
  --sidebar-nav-link-before-content-l2:           "" !important;
  --sidebar-nav-link-before-content-l3:           "" !important;
  --sidebar-nav-link-before-content--active:      "" !important;
  --sidebar-nav-link-before-content-l1--active:   "" !important;
  --sidebar-nav-link-before-content-l2--active:   "" !important;
  --sidebar-nav-link-before-content-l3--active:   "" !important;
  --sidebar-nav-link-before-margin:               0 !important;
  --sidebar-nav-link-before-margin-l1:            0 !important;
  --sidebar-nav-link-before-margin-l2:            0 !important;
  --sidebar-nav-link-before-margin-l3:            0 !important;
}

/* ---- Light Theme ---- */
[data-theme="light"] {
  --bg:            #ffffff;
  --bg-surface:    #f8f9fa;
  --bg-elevated:   #f1f3f5;
  --bg-hover:      #e9ecef;
  --border:        rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.15);
  --text:          #495057;
  --text-strong:   #212529;
  --text-muted:    #868e96;
  --accent:        #6366f1;
  --accent-bright: #4f46e5;
  --accent-dim:    #818cf8;
  --accent-glow:   rgba(99, 102, 241, 0.08);
  --accent-glow-s: rgba(99, 102, 241, 0.15);
  --green:         #16a34a;
  --amber:         #d97706;
  --red:           #dc2626;

  --base-background-color:      var(--bg) !important;
  --base-color:                 var(--text) !important;
  --sidebar-background:         var(--bg-surface) !important;
  --sidebar-border-color:       var(--border) !important;
  --heading-color:              var(--text-strong) !important;
  --code-theme-background:      var(--bg-elevated) !important;
  --code-inline-background:     var(--bg-elevated) !important;
  --search-input-background-color: var(--bg-elevated) !important;
  --search-input-border-color:     var(--border-strong) !important;
  --search-input-color:            var(--text) !important;
  --cover-background-color:     var(--bg) !important;
  --table-head-background:      var(--bg-elevated) !important;
  --table-row-even-background:  transparent !important;
  --table-row-odd-background:   rgba(0, 0, 0, 0.02) !important;
  --table-cell-border-color:    var(--border) !important;
}

/* Light theme — code block dots */
[data-theme="light"] .markdown-section pre::after {
  opacity: 0.5;
}

/* Light theme — scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}

/* Light theme — cover gradient */
[data-theme="light"] section.cover.has-mask .mask {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.9) 70%,
    rgba(255, 255, 255, 1) 100%) !important;
}

/* Light theme — github corner */
[data-theme="light"] .github-corner svg {
  fill: var(--accent) !important;
  color: var(--bg) !important;
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============================================================
   COVER PAGE
   ============================================================ */
section.cover {
  background: var(--bg) !important;
  padding-bottom: 60px;
}

section.cover h1 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 3rem !important;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--text-strong) 40%, var(--accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

section.cover h1 small {
  display: block;
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 0.35em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--text-muted) !important;
  margin-top: 0.6em;
}

section.cover blockquote {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

section.cover blockquote p {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: 1.1rem !important;
  color: var(--text-muted) !important;
}

section.cover ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none !important;
  padding: 0 !important;
  margin: 1.8rem 0 2.2rem !important;
  max-width: 500px;
}

section.cover ul li {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  padding: 4px 14px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  transition: all 0.2s var(--ease);
}

section.cover ul li:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--accent-glow);
}

section.cover .cover-main > p:last-child a {
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent-dim), var(--accent)) !important;
  padding: 10px 32px !important;
  border-radius: 6px !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.25s var(--ease);
  box-shadow: 0 0 0 0 transparent;
}

section.cover .cover-main > p:last-child a:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35);
}

section.cover.has-mask .mask {
  background: linear-gradient(to bottom,
    rgba(9, 9, 11, 0.5) 0%,
    rgba(9, 9, 11, 0.9) 70%,
    rgba(9, 9, 11, 1) 100%) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  padding-top: 0 !important;
  display: flex;
  flex-direction: column;
}

/* App name / logo area */
.sidebar > h1 {
  padding: 18px 20px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0;
}

.sidebar .app-name-link {
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  transition: color 0.2s var(--ease);
}

/* Search */
.sidebar .search {
  padding: 12px 14px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar .search input {
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  transition: all 0.2s var(--ease);
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.sidebar .search input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Nav container — scrollable middle area */
.sidebar-nav {
  padding: 8px 10px 20px !important;
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav li {
  margin: 0 !important;
}

/* Level 1: Section headers (PAPERS, RESEARCH NOTES, TOPICS...) */
.sidebar-nav > ul > li > a,
.sidebar-nav > ul > li > strong {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  padding: 12px 8px 5px !important;
  margin-top: 2px;
}

/* Level 2: Article links + sub-category containers */
.sidebar-nav > ul > li > ul {
  padding-left: 2px !important;
}

.sidebar-nav > ul > li > ul > li {
  margin: 0 !important;
}

/* Level 2: Article links */
.sidebar-nav > ul > li > ul > li > a {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--text) !important;
  padding: 6px 12px !important;
  border-radius: 8px;
  display: block;
  transition: all 0.15s var(--ease);
  white-space: normal;
  line-height: 1.45;
  word-break: break-word;
}

.sidebar-nav > ul > li > ul > li > a:hover {
  color: var(--text-strong) !important;
  background: var(--bg-hover) !important;
}

.sidebar-nav > ul > li > ul > li > a.active {
  color: var(--accent) !important;
  background: var(--accent-glow) !important;
  font-weight: 500 !important;
  border-left: 2px solid var(--accent);
}

/* Level 2: Sub-category headers (Topics > LLM, Topics > 3D) */
.sidebar-nav > ul > li > ul > li > strong {
  display: block;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dim) !important;
  padding: 10px 10px 3px !important;
  margin-top: 2px;
}

/* Level 3: Articles under sub-category (Topics > LLM > articles) */
.sidebar-nav > ul > li > ul > li > ul {
  padding-left: 6px !important;
  margin: 0 0 4px !important;
  border-left: 1px solid var(--border);
  margin-left: 10px !important;
}

.sidebar-nav > ul > li > ul > li > ul > li > a {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--text) !important;
  padding: 5px 10px !important;
  border-radius: 6px;
  display: block;
  transition: all 0.15s var(--ease);
  white-space: normal;
  line-height: 1.4;
  word-break: break-word;
}

.sidebar-nav > ul > li > ul > li > ul > li > a:hover {
  color: var(--text-strong) !important;
  background: var(--bg-hover) !important;
}

.sidebar-nav > ul > li > ul > li > ul > li > a.active {
  color: var(--accent) !important;
  background: var(--accent-glow) !important;
  font-weight: 500 !important;
}

/* Level 4+: TOC items inside an article page */
.sidebar-nav ul ul ul ul {
  padding-left: 8px !important;
  border-left: 1px solid var(--border);
  margin-left: 10px !important;
}

.sidebar-nav ul ul ul ul a {
  font-size: 0.74rem !important;
  color: var(--text-muted) !important;
  padding: 2px 8px !important;
  white-space: normal;
  line-height: 1.35;
}

.sidebar-nav ul ul ul ul a:hover {
  color: var(--text) !important;
}

/* Sidebar footer — sticky at bottom */
.sidebar-footer {
  display: flex;
  gap: 0;
  padding: 10px 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  position: sticky;
  bottom: 0;
  margin-top: auto;
}

.sidebar-footer a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem !important;
  font-weight: 500;
  color: var(--text-muted) !important;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: all 0.15s var(--ease);
}

.sidebar-footer a:hover {
  color: var(--text-strong) !important;
  background: var(--bg-hover);
}

/* Hide sidebar nav arrows */

/* Sidebar toggle */
.sidebar-toggle {
  background: var(--bg-surface) !important;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

/* Homepage: wider content when sidebar is closed */
body.home-page.close .content {
  margin-left: 0 !important;
}

body.home-page.close .markdown-section {
  max-width: 960px !important;
}

.content {
  padding: 2.5rem 3rem !important;
}

.markdown-section {
  max-width: 780px !important;
  margin: 0 auto !important;
  word-break: break-word;
}

/* ---- Headings ---- */
.markdown-section h1 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 2.1rem !important;
  letter-spacing: -0.03em;
  line-height: 1.25 !important;
  margin: 0 0 0.5em !important;
  padding-bottom: 0.5em !important;
  border-bottom: 1px solid var(--border) !important;
}

.markdown-section h2 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.02em;
  margin: 2.5em 0 0.6em !important;
  padding-bottom: 0.35em !important;
  border-bottom: 1px solid var(--border) !important;
}

.markdown-section h3 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  color: var(--text-strong) !important;
  margin: 1.8em 0 0.5em !important;
}

.markdown-section h4 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--accent) !important;
  margin: 1.5em 0 0.4em !important;
}

/* ---- Body ---- */
.markdown-section p {
  margin: 0 0 1.15em !important;
}

.markdown-section strong {
  color: var(--text-strong);
  font-weight: 600;
}

/* ---- Links ---- */
.markdown-section a:not([class]) {
  text-decoration: none !important;
  border-bottom: 1px solid rgba(129, 140, 248, 0.25);
  transition: all 0.15s var(--ease);
}

.markdown-section a:not([class]):hover {
  border-bottom-color: var(--accent);
}

/* ---- Lists ---- */
.markdown-section ul,
.markdown-section ol {
  padding-left: 1.4em !important;
}

.markdown-section li {
  margin-bottom: 0.3em;
}

.markdown-section li::marker {
  color: var(--text-muted);
}

/* ---- Blockquote ---- */
.markdown-section blockquote {
  background: var(--accent-glow) !important;
  border-left: 3px solid var(--accent-dim) !important;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px !important;
  margin: 1.5em 0 !important;
}

.markdown-section blockquote p {
  margin: 0 !important;
  font-style: italic;
  color: var(--text) !important;
}

/* ---- Code ---- */
.markdown-section code:not([class*="lang"]):not([class*="language"]) {
  font-family: var(--font-mono) !important;
  font-size: 0.85em !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--border) !important;
}

.markdown-section pre {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  padding: 18px 20px !important;
  margin: 1.5em 0 !important;
  position: relative;
}

.markdown-section pre::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: -14px 0 0 var(--amber), -28px 0 0 var(--red);
  opacity: 0.35;
}

.markdown-section pre code {
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
  line-height: 1.7;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text) !important;
}

/* ---- Tables ---- */
.markdown-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0 !important;
  font-size: 0.88rem;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  overflow: hidden;
}

.markdown-section thead {
  background: var(--bg-elevated) !important;
}

.markdown-section th {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted) !important;
  padding: 10px 14px !important;
  text-align: left;
  border-bottom: 1px solid var(--border-strong) !important;
}

.markdown-section td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
}

.markdown-section tbody tr {
  transition: background 0.15s var(--ease);
}

.markdown-section tbody tr:hover {
  background: var(--accent-glow) !important;
}

.markdown-section tbody tr:last-child td {
  border-bottom: none !important;
}

/* ---- HR ---- */
.markdown-section hr {
  border: none !important;
  height: 1px !important;
  background: var(--border) !important;
  margin: 2.5em 0 !important;
}

/* ---- Images ---- */
.markdown-section img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* ============================================================
   HOME PAGE — Aurora Background
   ============================================================ */
@keyframes aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}

.home-aurora {
  position: fixed;
  inset: -10px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home-aurora-inner {
  position: absolute;
  inset: -10px;
  opacity: 0.50;
  will-change: transform;
  filter: blur(10px);

  /* Dark mode: stripe overlay + aurora colors */
  --dark-gradient: repeating-linear-gradient(
    100deg,
    #09090b 0%, #09090b 7%,
    transparent 10%, transparent 12%,
    #09090b 16%
  );
  --aurora-gradient: repeating-linear-gradient(
    100deg,
    #6366f1 10%, #a5b4fc 15%,
    #93c5fd 20%, #ddd6fe 25%,
    #60a5fa 30%
  );

  background-image: var(--dark-gradient), var(--aurora-gradient);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
}

.home-aurora-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dark-gradient), var(--aurora-gradient);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora 60s linear infinite;
}

/* Radial mask — aurora fades from top-right */
.home-aurora-inner {
  mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
}

/* Bottom fade into page background */
.home-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    var(--bg) 100%
  );
}

/* Light theme aurora */
[data-theme="light"] .home-aurora-inner {
  --dark-gradient: repeating-linear-gradient(
    100deg,
    #ffffff 0%, #ffffff 7%,
    transparent 10%, transparent 12%,
    #ffffff 16%
  );
  --aurora-gradient: repeating-linear-gradient(
    100deg,
    #818cf8 10%, #c7d2fe 15%,
    #bae6fd 20%, #ede9fe 25%,
    #93c5fd 30%
  );
  filter: blur(10px) invert(1);
}

[data-theme="light"] .home-aurora::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    #ffffff 100%
  );
}

/* ============================================================
   HOME PAGE — Arc Gallery Hero
   ============================================================ */
@keyframes arcFadeInUp {
  from { opacity: 0; transform: translate(-50%, 60%); }
  to   { opacity: 1; transform: translate(-50%, 50%); }
}

@keyframes arcFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.arc-hero {
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  margin: -2.5rem -3rem 0 !important;
  padding: 0 !important;
}

.arc-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.arc-pivot {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.arc-card {
  position: absolute;
  opacity: 0;
  animation: arcFadeInUp 0.7s ease-out forwards;
}

.arc-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: transform 0.25s var(--ease);
}

.arc-card:hover .arc-card-inner {
  transform: scale(1.08);
}

.arc-card-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  border: none !important;
}

/* Hero text below the arc */
.arc-hero-text {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 40px;
  opacity: 0;
  animation: arcFadeIn 0.8s ease-out 0.9s forwards;
}

.arc-hero-text h1 {
  font-family: var(--font-serif) !important;
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-strong) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.15 !important;
}

.arc-hero-text p {
  font-size: 1.05rem !important;
  color: var(--text-muted) !important;
  margin: 0 0 24px !important;
  font-style: italic;
  font-family: var(--font-serif) !important;
}

.arc-hero-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.arc-btn-primary,
.arc-btn-secondary {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 50px;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: all 0.2s var(--ease);
  cursor: pointer;
}

.arc-btn-primary {
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.arc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.45);
}

.arc-btn-secondary {
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  background: transparent;
}

.arc-btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-strong) !important;
  border-color: var(--accent-dim) !important;
}

/* ============================================================
   HOME PAGE — Card Grid (uses raw HTML divs)
   ============================================================ */
.markdown-section .home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 1.5em 0 2em;
}

.markdown-section .home-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all 0.25s var(--ease);
  cursor: pointer;
}

/* Individual card accent colors */
.markdown-section .home-card:nth-child(1) { border-top-color: #818cf8; } /* Papers — purple */
.markdown-section .home-card:nth-child(2) { border-top-color: #34d399; } /* Research Notes — emerald */
.markdown-section .home-card:nth-child(3) { border-top-color: #fb923c; } /* Topics — orange */
.markdown-section .home-card:nth-child(4) { border-top-color: #60a5fa; } /* Weekly — blue */
.markdown-section .home-card:nth-child(5) { border-top-color: #f472b6; } /* Resources — pink */

.markdown-section .home-card:nth-child(1):hover { border-color: #818cf8; box-shadow: 0 8px 30px rgba(129, 140, 248, 0.15); }
.markdown-section .home-card:nth-child(2):hover { border-color: #34d399; box-shadow: 0 8px 30px rgba(52, 211, 153, 0.15); }
.markdown-section .home-card:nth-child(3):hover { border-color: #fb923c; box-shadow: 0 8px 30px rgba(251, 146, 60, 0.15); }
.markdown-section .home-card:nth-child(4):hover { border-color: #60a5fa; box-shadow: 0 8px 30px rgba(96, 165, 250, 0.15); }
.markdown-section .home-card:nth-child(5):hover { border-color: #f472b6; box-shadow: 0 8px 30px rgba(244, 114, 182, 0.15); }

.markdown-section .home-card:hover {
  background: var(--bg-hover);
  transform: translateY(-2px);
}

.markdown-section .home-card .card-icon {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}

.markdown-section .home-card h4 {
  font-size: 0.95rem !important;
  margin: 0 0 6px !important;
  text-transform: none;
  letter-spacing: normal;
}

.markdown-section .home-card h4 a {
  color: var(--text-strong) !important;
  border-bottom: none !important;
}

.markdown-section .home-card:nth-child(1):hover h4 a { color: #818cf8 !important; }
.markdown-section .home-card:nth-child(2):hover h4 a { color: #34d399 !important; }
.markdown-section .home-card:nth-child(3):hover h4 a { color: #fb923c !important; }
.markdown-section .home-card:nth-child(4):hover h4 a { color: #60a5fa !important; }
.markdown-section .home-card:nth-child(5):hover h4 a { color: #f472b6 !important; }

.markdown-section .home-card p {
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  line-height: 1.55;
}

/* ============================================================
   PAGINATION OVERRIDE
   ============================================================ */
.docsify-pagination-container {
  border-top: 1px solid var(--border) !important;
  margin-top: 3rem !important;
  padding-top: 1.5rem !important;
}

.pagination-item-label {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted) !important;
}

.pagination-item-title {
  font-weight: 500 !important;
  color: var(--text-strong) !important;
}

.pagination-item:hover .pagination-item-title {
  color: var(--accent) !important;
}

/* ============================================================
   COPY CODE BUTTON
   ============================================================ */
.docsify-copy-code-button {
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  background: var(--bg-hover) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  padding: 2px 8px !important;
}

.docsify-copy-code-button:hover {
  color: var(--accent) !important;
  border-color: var(--accent-dim) !important;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress {
  background: var(--accent) !important;
  height: 2px !important;
}

/* ============================================================
   GITHUB CORNER
   ============================================================ */
.github-corner svg {
  fill: var(--accent-dim) !important;
  color: var(--bg) !important;
}

/* ============================================================
   ANIMATION
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.markdown-section {
  animation: fadeIn 0.3s var(--ease);
}

/* ============================================================
   FLEXIBLE ALERTS (callout boxes)
   ============================================================ */
.markdown-section .alert {
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  background: var(--bg-elevated) !important;
  border-left-width: 3px !important;
  border-left-style: solid !important;
  padding: 14px 18px !important;
  margin: 1.5em 0 !important;
}

.markdown-section .alert p {
  font-style: normal !important;
}

.markdown-section .alert .title {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.markdown-section .alert.callout-note {
  border-left-color: var(--accent) !important;
}
.markdown-section .alert.callout-note .title { color: var(--accent); }

.markdown-section .alert.callout-tip {
  border-left-color: var(--green) !important;
}
.markdown-section .alert.callout-tip .title { color: var(--green); }

.markdown-section .alert.callout-warning {
  border-left-color: var(--amber) !important;
}
.markdown-section .alert.callout-warning .title { color: var(--amber); }

.markdown-section .alert.callout-attention {
  border-left-color: var(--red) !important;
}
.markdown-section .alert.callout-attention .title { color: var(--red); }

/* ============================================================
   IMAGE ZOOM OVERLAY
   ============================================================ */
.markdown-section img {
  cursor: zoom-in;
}

.medium-zoom-overlay {
  background: var(--bg) !important;
  opacity: 0.95;
}

.medium-zoom-image--opened {
  border-color: var(--accent-dim) !important;
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
#theme-toggle {
  position: fixed;
  bottom: 2rem;
  right: 5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

#theme-toggle:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s var(--ease);
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

#back-to-top:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

#back-to-top svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent-bright));
  z-index: 999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ============================================================
   DOCSIFY TABS
   ============================================================ */
.docsify-tabs {
  margin: 1.5em 0 !important;
}

.docsify-tabs__tab {
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 8px 18px !important;
  transition: all 0.15s var(--ease);
}

.docsify-tabs__tab--active {
  color: var(--accent) !important;
  background: var(--bg-elevated) !important;
  border-bottom: 2px solid var(--accent) !important;
}

.docsify-tabs__content {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  padding: 18px !important;
}

/* ============================================================
   MERMAID DIAGRAMS
   ============================================================ */
.mermaid {
  background: transparent !important;
  text-align: center;
  margin: 1.5em 0;
}

.mermaid svg {
  max-width: 100%;
}

/* ============================================================
   HEADING ANCHORS ON HOVER
   ============================================================ */
.markdown-section h1 > a,
.markdown-section h2 > a,
.markdown-section h3 > a {
  position: relative;
}

.markdown-section h1 > a::before,
.markdown-section h2 > a::before,
.markdown-section h3 > a::before {
  content: '#';
  position: absolute;
  left: -1.2em;
  color: var(--accent-dim);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
  font-weight: 400;
}

.markdown-section h1:hover > a::before,
.markdown-section h2:hover > a::before,
.markdown-section h3:hover > a::before {
  opacity: 0.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .content {
    padding: 1.5rem 1rem !important;
  }

  .markdown-section h1 {
    font-size: 1.6rem !important;
  }

  .markdown-section h2 {
    font-size: 1.25rem !important;
  }

  .markdown-section .home-grid {
    grid-template-columns: 1fr;
  }

  .arc-hero {
    margin: -1.5rem -1rem 0 !important;
    min-height: 60vh;
  }

  .arc-hero-text h1 {
    font-size: 1.8rem !important;
  }

  .arc-hero-text p {
    font-size: 0.9rem !important;
  }

  section.cover h1 {
    font-size: 2rem !important;
  }

  /* Mobile table horizontal scroll */
  .markdown-section table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #back-to-top {
    bottom: 1.2rem;
    right: 1.2rem;
  }

  #theme-toggle {
    bottom: 1.2rem;
    right: 4rem;
  }
}

/* ============================================================
   PRINT STYLESHEET
   ============================================================ */
@media print {
  .sidebar,
  .sidebar-toggle,
  .github-corner,
  .docsify-pagination-container,
  #back-to-top,
  .reading-progress,
  .search {
    display: none !important;
  }

  .content {
    padding: 0 !important;
  }

  .markdown-section {
    max-width: 100% !important;
    color: #000 !important;
    background: #fff !important;
  }

  .markdown-section a { color: #000 !important; }
  .markdown-section code { border-color: #ccc !important; }
}