:root { --site-primary:#315f89; --site-background:#f6f8fa; --site-surface:#fff; --site-text-primary:#1b2c3e; --site-text-secondary:#526477; --site-lines-default:#dce3e9; --site-accent:#e7eef5; color-scheme:light; }
:root[data-theme="dark"] { --site-primary:#91bce9; --site-background:#131b24; --site-surface:#1c2733; --site-text-primary:#edf3f9; --site-text-secondary:#b2c1d1; --site-lines-default:#354557; --site-accent:#253749; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-padding-top:7rem; }
body { margin:0; color:var(--site-text-primary); background:var(--site-background); font-family:Inter, 'Segoe UI', system-ui, sans-serif; font-size:16px; line-height:1.65; }
a { color:var(--site-primary); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
button, input, select, textarea { font:inherit; }
button:not(:disabled) { cursor:pointer; }
img, video { max-width:100%; }
h1,h2,h3,h4,h5,h6 { line-height:1.2; font-weight:650; margin:0 0 1rem; letter-spacing:-.025em; }
h1 { font-size:clamp(2.5rem,5vw,4.5rem); letter-spacing:-.045em; }
h2 { font-size:clamp(1.5rem,3vw,2rem); }
p { margin:0 0 1rem; }
:focus-visible { outline:3px solid var(--site-primary); outline-offset:4px; }
h1:focus, main:focus { outline:none; }
.skip-link { position:fixed; top:-100px; left:1rem; z-index:2000; padding:.75rem; background:var(--site-surface); }
.skip-link:focus { top:1rem; }
.site-header { background:var(--site-surface); border-bottom:1px solid var(--site-lines-default); }
.header-inner { max-width:1240px; margin:auto; min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1rem 2rem; }
.site-brand { display:flex; align-items:center; gap:.6rem; color:var(--site-primary); text-decoration:none; white-space:nowrap; font:2rem 'Caveat Brush', cursive; }
.site-brand img { object-fit:contain; }
.site-nav { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.site-nav a { color:var(--site-text-secondary); text-decoration:none; font-size:.92rem; font-weight:600; padding:.65rem .8rem; min-height:44px; border:0; }
.site-nav a.active, .site-nav a:hover { color:var(--site-primary); text-decoration:underline; }
.theme-toggle.e-btn { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; color:var(--site-primary); }
.theme-icon { display:block; }
.site-content { width:min(1200px,100%); margin:auto; padding:3.5rem 2rem 5rem; min-height:calc(100vh - 200px); }
.site-footer { border-top:1px solid var(--site-lines-default); padding:1.5rem 2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--site-text-secondary); font-size:.8rem; }
.eyebrow { color:var(--site-primary); font-size:.72rem; font-weight:700; letter-spacing:.13em; margin-bottom:1rem; }
.page-heading { margin:1rem 0 3rem; max-width:760px; }
.page-heading p:last-child { color:var(--site-text-secondary); font-size:1.1rem; }
.surface { background:var(--site-surface); border:1px solid var(--site-lines-default); border-radius:16px; padding:1.5rem; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin:1.5rem 0; }
.e-btn, .e-css.e-btn { font-family:inherit; text-transform:none; border-radius:7px; }
.home-hero { display:grid; grid-template-columns:240px minmax(0,1fr); gap:4rem; padding:1rem 0 3.5rem; }
.profile-panel { padding-top:2rem; text-align:center; }
.portrait-button.e-btn { display:block; padding:0; border:3px solid var(--site-lines-default); border-radius:50%; margin:0 auto 1.5rem; overflow:hidden; width:170px; height:170px; background:var(--site-surface); }
.portrait-button img { width:100%; height:100%; object-fit:cover; }
.social-links { display:flex; justify-content:center; gap:1rem; font-size:.85rem; }
.social-links a { display:inline-flex; align-items:center; min-height:44px; }
.hero-copy h1 span { color:var(--site-primary); }
.hero-copy p:not(.eyebrow) { max-width:680px; }
.lead { font-size:1.2rem; }
.contact-line { display:flex; align-items:center; justify-content:center; gap:.35rem; margin:.25rem 0 1rem; font-size:.85rem; color:var(--site-text-secondary); }
.copy-email-control { position:relative; display:inline-flex; }
.copy-email-button.e-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; min-width:32px; padding:0; border-radius:50%; color:var(--site-primary); }
.copy-feedback { position:absolute; bottom:calc(100% + .35rem); left:50%; transform:translateX(-50%); width:max-content; pointer-events:none; font-size:.8rem; }
.copy-feedback:not(:empty) { padding:.3rem .6rem; border:1px solid var(--site-lines-default); border-radius:6px; background:var(--site-surface); color:var(--site-text-primary); box-shadow:0 2px 8px #0002; }
.home-feature { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:2rem; align-items:center; }
.home-feature img { width:100%; height:250px; object-fit:cover; border-radius:10px; }
.project-list { display:grid; gap:2rem; }
.project-card { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; padding:2rem; align-items:center; }
.project-copy h2 { margin-top:.8rem; }
.feature-list { padding-left:1.2rem; margin:1rem 0 1.5rem; }
.feature-list li { margin:.5rem 0; }
.tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.tag { display:inline-block; font-size:.75rem; background:var(--site-accent); color:var(--site-primary); padding:.2rem .6rem; border-radius:5px; }
.project-media { min-width:0; border-radius:10px; overflow:hidden; background:var(--site-background); }
.project-media img,.project-media video { width:100%; height:100%; object-fit:contain; }
.e-carousel .e-carousel-items .e-carousel-item { padding-bottom:24px; }
.experience-timeline { list-style:none; padding:0; margin:0; }
.experience-timeline > li { display:grid; grid-template-columns:160px minmax(0,1fr); gap:2rem; padding-bottom:2rem; }
.timeline-date { font-weight:700; color:var(--site-primary); padding-top:1.5rem; }
.experience-card { border-left:4px solid var(--site-primary); padding:2rem; }
.role-title { color:var(--site-primary); font-weight:600; }
.section-heading { display:flex; align-items:baseline; flex-wrap:wrap; justify-content:space-between; gap:1rem; }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.blog-card { padding:0; overflow:hidden; }
.blog-image-link { display:block; background:var(--site-accent); }
.blog-card img { display:block; width:100%; height:220px; object-fit:contain; padding:1rem; }
.blog-copy { padding:2rem; }
.blog-copy h2 a { text-decoration:none; color:var(--site-text-primary); }
.blog-copy time { display:block; color:var(--site-text-secondary); font-size:.8rem; margin-bottom:1rem; }
.article-content { max-width:900px; margin:auto; }
.code-sample { white-space:pre; overflow:auto; padding:1.5rem; border:1px solid var(--site-lines-default); background:var(--site-surface); border-radius:12px; font-size:.8rem; }
.blazor-error-boundary { background:#b32121; padding:1rem; color:white; }
.blazor-error-boundary::after { content:"An error has occurred."; }
#blazor-error-ui { display:none; position:fixed; bottom:0; left:0; width:100%; z-index:10000; padding:.8rem 1.5rem; background:#b32121; color:white; }
#blazor-error-ui a { color:white; }
#blazor-error-ui .dismiss.e-btn { cursor:pointer; position:absolute; right:1rem; top:.25rem; color:white; min-width:40px; min-height:40px; }
@media(max-width:900px) {
 .header-inner { flex-wrap:wrap; gap:.7rem; padding:1rem 1.25rem; }
 .site-nav { order:3; flex-basis:100%; justify-content:space-between; gap:.25rem; }
 .site-nav a { padding:.65rem .45rem; font-size:.85rem; }
 .brand-detail { display:none; }
 .site-content { padding:2rem 1.25rem 3rem; }
 .home-hero { grid-template-columns:1fr; gap:2rem; }
 .profile-panel { padding:0; } .home-feature,.project-card { grid-template-columns:1fr; }
 .experience-timeline > li { grid-template-columns:1fr; gap:.5rem; }
 .timeline-date { padding-top:0; } .blog-grid { grid-template-columns:1fr; }
 .project-card,.experience-card,.home-feature { padding:1.25rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; transition:none!important; } }
.text-danger { color:#c53636; }