:root { --text-color: #000; --bg-color: #fff; --link-color: #46f; }

[data-theme="dark"], body.dark { --text-color: #fff; --bg-color: #000; --link-color: #38f; }

body { background-color: var(--bg-color); color: var(--text-color); }

body { font: 16px / 1.6 "PT Sans", system-ui, sans-serif; font-size: calc(0.8rem + 0.2vw); max-width: 60rem; margin: auto; padding: 2rem; }

a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { margin: 1.5rem 0 0.5rem 0; line-height: 1.2; }

p { margin: 1rem 0; text-align: justify; }

ul, ol { margin: 1rem 0; padding-left: 2rem; }

li { margin: 0.3rem 0; }

code { font-family: 'Monaco', 'Consolas', 'Courier New', monospace; font-size: 0.9em; padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid transparent; }

:root code { color: white; background: black; }

[data-theme="dark"] code, body.dark code { color: #e6e6e6; background: #2d2d2d; border-color: #404040; }

div.highlighter-rouge code { display: block; overflow-x: auto; white-space: pre-wrap; padding: 1rem; margin: 1rem 0; border-radius: 5px; }

pre { border-radius: 8px; margin: 1.5rem 0; padding: 1rem 1.4rem; overflow-x: auto; font-size: 0.85em; border: 1px solid transparent; }

:root pre { background: black; color: white; }

[data-theme="dark"] pre, body.dark pre { background: #1e1e1e; color: #f0f0f0; border-color: #333; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; }

th, td { border: 1px solid #ddd; padding: 0.5rem; text-align: left; }

th { background-color: #f2f2f2; }

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

blockquote { border-left: 3px solid #ccc; padding-left: 1.5rem; margin: 1.25rem 0; font-style: italic; }

hr { border: 1px solid #ccc; margin: 2rem 0; }

#table-of-contents { position: fixed; bottom: 20px; right: 20px; background: rgba(0, 0, 0, 0.9); color: white; border-radius: 8px; padding: 10px; max-width: 300px; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }

.toc-toggle-btn { background: none; border: none; color: white; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 5px; border-radius: 4px; font-size: 14px; }

.toc-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); }

#toc-list { list-style: none; padding: 0; margin: 10px 0 0 0; max-height: 300px; overflow-y: auto; }

#toc-list.toc-collapsed { display: none; }

#toc-list li { margin: 5px 0; }

#toc-list a { color: #ccc; text-decoration: none; font-size: 13px; display: block; padding: 3px 0; }

#toc-list a:hover { color: white; }

.toc-h1 { margin-left: 0; }

.toc-h2 { margin-left: 15px; }

.toc-h3 { margin-left: 30px; }

.toc-h4 { margin-left: 45px; }

.theme-toggle { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 6px; font-size: 14px; transition: background-color 0.2s ease; -webkit-tap-highlight-color: transparent; user-select: none; }

.theme-toggle:hover { background: rgba(0, 0, 0, 0.1); }

#reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(0, 0, 0, 0.1); z-index: 9999; }

#reading-progress-fill { height: 100%; background: #007acc; width: 0%; transition: width 0.3s ease; }

#lightbox { display: none !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9999; justify-content: center; align-items: center; }

.lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 30px; cursor: pointer; display: none; }

.lightbox-content { max-width: 90%; max-height: 90%; object-fit: contain; }

header nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid #eee; }

header nav > div { display: flex; align-items: center; gap: 2rem; }

.site-logo { font-weight: 600; font-size: 1.2em; color: var(--text-color) !important; text-decoration: none !important; }

header nav a:not(.site-logo) { background: #000; color: #fff !important; padding: 0.5rem 1.2rem; border-radius: 6px; text-decoration: none !important; font-weight: 500; font-size: 0.9em; transition: all 0.2s ease; border: 2px solid #000; }

header nav a:not(.site-logo):hover { background: transparent; color: #000 !important; }

[data-theme="dark"] header nav { border-bottom-color: #333; }

[data-theme="dark"] header nav a:not(.site-logo) { background: #fff; color: #000 !important; border-color: #fff; }

[data-theme="dark"] header nav a:not(.site-logo):hover { background: transparent; color: #fff !important; }

@media (max-width: 768px) { header nav { flex-direction: column; gap: 1rem; text-align: center; }
  header nav > div { flex-direction: column; gap: 1rem; }
  #table-of-contents { bottom: 10px; right: 10px; max-width: 250px; font-size: 12px; }
  .toc-toggle-btn { font-size: 12px; }
  #toc-list a { font-size: 11px; }
  body { padding-bottom: 80px; } }