:root { --bg: #0e0e0e; --text: #eef; --link: #fff; --hover: #ff0; --visited: #fef; --nav-bg: #222; --nav-link: #af6; --h1: #8bfde9; --h2: #79c6ff; --prompt: #50fa7b; --subtitle: #888; --code-bg: #222; --pre-bg: #2a2a2a; --border: #444; --footer: #666; }
body { background: var(--bg); color: var(--text); font-family: 'Courier New', monospace; margin: 0 auto; padding: 1em; max-width: 800px; line-height: 1.5; }
a { color: var(--link); text-decoration: underline; transition: color 0.2s ease; }
a:hover, a:visited:hover { color: var(--hover); text-decoration: underline; }
a:visited { color: var(--visited); }
.container { max-width: 800px; margin: auto; }
nav { border: 1px solid var(--border); background: var(--nav-bg); border-radius: 4px; padding: 1em; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
nav a, nav a:visited { margin-right: 1em; text-decoration: none; color: var(--nav-link); font-weight: bold; }
header { border-bottom: 1px solid var(--border); margin-bottom: 2rem; padding-bottom: 0.5rem; }
h1 { color: var(--h1); font-size: 1.5rem; margin-bottom: 0.5rem; }
h2 { color: var(--h2); font-size: 1.2rem; margin-bottom: 0.5rem; }
.prompt { color: var(--prompt); font-weight: bold; }
.subtitle { color: var(--subtitle); font-style: italic; margin-top: 0.2rem; }
section { margin-bottom: 2rem; }
ul { list-style: none; padding-left: 0; }
ul li { margin: 0.5rem 0; }
code { background: var(--code-bg); padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.95em; }
pre code { background: none; }
pre { background: var(--pre-bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem; overflow-x: auto; }
footer { font-size: 0.9rem; text-align: center; color: var(--footer); margin-top: 2rem; }
table { border-collapse: collapse; border: 1px solid #495057; border-radius: 4px; overflow: hidden; font-size: 90%; width: 100%; }
table thead { background-color: #343a40; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; }
table thead th { padding: 4px; text-align: left; font-weight: 600; border-bottom: 2px solid #495057; }
table tbody tr:nth-child(odd) { background-color: #1c2024; color: #e9ecef; }
table tbody tr:nth-child(even) { background-color: #242a30; color: #f8f9fa; }
table tbody tr:hover { background-color: #293037; color: #fff; transition: all 0.2s ease; }
table tbody td { padding: 12px 15px; border-bottom: 1px solid #495057; }
table tfoot { background-color: #343a40; color: #fff; font-weight: bold; }
table tfoot td { padding: 10px 15px; border-top: 2px solid #495057; }
#articleFoot { border: 1px solid var(--border); background: var(--nav-bg); border-radius: 4px; padding: 4px; font-size: 80%; margin-top:1em; }
@media (max-width: 768px) { table { display: block; overflow-x: auto; } body { padding: 1em 0.5em; } }
.video-placeholder { position: relative; padding-bottom: 56.25%; height: 0; background-color: #000; cursor: pointer; overflow: hidden; }
.video-placeholder .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0008; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2em; transition: all 0.3s ease; }
.video-placeholder:hover .overlay { background: rgba(0,0,0,0.5); transform: scale(1.02); }