:root { 
    --glass-bg: rgba(255,255,255,.85); 
    --glass-brd: rgba(15,23,42,.12);
    --glass-shadow: 0 8px 32px rgba(15,23,42,.08);
    --bg-gradient-from: #ffffff;
    --bg-gradient-to: #f8fafc;
    --text-primary: #0f172a;
    --navbar-bg: rgba(255,255,255,.8);
    --nav-fg: var(--text-primary);
    --blob-opacity: 0.35;
    --btn-gh-bg: #0f172a;
    --btn-gh-text: #ffffff;
    --btn-gh-hover: #1f2937;
    --btn-gh-border: rgba(15,23,42,.18);
    --btn-gh-shadow: 0 6px 20px rgba(2,6,23,.18);
}

@media (prefers-color-scheme: dark) {
    :root {
        --glass-bg: rgba(30,41,59,.85);
        --glass-brd: rgba(148,163,184,.15);
        --glass-shadow: 0 8px 32px rgba(0,0,0,.3);
        --bg-gradient-from: #0f172a;
        --bg-gradient-to: #1e293b;
        --text-primary: #f1f5f9;
        --navbar-bg: rgba(15,23,42,.85);
        --nav-fg: #f1f5f9;
        --blob-opacity: 0.15;
        --btn-gh-bg: rgba(148,163,184,.10);
        --btn-gh-text: #e5e7eb;
        --btn-gh-hover: rgba(148,163,184,.18);
        --btn-gh-border: rgba(148,163,184,.35);
        --btn-gh-shadow: 0 8px 28px rgba(0,0,0,.45);
    }
    
    body {
        color: #f1f5f9 !important;
    }
    
    .text-ink-900 {
        color: #f1f5f9 !important;
    }
    
    .text-ink-800 {
        color: #e2e8f0 !important;
    }
    
    .text-ink-700 {
        color: #cbd5e1 !important;
    }
    
    .text-ink-600 {
        color: #94a3b8 !important;
    }
    
    .text-ink-500 {
        color: #64748b !important;
    }
    
    .text-primary-700 {
        color: #93c5fd !important;
    }
    
    .text-primary-600 {
        color: #60a5fa !important;
    }
}

.liquid { 
    backdrop-filter: blur(24px) saturate(180%); 
    background: var(--glass-bg); 
    border: 1px solid var(--glass-brd); 
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.1);
}
.blob { filter: blur(60px); opacity: var(--blob-opacity); }
.code-copy:hover .copy-btn { opacity:1 }
.tag { background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6)); border:1px solid rgba(15,23,42,.08); }

@media (prefers-color-scheme: dark) {
    .tag { background: linear-gradient(180deg, rgba(51,65,85,.8), rgba(51,65,85,.6)); border:1px solid rgba(148,163,184,.15); }
    .timeline-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
    .liquid { 
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(148,163,184,.08);
    }
}
pre, code { overflow-x: auto; }
.timeline-scroll { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    overscroll-behavior-x: contain; 
    scrollbar-width: thin;
}
.timeline-scroll::-webkit-scrollbar {
    height: 4px;
}
.timeline-scroll::-webkit-scrollbar-track {
    background: rgba(15,23,42,.05);
    border-radius: 2px;
}
.timeline-scroll::-webkit-scrollbar-thumb {
    background: rgba(51,127,255,.3);
    border-radius: 2px;
}
.timeline-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(51,127,255,.5);
}
@media (max-width: 640px) { 
    .timeline-step { min-width: 120px; }
    .timeline-container { padding: 0 1rem; }
}
.conn { position: relative; }
.conn .line { height: 2px; }
.conn svg { position:absolute; right:-2px; top:50%; transform: translateY(-50%); }

.nav-fg { color: var(--nav-fg) !important; }

.text-ink-200 { color: #334155 !important; }
@media (prefers-color-scheme: dark) {
  .text-ink-200 { color: #e2e8f0 !important; }
}

.btn-gh {
  background: var(--btn-gh-bg);
  color: var(--btn-gh-text) !important;
  border: 1px solid var(--btn-gh-border);
  box-shadow: var(--btn-gh-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-gh:hover {
  background: var(--btn-gh-hover);
}