:root { --bg-surface: #252525; --border: #3a3a3a; --text-main: #f1f5f9; --accent: #6e48c3; --font-body: system-ui, sans-serif; color-scheme: dark; font-family: var(--font-body); line-height: 1.7; background: #191919; color: var(--text-main); }
* { box-sizing: border-box; }
body { max-width: 1000px; margin: auto; padding: 24px; overflow-wrap: anywhere; }
header, nav, footer { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
header { justify-content: space-between; }
footer { padding-block: 32px; }
a { color: #c4a8e8; text-underline-offset: 4px; }
a:hover { color: #fff; }
h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.3; }
h2, h3 { line-height: 1.4; }
section, article { margin-block: 32px; }
img { max-width: 100%; height: auto; border-radius: 16px; }
.chat-project-body { padding-block: 16px; }
.chat-project-tags, .chat-skill-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chat-tag, .chat-skill-chip { padding: 4px 12px; background: #252525; border-radius: 20px; }
.chat-exp-item, .chat-skills-card > div { padding-block: 12px; }
.chat-exp-role { font-weight: 700; }
.chat-exp-period { margin-inline-start: 16px; }
.contact-direct-row { display: flex; align-items: center; gap: 12px; margin-block: 12px; }
.contact-social-row { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; text-decoration: none; }
header a, nav a, footer a, li a { display: inline-block; padding-block: 6px; }
svg { width: 20px; height: 20px; vertical-align: middle; }