:root { --purple: #7B2D8E; --dark: #1a1a2e; --card: #16213e; --text: #eee; --code-bg: #0d1117; --accent: #e94560; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--dark); color: var(--text); line-height: 1.7; }
.nav { background: rgba(0,0,0,0.3); padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.nav a { color: var(--purple); text-decoration: none; font-weight: 600; }
.nav span { opacity: 0.4; }
article { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
h1 { font-size: 2rem; margin-bottom: 0.5rem; }
h1 span { color: var(--purple); }
.meta { opacity: 0.5; font-size: 0.85rem; margin-bottom: 2rem; }
h2 { color: var(--purple); font-size: 1.4rem; margin: 2rem 0 0.75rem; border-bottom: 1px solid rgba(123,45,142,0.2); padding-bottom: 0.4rem; }
h3 { color: var(--text); font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
p { margin-bottom: 1rem; opacity: 0.9; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.4rem; opacity: 0.9; }
pre { background: var(--code-bg); border-radius: 8px; padding: 1rem 1.25rem; overflow-x: auto; margin-bottom: 1.25rem; border: 1px solid rgba(255,255,255,0.05); }
code { font-family: 'Fira Code', monospace; font-size: 0.88rem; }
p code { background: var(--code-bg); padding: 0.15rem 0.4rem; border-radius: 4px; }
.callout { background: var(--card); border-left: 4px solid var(--purple); border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; margin: 1.25rem 0; }
.callout strong { color: var(--purple); }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
th { text-align: left; color: var(--purple); border-bottom: 2px solid rgba(123,45,142,0.3); padding: 0.5rem; font-size: 0.9rem; }
td { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 0.5rem; font-size: 0.9rem; opacity: 0.9; }
.tip-box { background: linear-gradient(135deg, var(--card), rgba(123,45,142,0.15)); border-radius: 12px; padding: 1.5rem; margin: 2rem 0; text-align: center; border: 1px solid rgba(123,45,142,0.3); }
.tip-box h3 { color: var(--purple); margin: 0 0 0.5rem; }
.tip-box p { margin: 0; opacity: 0.7; font-size: 0.9rem; }
a { color: var(--purple); }
footer { text-align: center; padding: 2rem; opacity: 0.3; font-size: 0.8rem; }
</style>