:root{
  --bg:#ffffff; --fg:#0a0a0a; --muted:#555; --accent:#0969da; --code:#24292e; --link:#0969da;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
}

html{font-size:16px}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0; color:var(--fg); background:var(--bg);
  font-family: var(--serif); line-height:1.6; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
}
main.container{flex:1 0 auto; width:100%}
footer.container{margin-top:auto; width:100%}
.container{max-width:60ch; padding:2rem 1rem; margin:0 auto}
main.container{margin:0 auto}
.site-footer{margin-left:auto; margin-right:auto; margin-top:auto; display:flex; justify-content:space-between; align-items:center}
.header{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; text-align:left; width:100%}
.brand h1{font-family: var(--mono); font-size:2rem; margin:0 0 .25rem}
.tag{color:var(--muted); margin:0 0 1rem}
.summary{margin:1rem 0; width:100%}
.socials{display:flex; gap:1rem}
.social-link{color:var(--muted); transition:color 0.2s}
.social-link:hover{color:var(--fg)}
.social-link svg{width:24px; height:24px}
.theme-toggle{
  background:transparent; border:none; color:var(--fg);
  padding:.5rem; cursor:pointer; transition:all 0.2s;
  display:flex; align-items:center; justify-content:center;
  position:relative; width:40px; height:40px;
}
.theme-toggle:hover{color:var(--accent)}
.theme-toggle svg{width:20px; height:20px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)}
.theme-toggle .sun-icon{display:none}
.theme-toggle .moon-icon{display:none}
html[data-theme="catppuccin-mocha"] .theme-toggle .moon-icon{display:block}
html[data-theme="catppuccin-latte"] .theme-toggle .sun-icon{display:block}
.visually-hidden{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

@media (prefers-color-scheme: dark){
  :root{--bg:#0d0f12; --fg:#e6edf3; --muted:#8b949e; --accent:#2f81f7; --code:#1f2428; --link:#2f81f7}
}

html[data-theme="catppuccin-latte"]{--bg:#eff1f5; --fg:#4c4f69; --muted:#5c5f77; --accent:#1e66f5; --code:#e6e9ef; --link:#1e66f5}
html[data-theme="catppuccin-mocha"]{--bg:#1e1e2e; --fg:#cdd6f4; --muted:#bac2de; --accent:#89b4fa; --code:#181825; --link:#89b4fa}

a, a:visited{color:var(--link); text-decoration-thickness:.08em}
code, pre{font-family: var(--mono); background:var(--code); padding:.08em .25em; border-radius:.2rem}
small{color:var(--muted)}

.cards{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; margin:2rem 0; width:100%}
.card{position:relative; display:block; padding:1rem; border:1px solid var(--muted); border-radius:.5rem; text-decoration:none}
.gh-img{position:absolute; top:0.5rem; right:0.5rem; width:18px; height:18px}
html[data-theme="catppuccin-mocha"] .gh-img{content: url('github-mark-white.svg')}
html[data-theme="catppuccin-latte"] .gh-img,
html:not([data-theme]) .gh-img{content: url('github-mark.svg')}

.card h2{margin:.1rem 0 .4rem; font-size:1.1rem; font-family: var(--mono)}
.card p{margin:0; color:var(--muted)}
.card:hover{border-color:var(--fg)}