/* tailwind preflight: https://github.com/tailwindlabs/tailwindcss/blob/ad6693906a321912c90fd13c4a92e2cb26660985/packages/tailwindcss/preflight.css */
*,::after,::backdrop,::before,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:--theme(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');font-feature-settings:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:--theme(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}::file-selector-button,button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}

/* ============================================
   Color tokens
   ============================================ */

:root {
  --bg: #f9fafb;
  --card-bg: #ffffff;
  --text: #374151;
  --text-strong: #111827;
  --text-muted: #6b7280;
  --text-subtle: #4b5563;
  --border: #e5e7eb;
  --border-faint: #f3f4f6;
  --nav-link: #374151;
  --nav-link-hover: #111827;
  --icon: #6b7280;
  --icon-hover: #374151;
  --link: #6366f1;
  --link-hover: #4f46e5;
  --pill-bg: #eef2ff;
  --pill-text: #4f46e5;
  --pill-ring: #e0e7ff;
  --spinner-track: #e0e7ff;
  --spinner: #6366f1;
}

[data-theme="dark"] {
  --bg: #111827;
  --card-bg: #1f2937;
  --text: #d1d5db;
  --text-strong: #f9fafb;
  --text-muted: #9ca3af;
  --text-subtle: #9ca3af;
  --border: #374151;
  --border-faint: #374151;
  --nav-link: #d1d5db;
  --nav-link-hover: #f9fafb;
  --icon: #9ca3af;
  --icon-hover: #d1d5db;
  --link: #818cf8;
  --link-hover: #a5b4fc;
  --pill-bg: #1e1b4b;
  --pill-text: #a5b4fc;
  --pill-ring: #312e81;
  --spinner-track: #312e81;
  --spinner: #818cf8;
}

/* ============================================
   Base
   ============================================ */

html, body {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  background-color: var(--bg);
  color: var(--text);
  scrollbar-gutter: stable;
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 640px) {
  body {
    padding: 1.5rem 0 2.5rem;
  }
}

/* ============================================
   Nav
   ============================================ */

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 42rem;
  margin: 0 auto;
  padding: 1rem;
  font-size: 0.875rem;
}

@media (min-width: 640px) {
  nav { padding: 1rem 2rem; }
}

nav ul {
  display: flex;
  gap: 1.5rem;
}

nav a {
  color: var(--nav-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

nav a:hover { color: var(--nav-link-hover); }

nav a[aria-current="page"] { font-weight: 700; }

.social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social a {
  display: block;
  color: var(--icon);
  text-decoration: none;
  transition: color 0.15s ease;
}

.social a:hover { color: var(--icon-hover); }

.social svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================
   Theme toggle
   ============================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--icon);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.theme-toggle:hover {
  color: var(--icon-hover);
  background-color: var(--border-faint);
}

.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* ============================================
   Main card
   ============================================ */

main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
  background-color: var(--card-bg);
  box-shadow: 0 0 0 1px var(--border);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.75;
  view-transition-name: main-card;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 640px) {
  main {
    padding: 2.5rem 2rem;
    border-radius: 0.5rem;
    box-shadow:
      0 1px 3px 0 rgb(0 0 0 / 0.1),
      0 1px 2px -1px rgb(0 0 0 / 0.1),
      0 0 0 1px var(--border);
  }
}

/* ============================================
   Prose content (article)
   ============================================ */

main h2 {
  color: var(--text-strong);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.3333;
}

article h3 {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

article p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

article a {
  color: var(--link);
  text-decoration: underline;
  font-weight: 500;
}

article a:hover { color: var(--link-hover); }

article ul {
  list-style: disc;
  padding-left: 1.625em;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

article ul li {
  padding-left: 0.375em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

article figure {
  margin-top: 2em;
  margin-bottom: 0;
}

article img {
  border-radius: 0.375rem;
}

article figcaption {
  margin-top: 0.75em;
  font-size: 0.875em;
  line-height: 1.4285714;
  color: var(--text-muted);
  text-align: center;
}

/* ============================================
   Repos list (projects page)
   ============================================ */

#repos {
  margin-top: 1rem;
}

#repos > li {
  padding: 1rem 0;
  border-top: 1px solid var(--border-faint);
}

.repo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#repos h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

#repos h3 a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s ease;
}

#repos h3 a:hover { color: var(--link-hover); }

.stars {
  font-size: 0.875rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

#repos li > p {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-subtle);
}

.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0;
  list-style: none;
}

.topics li {
  display: block;
  font-size: 0.75rem;
  line-height: 1.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: var(--pill-bg);
  color: var(--pill-text);
  box-shadow: 0 0 0 1px var(--pill-ring);
}

/* ============================================
   Loading spinner
   ============================================ */

#loading {
  display: none;
  justify-content: center;
  padding: 2rem 0;
}

#loading::after {
  content: '';
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--spinner-track);
  border-top-color: var(--spinner);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   Cross-document View Transitions
   ============================================ */

@view-transition {
  navigation: auto;
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

::view-transition-old(root) {
  animation: fade-slide-out 200ms ease both;
}

::view-transition-new(root) {
  animation: fade-slide-in 200ms ease both;
}