@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');
:root {
    --noir-base: #0B0C10;      
    --noir-surface-1: #15171E; 
    --noir-surface-2: #1F222B; 
    --text-primary: #E2E8F0;   
    --text-muted: #94A3B8;     
    --text-dark: #475569;      
    --indigo-ink: #6366F1;     
    --indigo-glow: rgba(99, 102, 241, 0.15);
    --amber-muted: #D97706;    
    --green-quiet: #10B981;    
    --border-subtle: #2D3748;
    --border-indigo: #4F46E5;
}
* { box-sizing: border-box; }
body {
    background-color: var(--noir-base);
    color: var(--text-primary);
    font-family: 'Manrope', sans-serif;
    margin: 0; padding: 0;
    line-height: 1.8;
    font-size: 16px;
    overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0 0 1rem 0; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); }
h1 { font-size: 2.5rem; line-height: 1.2; font-weight: 700; }
h2 { font-size: 1.75rem; margin-top: 3rem; color: var(--text-primary); }
h3 { font-size: 1.25rem; }
a { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--indigo-ink); transition: 0.3s; }
a:hover { color: var(--indigo-ink); border-bottom-color: transparent; }
.micro-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); display: block; margin-bottom: 10px; font-weight: 600; }
.editorial-text { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 1.5rem; font-weight: 300; }
.layout-wrapper { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.grid-toc { display: grid; grid-template-columns: 240px 1fr; gap: 60px; }
.toc-rail { position: sticky; top: 40px; height: fit-content; border-right: 1px solid var(--border-subtle); padding-right: 20px; }
.manifest-panel { background: var(--noir-surface-1); padding: 60px; position: relative; border: 1px solid var(--border-subtle); outline: 1px solid var(--border-subtle); outline-offset: -6px; margin-bottom: 60px; }
.card-m { background: var(--noir-surface-2); padding: 30px; border: 1px solid var(--border-subtle); transition: 0.3s; position: relative; }
.card-m:hover { transform: translateY(-3px); border-color: var(--indigo-ink); }
.corner-mark::before { content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-top: 2px solid var(--indigo-ink); border-left: 2px solid var(--indigo-ink); }
.callout-panel { padding: 25px; margin: 30px 0; border: 1px solid var(--border-subtle); background: var(--noir-surface-1); }
.type-info { border-left: 2px solid var(--indigo-ink); }
.type-warning { border-left: 2px solid var(--amber-muted); background: rgba(217, 119, 6, 0.05); }
.type-steps { border-left: 1px solid var(--border-subtle); padding-left: 30px; }
.btn-indigo { display: inline-block; padding: 16px 32px; background: var(--indigo-ink); color: #fff; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.05em; border: 1px solid transparent; transition: 0.3s; border-radius: 2px; }
.btn-indigo:hover { background: transparent; border-color: var(--indigo-ink); color: var(--indigo-ink); }
.nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: 60px; }
.brand-logo { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; }
.nav-links a { margin-left: 30px; font-size: 0.9rem; color: var(--text-muted); border: none; }
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
.watermark-monogram { position: absolute; bottom: 20px; right: 20px; font-size: 8rem; opacity: 0.03; font-weight: 700; pointer-events: none; line-height: 1; color: var(--text-primary); }
.directory-row { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-subtle); background: var(--noir-surface-1); margin-bottom: 10px; }
.directory-meta { display: flex; gap: 15px; }
.badge { font-size: 0.7rem; padding: 4px 8px; background: var(--noir-surface-2); color: var(--text-muted); border: 1px solid var(--border-subtle); }
@media (max-width: 900px) { .grid-toc { grid-template-columns: 1fr; } .toc-rail { display: none; } .manifest-panel { padding: 30px; } }