@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root { --ink:#eef0f5; --muted:#969ba8; --line:rgba(255,255,255,.12); --paper:#0b0e17; --card:#141824; --lime:#d6ff62; --orange:#ff7045; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans", sans-serif; min-width:320px; }
button, input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.topbar { height:76px; padding:0 clamp(22px,5vw,82px); display:flex; align-items:center; gap:42px; border-bottom:1px solid var(--line); background:rgba(8,11,20,.87); backdrop-filter:blur(16px); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.7px; font-size:20px; white-space:nowrap; }.brand-mark { display:grid; place-items:center; height:28px; width:28px; background:var(--lime); color:#10130d; border-radius:50%; font-family:Fraunces,serif; font-size:19px; }
.main-nav { display:flex; gap:25px; color:#a9aeba; font-size:14px; }.main-nav a { padding:29px 0 26px; border-bottom:2px solid transparent; }.main-nav a.active,.main-nav a:hover { color:#fff; border-bottom-color:var(--lime); }
.top-actions { display:flex; align-items:center; gap:14px; margin-left:auto; }.search { display:flex; align-items:center; gap:7px; color:#8a90a0; padding:8px 11px; border:1px solid var(--line); border-radius:7px; width:190px; }.search input { width:100%; border:0; outline:0; color:#fff; background:transparent; font-size:13px; }.avatar { height:33px; width:33px; border:0; border-radius:50%; background:#eeab8c; color:#342018; font-size:11px; font-weight:700; }
.hero { min-height:512px; position:relative; overflow:hidden; display:flex; align-items:center; padding:70px clamp(22px,9vw,150px); }.hero-art { position:absolute; inset:0; background:linear-gradient(90deg,#0a0d16 9%,rgba(10,13,22,.88) 32%,rgba(10,13,22,.12) 74%,#0b0e17 100%),url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=85') center 42% / cover; filter:saturate(.65); }.hero-content { position:relative; z-index:1; max-width:520px; }.eyebrow { letter-spacing:1.7px; font-family:"DM Mono",monospace; font-size:10px; color:var(--lime); margin:0 0 14px; }.hero h1 { font-family:Fraunces,serif; font-size:clamp(47px,6vw,78px); line-height:.96; font-weight:500; letter-spacing:-3px; margin:0; }.hero-copy { color:#ced0d7; font-size:16px; line-height:1.58; max-width:440px; margin:23px 0 16px; }.hero-meta { display:flex; flex-wrap:wrap; gap:8px 17px; color:#c4c7d0; font-size:12px; }.hero-meta span:first-child { color:var(--lime); }.hero-buttons { display:flex; gap:10px; margin-top:28px; }.button { border-radius:5px; padding:11px 16px; border:1px solid transparent; font-size:13px; font-weight:600; }.button-primary { background:var(--lime); color:#17200c; }.button-primary:hover { background:#e4ff91; }.button-quiet { color:#e6e7ec; background:rgba(23,27,39,.75); border-color:rgba(255,255,255,.19); }.button-quiet:hover { background:#272c3a; }
.catalog-shell { max-width:1370px; margin:auto; padding:60px clamp(22px,5vw,82px) 83px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:18px; }.section-heading h2,.how-it-works h2 { margin:0; font-family:Fraunces,serif; font-size:clamp(28px,3vw,39px); font-weight:500; letter-spacing:-1.5px; }.text-button { color:var(--ink); background:transparent; border:0; font-size:13px; }.text-button span { color:var(--lime); margin-left:4px; }.genre-row { display:flex; flex-wrap:wrap; gap:8px; margin:27px 0 22px; }.genre { color:#b7bbc5; border:1px solid var(--line); background:transparent; padding:7px 13px; border-radius:50px; font-size:12px; }.genre:hover,.genre.selected { background:var(--lime); border-color:var(--lime); color:#17200c; }.results-label { color:var(--muted); margin:0 0 15px; font-size:12px; }
.show-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }.show-card { min-width:0; position:relative; border-radius:9px; overflow:hidden; background:var(--card); animation:arrive .42s ease backwards; }.show-card:hover { outline:1px solid rgba(214,255,98,.72); transform:translateY(-3px); transition:.18s; }.poster { display:block; width:100%; aspect-ratio:1.66; object-fit:cover; filter:saturate(.76); }.card-shade { position:absolute; inset:0 auto auto 0; right:0; height:55%; background:linear-gradient(#0008,transparent); }.card-actions { position:absolute; top:9px; right:9px; display:flex; gap:6px; }.icon-button { border:0; width:27px; height:27px; border-radius:50%; background:rgba(9,12,20,.72); color:#fff; font-size:15px; }.icon-button:hover:not(:disabled) { background:var(--lime); color:#1a1d16; }.icon-button:disabled { opacity:.35; cursor:not-allowed; }.card-body { padding:13px 13px 14px; }.card-title-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }.card-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0; font-size:15px; letter-spacing:-.2px; }.card-year { color:var(--muted); font-family:"DM Mono",monospace; font-size:10px; }.card-info { margin:6px 0 0; color:#979ca9; font-size:11px; }.card-info b { color:var(--lime); font-weight:500; }.card-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:34px; margin:10px 0 0; color:#c0c3cc; line-height:1.45; font-size:11px; }.card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:13px; }.tag { font-family:"DM Mono",monospace; font-size:9px; color:#aab0bc; }.trailer-link { border:0; background:none; padding:0; color:var(--orange); font-size:11px; font-weight:600; }.trailer-link:hover { color:#ff9f7d; }.library-label { color:#8790a1; font-size:10px; }
.how-it-works { margin:0 clamp(22px,5vw,82px) 45px; padding:30px; border:1px solid var(--line); border-radius:10px; display:grid; grid-template-columns:1.1fr 1fr auto; gap:25px; align-items:center; background:linear-gradient(100deg,#151a28,#10151c); }.how-it-works .eyebrow { margin-bottom:8px; }.how-it-works h2 { font-size:28px; }.how-it-works p:not(.eyebrow) { color:#aeb3bf; line-height:1.55; font-size:13px; }.future-badge { color:#c9ef64; background:rgba(214,255,98,.1); border:1px solid rgba(214,255,98,.22); border-radius:100px; padding:7px 10px; white-space:nowrap; font-size:11px; }
dialog { color:var(--ink); border:1px solid var(--line); background:#131824; border-radius:10px; padding:0; box-shadow:0 20px 80px #000b; } dialog::backdrop { background:#02040abf; backdrop-filter:blur(3px); }.trailer-dialog { width:min(850px,92vw); }.dialog-bar { padding:13px 16px; display:flex; justify-content:space-between; align-items:center; font-size:14px; }.close-button { color:#fff; border:0; background:transparent; font-size:27px; line-height:1; }.video-frame { aspect-ratio:16/9; background:#000; }.video-frame iframe { height:100%; width:100%; border:0; }.detail-dialog { width:min(600px,90vw); padding:28px; }.details-close { position:absolute; top:12px; right:14px; }.detail-title { font-family:Fraunces,serif; font-size:40px; margin:0 0 12px; }.detail-copy { color:#bdc2cd; line-height:1.6; }.detail-meta { color:var(--lime); font-size:12px; }
.garyflix-close, .buddo-close { position:absolute; top:12px; right:14px; } #garyflixForm, #buddoForm { display:grid; gap:12px; margin-top:20px; } #garyflixForm label, #buddoForm label { display:grid; gap:6px; color:#bdc2cd; font-size:12px; } #garyflixForm input, #buddoForm input { border:1px solid var(--line); border-radius:5px; background:#0b0e17; color:var(--ink); padding:10px; font:inherit; } #garyflixError, #buddoError { min-height:18px; margin:0; color:#ff9ca7; font-size:12px; }
.request-action { width:100%; margin-top:12px; border:1px solid rgba(205,255,90,.52); border-radius:5px; padding:9px 11px; background:rgba(205,255,90,.12); color:var(--lime); font-size:12px; font-weight:700; } .request-action:hover { background:rgba(205,255,90,.2); } .request-action:disabled { cursor:not-allowed; opacity:.42; }
@keyframes arrive { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@media (max-width:850px) { .show-grid { grid-template-columns:repeat(3,1fr); }.how-it-works { grid-template-columns:1fr; gap:12px; }.future-badge { justify-self:start; }.main-nav { display:none; } }
@media (max-width:570px) { .topbar { height:65px; padding:0 18px; gap:10px; }.search { width:42px; padding:8px; }.search input { display:none; }.hero { min-height:480px; padding:60px 22px; }.hero-art { background-position:64% center; }.show-grid { grid-template-columns:repeat(2,1fr); gap:11px; }.catalog-shell { padding:43px 18px 55px; }.card-body { padding:10px; }.card-description { display:none; }.card-footer { margin-top:9px; }.top-actions { gap:8px; }.section-heading h2 { max-width:255px; }.how-it-works { margin:0 18px 30px; padding:23px; } }