html {
  --picture-background: #ffffff09;
}
html[data-color-scheme="light"] {
  --picture-background: #f8f8f8;
}
html[data-interactive] .item-content img {
  opacity: 0.1;
}
html[data-interactive] .item-content.loaded img {
  opacity: 1;
  transition: opacity 0.3s 0.05s;
}
html[data-interactive] .item-content.failed svg {
  height: 3rem;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  stroke-opacity: 0.25;
}
.item-caption .date {
  color: rgb(from var(--color) r g b / 0.35);
  margin-right: 0.2em;
}
nav {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  text-align: center;
  padding: 0 var(--padding-x);
  user-select: none;
}
nav a,
nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
  color: var(--focus-color);
  text-decoration: none;
  border-bottom: none;
}
nav a:hover {
  background: rgb(from var(--focus-color) r g b / 0.1);
}
nav a:not([href]) {
  color: inherit;
  pointer-events: none;
  opacity: 0.3;
}
nav a {
  display: inline-flex;
  min-width: 3.5em;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 0.25em;
  padding: 0.5em 0.5em 0.55em;
  margin: 0 0.5em;
  box-sizing: border-box;
}
nav a svg {
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viewport-container {
  display: flex;
  flex-direction: column;
  min-height: max(100vh, 360px);
  box-sizing: border-box;
}