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

:root {
    --bg-color: #EFE8E3;
    --text-color: #523E29;
    --link-color: #C29848;
    --accent-pink: #D793A5;
    --sidebar-bg: #ffffff;
    --border-color: #D3C7CC;
    --warm-brown: #A58364;
    --muted-blue: #ece5df;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
    width: 280px;
    padding: 2rem;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.logo {
    margin-bottom: 2rem;
}

.logo-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.search-container {
    margin-bottom: 2rem;
}

.search-bar {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
    background: var(--sidebar-bg);
}

.search-icon {
    color: var(--text-color);
    margin-right: 0.5rem;
    opacity: 0.6;
}

#search-input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-color);
    background: transparent;
}

#search-input::placeholder {
    color: var(--muted-blue);
    opacity: 0.6;
}


.navigation {
    margin-bottom: 2rem;
}

.nav-link {
    display: block;
    padding: 0.5rem 0;
    color: var(--accent-pink);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--warm-brown);
}

.nav-link.active {
    color: var(--text-color);
    font-weight: 500;
}

.connect-section {
    margin-bottom: 2rem;
}

.connect-heading {
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon {
    color: var(--text-color);
    transition: opacity 0.2s;
}

.social-icon:hover {
    opacity: 0.7;
}


/* Main Content Styles */
.main-content {
    flex: 1;
    margin-left: 280px;
    padding: 3rem 4rem;
    max-width: 900px;
}

#content-container {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Markdown Content Styles */
.content h1 {
    font-family: "Playfair Display", serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.content h2 {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.content p {
    margin-bottom: 1rem;
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.7;
}

.content a {
    color: var(--accent-pink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.content a:hover {
    border-bottom-color: var(--accent-pink);
}

.content ul,
.content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.content li {
    margin-bottom: 0.5rem;
}

.content code {
    background-color: #D3C7CC;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: 'Monaco', 'Courier New', monospace;
}

.content pre {
    background-color: #D3C7CC;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.content pre code {
    background: none;
    padding: 0;
}

.content blockquote {
    border-left: 3px solid var(--accent-pink);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--warm-brown);
    font-style: italic;
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
}

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

/* Section Headers */
.section-header {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.section-header:first-child {
    margin-top: 0;
}

/* List of Posts/Items */
.post-list {
    list-style: none;
    padding: 0;
}

.post-item {
    margin-bottom: 1rem;
}

.post-link {
    color: var(--accent-pink);
    text-decoration: none;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.post-link:hover {
    color: var(--link-color);
}

.external-link-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* Post Grid Styles */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.post-card {
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.post-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.post-cover-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.post-card-content {
    padding: 1.5rem;
}

.post-card-title {
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
}

/* Post Tags Styles */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}

.tag-link {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--muted-blue);
    color: var(--text-color);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: background-color 0.2s, transform 0.2s;
}

.tag-link:hover {
    background-color: var(--warm-brown);
    color: var(--sidebar-bg);
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .main-content {
        margin-left: 0;
        padding: 2rem 1.5rem;
    }
    
    .post-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem;
    }
}

/* Callout Styles */
.callout {
    border: 1px solid var(--border);
    background-color: var(--bg);
    border-radius: 5px;
    padding: 0 1rem;
    overflow-y: hidden;
    box-sizing: border-box;
    margin: 1rem 0;
}

.callout > .callout-content {
    display: grid;
    transition: grid-template-rows 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
    overflow: hidden;
}

.callout > .callout-content > :first-child {
    margin-top: 0;
}

.callout {
    --callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');
    --callout-icon-abstract: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>');
    --callout-icon-info: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>');
    --callout-icon-todo: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>');
    --callout-icon-tip: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg> ');
    --callout-icon-success: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> ');
    --callout-icon-question: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg> ');
    --callout-icon-warning: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
    --callout-icon-failure: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> ');
    --callout-icon-danger: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> ');
    --callout-icon-bug: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>');
    --callout-icon-example: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg> ');
    --callout-icon-quote: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>');
    --callout-icon-fold: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E');
}

.callout[data-callout] {
    --color: #96A4BD;
    --border: rgba(150, 164, 189, 0.3);
    --bg: rgba(150, 164, 189, 0.1);
    --callout-icon: var(--callout-icon-note);
}

.callout[data-callout="abstract"] {
    --color: #96A4BD;
    --border: rgba(150, 164, 189, 0.3);
    --bg: rgba(150, 164, 189, 0.1);
    --callout-icon: var(--callout-icon-abstract);
}

.callout[data-callout="info"],
.callout[data-callout="todo"] {
    --color: #96A4BD;
    --border: rgba(150, 164, 189, 0.3);
    --bg: rgba(150, 164, 189, 0.1);
    --callout-icon: var(--callout-icon-info);
}

.callout[data-callout="todo"] {
    --callout-icon: var(--callout-icon-todo);
}

.callout[data-callout="tip"] {
    --color: #C29848;
    --border: rgba(194, 152, 72, 0.3);
    --bg: rgba(194, 152, 72, 0.1);
    --callout-icon: var(--callout-icon-tip);
}

.callout[data-callout="success"] {
    --color: #A58364;
    --border: rgba(165, 131, 100, 0.3);
    --bg: rgba(165, 131, 100, 0.1);
    --callout-icon: var(--callout-icon-success);
}

.callout[data-callout="question"] {
    --color: #C29848;
    --border: rgba(194, 152, 72, 0.3);
    --bg: rgba(194, 152, 72, 0.1);
    --callout-icon: var(--callout-icon-question);
}

.callout[data-callout="warning"] {
    --color: #D793A5;
    --border: rgba(215, 147, 165, 0.3);
    --bg: rgba(215, 147, 165, 0.1);
    --callout-icon: var(--callout-icon-warning);
}

.callout[data-callout="failure"],
.callout[data-callout="danger"],
.callout[data-callout="bug"] {
    --color: #D793A5;
    --border: rgba(215, 147, 165, 0.3);
    --bg: rgba(215, 147, 165, 0.1);
    --callout-icon: var(--callout-icon-failure);
}

.callout[data-callout="bug"] {
    --callout-icon: var(--callout-icon-bug);
}

.callout[data-callout="danger"] {
    --callout-icon: var(--callout-icon-danger);
}

.callout[data-callout="example"] {
    --color: #A58364;
    --border: rgba(165, 131, 100, 0.3);
    --bg: rgba(165, 131, 100, 0.1);
    --callout-icon: var(--callout-icon-example);
}

.callout[data-callout="quote"] {
    --color: var(--warm-brown);
    --border: var(--border-color);
    --callout-icon: var(--callout-icon-quote);
}

.callout.is-collapsed > .callout-title > .fold-callout-icon {
    transform: rotateZ(-90deg);
}

.callout.is-collapsed .callout-content > * {
    transition: height 0.1s cubic-bezier(0.02, 0.01, 0.47, 1),
                margin 0.1s cubic-bezier(0.02, 0.01, 0.47, 1),
                padding 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
    overflow-y: clip;
    height: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}

.callout.is-collapsed .callout-content > :first-child {
    margin-top: -1rem;
}

.callout-title {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 1rem 0;
    color: var(--color);
    --icon-size: 18px;
}

.callout-title .fold-callout-icon {
    transition: transform 0.15s ease;
    opacity: 0.8;
    cursor: pointer;
    --callout-icon: var(--callout-icon-fold);
}

.callout-title > .callout-title-inner > p {
    color: var(--color);
    margin: 0;
}

.callout-title .callout-icon,
.callout-title .fold-callout-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 var(--icon-size);
    background-size: var(--icon-size) var(--icon-size);
    background-position: center;
    background-color: var(--color);
    mask-image: var(--callout-icon);
    mask-size: var(--icon-size) var(--icon-size);
    mask-position: center;
    mask-repeat: no-repeat;
    padding: 0.2rem 0;
}

.callout-title-inner {
    font-weight: 600;
}