body {
 background: linear-gradient(to bottom right, #1f2937, #111827);
 color: #f3f4f6;
 }
 .review-excerpt {
 position: relative;
 max-height: 12rem;
 overflow: hidden;
 }
 .review-excerpt::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 3rem;
 background: linear-gradient(to bottom, transparent, #1f2937);
 }
 .film-card {
 transition: all 0.3s ease;
 }
 .film-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
 .genre-tag {
 display: inline-block;
 background: #4b5563;
 color: #e5e7eb;
 padding: 0.2rem 0.5rem;
 border-radius: 0.25rem;
 font-size: 0.75rem;
 margin-right: 0.5rem;
 margin-bottom: 0.5rem;
 }
 .hero-section {
 width: 100vw;
 margin-left: calc(-50vw + 50%);
 position: relative;
 }
 .hero-carousel {
 overflow: hidden;
 }
 .hero-track {
 display: flex;
 transition: transform 0.5s ease-in-out;
 }
 .hero-slide {
 flex: 0 0 100%;
 height: 433px;
 background-size: cover;
 background-position: center;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #ffffff;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
 }
 .editors-picks-carousel {
  position: relative;
}
.editors-picks-carousel button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
/* Editor's Picks Carousel */
.prose {
    max-width: 100%;
}
.prose br {
    content: '';
    display: block;
    margin-bottom: 0.75rem;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}
 .top-box-container {
 overflow: hidden;
 position: relative;
 width: 100%;
 }
 .top-box-track {
 display: flex;
 transition: transform 0.5s ease-in-out;
 }
 .top-box-group {
 flex: 0 0 100%;
 display: flex;
 }
 .top-box-card {
 flex: 0 0 20%;
 padding: 0 0.5rem;
 }
 .top-box-card img {
 width: 100%;
 height: 320px;
 object-fit: cover;
 }
 .carousel-button {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(59, 130, 246, 0.8);
 color: white;
 width: 3rem;
 height: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 cursor: pointer;
 z-index: 10;
 font-size: 1.5rem;
 transition: background 0.2s ease;
 }
 .carousel-button:hover {
 background: rgba(29, 78, 216, 0.8);
 }
 .carousel-button.left {
 left: 1rem;
 }
 .carousel-button.right {
 right: 1rem;
 }
 @media (max-width: 640px) {
 .hero-slide {
 height: 300px;
 }
 .hero-slide h1 {
 font-size: 1.5rem;
 }
 .hero-slide p {
 font-size: 0.875rem;
 }
 .top-box-card {
 flex: 0 0 33.33%;
 }
 .top-box-card img {
 height: 240px;
 }
 }