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

html { scroll-behavior: smooth; scroll-padding-top: 200px;}

header { background: linear-gradient(135deg, #1a1612 0%, #2d2a26 100%); color: #f8f7f3; border-bottom: 4px solid var(--doc-accent); position: fixed; width:100%; top: 0; z-index: 100;}

main { margin-top:70px;}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px;}

h1 { font-size: 1.8rem; margin-bottom: 0.5em;}
h2 { font-size: 1.25rem; margin-top: 2.2em; border-left: 4px solid #444; padding-left: 12px;}
h3 { margin-top: 24px; margin-bottom: 10px;}
h4 { font-weight: 700; font-size: 1.1rem; margin-top: 25px; margin-bottom: 10px; color: var(--doc-accent-soft);}

main { padding: 20px 0 80px;}

section { background: white; margin-bottom: 16px; padding: 20px; border: 1px solid var(--doc-border); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.03);}

.version { font-size: 0.85rem; opacity: 0.85;}

.tagline { margin-top: 10px; font-size: 0.85rem; font-style: italic; border-left: 3px solid var(--doc-accent); padding-left: 16px;}

.warning { background: #fef2f2; border-left: 4px solid var(--doc-red); padding: 15px 20px; margin: 15px 0;
 border-radius: 4px;}

.warning::before { content: '⚠️ '; font-size: 1.2rem; margin-right: 5px;}

nav { background: var(--doc-sidebar); padding: 6px 0;}
nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px;}
nav a { text-decoration: none; background: white; color: var(--doc-text); border: 1px solid var(--doc-border); padding: 4px 8px; font-size: 0.85rem;  font-weight: 600;}
nav a:hover { background: var(--doc-accent); color: white;}

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

p { margin-bottom: 12px;}
ul { margin-left: 24px; margin-bottom: 12px;}

li { margin-bottom: 6px;}

strong { font-weight: 700; color: var(--doc-accent);}

code { background: var(--doc-code); color: #f8f7f3; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 0.9em;}

.button-doc { background: var(--doc-highlight); border-left: 4px solid var(--doc-accent); padding: 20px; margin: 20px 0; border-radius: 4px;}

.button-doc strong { display: block; font-size: 1.1rem; margin-bottom: 8px;}

.info { background: #eff6ff; border-left: 4px solid var(--doc-blue); padding: 15px 20px; margin: 15px 0; border-radius: 4px;}

.success { background: #f0fdf4; border-left: 4px solid var(--doc-green); padding: 15px 20px; margin: 15px 0; border-radius: 4px;}

.color-swatch { display: inline-block; width: 20px; height: 20px; border-radius: 3px; vertical-align: middle; margin-right: 8px; border: 1px solid rgba(0,0,0,0.2);}

table { width: 100%; border-collapse: collapse; margin: 20px 0;}

th, td { text-align: left; padding: 12px; border: 1px solid var(--doc-border);}

th { background: var(--doc-sidebar); font-weight: 700;}

footer { background: var(--doc-code); color: #f8f7f3; padding: 40px 0; text-align: center; border-top: 4px solid var(--doc-accent);}

footer a { color: var(--doc-accent-soft); text-decoration: none;}

footer a:hover { text-decoration: underline;}

@media (max-width: 768px) { h1 { font-size: 2rem;} section { padding: 25px;} nav ul { flex-direction: column; }}