:root { --primary: #2c3e50; --accent: #3498db; --text: #333; --bg: #ffffff; }
* { box-sizing: border-box; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    line-height: 1.6; color: var(--text); 
    display: flex; flex-direction: row;
    max-width: 1200px; margin: 0 auto; background: #f9f9f9; min-height: 100vh; 
}
aside { 
    width: 260px; min-width: 260px; padding: 40px 20px; 
    border-right: 1px solid #eee; background: #fcfcfc;
    height: 100vh; position: sticky; top: 0; overflow-y: auto; 
}
main { flex: 1; padding: 40px 60px; background: var(--bg); min-width: 0; }

aside h3 { font-size: 0.75em; text-transform: uppercase; color: #999; margin-top: 30px; margin-bottom: 10px; letter-spacing: 1px; }
.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li { margin-bottom: 8px; line-height: 1.3; }
.sidebar-list a { font-size: 0.85rem; word-wrap: break-word; color: var(--primary); text-decoration: none; }
.sidebar-list a:hover { text-decoration: underline; }

footer { margin-top: 60px; padding-top: 20px; border-top: 1px solid #eee; font-size: 0.8em; color: #777; }
hr { border: 0; border-top: 1px solid #eee; margin: 25px 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { line-height: 1.2; margin-top: 0; font-size: 2.2rem; color: var(--primary); }
h2, h3 { color: var(--primary); margin-top: 1.5em; }

/* --- Tightened List Spacing & Paragraph Fix --- */
article ul, article ol { margin: 15px 0; padding-left: 25px; }
article li { margin: 0 !important; padding: 0 !important; padding-bottom: 4px; line-height: 1.5; }
article li p { display: inline !important; margin: 0 !important; padding: 0 !important; }

blockquote { border-left: 4px solid var(--accent); padding-left: 20px; font-style: italic; color: #555; margin: 25px 0; }

@media (max-width: 800px) {
    body { flex-direction: column; }
    aside { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid #eee; }
}