*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#fafafa;--text:#333;--link:#0066cc;--code-bg:#f4f4f4;--border:#ddd}
body{font:16px/1.6 system-ui,sans-serif;background:var(--bg);color:var(--text);max-width:800px;margin:0 auto;padding:20px}
header{border-bottom:1px solid var(--border);padding:20px 0;margin-bottom:30px}
nav{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.5em;font-weight:700;color:var(--link);text-decoration:none}
#nav-links a{margin-left:20px;color:var(--text);text-decoration:none}
#nav-links a:hover{color:var(--link)}
article{margin-bottom:40px}
h1,h2,h3{line-height:1.3;margin:1.5em 0 .8em}
h1 a{color:inherit;text-decoration:none}
a{color:var(--link)}
a:hover{text-decoration:underline}
.meta{color:#666;font-size:.9em;margin-bottom:1em}
.tag{margin-right:8px;padding:2px 8px;background:var(--code-bg);border-radius:4px;font-size:.85em;text-decoration:none}
.tag:hover{background:var(--border);text-decoration:none}
pre{background:var(--code-bg);padding:15px;border-radius:8px;overflow-x:auto;margin:1em 0}
code{font-family:Consolas,monospace;font-size:.9em}
p code{background:var(--code-bg);padding:2px 6px;border-radius:4px}
blockquote{border-left:4px solid var(--link);padding-left:20px;margin:1em 0;color:#555}
img{max-width:100%;height:auto;border-radius:8px}
input,textarea,button{font:inherit;padding:8px 12px;border:1px solid var(--border);border-radius:4px}
button{background:var(--link);color:#fff;border:none;cursor:pointer}
button:hover{opacity:.9}
.file-item{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--border)}
.file-item a{color:var(--text)}
.upload-area{border:2px dashed var(--border);padding:40px;text-align:center;margin:20px 0;border-radius:8px}
.upload-area.dragover{border-color:var(--link);background:rgba(0,102,204,.05)}
footer{text-align:center;color:#666;font-size:.9em;margin-top:60px;padding:20px 0;border-top:1px solid var(--border)}
@media(max-width:600px){body{padding:15px}.logo{font-size:1.2em}}