@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/InterVariable.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/InterVariable-Italic.woff2') format('woff2'); }
:root { color-scheme: light; --bg: #fff; --fg: #222; --link: #28548b; --muted: #666; --surface: #f5f5f5; }
:root[data-theme="dark"] { color-scheme: dark; --bg: #121a26; --fg: #e6e6e6; --link: #9bbfe8; --muted: #aaa; --surface: #ffffff0d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #121a26; --fg: #e6e6e6; --link: #9bbfe8; --muted: #aaa; --surface: #ffffff0d; } }
body { max-width: 680px; margin: 3rem auto; padding: 0 1rem; font: 17px/1.65 -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif; font-optical-sizing: auto; color: var(--fg); background: var(--bg); }
a { color: var(--link); }
nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
nav [aria-current] { color: inherit; font-weight: 600; }
h1, h2, h3 { line-height: 1.25; }
main { margin: 3rem 0; }
section, article { margin: 2rem 0; }
footer, time { color: var(--muted); font-size: .9rem; }
.note-list { list-style: none; padding: 0; margin: 1.25rem 0; }
.note-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 1.25rem; row-gap: .25rem; padding: .85rem 0; border-bottom: 1px solid #8883; }
.note-title { grid-column: 1; grid-row: 1; font-weight: 600; }
.note-row .note-description { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: start; }
.note-date { grid-column: 1; grid-row: 2; }
.note-description { color: var(--muted); font-size: .9rem; margin: .25rem 0; }
.post-description { margin-top: -.5rem; }
@media (max-width: 480px) {
  .note-row { grid-template-columns: minmax(0, 1fr); }
  .note-row .note-description { grid-column: 1; grid-row: 2; }
  .note-date { grid-row: 3; }
}
.rss-link { display: inline-flex; align-items: center; gap: 5px; }
img { max-width: 100%; height: auto; }
pre { overflow-x: auto; padding: 1rem; background: var(--surface); }
.profile-heading { display: flex; align-items: center; gap: 1rem; }
.profile-heading h1 { margin: 0; font-size: 1.8rem; }
.profile-heading img { width: 80px; height: 80px; object-fit: cover; }
.profile-image { mask-image: linear-gradient(to right, transparent, black 10% 90%, transparent), linear-gradient(to bottom, transparent, black 10% 90%, transparent); mask-composite: intersect; }
.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.site-header nav { align-items: center; }
.theme-picker { display: grid; place-items: center; margin-left: auto; padding: 0; width: 28px; height: 28px; border: 1px solid #8885; border-radius: 5px; background: var(--surface); color: var(--muted); cursor: pointer; }
.theme-picker:hover { color: var(--fg); border-color: var(--muted); }
.theme-picker:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.theme-picker svg { display: none; }
.theme-picker[data-mode="system"] [data-icon="system"], .theme-picker[data-mode="light"] [data-icon="light"], .theme-picker[data-mode="dark"] [data-icon="dark"] { display: block; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding: 0; margin: 2rem 0; list-style: none; }
.project-card { min-width: 0; }
.project-card-link { display: block; height: 100%; color: var(--fg); text-decoration: none; }
.project-card-link:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.project-card-image { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: var(--surface); mask-image: linear-gradient(to bottom, black 70%, transparent); }
.project-card-content { padding-top: .5rem; }
.project-card h2 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--link); }
.project-card-link:hover h2 { text-decoration: underline; text-underline-offset: .15em; }
.project-card-description { margin: 0; font-size: .9rem; }
@media (max-width: 560px) { .project-grid { grid-template-columns: 1fr; gap: 1.25rem; } }
@media (max-width: 480px) {
  .site-header { gap: .5rem; }
  .site-header nav { gap: 1rem; font-size: 1.0625rem; }
  .site-header nav a { display: inline-flex; align-items: center; min-height: 44px; }
}