/* Less CSS: Strict 100 line limit enforced */
@font-face { font-family: 'Fira Code'; src: local('Fira Code'); font-display: swap; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 18px/1.7 'Fira Code', monospace; background: #000; color: #e8e8e8; padding: 1.5rem; max-width: 70ch; margin: auto; }
body:has(.docs-layout) { max-width: 1200px; }

/* Typography */
a { color: #00ff41; text-decoration: none; }
a:hover { opacity: .7; text-decoration: underline; }
p { margin: 1.4rem 0; line-height: 1.8; }
section { margin: 3rem 0; }
h1 { font-size: 2.1rem; margin: 2rem 0 1.2rem; color: #00ff41; text-align: center; line-height: 1.3; }
h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; line-height: 1.4; }
h2:before { content: '> '; color: #00ff41; }
h3 { font-size: 1.2rem; margin: 1.8rem 0 0.8rem; line-height: 1.4; }

/* Blocks */
blockquote { margin: 1.8rem 0; padding-left: 1.5rem; border-left: 3px solid #333; opacity: 0.9; font-style: italic; }
.code-block { background: #0a0a0a; border: 1px solid #333; padding: 1rem; margin: 1rem 0; }
article { border: 1px solid #333; padding: 1.5rem; background: #0a0a0a; }
article:hover { border-color: #00ff41; }
.terminal-prompt:before { content: '$ '; color: #00ff41; }
.docs-box { background: #0a0a0a; border-left: 3px solid #00ff41; padding: 1.5rem; margin: 2rem 0; }
.terminal-info { padding: 1rem; margin: 1.5rem 0; border-left: 3px solid #00ff41; background: rgba(0,255,65,0.03); }

/* Layout */
nav ul { list-style: none; display: flex; gap: 2rem; justify-content: center; margin: 2rem 0; }
#projects-grid { display: grid; gap: 2rem; margin: 2rem 0; }

/* Docs */
.docs-layout { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; margin: 2rem 0; max-width: none; }
.docs-sidebar { position: sticky; top: 2rem; height: fit-content; padding: 1.5rem; border: 1px solid #333; background: #0a0a0a; }
.docs-sidebar h3 { margin: 0 0 1rem; font-size: 1rem; color: #00ff41; }
.docs-sidebar ul { list-style: none; margin: 0; padding: 0; }
.docs-sidebar li { margin: 0.5rem 0; }
.docs-sidebar a { color: #e8e8e8; font-size: 0.9rem; display: block; padding: 0.5rem 0 0.5rem 0.5rem; border-left: 2px solid transparent; }
.docs-sidebar a:hover, .docs-sidebar a.active { color: #00ff41; border-left-color: #00ff41; opacity: 1; }
.docs-content { min-width: 0; max-width: 65ch; }

/* Status */
[data-status]:before { content: '['; color: #666; }
[data-status]:after { content: ']'; color: #666; }
[data-status*="completed"] { color: #00ff41; }
[data-status*="in_development"], [data-status*="ongoing"] { color: #ff6b35; }

/* Mobile */
@media (max-width: 600px) {
    body { padding: 1rem; font-size: 17px; max-width: 100%; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.3rem; }
    nav ul { flex-direction: column; gap: 1rem; }
    .docs-layout { grid-template-columns: 1fr; gap: 1rem; }
    .docs-sidebar { position: static; order: 2; margin-top: 2rem; }
}