:root {
  color-scheme: light dark;
  background: #f6f6f6;
  color: #16252b;
  --accent: #00747c;
  --visited: #28666d;
}

@media (prefers-color-scheme: dark) {
  :root {
    background: #202020;
    color: #e5edef;
    --accent: #64d8e2;
    --visited: #55b6bd;
  }
}

body {
  max-width: 85ch;
  margin: 2rem auto;
  padding: 0 1rem;
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

header { display: flow-root; }
.site-title { margin: 0; font-size: 1.4em; font-weight: normal; }
.avatar-link {
  float: right;
  position: relative;
  width: min(96px, 24vw);
  aspect-ratio: 1;
  margin: 0 0 1rem 1rem;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.avatar-link, .avatar-link:visited { color: var(--accent); }
.avatar { display: block; width: 100%; height: auto; }
.avatar, .avatar-butterfly {
  transition: opacity 240ms ease, transform 360ms cubic-bezier(.2, .7, .2, 1);
}

.avatar-butterfly {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
  fill: currentColor;
  opacity: 0;
  transform: translateY(4px) scale(.85) rotate(-8deg);
}

.avatar-link:is(:hover, :focus-visible) { border-color: transparent; }
.avatar-link:is(:hover, :focus-visible) .avatar { opacity: 0; transform: scale(.96); }
.avatar-link:is(:hover, :focus-visible) .avatar-butterfly { opacity: 1; transform: none; }

.source-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .75rem;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: .5rem;
  font-size: .85em;
  text-decoration: none;
  transition: background-color 240ms ease, border-color 240ms ease;
}

.source-link, .source-link:visited { color: var(--accent); }
.source-logo {
  flex: none;
  fill: currentColor;
  transition: transform 360ms cubic-bezier(.2, .7, .2, 1);
}

.source-link:is(:hover, :focus-visible) {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
}
.source-link:is(:hover, :focus-visible) .source-logo {
  transform: translateY(-2px) rotate(-12deg) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .avatar, .avatar-butterfly { transition: none; transform: none; }
  .avatar-link:is(:hover, :focus-visible) .avatar { transform: none; }
  .source-link, .source-logo { transition: none; }
  .source-link:is(:hover, :focus-visible) .source-logo { transform: none; }
}
a { color: var(--accent); }
a:visited { color: var(--visited); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
nav li::marker { content: "✦  "; color: var(--accent); }