@layer tokens, base, layout, components, utilities;@layer tokens{:root{color-scheme:light;--seed-bg:#f4f7fb;--seed-surface:#fff;--seed-text:#0f172a;--seed-text-muted:#64748b;--seed-accent:oklch(0.72 0.17 220);--seed-accent-hover:color-mix(in oklch,var(--seed-accent) 80%,#000);--seed-link:var(--seed-accent);--seed-link-hover:var(--seed-accent-hover);--seed-border:#dbe4ee;--seed-border-strong:#b8c5d6;--accent-200:color-mix(in oklch,var(--seed-accent) 30%,#fff);--accent-300:color-mix(in oklch,var(--seed-accent) 50%,#fff);--accent-400:color-mix(in oklch,var(--seed-accent) 75%,#fff);--accent-500:var(--seed-accent);--accent-600:color-mix(in oklch,var(--seed-accent) 80%,#000);--accent-700:color-mix(in oklch,var(--seed-accent) 60%,#000);--accent-800:color-mix(in oklch,var(--seed-accent) 40%,#000)}html:has(input[name=theme-preference][value=dark]:checked){color-scheme:dark}@media (prefers-color-scheme:dark){html:has(input[name=theme-preference][value=system]:checked){color-scheme:dark}}:root,html{--color-bg:light-dark(var(--seed-bg),oklch(0.18 0.02 260));--color-surface:light-dark(var(--seed-surface),oklch(0.22 0.03 260));--color-text:light-dark(var(--seed-text),oklch(0.88 0.02 260));--color-text-muted:light-dark(var(--seed-text-muted),oklch(0.68 0.03 250));--color-accent:light-dark(var(--seed-accent),oklch(0.62 0.15 240));--color-accent-hover:light-dark(var(--seed-accent-hover),oklch(0.68 0.18 240));--color-link:light-dark(var(--seed-link),oklch(0.65 0.16 240));--color-link-hover:light-dark(var(--seed-link-hover),oklch(0.72 0.18 240));--color-border:light-dark(var(--seed-border),oklch(0.32 0.02 260));--color-border-strong:light-dark(var(--seed-border-strong),oklch(0.38 0.02 260));accent-color:var(--color-accent);--header-bg:var(--color-accent);--header-text:light-dark(#fff,#f0f4f8);--theme-toggle-bg:color-mix(in srgb,var(--header-text) 20%,var(--header-bg));--theme-toggle-border:color-mix(in srgb,var(--header-text) 40%,var(--header-bg));--theme-toggle-border-hover:color-mix(in srgb,var(--header-text) 55%,var(--header-bg));--shadow-color:light-dark(rgba(0,0,0,.09),rgba(0,0,0,.28));--shadow-sm:0 1px 2px 0 var(--shadow-color);--shadow-md:0 1px 3px 0 var(--shadow-color)}:root{--font-body:system-ui,-apple-system,sans-serif;--text-small:0.875rem;--text-lg:1.25rem;--text-xl:1.75rem;--border-radius:5px;--shadow-sm:0 1px 2px oklch(0.2 0 0/0.1),0 2px 4px oklch(0.2 0 0/0.06);--shadow-md:0 2px 4px oklch(0.2 0 0/0.1),0 6px 12px oklch(0.2 0 0/0.07),0 16px 32px oklch(0.2 0 0/0.05);--shadow-lg:0 4px 8px oklch(20.019% 0.00002 271.152/0.606),0 12px 24px oklch(0.2 0 0/0.08),0 24px 48px oklch(0.2 0 0/0.06);--font-family-sans:system-ui,sans-serif;--font-family-mono:monospace;--font-size-xs:0.64rem;--font-size-sm:0.8rem;--font-size-md:1rem;--font-size-lg:clamp(1.125rem,1.083rem + 0.21vw,1.25rem);--font-size-xl:clamp(1.375rem,1.313rem + 0.31vw,1.563rem);--font-size-2xl:clamp(1.75rem,1.682rem + 0.34vw,1.953rem);--font-size-3xl:clamp(2rem,1.854rem + 0.73vw,2.441rem);--font-size-4xl:clamp(2.5rem,2.316rem + 0.92vw,3.052rem);--font-size-body:var(--font-size-md);--font-size-caption:var(--font-size-xs);--font-size-heading-sm:var(--font-size-lg);--font-size-heading-md:var(--font-size-xl);--font-size-heading-lg:var(--font-size-2xl);--font-size-display:var(--font-size-4xl);--font-family-heading:"Poppins","Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-family-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--line-height-body:1.6;--line-height-heading:1.3;--line-height-display:1.1;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--transition-base:0.2s ease;--icon-size-sm:24px;--icon-size-md:32px;--outline-width:2px}}@layer tokens{}@layer base{*,:after,:before{box-sizing:border-box;margin:0;padding:0}}@layer base{:root{body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-family-body);font-size:var(--font-size-body);line-height:var(--line-height-body);padding:clamp(var(--spacing-md),5vw,var(--spacing-lg));a{color:var(--color-link);text-decoration:none;&:hover{color:var(--color-accent-hover)}}h1,h2{color:var(--color-text);font-size:var(--font-size-heading-lg);text-align:center}h1,h2,h3{font-family:var(--font-family-heading);line-height:var(--line-height-heading);padding:var(--spacing-md)}h3{font-size:var(--font-size-heading-sm);margin-bottom:var(--spacing-lg)}}form{margin-inline:auto;max-width:700px}label{display:block;margin-bottom:var(--spacing-xs)}input,textarea{border:1px solid var(--color-border);border-radius:var(--radius-md);font:inherit;padding:var(--spacing-sm);width:100%}textarea{field-sizing:content;max-height:20rem;min-height:8rem}button{background:var(--color-accent);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md)}footer{background-color:var(--accent-400);color:var(--color-surface);font-size:var(--font-size-sm);padding:var(--spacing-md);text-align:center}}}@layer components{:root{#bio-card{background-color:var(--accent-400);border-radius:var(--border-radius);box-shadow:var(--shadow-md);margin:0 auto;max-width:600px;padding:var(--spacing-md);#family{border-radius:var(--border-radius);height:auto;margin-top:var(--spacing-md);width:100%}h2,p{color:var(--color-surface)}.container{margin-top:var(--spacing-lg);p{font-size:var(--text-lg);margin-bottom:var(--spacing-md);margin-top:var(--spacing-lg)}}a{color:var(--color-link)}a:hover{color:var(--color-accent-hover)}}}}@layer components{:root{nav{display:grid;gap:var(--spacing-lg);margin-inline:auto;max-width:50rem;padding:var(--spacing-lg)}nav>h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:0}details{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--transition-base),transform var(--transition-base);&:hover{border-color:var(--color-accent);transform:translateY(-2px)}&[open]{border-color:var(--color-primary)}}summary{align-items:center;cursor:pointer;display:flex;font-size:1.1rem;font-weight:700;justify-content:space-between;list-style:none;padding:var(--spacing-sm) var(--spacing-lg);transition:background-color var(--transition-base);&::-webkit-details-marker{display:none}&:after{content:"+";font-size:1.5rem;line-height:1;transition:transform var(--transition-base)}details[open] &:after{transform:rotate(45deg)}&:hover{background-color:color-mix(in srgb,var(--color-accent) 8%,transparent)}&:focus-visible{outline:3px solid var(--color-accent);outline-offset:-3px}}ul{display:grid;gap:var(--spacing-sm);list-style:none;margin:0;padding:0 var(--spacing-md) var(--spacing-sm)}li{display:flex}a{background-color:color-mix(in srgb,var(--color-primary) 5%,transparent);border-radius:calc(var(--radius-base)/1.5);color:var(--color-text);padding:var(--spacing-sm);transition:transform var(--transition-base),background-color var(--transition-base),color var(--transition-base);width:100%;&:hover{background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary);transform:translateX(6px)}&:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}}}}@layer components{details.theme-menu{background:transparent;border:none;box-shadow:none;color:inherit;display:inline-block;flex-shrink:0;margin:0;overflow:visible;padding:0;position:relative;width:-moz-max-content;width:max-content;&:focus,&:focus-visible{outline:none}>summary.theme-control{font-weight:400;list-style:none;text-transform:none;width:-moz-max-content;width:max-content;&:after{content:none;display:none}&::-webkit-details-marker{display:none}&::marker{content:""}&:focus{outline:none}&:focus-visible{outline:var(--outline-width) solid var(--color-accent);outline-offset:var(--outline-width)}&:before{content:"\2699\FE0F"}}.theme-control{align-items:center;background-color:var(--theme-toggle-bg);border:1px solid var(--theme-toggle-border);border-radius:var(--radius-sm);box-sizing:border-box;color:var(--header-text);cursor:pointer;display:inline-flex;font-size:var(--icon-size-sm);justify-content:center;line-height:1;margin:0;min-height:calc(var(--icon-size-md) + var(--spacing-md));min-width:calc(var(--icon-size-md) + var(--spacing-md));padding:0;transition:background-color var(--transition-base),border-color var(--transition-base);&:hover{background-color:var(--theme-toggle-bg-hover);border-color:var(--theme-toggle-border-hover)}}>.theme-extra{align-items:flex-end;background:none;border:none;box-shadow:none;display:flex;flex-direction:column;gap:var(--spacing-md);margin:0;padding:0;position:absolute;right:0;top:calc(100% + var(--spacing-md));z-index:50}&:not([open])>.theme-extra{display:none}&[open]>.theme-extra{animation:theme-extra-reveal .2s ease-out}.theme-pick{position:relative;input{height:0;margin:0;opacity:0;pointer-events:none;position:absolute;width:0}&:has(input:focus-visible){outline:var(--outline-width) solid var(--color-accent);outline-offset:var(--outline-width)}}}html:has(input[name=theme-preference][value=light]:checked){& details.theme-menu>summary.theme-control:before{content:"\2600\FE0F"}& details.theme-menu .theme-pick[data-theme-pick=light]{display:none}}html:has(input[name=theme-preference][value=dark]:checked){& details.theme-menu>summary.theme-control:before{content:"\1F316"}& details.theme-menu .theme-pick[data-theme-pick=dark]{display:none}}html:has(input[name=theme-preference][value=system]:checked){& details.theme-menu .theme-pick[data-theme-pick=system]{display:none}}@keyframes theme-extra-reveal{0%{transform:translateY(-.4rem)}to{transform:translateY(0)}}}@layer components{.hero{border-radius:var(--radius-lg);display:grid;min-height:32rem;overflow:hidden;place-items:center;position:relative;& .hero-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}& .hero-image,&:after{inset:0;position:absolute}&:after{background:radial-gradient(circle at center,transparent 10%,rgba(0,0,0,.35) 100%),linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));content:""}& .hero-content{color:#fff;padding:var(--spacing-xl);position:relative;text-align:center;z-index:1}& h1{font-size:clamp(3rem,6vw,5rem);text-shadow:0 2px 4px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.45)}& p{font-size:var(--font-size-lg);text-shadow:0 1px 3px rgba(0,0,0,.5)}}.card-section{padding-block:var(--spacing-xl);& h2{margin-bottom:var(--spacing-lg)}& .cards{display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}& .card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:var(--color-text);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}& .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px)}& .card-image{height:250px;-o-object-fit:cover;object-fit:cover;transition:filter .3s ease,transform .3s ease;width:100%}& .card:nth-child(3) .card-image{filter:grayscale(100%)}& .card:nth-child(3):hover .card-image{filter:grayscale(0);transform:scale(1.05)}& .card-body{padding:var(--spacing-lg)}& p{color:var(--color-text-muted)}}.glass-section{border-radius:var(--radius-lg);display:grid;margin-block:var(--spacing-xl);min-height:28rem;overflow:hidden;place-items:center;position:relative;& .glass-background,& .glass-bg-image{height:100%;inset:0;position:absolute;width:100%}& .glass-bg-image{-o-object-fit:cover;object-fit:cover}& .glass-panel{backdrop-filter:blur(16px) saturate(180%);background:light-dark(hsla(0,0%,100%,.3),rgba(25,25,35,.45));border:1px solid color-mix(in srgb,#fff 35%,transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--color-text);max-width:40rem;padding:calc(var(--spacing-xl)*1.5);position:relative;z-index:1}}@media (prefers-reduced-motion:reduce){.glass-panel{backdrop-filter:none;background:var(--color-surface)}}.icon-section{text-align:center;& h2{margin-bottom:var(--spacing-md)}& p{color:var(--color-text-muted);margin-inline:auto;margin-bottom:var(--spacing-lg);max-width:60ch}& .icon-row{display:flex;flex-wrap:wrap;gap:var(--spacing-xl);justify-content:center}& .icon-item{color:var(--color-text);filter:drop-shadow(0 1px 1px currentColor) drop-shadow(0 3px 4px rgb(0 0 0/.15)) drop-shadow(0 8px 12px rgb(0 0 0/.12));height:4rem;transition:transform .25s ease,filter .25s ease;width:4rem}& .icon-item:hover{filter:drop-shadow(0 2px 2px currentColor) drop-shadow(0 6px 10px rgb(0 0 0/.2)) drop-shadow(0 12px 20px rgb(0 0 0/.15));transform:translateY(-4px)}}.shape-section{padding-block:var(--spacing-xl);& h2{filter:drop-shadow(1px 1px 2px rgba(0,0,0,.398));margin-bottom:var(--spacing-lg)}& .shape-demo{background:linear-gradient(135deg,#000,var(--seed-accent));border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:#fff;max-width:70ch;padding:var(--spacing-xl)}& .shape-image{aspect-ratio:1;clip-path:circle(50%);float:left;margin:0 var(--spacing-lg) var(--spacing-md) 0;-o-object-fit:cover;object-fit:cover;shape-outside:circle(50%);width:16rem}& p{color:var(--accent-200);line-height:1.7}}}@layer components{:root{.resume{margin-inline:auto;max-width:1100px;padding-block:var(--spacing-xl)}.resume-hero{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-xl);padding:var(--spacing-xl);text-align:center}.resume-hero h1{color:var(--color-accent);margin-bottom:var(--spacing-sm)}.resume-contact{display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:center;margin-block:var(--spacing-md)}.resume-contact a{color:var(--color-link)}.resume-summary{color:var(--color-text-muted);margin-inline:auto;max-width:70ch}.resume-grid{display:grid;gap:var(--spacing-lg);grid-template-columns:280px 1fr}.skill-group{margin-bottom:var(--spacing-lg)}.skill-group h3{color:var(--color-accent);font-size:var(--font-size-body);margin:0 0 var(--spacing-sm);padding:0}.skill-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.skill-tags span{align-items:center;background:color-mix(in srgb,var(--color-accent) 15%,transparent);border:1px solid var(--color-border);border-radius:999px;display:inline-flex;font-size:var(--font-size-sm);padding:.35rem .75rem}.resume-main,.resume-sidebar{display:flex;flex-direction:column;gap:var(--spacing-lg)}.resume-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--spacing-lg)}.resume-card h2{border-bottom:2px solid var(--color-accent);margin-bottom:var(--spacing-md);margin-top:0;padding-bottom:var(--spacing-sm);padding-top:0;text-align:left}.resume-card ul{padding-left:1.25rem}.resume-card li+li{margin-top:var(--spacing-sm)}.experience-item+.experience-item{border-top:1px solid var(--color-border);margin-top:var(--spacing-lg);padding-top:var(--spacing-lg)}.experience-title{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:space-between}.experience-company{color:var(--color-text-muted);margin-bottom:var(--spacing-sm)}@media (width < 768px){.resume-grid{grid-template-columns:1fr}.resume-contact{align-items:center;flex-direction:column}}}}@layer utilities{@layer utilities{.visually-hidden{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@scope (.carousel){:scope{margin-top:var(--spacing-md);position:relative}.carousel-track{position:relative}.slide{border-radius:var(--border-radius);display:none;width:100%}.slide.active{display:block}.next,.prev{background:rgba(0,0,0,.5);border:none;border-radius:var(--border-radius);color:#fff;cursor:pointer;padding:var(--spacing-sm);position:absolute;top:50%;transform:translateY(-50%);z-index:1}.prev{left:10px}.next{right:10px}}}}@media print{.theme-menu,button,footer,nav{display:none}body{background:#fff;color:#000;font-family:Georgia,Times New Roman,serif;font-size:11pt}a:after{content:" (" attr(href) ")";font-size:9pt}section{-moz-column-break-inside:avoid;break-inside:avoid}p{orphans:3;widows:3}.resume-header{print-color-adjust:exact;-webkit-print-color-adjust:exact}}