/* recycle.wiki - Flat Design Wiki */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --white: #FFFFFF; --bg: #F8F9FA; --text: #1F2937; --border: #E5E7EB; --green: #16A34A; }
body { background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', sans-serif; }
#layout { display: flex; min-height: 100vh; }
#sidebar { width: 240px; background: var(--white); border-right: 1px solid var(--border); padding: 2rem 1.5rem; position: sticky; top: 0; height: 100vh; }
.sidebar-title { font-size: 1.1rem; font-weight: 600; color: var(--green); margin-bottom: 2rem; }
.nav-list { list-style: none; }
.nav-item { padding: 0.5rem 0.75rem; font-size: 0.9rem; color: #6B7280; cursor: pointer; border-radius: 6px; margin-bottom: 0.25rem; transition: background 0.2s; }
.nav-item:hover, .nav-item.active { background: rgba(22,163,74,0.08); color: var(--green); }
#main { flex: 1; padding: 3rem 4rem; max-width: 800px; }
#main h1 { font-size: 2rem; font-weight: 600; margin-bottom: 1rem; }
.intro { font-size: 1.05rem; line-height: 1.75; color: #6B7280; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.wiki-section { margin-bottom: 2rem; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.wiki-section.visible { opacity: 1; transform: translateY(0); }
.wiki-section h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.75rem; }
.wiki-section p { font-size: 0.95rem; line-height: 1.75; color: #4B5563; }
@media (max-width: 768px) { #sidebar { display: none; } #main { padding: 2rem; } }