/* mujun.dev - Colors: #0E1218, #E09060, #E0E4E8, #E0A030, #60A0E0 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #0E1218; color: #B0B8C0; font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.75; display: flex; min-height: 100vh; }

/* Sidebar */
#sidebar { position: fixed; top: 0; left: 0; width: 260px; height: 100vh; background: #0A0E14; border-right: 1px solid rgba(96,160,224,0.1); padding: 2rem 0; overflow-y: auto; z-index: 100; transform: translateX(0); transition: transform 0.4s ease; }
.sidebar-header { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; color: #E0E4E8; padding: 0 1.5rem 1.5rem; border-bottom: 1px solid rgba(96,160,224,0.08); margin-bottom: 1rem; }
.file-tree { display: flex; flex-direction: column; }
.tree-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.5rem; color: #606870; text-decoration: none; font-size: 0.85rem; border-left: 2px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.tree-item:hover { color: #B0B8C0; background: rgba(96,160,224,0.03); }
.tree-item.active { color: #E0E4E8; border-left-color: #E0E4E8; background: rgba(96,160,224,0.05); }
.tree-icon { flex-shrink: 0; opacity: 0.6; }
.tree-item.active .tree-icon { opacity: 1; }

/* Menu Toggle (mobile) */
#menu-toggle { display: none; position: fixed; top: 1rem; left: 1rem; z-index: 200; background: #0A0E14; border: 1px solid rgba(96,160,224,0.15); border-radius: 4px; padding: 0.5rem; cursor: pointer; width: 36px; height: 36px; }
#menu-toggle span { display: block; width: 18px; height: 2px; background: #E0E4E8; margin: 3px auto; transition: transform 0.3s, opacity 0.3s; }

/* Main Content */
#content { margin-left: 260px; flex: 1; max-width: 720px; padding: 3rem 2.5rem; }
.doc-section { margin-bottom: 2rem; opacity: 0; transform: translateY(15px); transition: opacity 0.6s ease, transform 0.6s ease; }
.doc-section.visible { opacity: 1; transform: translateY(0); }
.doc-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); color: #E0E4E8; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.doc-subtitle { font-size: 1rem; color: #606870; margin-bottom: 2rem; }
.section-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2rem); color: #E0E4E8; letter-spacing: -0.01em; margin-bottom: 1rem; }
.doc-text { margin-bottom: 1.25rem; color: #B0B8C0; }
.section-rule { border: none; border-top: 1px solid rgba(96,160,224,0.08); margin: 2.5rem 0; }

/* Isometric Diagram */
.iso-diagram { width: 100%; max-width: 400px; margin: 1.5rem 0 2rem; }
.iso-box { fill: none; stroke: rgba(176,184,192,0.6); stroke-width: 1.5; }
.iso-label { font-family: 'Fira Code', monospace; font-size: 10px; fill: #B0B8C0; text-anchor: middle; }
.iso-arrow { fill: none; stroke: rgba(176,184,192,0.4); stroke-width: 1.5; marker-end: url(#arrowhead); }
.iso-arrow.paradox { stroke: #60A0E0; stroke-width: 1.5; }
.diagram-lines { opacity: 0; animation: drawDiagram 1.5s ease forwards 0.5s; }
@keyframes drawDiagram { to { opacity: 1; } }

/* Contradiction Callout */
.callout { border-left: 4px solid #E0A030; padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(224,160,48,0.03) 8px, rgba(224,160,48,0.03) 16px); border-radius: 0 4px 4px 0; }
.callout-icon { color: #E0A030; margin-right: 0.5rem; font-size: 1rem; }
.callout strong { color: #E0A030; }

/* Isometric Code Blocks */
.code-block { background: #141820; border-radius: 6px; margin-bottom: 1.5rem; transform: perspective(800px) rotateY(-5deg) rotateX(2deg); box-shadow: 4px 4px 8px rgba(0,0,0,0.4); overflow: hidden; transition: transform 0.3s ease; }
.code-block:hover { transform: perspective(800px) rotateY(-2deg) rotateX(1deg); }
.code-header { font-family: 'Fira Code', monospace; font-size: 0.75rem; color: #606870; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(96,160,224,0.08); }
.code-block pre { padding: 1.25rem; overflow-x: auto; }
.code-block code { font-family: 'Fira Code', monospace; font-size: 0.85rem; line-height: 1.6; color: #B0B8C0; }
.kw { color: #60A0E0; }
.str { color: #60C080; }
.tp { color: #E09060; }
.fn { color: #E0E4E8; }
.cm { color: #606870; font-style: italic; }
.num { color: #E0A030; }

/* Responsive */
@media (max-width: 768px) {
    #sidebar { transform: translateX(-260px); }
    #sidebar.open { transform: translateX(0); }
    #menu-toggle { display: block; }
    #content { margin-left: 0; padding: 3rem 1.5rem; padding-top: 4rem; }
    .code-block { transform: none; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
    .code-block:hover { transform: none; }
}