*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);font-size:var(--font-size-base, 16px);line-height:1.6;color:var(--color-text, #333);background-color:var(--color-background, #fff);transition:background-color .3s,color .3s}h1{font-size:var(--font-size-h1, 2.5rem);font-weight:700;margin-bottom:var(--spacing-lg, 1.5rem);color:var(--color-heading, #000)}h2{font-size:var(--font-size-h2, 2rem);font-weight:700;margin-bottom:var(--spacing-md, 1rem);color:var(--color-heading, #000)}h3{font-size:var(--font-size-h3, 1.5rem);font-weight:600;margin-bottom:var(--spacing-sm, .75rem);color:var(--color-heading, #000)}p{margin-bottom:var(--spacing-md, 1rem)}a{color:var(--color-primary, #007bff);text-decoration:none;transition:color .2s}a:hover{color:var(--color-primary-dark, #0056b3);text-decoration:underline}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md, 1rem)}section{padding:var(--spacing-xl, 3rem) var(--spacing-md, 1rem)}@media (max-width: 768px){h1{font-size:2rem}h2{font-size:1.5rem}section{padding:var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem)}}@media (max-width: 480px){h1{font-size:1.5rem}h2{font-size:1.25rem}section{padding:var(--spacing-md, 1rem)}}:root{--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 3rem;--spacing-2xl: 4rem;--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-family-mono: "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-h3: 1.5rem;--font-size-h2: 2rem;--font-size-h1: 2.5rem;--font-weight-normal: 400;--font-weight-semibold: 600;--font-weight-bold: 700;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-full: 9999px;--border-width: 1px;--border-width-thick: 2px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1)}.header{background:linear-gradient(135deg,var(--color-primary, #007bff),var(--color-primary-dark, #0056b3));color:var(--color-on-primary, #fff);padding:var(--spacing-2xl, 4rem) var(--spacing-md, 1rem);text-align:center;border-bottom:var(--border-width, 1px) solid var(--color-border, #ddd)}.header h1{color:var(--color-on-primary, #fff);margin:0}.header-intro{font-size:var(--font-size-lg, 1.125rem);margin-top:var(--spacing-md, 1rem);color:var(--color-on-primary, #fff);opacity:.95;max-width:800px;margin-left:auto;margin-right:auto}.header-links{margin-top:var(--spacing-md, 1rem);font-size:.875rem;display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap}.header-link{color:var(--color-on-primary, #fff);text-decoration:none;opacity:.9;transition:opacity .2s ease;font-weight:500}.header-link:hover{opacity:1;text-decoration:underline}@media (max-width: 768px){.header{padding:var(--spacing-xl, 3rem) var(--spacing-md, 1rem)}.header-intro{font-size:1rem}.header-links{font-size:.8rem}}.personal-card-section{background-color:var(--color-background-alt, #f5f5f5);padding:var(--spacing-xl, 3rem) var(--spacing-md, 1rem)}.personal-card{background:var(--color-surface, #fff);border-radius:var(--border-radius-lg, 12px);padding:var(--spacing-lg, 1.5rem);box-shadow:var(--shadow-md, 0 4px 6px rgba(0, 0, 0, .1));display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md, 1rem);max-width:800px;margin:0 auto}.personal-field{display:flex;flex-direction:column;gap:var(--spacing-xs, .25rem);padding:var(--spacing-sm, .5rem);border-radius:var(--border-radius-sm, 4px);background-color:var(--color-background, #fff)}.personal-field strong{font-size:var(--font-size-sm, .875rem);color:var(--color-text-secondary, #666);text-transform:uppercase;letter-spacing:.5px}.personal-field a{color:var(--color-primary, #007bff);word-break:break-all}@media (max-width: 768px){.personal-card{grid-template-columns:1fr}}.portfolio-card{background:var(--color-surface, #fff);border-radius:var(--border-radius-lg, 12px);box-shadow:var(--shadow-md, 0 4px 6px rgba(0, 0, 0, .1));transition:transform var(--transition-base, .25s),box-shadow var(--transition-base, .25s);display:flex;flex-direction:column;cursor:pointer;overflow:hidden}.portfolio-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, .1))}.portfolio-card-image{width:100%;height:auto;max-height:250px;object-fit:cover;display:block}.portfolio-card-content{padding:var(--spacing-lg, 1.5rem);display:flex;flex-direction:column;gap:var(--spacing-md, 1rem)}.portfolio-card h3{margin:0;color:var(--color-heading, #000);font-size:var(--font-size-h3, 1.5rem)}.portfolio-description{color:var(--color-text-secondary, #666);margin:0;flex-grow:1;line-height:1.5;font-size:.95rem}.portfolio-link{align-self:flex-start;color:var(--color-primary, #007bff);font-weight:var(--font-weight-semibold, 600);padding:var(--spacing-sm, .5rem) var(--spacing-md, 1rem);border-radius:var(--border-radius-sm, 4px);transition:all var(--transition-fast, .15s);display:inline-block}.portfolio-link:hover{background-color:var(--color-primary-light, #e7f1ff);transform:translate(4px);text-decoration:none}@media (max-width: 480px){.portfolio-card-content{padding:var(--spacing-md, 1rem)}}.portfolio-card h3{font-size:1.25rem}} .portfolio-section{padding:var(--spacing-xl, 3rem) var(--spacing-md, 1rem);background-color:var(--color-background, #fff)}.portfolio-section h2{text-align:center;margin-bottom:var(--spacing-2xl, 4rem)}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-lg, 1.5rem)}.empty-state{grid-column:1 / -1;text-align:center;color:var(--color-text-secondary, #666);padding:var(--spacing-xl, 3rem);font-size:var(--font-size-lg, 1.125rem)}@media (max-width: 768px){.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--spacing-md, 1rem)}.portfolio-section h2{margin-bottom:var(--spacing-lg, 1.5rem)}}