html[data-theme="black"], html[data-theme="black"] body {
  color-scheme: dark;
  background: #000;
  color: #fff;
}

.films-page {
  overflow: auto;
  touch-action: auto;
  font: 400 18px/22.5px 'Google Sans Code', monospace;
}

.films-shell { width: 100%; z-index: auto; }
/* Keep the archive in the page's normal compositing context so native text
   blends with the white fluid behind it, and shares thumbnail overscroll. */
.films-header .barcode, .films-header h1,
.film-year h2, .film-card h3, .film-genre {
  color: #fff;
  mix-blend-mode: difference;
}
.films-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: max(45px, env(safe-area-inset-top)) 55.5px 0;
  height: 44px;
  gap: 33px;
}
.films-header .barcode { position: static; flex: 0 0 70px; }
.films-header h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font: inherit;
  font-size: 30px;
  line-height: 37.5px;
}
.film-years { width: calc(100% - 111px); max-width: 906px; margin: 76px auto 0; padding-bottom: 55.5px; }
.film-year h2, .year-divider, .film-thumbnail, .film-card h3, .film-genre {
  animation: films-reveal 650ms ease-out both;
  animation-delay: calc(560ms + var(--reveal-step, 0) * 100ms);
}
@keyframes films-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.film-year + .film-year { margin-top: 82.5px; }
.film-year h2 { margin: 0 10.5px 6px; font: inherit; }
.year-divider { height: 1.5px; overflow: hidden; margin-bottom: 40.5px; }
.year-divider img { display: block; transform: scale(1.5); transform-origin: top left; }
.film-grid {
  list-style: none;
  padding: 0 10.5px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 222px);
  justify-content: space-between;
  gap: 27px 36px;
}
.film-card { min-width: 0; }
.film-card a { display: block; color: inherit; text-decoration: none; }
.film-thumbnail { display: block; width: 100%; aspect-ratio: 148 / 92; background: #d9d9d9; object-fit: cover; transition: transform 220ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .film-thumbnail:hover { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .film-thumbnail { transition: none; }
  .film-year h2, .year-divider, .film-thumbnail, .film-card h3, .film-genre { animation: none; }
}
.film-card h3 { margin: 12px 0 0; font: inherit; }
.film-genre { margin: 0; font-size: 15px; line-height: 19.5px; }
.film-card a:is(:hover, :focus-visible) h3 { text-decoration: underline; text-underline-offset: 3px; }
.films-page [data-fluid-text] { display: inline-block; vertical-align: top; color: inherit; }

@media (max-width: 870px) {
  .film-years { width: calc(100% - 48px); }
  .film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 480px) {
  .films-header { padding-top: max(24px, env(safe-area-inset-top)); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .film-years { margin-top: 48px; width: auto; margin-right: max(24px, env(safe-area-inset-right)); margin-left: max(24px, env(safe-area-inset-left)); }
}
@media (max-width: 359px) {
  .film-grid { grid-template-columns: minmax(0, 1fr); }
}