*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:#0e0f13;color:#e8e8ee}
a{color:inherit;text-decoration:none}header{display:flex;align-items:center;gap:24px;padding:14px 28px;background:#14161c;position:sticky;top:0}
.logo{font-weight:800;font-size:20px;color:#ff5a5f}nav a{margin-right:18px;color:#b9bcc8}nav a:hover{color:#fff}
.hero{padding:56px 28px;background:linear-gradient(120deg,#1d2030,#2b1f3a)}.hero h1{margin:0 0 10px;font-size:38px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;padding:28px}
.card .poster{aspect-ratio:2/3;border-radius:10px;display:flex;align-items:flex-end;padding:12px;font-weight:700}
.card small{display:block;color:#9aa0b0;margin-top:6px}h2{padding:0 28px;margin:24px 0 0}
.player{margin:28px;aspect-ratio:16/9;background:#000;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#777}
footer{padding:28px;color:#6d7284;border-top:1px solid #1d2028;margin-top:30px;font-size:13px}.btn{display:inline-block;background:#ff5a5f;color:#fff;padding:10px 18px;border-radius:8px;margin-top:12px}