* { box-sizing: border-box }
.accent-text, .hover\:accent-text:hover { color: var(--accent); transition: color 0.2s ease }
.bg-card { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background-color: var(--card-bg); border: 1px solid var(--border) }
.bg-header { -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); background-color: var(--header-bg) }
.breadcrumb a { color: var(--text-muted); position: relative; text-decoration: none; transition: all 0.3s ease }
.breadcrumb a::after { background: var(--accent); bottom: -2px; content: ""; height: 2px; left: 0; position: absolute; transition: width 0.3s ease; width: 0 }
.breadcrumb a:hover { color: var(--accent); transform: translatey(-1px) }
.breadcrumb a:hover::after { width: 100% }
.breadcrumb { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background: var(--glass-bg); border-radius: 1rem; border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); margin-bottom: 2.5rem; padding: 1.2rem 1.8rem }
.breadcrumb-separator { color: var(--text-muted); margin: 0 1rem; opacity: 0.6 }
.btn { align-items: center; border-radius: 1rem; display: inline-flex; font-family: "JetBrains Mono", monospace; font-size: 0.9rem; font-weight: 600; gap: 0.75rem; overflow: hidden; padding: 1rem 2rem; position: relative; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
.btn-primary { background: var(--accent-gradient); border: none; box-shadow: 0 4px 16px rgba(240, 180, 79, 0.3); color: white }
.btn-primary:hover { box-shadow: var(--shadow-primary); transform: translatey(-3px) }
.btn-secondary { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-secondary) }
.btn-secondary:hover { background: var(--card-hover); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); transform: translatey(-2px) }
.btn::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); content: ""; height: 100%; left: -100%; position: absolute; top: 0; transition: left 0.6s; width: 100% }
.btn:focus, .toc a:focus, .related-term:focus { outline-offset: 2px; outline: 2px solid var(--accent) }
.btn:hover::before { left: 100% }
.card { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: var(--glass-bg); border-radius: 1.5rem; border: 1px solid var(--border); overflow: hidden; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) }
.card::before { background: var(--accent-gradient); content: ""; height: 3px; left: 0; opacity: 0.7; position: absolute; right: 0; top: 0 }
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-primary); transform: translatey(-4px) }
.content-section h2 i, .highlight-box h3 i { filter: drop-shadow(0 2px 4px rgba(240, 180, 79, 0.3)) }
.content-section h2 { font-size: 1.75rem; margin-bottom: 2rem; position: relative }
.content-section h2::after { background: var(--accent); border-radius: 2px; bottom: -8px; content: ""; height: 3px; left: 0; position: absolute; width: 60px }
.content-section { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: var(--glass-bg); border-radius: 1.75rem; border: 1px solid var(--border); box-shadow: var(--shadow-secondary); margin-bottom: 2.5rem; overflow: hidden; padding: 3rem; position: relative }
.content-section, .card, .toc { will-change: transform }
.content-section::before { background: var(--accent-gradient); content: ""; height: 4px; left: 0; opacity: 0.6; position: absolute; right: 0; top: 0 }
.dark-mode::before { animation: aurora-float 35s infinite linear; background: radial-gradient(circle at 15% 25%, rgba(240, 180, 79, 0.1), transparent 45%), radial-gradient(circle at 85% 75%, rgba(64, 192, 192, 0.08), transparent 45%), radial-gradient(circle at 50% 50%, rgba(240, 180, 79, 0.03), transparent 65%); content: ""; height: 100vh; left: 0; position: fixed; top: 0; width: 100vw; will-change: transform; z-index: -1 }
.error { background: rgba(239, 68, 68, 0.1); border-color: #ef4444 }
.fade-in { animation: fadeIn 1s ease-out forwards; opacity: 0 }
.fade-in-delay-1 { animation: fadeIn 1s ease-out 0.3s forwards; opacity: 0 }
.fade-in-delay-2 { animation: fadeIn 1s ease-out 0.6s forwards; opacity: 0 }
.highlight-box { background: linear-gradient(135deg, rgba(240, 180, 79, 0.12) 0%, rgba(64, 192, 192, 0.08) 100%); border-radius: 1.25rem; border: 1px solid rgba(240, 180, 79, 0.3); margin: 2rem 0; padding: 2rem; position: relative; transition: all 0.3s ease }
.highlight-box::before { background: var(--accent-gradient); border-radius: 1.25rem 1.25rem 0 0; content: ""; height: 3px; left: 0; position: absolute; right: 0; top: 0 }
.highlight-box:hover { box-shadow: 0 8px 32px rgba(240, 180, 79, 0.15); transform: translatey(-2px) }
.light-mode { --accent-gradient: linear-gradient(135deg, #F0B44F 0%, #40C0C0 100%); --accent-secondary: #1A7A7A; --accent: #D4861F; --bg-secondary: #F1F7F9; --bg: #F7FAFB; --border: #E1EEF2; --card-bg: #FFF; --card-hover: #F8FCFD; --glass-bg: rgba(255, 255, 255, 0.8); --gradient-mesh: radial-gradient(circle at 20% 30%, rgba(212, 134, 31, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(26, 122, 122, 0.04) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(212, 134, 31, 0.02) 0%, transparent 60%); --header-bg: rgba(255, 255, 255, 0.9); --shadow-primary: 0 8px 32px rgba(212, 134, 31, 0.1); --shadow-secondary: 0 12px 64px rgba(26, 122, 122, 0.06); --tag-bg: #E8F8F9; --tag-text: #1A7A7A; --text-muted: #5B7A86; --text-primary: #0A2329; --text-secondary: #2A4853 }
.loading { opacity: 0.7; pointer-events: none }
.prose h3 { margin-bottom: 1rem; margin-top: 2.5rem }
.prose li { line-height: 1.7; margin-bottom: 0.75rem }
.prose p { margin-bottom: 1.5rem }
.prose ul { margin: 1.5rem 0; padding-left: 1.5rem }
.prose { max-width: none }
.related-term { background: var(--card-bg); border-radius: 1rem; border: 1px solid var(--border); cursor: pointer; overflow: hidden; padding: 2rem; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) }
.related-term::before { background: var(--accent-gradient); content: ""; height: 2px; left: 0; position: absolute; top: 0; transform: scalex(0); transition: transform 0.3s ease; width: 100% }
.related-term:hover { border-color: var(--accent); box-shadow: var(--shadow-primary); transform: translatey(-6px) }
.related-term:hover::before { transform: scalex(1) }
.sidebar-sticky-container { position: sticky; top: 120px }
.tag { background: var(--tag-bg); border-radius: 2rem; border: 1px solid rgba(64, 192, 192, 0.2); color: var(--tag-text); font-family: "JetBrains Mono", monospace; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.8px; overflow: hidden; padding: 0.6rem 1.2rem; position: relative; text-transform: uppercase; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
.tag-large { font-size: 0.9rem; padding: 0.8rem 1.6rem }
.tag::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); content: ""; height: 100%; left: -100%; position: absolute; top: 0; transition: left 0.5s; width: 100% }
.tag:hover::before { left: 100% }
.toc a { border-radius: 0.75rem; border: 1px solid transparent; color: var(--text-muted); display: block; font-size: 0.9rem; font-weight: 500; padding: 0.875rem 1.25rem; position: relative; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
.toc a.active { background: rgba(240, 180, 79, 0.15); border-color: var(--accent); color: var(--accent); font-weight: 600 }
.toc a.active::before { background: var(--accent); border-radius: 0 2px 2px 0; content: ""; height: 50%; left: 0; position: absolute; top: 50%; transform: translatey(-50%); width: 3px }
.toc a:hover { background: rgba(240, 180, 79, 0.1); border-color: rgba(240, 180, 79, 0.2); color: var(--accent); transform: translatex(4px) }
.toc nav { display: flex; flex-direction: column; gap: 0.5rem }
.toc { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background: var(--glass-bg); border-radius: 1.5rem; border: 1px solid var(--border); box-shadow: var(--shadow-secondary); max-height: calc(100vh - 140px); overflow-y: auto; padding: 2rem }
::-webkit-scrollbar { width: 10px }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; transition: background 0.3s ease }
::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 5px }
:root { --accent-gradient: linear-gradient(135deg, #F0B44F 0%, #40C0C0 100%); --accent-secondary: #40C0C0; --accent: #F0B44F; --bg-secondary: #0F2329; --bg: #0A1A21; --border: #2A4A5A; --card-bg: #142A35; --card-hover: #1A3442; --glass-bg: rgba(20, 42, 53, 0.7); --gradient-mesh: radial-gradient(circle at 20% 30%, rgba(240, 180, 79, 0.04) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(64, 192, 192, 0.05) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(240, 180, 79, 0.03) 0%, transparent 60%); --header-bg: rgba(10, 26, 33, 0.9); --shadow-primary: 0 8px 32px rgba(240, 180, 79, 0.12); --shadow-secondary: 0 12px 64px rgba(64, 192, 192, 0.08); --tag-bg: #0F3D4A; --tag-text: #40C0C0; --text-muted: #6B9AA8; --text-primary: #E8F4F8; --text-secondary: #A8D4DB }
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-image: var(--gradient-mesh); background: var(--bg); color: var(--text-secondary); font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; line-height: 1.7; overflow-x: hidden; scroll-behavior: smooth; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
h1, h2, h3, h4, .font-plex { font-family: "JetBrains Mono", monospace }