/* mujun.wiki - Encyclopedia of Contradictions */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#FFFFFF;color:#374151;font-family:'Source Serif 4',serif;font-size:16px;line-height:1.75;display:flex;min-height:100vh}

/* Sidebar */
.sidebar{width:280px;background:#F9FAFB;border-right:1px solid #D1D5DB;position:fixed;top:0;left:0;bottom:0;z-index:50;display:flex;flex-direction:column;transform:translateX(0);transition:transform 0.2s ease}
.sidebar-header{padding:24px 20px 16px;border-bottom:1px solid #D1D5DB}
.sidebar-logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:#111827;display:block;margin-bottom:16px}
.search-wrapper{position:relative}
.search-input{width:100%;font-family:'Space Grotesk',sans-serif;font-size:14px;color:#374151;padding:8px 14px;border:1px solid #D1D5DB;border-radius:20px;background:#FFFFFF;outline:none;transition:border-color 0.2s ease}
.search-input::placeholder{color:#6B7280}
.search-input:focus{border-color:#6366F1}

/* Sidebar Navigation */
.sidebar-nav{flex:1;overflow-y:auto;padding:16px 0}
.nav-list{list-style:none}
.nav-link{display:block;font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:14px;color:#6B7280;text-decoration:none;padding:8px 20px;border-left:2px solid transparent;transition:color 0.15s ease,border-color 0.15s ease}
.nav-link:hover{color:#111827}
.nav-link.active{color:#111827;border-left-color:#6366F1}

/* Sidebar Toggle (mobile) */
.sidebar-toggle{display:none;position:fixed;top:16px;left:16px;z-index:60;background:#FFFFFF;border:1px solid #D1D5DB;border-radius:8px;width:40px;height:40px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px}
.hamburger-line{display:block;width:20px;height:2px;background:#374151;border-radius:1px}

/* Main Content */
.main-content{margin-left:280px;flex:1;padding:48px 48px 80px;max-width:calc(720px + 96px + 280px)}
.article{max-width:720px}

/* Breadcrumb */
.breadcrumb{font-family:'Space Grotesk',sans-serif;font-size:12px;color:#6B7280;margin-bottom:32px;display:flex;align-items:center;gap:6px}
.breadcrumb-current{color:#111827}
.breadcrumb-sep{color:#D1D5DB}

/* Typography */
.page-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:36px;color:#111827;margin-bottom:16px;line-height:1.2}
.section-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;color:#111827;margin-bottom:12px;padding-top:32px;border-top:1px solid #D1D5DB;line-height:1.3}
.subsection-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:#111827;margin-top:24px;margin-bottom:8px}
.body-text{margin-bottom:16px}

/* Cross-reference Links */
.cross-ref{color:#6366F1;text-decoration:none;position:relative}
.cross-ref::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:#6366F1;transition:width 0.2s ease}
.cross-ref:hover::after{width:100%}

/* Lists */
.body-list{padding-left:24px;margin-bottom:16px}
.body-list li{margin-bottom:6px}
.ref-list{padding-left:24px;margin-bottom:16px}
.ref-item{margin-bottom:8px;font-size:14px;color:#6B7280}

/* Info Boxes */
.info-box{border-left:4px solid;border-radius:0 4px 4px 0;padding:16px 20px;margin:20px 0;background:#F9FAFB;opacity:0;transform:translateX(-10px);transition:opacity 0.15s ease,transform 0.15s ease}
.info-box.visible{opacity:1;transform:translateX(0)}
.info-box-definition{border-left-color:#6366F1}
.info-box-example{border-left-color:#059669}
.info-box-warning{border-left-color:#DC2626}
.info-box-historical{border-left-color:#D97706}
.info-box-text{font-size:14px;line-height:1.65;margin:0}

/* Code Block */
.code-block{background:#F3E8FF;border-radius:8px;padding:20px 24px;margin:20px 0;font-family:'JetBrains Mono',monospace;font-size:14px;color:#6B21A8;line-height:1.8;overflow-x:auto}
.code-block code{font-family:inherit;font-size:inherit;color:inherit}

/* Venn Diagram */
.venn-diagram{display:block;margin:24px auto}

/* Wiki Section */
.wiki-section{margin-bottom:40px}

/* Responsive */
@media(max-width:768px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .sidebar-toggle{display:flex}
    .main-content{margin-left:0;padding:64px 20px 60px}
}