:root {
      color-scheme: dark;
      --bg: #101010;
      --panel: #181818;
      --muted: #a3a3a3;
      --red: #ee695e;
      --page-gutter: clamp(20px, 4vw, 64px);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: #f5f5f5;
      font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    button, input { font: inherit; }
    button { color: inherit; }
    button:focus-visible, input:focus-visible, a:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 3px;
    }

    .topbar {
      position: fixed;
      z-index: 5;
      inset: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 38px;
      padding: 20px var(--page-gutter);
      border-bottom: 1px solid rgba(255,255,255,.07);
      background: rgba(13,13,16,.76);
      backdrop-filter: blur(18px);
    }
    .brand {
      color: var(--red);
      font-size: 27px;
      font-weight: 950;
      letter-spacing: -1.8px;
      text-decoration: none;
      text-transform: uppercase;
    }
    .nav-links { display: flex; align-items: center; gap: 20px; }
    .nav-links a {
      color: #e5e5e5;
      font-size: 13px;
      text-decoration: none;
      transition: color .18s ease;
    }
    .nav-links a:hover, .nav-links a.active { color: #fff; font-weight: 700; }
    .nav-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
    .icon-button {
      display: grid;
      width: 38px;
      height: 38px;
      padding: 0;
      place-items: center;
      border: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;
    }
    .icon-button svg { width: 21px; height: 21px; }
    .search-wrap { display: flex; align-items: center; gap: 7px; }
    .search-input {
      width: 0;
      padding: 7px 0;
      border: 0;
      border-bottom: 1px solid transparent;
      outline: 0;
      background: transparent;
      color: #fff;
      transition: width .2s, border-color .2s;
    }
    .search-wrap.open .search-input { width: min(210px, 35vw); border-color: #aaa; }
    .avatar {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 5px;
      background: linear-gradient(145deg, #86b7e8, #394c76);
      font-size: 18px;
      cursor: pointer;
    }

    .hero {
      position: relative;
      display: flex;
      min-height: min(780px, 92vh);
      align-items: center;
      overflow: hidden;
      padding: 110px var(--page-gutter) 135px;
      background:
        radial-gradient(ellipse at 76% 40%, rgba(255,168,87,.72) 0, rgba(219,93,82,.25) 18%, transparent 39%),
        radial-gradient(ellipse at 67% 76%, rgba(73,89,177,.72), transparent 37%),
        linear-gradient(112deg, #101010 9%, #231b35 44%, #5c3c52 72%, #17151e 100%);
      isolation: isolate;
    }
    .hero::before {
      position: absolute;
      z-index: -1;
      inset: 0;
      background:
        linear-gradient(90deg, #101010 0%, rgba(16,16,16,.96) 20%, rgba(16,16,16,.68) 43%, rgba(16,16,16,.08) 82%),
        linear-gradient(0deg, var(--bg) 0%, transparent 33%);
      content: "";
    }
    .hero-art {
      position: absolute;
      z-index: -1;
      inset: 0 0 0 auto;
      width: min(70vw, 1050px);
      height: 100%;
      opacity: .84;
      background:
        linear-gradient(90deg, rgba(16,16,16,.65), transparent 44%),
        linear-gradient(0deg, rgba(16,16,16,.7), transparent 40%),
        url("../assets/posters/the-last-light.jpg") center 42% / cover;
      mask-image: linear-gradient(90deg, transparent 0%, #000 19%, #000 100%);
      animation: hero-reveal 1.2s cubic-bezier(.2,.7,.2,1) both;
    }
    @keyframes hero-reveal { from { opacity: 0; transform: scale(1.04); } to { opacity: .84; transform: scale(1); } }
    .hero-copy { max-width: 590px; margin-top: 28px; animation: copy-arrive .72s .12s both; }
    @keyframes copy-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px;
      color: #ddd;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 3px;
      text-transform: uppercase;
    }
    .eyebrow-mark { color: var(--red); font-size: 18px; letter-spacing: -5px; }
    .hero h1 {
      margin: 0 0 7px;
      font-size: clamp(54px, 7.4vw, 98px);
      font-weight: 900;
      letter-spacing: -.065em;
      line-height: .98;
      text-transform: uppercase;
      text-shadow: 0 4px 28px rgba(0,0,0,.25);
    }
    .hero-tagline { margin: 0 0 14px; color: #f2d4b6; font-size: clamp(16px, 2vw, 21px); font-weight: 600; }
    .hero-description { max-width: 460px; margin: 0; color: #e3e3e3; font-size: 16px; line-height: 1.7; }
    .hero-meta { margin-top: 15px; color: #c8c8c8; font-size: 13px; }
    .hero-meta strong { color: #73c68b; }
    .hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
    .button {
      display: inline-flex;
      min-height: 43px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 10px 20px;
      border: 0;
      border-radius: 7px;
      background: #f5f5f5;
      color: #141414;
      font-weight: 750;
      cursor: pointer;
      transition: background .18s, transform .18s;
    }
    .button:hover { transform: translateY(-1px); background: #ddd; }
    .button svg { width: 19px; height: 19px; }
    .button.secondary { border: 1px solid rgba(255,255,255,.26); background: rgba(29,29,34,.72); color: #fff; backdrop-filter: blur(12px); }
    .button.secondary:hover { background: rgba(109,109,110,.52); }
    .rating {
      position: absolute;
      right: 0;
      bottom: 24%;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 170px;
      padding: 10px 24px 10px 14px;
      border-left: 3px solid #ddd;
      background: rgba(51,51,51,.58);
      color: #fff;
      font-size: 14px;
    }
    .rating span { font-size: 20px; }

    main { position: relative; z-index: 2; margin-top: -66px; padding-bottom: 48px; }
    .genre-bar {
      display: flex;
      align-items: center;
      gap: 9px;
      overflow-x: auto;
      padding: 0 var(--page-gutter) 28px;
      scrollbar-width: none;
    }
    .genre-bar::-webkit-scrollbar { display: none; }
    .genre-chip {
      flex: 0 0 auto;
      padding: 7px 14px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 999px;
      background: rgba(20,20,20,.65);
      color: #eee;
      font-size: 12px;
      cursor: pointer;
      transition: background .18s, border .18s;
    }
    .genre-chip:hover, .genre-chip.selected { border-color: var(--red); background: var(--red); color: #171717; }
    .shelf { margin: 0 0 30px; }
    .shelf-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 var(--page-gutter) 12px;
    }
    .shelf-heading h2 { margin: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 750; letter-spacing: -.6px; }
    .row-controls { display: flex; gap: 7px; }
    .row-controls button {
      display: grid;
      width: 31px;
      height: 31px;
      place-items: center;
      border: 1px solid #444;
      border-radius: 50%;
      background: #222;
      cursor: pointer;
    }
    .row-controls button:hover { background: #444; }
    .card-row {
      display: grid;
      grid-auto-columns: calc((100% - 5 * 12px) / 6);
      grid-auto-flow: column;
      gap: 12px;
      overflow-x: auto;
      padding: 4px var(--page-gutter) 15px;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
    }
    .card-row::-webkit-scrollbar { display: none; }
    .card {
      position: relative;
      min-width: 0;
      overflow: hidden;
      border-radius: 9px;
      background: var(--panel);
      cursor: pointer;
      scroll-snap-align: start;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .card:hover, .card:focus-visible {
      z-index: 1;
      transform: scale(1.045);
      box-shadow: 0 10px 28px rgba(0,0,0,.55);
    }
    .poster {
      position: relative;
      display: flex;
      aspect-ratio: 16 / 9;
      align-items: flex-end;
      overflow: hidden;
      padding: 14px;
      background: var(--poster);
      isolation: isolate;
    }
    .poster-image { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s; }
    .card:hover .poster-image, .card:focus-visible .poster-image { transform: scale(1.07); filter: saturate(1.12); }
    .poster::before, .poster::after { position: absolute; z-index: 0; content: ""; pointer-events: none; }
    .poster::before {
      inset: 0;
      background:
        linear-gradient(0deg, rgba(0,0,0,.82), transparent 76%),
        linear-gradient(180deg, rgba(0,0,0,.32), transparent 34%);
    }
    .poster::after {
      inset: 9px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 5px;
    }
    .poster-title {
      position: relative;
      z-index: 1;
      max-width: 90%;
      color: #fff;
      font-size: clamp(15px, 1.55vw, 23px);
      font-weight: 900;
      letter-spacing: -.8px;
      line-height: 1;
      text-shadow: 0 2px 12px #000;
      text-transform: uppercase;
    }
    .poster-mark {
      position: absolute;
      z-index: 1;
      top: 11px;
      left: 12px;
      padding: 4px 8px;
      border: 1px solid rgba(255,255,255,.17);
      border-radius: 999px;
      background: rgba(12,12,15,.55);
      color: #fff;
      font-size: 9px;
      font-weight: 750;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .poster-action {
      position: absolute;
      z-index: 1;
      right: 12px;
      bottom: 12px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 9px;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 999px;
      background: rgba(10,10,12,.62);
      font-size: 10px;
      opacity: 0;
      transform: translateY(5px);
      transition: opacity .2s, transform .2s;
    }
    .card:hover .poster-action, .card:focus-visible .poster-action { opacity: 1; transform: translateY(0); }
    .card-info { padding: 11px 12px 13px; }
    .card-title { overflow: hidden; margin: 0; color: #d6d1d3; font-size: 11px; font-weight: 650; letter-spacing: .2px; text-overflow: ellipsis; white-space: nowrap; }
    .card-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
    .match { color: #70c985; font-weight: 700; }
    .empty-state { display: none; padding: 4px var(--page-gutter) 40px; color: #bbb; }
    .empty-state.visible { display: block; }
    .shelf .empty-state { padding-top: 8px; padding-bottom: 16px; }
    footer { padding: 20px var(--page-gutter) 40px; color: #808080; font-size: 12px; }
    footer p { max-width: 900px; }

    .modal-backdrop {
      position: fixed;
      z-index: 20;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,.78);
      backdrop-filter: blur(5px);
    }
    .modal-backdrop.open { display: flex; }
    .modal {
      position: relative;
      width: min(680px, 100%);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      background: #181818;
      box-shadow: 0 24px 90px rgba(0,0,0,.65);
      animation: rise .2s ease-out;
    }
    @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .modal-art {
      position: relative;
      display: flex;
      min-height: 260px;
      align-items: flex-end;
      padding: 28px;
      background: var(--poster-image, var(--poster)) center / cover;
      isolation: isolate;
    }
    .modal-art::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #181818, transparent 86%), linear-gradient(180deg, #0005, transparent 45%); content: ""; }
    .modal-art h2 { margin: 0; font-size: clamp(34px, 7vw, 54px); font-weight: 900; letter-spacing: -2px; line-height: .95; text-shadow: 0 3px 15px #000; }
    .modal-close {
      position: absolute;
      z-index: 2;
      top: 13px;
      right: 13px;
      display: grid;
      width: 35px;
      height: 35px;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: #181818;
      font-size: 20px;
      cursor: pointer;
    }
    .modal-body { padding: 0 28px 28px; }
    .modal-meta { display: flex; gap: 12px; margin-bottom: 12px; color: #bbb; font-size: 13px; }
    .modal-meta .match { color: #70c985; }
    .modal-description { max-width: 550px; margin: 0; color: #e4e4e4; line-height: 1.65; }
    .modal-actions { display: flex; gap: 10px; margin-top: 20px; }
    .toast {
      position: fixed;
      z-index: 30;
      right: 22px;
      bottom: 22px;
      padding: 12px 17px;
      border: 1px solid #555;
      border-radius: 5px;
      background: #242424;
      box-shadow: 0 8px 25px #0008;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: .2s ease;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    @media (min-width: 1500px) {
      .card-row { grid-auto-columns: calc((100% - 6 * 14px) / 7); gap: 14px; }
    }
    @media (max-width: 900px) {
      .card-row { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
      .hero { min-height: 630px; }
      .hero-art { width: 76vw; mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%); }
      .rating { bottom: 19%; }
    }
    @media (max-width: 600px) {
      .topbar { gap: 17px; padding-top: 13px; }
      .brand { font-size: 22px; }
      .nav-links {
        position: absolute;
        top: 59px;
        left: var(--page-gutter);
        right: var(--page-gutter);
        justify-content: space-between;
        gap: 12px;
      }
      .nav-actions { gap: 7px; }
      .hero { min-height: 650px; align-items: flex-end; padding-top: 90px; padding-bottom: 128px; }
      .hero::before { background: linear-gradient(0deg, #101010 0%, rgba(16,16,16,.9) 37%, rgba(16,16,16,.12) 100%); }
      .hero-art { width: 100%; height: 75%; opacity: .58; mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
      .hero-copy { margin: 0; }
      .hero h1 { font-size: 54px; }
      .hero-description { font-size: 14px; }
      .rating { display: none; }
      .card-row { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
      .poster-title { font-size: 17px; }
      .shelf { margin-bottom: 20px; }
      .row-controls { display: none; }
      .modal-art { min-height: 210px; }
      .modal-body { padding: 0 20px 22px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
    }