:root {
  --b01-bg: #141414;
  --b01-text: #ffffff;
  --b01-muted: #b3b3b3;
  --b01-accent: #e50914;
}
body {
  margin: 0;
  background: var(--b01-bg);
  color: var(--b01-text);
}
a { color: inherit; }
.b01-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 4vw;
}
.b01-top__logo img { height: 36px; width: auto; }
.b01-top__logo--wide { display: none; }
.b01-top__search {
  margin-left: auto;
  display: flex;
}
.b01-top__search input[type="text"] {
  background: #333;
  color: var(--b01-text);
  border: 0;
  padding: 8px 12px;
}
.b01-top__search button,
.seo-d4-btn {
  background: var(--b01-accent);
  color: var(--b01-text);
  border: 0;
  padding: 8px 12px;
}
.b01-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4vw 16px;
}
.b01-cats a { white-space: nowrap; text-decoration: none; }
.b01-hero {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.b01-hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 42vw;
  position: relative;
}
.b01-hero__slide img {
  width: 100%;
  height: 42vw;
  object-fit: cover;
}
.b01-screen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 4vw;
}
.b01-page {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 16px 4vw 32px;
  list-style: none;
}
.b01-detail,
.b01-play {
  padding: 16px 4vw;
}
.b01-detail__poster {
  width: min(240px, 46vw);
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.b01-foot {
  padding: 24px 4vw;
  color: var(--b01-muted);
  text-align: center;
}
.b01-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding: 0 4vw 24px;
}
.b01-card {
  flex: 0 0 140px;
}
.b01-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #333;
}
@media (min-width: 900px) {
  .b01-card { flex-basis: 180px; }
  .b01-top__logo--wide { display: inline; }
  .b01-top__logo--narrow { display: none; }
}