*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-color-1: #1c2b14;
    --bg-color-2: #243b1c;
    --bg-color-3: #2d4a22;
    --bg-color-4: #3a5530;
    --bg-color-5: #4a6e3a;
    --bg-color-6: #5a8048;
    --color-1: #faf3e6;
    --color-2: #f0e6cf;
    --color-3: #c9b898;
    --color-4: #a09478;
    --color-5: #7a6858;
    --gold: #c9a227;
    --gold-deep: #9b7a0a;
    --accent: #4a6e3a;
    --accent-color: #faf3e6;
    --color-error: #ef4444;
    --brutalist-radius: 3px;
}

html, body {
    width: 100%; min-height: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg-color-1);
    color: var(--color-1);
    line-height: 1.6;
}

body {
    background-image:
        linear-gradient(var(--bg-color-2) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-color-2) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
}

.md-page {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
    min-height: 100vh;
}

.md-container {
    width: 100%;
    max-width: 820px;
}

.md-content {
    background: var(--bg-color-2);
    border: 1.5px solid var(--gold);
    border-radius: var(--brutalist-radius);
    padding: 2.5rem 2.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Typography */
.md-content h1 { font-size: 2rem; font-weight: 700; color: var(--color-1); margin: 0 0 1rem 0; line-height: 1.3; letter-spacing: -0.02em; border-bottom: 2px solid var(--gold); padding-bottom: 0.75rem; }
.md-content h2 { font-size: 1.5rem; font-weight: 700; color: var(--color-1); margin: 2rem 0 0.75rem 0; line-height: 1.3; letter-spacing: -0.01em; border-bottom: 1px solid var(--bg-color-4); padding-bottom: 0.5rem; }
.md-content h3 { font-size: 1.25rem; font-weight: 600; color: var(--color-2); margin: 1.5rem 0 0.5rem 0; line-height: 1.4; }
.md-content h4 { font-size: 1.1rem; font-weight: 600; color: var(--color-3); margin: 1.25rem 0 0.5rem 0; }
.md-content h5, .md-content h6 { font-size: 1rem; font-weight: 600; color: var(--color-4); margin: 1rem 0 0.5rem 0; }

.md-content p { margin: 0 0 1rem 0; color: var(--color-2); line-height: 1.8; }
.md-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; }
.md-content a:hover { color: var(--gold-deep); }

.md-content strong { font-weight: 700; color: var(--color-1); }
.md-content em { font-style: italic; color: var(--color-2); }

.md-content ul, .md-content ol { margin: 0 0 1rem 1.5rem; color: var(--color-2); }
.md-content li { margin-bottom: 0.4rem; line-height: 1.7; }
.md-content li > ul, .md-content li > ol { margin-top: 0.4rem; margin-bottom: 0; }

.md-content blockquote {
    border-left: 3px solid var(--gold);
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--bg-color-3);
    border-radius: 0 var(--brutalist-radius) var(--brutalist-radius) 0;
    color: var(--color-2);
}
.md-content blockquote p:last-child { margin-bottom: 0; }

.md-content code {
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
    background: var(--bg-color-3);
    border: 1px solid var(--bg-color-4);
    border-radius: 3px;
    padding: 0.15em 0.4em;
    color: var(--gold);
}

.md-content pre {
    margin: 0 0 1rem 0;
    background: var(--bg-color-1);
    border: 1px solid var(--bg-color-4);
    border-radius: var(--brutalist-radius);
    padding: 1rem;
    overflow-x: auto;
}
.md-content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-2);
    line-height: 1.6;
}

.md-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
}
.md-content th {
    background: var(--bg-color-3);
    color: var(--gold);
    font-weight: 700;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bg-color-4);
}
.md-content td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bg-color-4);
    color: var(--color-2);
}
.md-content tr:nth-child(even) td { background: var(--bg-color-3); }

.md-content hr {
    border: none;
    border-top: 1px solid var(--bg-color-4);
    margin: 2rem 0;
}

.md-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--brutalist-radius);
    border: 1px solid var(--bg-color-4);
    margin: 0.5rem 0;
}

/* Responsive */
@media screen and (max-width: 640px) {
    .md-content { padding: 1.5rem 1.25rem; }
    .md-content h1 { font-size: 1.5rem; }
    .md-content h2 { font-size: 1.25rem; }
    .md-content h3 { font-size: 1.1rem; }
    .md-content pre { padding: 0.75rem; }
    .md-content table { font-size: 0.8rem; }
    .md-content th, .md-content td { padding: 0.4rem 0.5rem; }
}

@media screen and (max-width: 400px) {
    .md-page { padding: 1rem 0.5rem; }
    .md-content { padding: 1.25rem 1rem; }
    .md-content h1 { font-size: 1.35rem; }
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-color-5) var(--bg-color-1);
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: var(--bg-color-1);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--bg-color-5);
    border-radius: var(--brutalist-radius);
    border: 2px solid var(--bg-color-1);
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--bg-color-6);
}
*::-webkit-scrollbar-corner {
    background: var(--bg-color-1);
}

@media screen and (max-width: 640px) {
    * {
        scrollbar-width: none;
    }
    *::-webkit-scrollbar {
        display: none;
    }
}