Spaces:
Running
Running
Update index.html
Browse files- index.html +987 -19
index.html
CHANGED
|
@@ -1,19 +1,987 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>How Netflix Knows You โ Decode the Tech</title>
|
| 7 |
+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
| 8 |
+
<style>
|
| 9 |
+
:root {
|
| 10 |
+
--red: #E50914;
|
| 11 |
+
--red-dim: #b0060f;
|
| 12 |
+
--black: #0a0a0a;
|
| 13 |
+
--dark: #141414;
|
| 14 |
+
--card: #1c1c1c;
|
| 15 |
+
--card2: #242424;
|
| 16 |
+
--border: rgba(255,255,255,0.08);
|
| 17 |
+
--text: #e5e5e5;
|
| 18 |
+
--muted: #888;
|
| 19 |
+
--gold: #f5c518;
|
| 20 |
+
--green: #46d369;
|
| 21 |
+
--blue: #0071eb;
|
| 22 |
+
--prime: #00a8e0;
|
| 23 |
+
--warn: #ff9800;
|
| 24 |
+
}
|
| 25 |
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
| 26 |
+
html { scroll-behavior: smooth; }
|
| 27 |
+
body {
|
| 28 |
+
font-family: 'DM Sans', sans-serif;
|
| 29 |
+
background: var(--black);
|
| 30 |
+
color: var(--text);
|
| 31 |
+
overflow-x: hidden;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
/* โโ PROGRESS BAR โโ */
|
| 35 |
+
.progress-bar { position: fixed; top: 0; left: 0; height: 2px; background: var(--red); z-index: 9999; transition: width .35s ease; }
|
| 36 |
+
|
| 37 |
+
/* โโ NAV โโ */
|
| 38 |
+
nav {
|
| 39 |
+
position: fixed; top: 0; left: 0; right: 0; z-index: 999;
|
| 40 |
+
display: flex; align-items: center; justify-content: space-between;
|
| 41 |
+
padding: 0 1.5rem; height: 56px;
|
| 42 |
+
background: linear-gradient(180deg, rgba(0,0,0,.97) 0%, transparent 100%);
|
| 43 |
+
backdrop-filter: blur(12px);
|
| 44 |
+
border-bottom: 1px solid var(--border);
|
| 45 |
+
}
|
| 46 |
+
.nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--red); letter-spacing: 2px; flex-shrink: 0; }
|
| 47 |
+
.nav-links { display: flex; gap: .25rem; flex-wrap: wrap; }
|
| 48 |
+
.nav-links button {
|
| 49 |
+
background: none; border: none; color: var(--muted); font-family: 'DM Sans', sans-serif;
|
| 50 |
+
font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
|
| 51 |
+
cursor: pointer; padding: .3rem .55rem; border-radius: 4px; transition: all .2s;
|
| 52 |
+
}
|
| 53 |
+
.nav-links button:hover, .nav-links button.active { color: white; background: rgba(255,255,255,.08); }
|
| 54 |
+
.slide-counter { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--muted); flex-shrink: 0; }
|
| 55 |
+
|
| 56 |
+
/* โโ SLIDES โโ */
|
| 57 |
+
.slide { min-height: 100vh; padding: 80px 5% 80px; display: none; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
|
| 58 |
+
.slide.active { display: flex; }
|
| 59 |
+
.slide.active { animation: fadeIn .4s ease; }
|
| 60 |
+
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
|
| 61 |
+
|
| 62 |
+
/* โโ COMMON โโ */
|
| 63 |
+
.slide-tag { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin-bottom: .7rem; }
|
| 64 |
+
h1.hero { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 9vw, 7.5rem); line-height: .93; color: white; }
|
| 65 |
+
h1.hero span { color: var(--red); }
|
| 66 |
+
h2.sec { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.4rem, 4.8vw, 4rem); color: white; line-height: 1; margin-bottom: .5rem; }
|
| 67 |
+
h2.sec span { color: var(--red); }
|
| 68 |
+
.subtitle { color: var(--muted); font-size: .97rem; font-weight: 300; max-width: 700px; line-height: 1.75; }
|
| 69 |
+
.divider { width: 48px; height: 3px; background: var(--red); border-radius: 2px; margin: 1rem 0; }
|
| 70 |
+
.bg-glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; }
|
| 71 |
+
.content { position: relative; z-index: 1; }
|
| 72 |
+
|
| 73 |
+
/* โโ NAV BUTTONS โโ */
|
| 74 |
+
.slide-nav { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: .9rem; z-index: 999; align-items: center; }
|
| 75 |
+
.btn-nav { background: var(--card); border: 1px solid var(--border); color: white; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .82rem; padding: .55rem 1.3rem; border-radius: 6px; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: .45rem; }
|
| 76 |
+
.btn-nav:hover { background: var(--red); border-color: var(--red); }
|
| 77 |
+
.btn-nav:disabled { opacity: .3; cursor: not-allowed; }
|
| 78 |
+
.btn-nav:disabled:hover { background: var(--card); border-color: var(--border); }
|
| 79 |
+
|
| 80 |
+
/* โโ SCROLLBAR โโ */
|
| 81 |
+
::-webkit-scrollbar { width: 4px; height: 4px; }
|
| 82 |
+
::-webkit-scrollbar-track { background: var(--dark); }
|
| 83 |
+
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }
|
| 84 |
+
|
| 85 |
+
/* โโโโโโ๏ฟฝ๏ฟฝโโโโโโโ SLIDE 1 โ INTRO โโโโโโโโโโโโโโ */
|
| 86 |
+
#s1 { background: var(--dark); }
|
| 87 |
+
#s1 .bg-glow:nth-child(1) { width: 620px; height: 620px; background: rgba(229,9,20,.17); top: -120px; right: -100px; }
|
| 88 |
+
#s1 .bg-glow:nth-child(2) { width: 380px; height: 380px; background: rgba(229,9,20,.07); bottom: 0; left: -80px; }
|
| 89 |
+
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
| 90 |
+
.hero-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.8rem; }
|
| 91 |
+
.badge { padding: .3rem .85rem; border-radius: 99px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
|
| 92 |
+
.badge-red { background: rgba(229,9,20,.18); color: var(--red); border: 1px solid rgba(229,9,20,.3); }
|
| 93 |
+
.badge-white { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--border); }
|
| 94 |
+
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
| 95 |
+
.hero-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: border-color .2s; }
|
| 96 |
+
.hero-stat:hover { border-color: var(--red); }
|
| 97 |
+
.hero-stat .num { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; color: var(--red); line-height: 1; }
|
| 98 |
+
.hero-stat .lbl { font-size: .72rem; color: var(--muted); margin-top: .3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
|
| 99 |
+
.intro-reveal { margin-top: 2rem; padding: 1.2rem 1.6rem; background: rgba(229,9,20,.07); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; max-width: 700px; }
|
| 100 |
+
.intro-reveal p { font-size: .92rem; color: var(--text); line-height: 1.7; }
|
| 101 |
+
.intro-reveal strong { color: var(--red); }
|
| 102 |
+
|
| 103 |
+
/* โโโโโโโโโโโโโโ SLIDE 2 โ STORY โโโโโโโโโโโโโโ */
|
| 104 |
+
#s2 { background: var(--black); }
|
| 105 |
+
#s2 .bg-glow { width: 700px; height: 350px; background: rgba(229,9,20,.05); top: 45%; left: 50%; transform: translateX(-50%); }
|
| 106 |
+
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2rem; }
|
| 107 |
+
.tl-item { position: relative; padding: 1.4rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; transition: border-color .2s; }
|
| 108 |
+
.tl-item:hover { border-color: var(--red); }
|
| 109 |
+
.tl-year { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--red); font-weight: 700; margin-bottom: .45rem; letter-spacing: .1em; }
|
| 110 |
+
.tl-title { font-weight: 700; font-size: .92rem; color: white; margin-bottom: .35rem; }
|
| 111 |
+
.tl-body { font-size: .8rem; color: var(--muted); line-height: 1.6; }
|
| 112 |
+
.tl-dot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; position: absolute; top: -4px; left: 1.4rem; }
|
| 113 |
+
.story-insight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; }
|
| 114 |
+
.si-card { background: linear-gradient(135deg, var(--card) 0%, var(--card2) 100%); border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem; display: flex; align-items: flex-start; gap: .9rem; transition: border-color .2s; }
|
| 115 |
+
.si-card:hover { border-color: rgba(229,9,20,.35); }
|
| 116 |
+
.si-icon { font-size: 1.4rem; flex-shrink: 0; }
|
| 117 |
+
.si-title { font-weight: 700; font-size: .85rem; color: white; }
|
| 118 |
+
.si-body { font-size: .77rem; color: var(--muted); margin-top: .2rem; line-height: 1.5; }
|
| 119 |
+
.story-thesis { margin-top: 1.4rem; padding: 1rem 1.4rem; background: rgba(229,9,20,.07); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; }
|
| 120 |
+
.story-thesis p { font-size: .88rem; color: var(--text); line-height: 1.65; }
|
| 121 |
+
.story-thesis strong { color: var(--red); }
|
| 122 |
+
|
| 123 |
+
/* โโโโโโโโโโโโโโ SLIDE 3 โ WHY NETFLIX โโโโโโโโโโโโโโ */
|
| 124 |
+
#s3 { background: var(--dark); }
|
| 125 |
+
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.8rem; }
|
| 126 |
+
.why-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; transition: all .25s; }
|
| 127 |
+
.why-card:hover { border-color: var(--red); background: linear-gradient(135deg, rgba(229,9,20,.05), var(--card)); transform: translateY(-3px); }
|
| 128 |
+
.why-icon { font-size: 1.9rem; margin-bottom: .9rem; }
|
| 129 |
+
.why-title { font-weight: 700; font-size: .95rem; color: white; margin-bottom: .45rem; }
|
| 130 |
+
.why-desc { font-size: .8rem; color: var(--muted); line-height: 1.65; }
|
| 131 |
+
.why-metric { display: inline-block; margin-top: .7rem; font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--red); font-weight: 700; background: rgba(229,9,20,.1); padding: .2rem .55rem; border-radius: 4px; }
|
| 132 |
+
.challenge-section { margin-top: 1.6rem; }
|
| 133 |
+
.challenge-label { font-size: .7rem; color: var(--warn); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .8rem; font-weight: 700; }
|
| 134 |
+
.challenges { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
|
| 135 |
+
.ch-card { background: rgba(255,152,0,.05); border: 1px solid rgba(255,152,0,.18); border-radius: 10px; padding: 1rem 1.1rem; display: flex; gap: .7rem; align-items: flex-start; }
|
| 136 |
+
.ch-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }
|
| 137 |
+
.ch-title { font-size: .83rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; }
|
| 138 |
+
.ch-body { font-size: .75rem; color: var(--muted); line-height: 1.5; }
|
| 139 |
+
|
| 140 |
+
/* โโโโโโโโโโโโโโ SLIDE 4 โ SIGNALS โโโโโโโโโโโโโโ */
|
| 141 |
+
#s4 { background: var(--black); }
|
| 142 |
+
#s4 .bg-glow { width: 500px; height: 500px; background: rgba(229,9,20,.06); top: 50%; left: 60%; transform: translate(-50%,-50%); }
|
| 143 |
+
.signals-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; margin-top: 2rem; }
|
| 144 |
+
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
|
| 145 |
+
.signal-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem; transition: all .22s; cursor: default; }
|
| 146 |
+
.signal-card:hover { border-color: var(--red); transform: translateY(-2px); }
|
| 147 |
+
.signal-icon { font-size: 1.5rem; margin-bottom: .5rem; }
|
| 148 |
+
.signal-name { font-weight: 700; font-size: .85rem; color: white; margin-bottom: .25rem; }
|
| 149 |
+
.signal-desc { font-size: .75rem; color: var(--muted); line-height: 1.5; }
|
| 150 |
+
.signal-weight { margin-top: .5rem; display: flex; align-items: center; gap: .5rem; }
|
| 151 |
+
.sw-bar { flex: 1; height: 3px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
|
| 152 |
+
.sw-fill { height: 100%; border-radius: 99px; background: var(--red); }
|
| 153 |
+
.sw-label { font-family: 'JetBrains Mono', monospace; font-size: .6rem; color: var(--muted); white-space: nowrap; }
|
| 154 |
+
.signal-story { }
|
| 155 |
+
.ss-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: white; margin-bottom: 1rem; line-height: 1; }
|
| 156 |
+
.ss-title span { color: var(--red); }
|
| 157 |
+
.signal-scenario { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem; margin-bottom: 1rem; position: relative; }
|
| 158 |
+
.signal-scenario::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); border-radius: 3px 0 0 3px; }
|
| 159 |
+
.sc-action { font-weight: 700; font-size: .88rem; color: white; margin-bottom: .35rem; }
|
| 160 |
+
.sc-inference { font-size: .8rem; color: var(--muted); line-height: 1.6; }
|
| 161 |
+
.sc-tag { margin-top: .5rem; font-size: .68rem; color: var(--red); font-family: 'JetBrains Mono', monospace; }
|
| 162 |
+
.signals-footer { grid-column: 1 / -1; margin-top: .5rem; padding: 1rem 1.4rem; background: rgba(229,9,20,.06); border: 1px solid rgba(229,9,20,.18); border-radius: 10px; font-size: .85rem; color: var(--muted); line-height: 1.7; }
|
| 163 |
+
.signals-footer strong { color: var(--red); }
|
| 164 |
+
|
| 165 |
+
/* โโโโโโโโโโโโโโ SLIDE 5 โ ALGORITHMS E1 โโโโโโโโโโโโโโ */
|
| 166 |
+
#s5 { background: var(--dark); }
|
| 167 |
+
.algo-intro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
|
| 168 |
+
.algo-main-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem; transition: all .25s; }
|
| 169 |
+
.algo-main-card:hover { border-color: var(--red); transform: translateY(-3px); }
|
| 170 |
+
.algo-num-big { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: rgba(229,9,20,.25); line-height: 1; margin-bottom: .5rem; }
|
| 171 |
+
.algo-name { font-weight: 700; color: white; font-size: 1rem; margin-bottom: .5rem; }
|
| 172 |
+
.algo-analogy { font-size: .78rem; color: var(--green); font-weight: 600; margin-bottom: .5rem; font-style: italic; }
|
| 173 |
+
.algo-desc { font-size: .8rem; color: var(--muted); line-height: 1.65; }
|
| 174 |
+
.algo-visual { margin-top: 1rem; padding: .8rem; background: rgba(255,255,255,.03); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--muted); line-height: 1.8; }
|
| 175 |
+
.algo-visual .hl { color: var(--red); }
|
| 176 |
+
.algo-mf-card { grid-column: 1 / -1; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem; display: grid; grid-template-columns: auto 1fr 1fr; gap: 2rem; align-items: center; transition: border-color .2s; }
|
| 177 |
+
.algo-mf-card:hover { border-color: var(--red); }
|
| 178 |
+
.algo-mf-matrix { font-family: 'JetBrains Mono', monospace; font-size: .72rem; background: rgba(229,9,20,.07); border: 1px solid rgba(229,9,20,.2); border-radius: 8px; padding: 1rem 1.2rem; line-height: 1.9; }
|
| 179 |
+
.algo-mf-matrix .h { color: var(--red); font-weight: 700; }
|
| 180 |
+
.algo-mf-matrix .v { color: var(--green); }
|
| 181 |
+
.algo-mf-matrix .u { color: var(--muted); }
|
| 182 |
+
|
| 183 |
+
/* โโโโโโโโโโโโโโ SLIDE 6 โ ALGORITHMS E2 โโโโโโโโโโโโโโ */
|
| 184 |
+
#s6 { background: var(--black); }
|
| 185 |
+
#s6 .bg-glow { width: 500px; height: 500px; background: rgba(229,9,20,.06); bottom: -100px; right: -100px; }
|
| 186 |
+
.pipeline-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
|
| 187 |
+
.pf-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; transition: all .22s; }
|
| 188 |
+
.pf-card:hover { border-color: var(--red); transform: translateY(-2px); }
|
| 189 |
+
.pf-card.featured { border-color: rgba(229,9,20,.3); background: linear-gradient(135deg, rgba(229,9,20,.06), var(--card)); }
|
| 190 |
+
.pf-label { font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: var(--red); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4rem; }
|
| 191 |
+
.pf-title { font-weight: 700; font-size: .98rem; color: white; margin-bottom: .45rem; }
|
| 192 |
+
.pf-desc { font-size: .8rem; color: var(--muted); line-height: 1.65; }
|
| 193 |
+
.pf-scale { margin-top: .8rem; display: flex; align-items: center; gap: .7rem; }
|
| 194 |
+
.scale-arrow { font-size: 1.2rem; color: var(--red); }
|
| 195 |
+
.scale-text { font-size: .75rem; color: var(--muted); }
|
| 196 |
+
.scale-text strong { color: var(--text); }
|
| 197 |
+
.rl-explainer { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(70,211,105,.06), var(--card)); border: 1px solid rgba(70,211,105,.2); border-radius: 14px; padding: 1.5rem; }
|
| 198 |
+
.rl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
|
| 199 |
+
.rl-col { }
|
| 200 |
+
.rl-col-title { font-weight: 700; font-size: .9rem; margin-bottom: .5rem; }
|
| 201 |
+
.rl-col-title.exploit { color: var(--red); }
|
| 202 |
+
.rl-col-title.explore { color: var(--green); }
|
| 203 |
+
.rl-desc { font-size: .8rem; color: var(--muted); line-height: 1.6; }
|
| 204 |
+
.fm-card { grid-column: 1 / -1; background: var(--card); border: 1px solid rgba(0,161,224,.25); border-radius: 14px; padding: 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; }
|
| 205 |
+
.fm-badge { background: rgba(0,161,224,.12); border: 1px solid rgba(0,161,224,.3); border-radius: 10px; padding: 1rem 1.4rem; text-align: center; flex-shrink: 0; }
|
| 206 |
+
.fm-badge-label { font-size: .65rem; color: var(--prime); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .3rem; }
|
| 207 |
+
.fm-badge-year { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: white; line-height: 1; }
|
| 208 |
+
.fm-title { font-weight: 700; font-size: 1rem; color: white; margin-bottom: .5rem; }
|
| 209 |
+
.fm-desc { font-size: .8rem; color: var(--muted); line-height: 1.65; }
|
| 210 |
+
.fm-tag { margin-top: .6rem; font-size: .68rem; color: var(--prime); font-family: 'JetBrains Mono', monospace; }
|
| 211 |
+
|
| 212 |
+
/* โโโโโโโโโโโโโโ SLIDE 7 โ HOW IT WORKS โโโโโโโโโโโโโโ */
|
| 213 |
+
#s7 { background: var(--dark); }
|
| 214 |
+
.pipeline-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
|
| 215 |
+
.ps-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.3rem; position: relative; transition: all .22s; }
|
| 216 |
+
.ps-card:hover { border-color: var(--red); transform: translateY(-2px); }
|
| 217 |
+
.ps-step-num { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--red); font-weight: 700; letter-spacing: .12em; margin-bottom: .45rem; }
|
| 218 |
+
.ps-icon { font-size: 1.6rem; margin-bottom: .6rem; }
|
| 219 |
+
.ps-title { font-weight: 700; font-size: .88rem; color: white; margin-bottom: .35rem; }
|
| 220 |
+
.ps-desc { font-size: .75rem; color: var(--muted); line-height: 1.55; }
|
| 221 |
+
.ps-arrow { position: absolute; top: 50%; right: -1.1rem; transform: translateY(-50%); font-size: .85rem; color: var(--red); z-index: 2; }
|
| 222 |
+
.ps-card:nth-child(4) .ps-arrow,
|
| 223 |
+
.ps-card:nth-child(8) .ps-arrow { display: none; }
|
| 224 |
+
.pipeline-steps-row2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; }
|
| 225 |
+
.pipeline-footer { margin-top: 1.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
|
| 226 |
+
.pf-stat { background: rgba(229,9,20,.05); border: 1px solid rgba(229,9,20,.15); border-radius: 10px; padding: 1rem 1.2rem; text-align: center; }
|
| 227 |
+
.pf-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--red); line-height: 1; }
|
| 228 |
+
.pf-stat-label { font-size: .7rem; color: var(--muted); margin-top: .25rem; text-transform: uppercase; letter-spacing: .07em; }
|
| 229 |
+
|
| 230 |
+
/* โโโโโโโโโโโโโโ SLIDE 8 โ USER PROFILES โโโโโโโโโโโโโโ */
|
| 231 |
+
#s8 { background: var(--black); }
|
| 232 |
+
.profiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.8rem; }
|
| 233 |
+
.profile-card { border-radius: 16px; padding: 1.5rem; border: 1px solid var(--border); position: relative; overflow: hidden; }
|
| 234 |
+
.profile-card.user-a { background: linear-gradient(160deg, rgba(229,9,20,.14) 0%, var(--card) 50%); border-color: rgba(229,9,20,.28); }
|
| 235 |
+
.profile-card.user-b { background: linear-gradient(160deg, rgba(70,211,105,.09) 0%, var(--card) 50%); border-color: rgba(70,211,105,.22); }
|
| 236 |
+
.profile-card.user-c { background: linear-gradient(160deg, rgba(0,113,235,.1) 0%, var(--card) 50%); border-color: rgba(0,113,235,.28); }
|
| 237 |
+
.profile-avatar { width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: .9rem; }
|
| 238 |
+
.avatar-a { background: rgba(229,9,20,.18); }
|
| 239 |
+
.avatar-b { background: rgba(70,211,105,.18); }
|
| 240 |
+
.avatar-c { background: rgba(0,113,235,.18); }
|
| 241 |
+
.profile-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: white; letter-spacing: .05em; }
|
| 242 |
+
.profile-type { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .9rem; }
|
| 243 |
+
.type-a { color: var(--red); } .type-b { color: var(--green); } .type-c { color: var(--blue); }
|
| 244 |
+
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: 1.1rem; }
|
| 245 |
+
.ps-item { background: rgba(255,255,255,.04); border-radius: 6px; padding: .55rem; }
|
| 246 |
+
.ps-label { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .12rem; }
|
| 247 |
+
.ps-value { font-size: .8rem; font-weight: 600; color: white; }
|
| 248 |
+
.profile-watched { margin-bottom: 1rem; }
|
| 249 |
+
.pw-label { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .45rem; }
|
| 250 |
+
.show-pill { display: inline-block; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 4px; padding: .18rem .5rem; font-size: .7rem; color: var(--text); margin: .15rem .12rem .15rem 0; font-weight: 600; }
|
| 251 |
+
.stars { color: var(--gold); font-size: .62rem; }
|
| 252 |
+
.why-rec { margin-top: .8rem; padding: .8rem 1rem; background: rgba(255,255,255,.03); border-radius: 8px; border-left: 2px solid rgba(255,255,255,.15); }
|
| 253 |
+
.why-rec-label { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .35rem; }
|
| 254 |
+
.why-rec-items { display: flex; flex-direction: column; gap: .3rem; }
|
| 255 |
+
.wri { font-size: .75rem; color: var(--text); display: flex; align-items: flex-start; gap: .4rem; line-height: 1.4; }
|
| 256 |
+
.wri-dot { color: var(--red); flex-shrink: 0; margin-top: .1rem; }
|
| 257 |
+
.netflix-ui-mock { background: #141414; border-radius: 10px; padding: .9rem; border: 1px solid rgba(255,255,255,.05); margin-top: .9rem; }
|
| 258 |
+
.nf-ui-header { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; }
|
| 259 |
+
.nf-ui-logo { font-family: 'Bebas Neue', sans-serif; color: var(--red); font-size: .95rem; letter-spacing: 2px; }
|
| 260 |
+
.nf-ui-user { margin-left: auto; font-size: .68rem; color: var(--muted); }
|
| 261 |
+
.nf-row-label { font-size: .68rem; font-weight: 700; color: var(--text); margin-bottom: .45rem; letter-spacing: .02em; }
|
| 262 |
+
.nf-thumbnails { display: flex; gap: .35rem; overflow: hidden; }
|
| 263 |
+
.nf-thumb { border-radius: 4px; aspect-ratio: 16/9; flex: 0 0 calc(20% - .28rem); display: flex; align-items: flex-end; padding: .3rem; font-size: .5rem; font-weight: 700; color: white; letter-spacing: .03em; position: relative; overflow: hidden; transition: transform .2s; cursor: pointer; }
|
| 264 |
+
.nf-thumb:hover { transform: scale(1.06); z-index: 2; }
|
| 265 |
+
.nf-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent 60%); }
|
| 266 |
+
.nf-thumb span { position: relative; z-index: 1; }
|
| 267 |
+
.nf-row { margin-bottom: .7rem; }
|
| 268 |
+
.t1 { background: linear-gradient(135deg, #1a1a2e, #4a1c1c); }
|
| 269 |
+
.t2 { background: linear-gradient(135deg, #0d2137, #2d1b1b); }
|
| 270 |
+
.t3 { background: linear-gradient(135deg, #1c1c0e, #3a3a1a); }
|
| 271 |
+
.t4 { background: linear-gradient(135deg, #0a2820, #1a5c3c); }
|
| 272 |
+
.t5 { background: linear-gradient(135deg, #2d1040, #0d2137); }
|
| 273 |
+
.t6 { background: linear-gradient(135deg, #2a1a0e, #5c3a1a); }
|
| 274 |
+
.t7 { background: linear-gradient(135deg, #1b3a1b, #0d4a3a); }
|
| 275 |
+
.t8 { background: linear-gradient(135deg, #141428, #2a2a4a); }
|
| 276 |
+
.t9 { background: linear-gradient(135deg, #3a1a28, #5c2a3a); }
|
| 277 |
+
.t10 { background: linear-gradient(135deg, #0a1628, #1a3050); }
|
| 278 |
+
|
| 279 |
+
/* โโโโโโโโโโโโโโ SLIDE 9 โ ARTWORK โโโโโโโโโโโโโโ */
|
| 280 |
+
#s9 { background: var(--dark); }
|
| 281 |
+
.artwork-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; margin-top: 2rem; }
|
| 282 |
+
.artwork-left { }
|
| 283 |
+
.artwork-right { }
|
| 284 |
+
.thumb-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.2rem; }
|
| 285 |
+
.thumb-variant { border-radius: 8px; aspect-ratio: 16/10; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .5rem; text-align: center; position: relative; overflow: hidden; cursor: default; transition: transform .2s; }
|
| 286 |
+
.thumb-variant:hover { transform: scale(1.03); }
|
| 287 |
+
.thumb-variant::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 50%); }
|
| 288 |
+
.tv-label { position: relative; z-index: 1; font-size: .58rem; font-weight: 700; color: white; text-align: center; letter-spacing: .04em; margin-top: auto; }
|
| 289 |
+
.tv-ctr { position: absolute; top: .4rem; right: .4rem; z-index: 2; font-family: 'JetBrains Mono', monospace; font-size: .55rem; font-weight: 700; background: rgba(0,0,0,.7); color: var(--green); border-radius: 3px; padding: .1rem .35rem; }
|
| 290 |
+
.tv1 { background: linear-gradient(135deg, #1a0a28, #3d1060); }
|
| 291 |
+
.tv2 { background: linear-gradient(135deg, #0a1e35, #1a4a7a); }
|
| 292 |
+
.tv3 { background: linear-gradient(135deg, #1a2a00, #3a5a00); }
|
| 293 |
+
.tv4 { background: linear-gradient(135deg, #2a0a0a, #6a1818); }
|
| 294 |
+
.tv5 { background: linear-gradient(135deg, #0a0a2a, #202060); }
|
| 295 |
+
.tv6 { background: linear-gradient(135deg, #1a100a, #4a2a18); }
|
| 296 |
+
.showcase-caption { font-size: .75rem; color: var(--muted); text-align: center; margin-bottom: 1.2rem; font-style: italic; }
|
| 297 |
+
.artwork-facts { display: flex; flex-direction: column; gap: .8rem; }
|
| 298 |
+
.art-fact { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem; display: flex; gap: .9rem; align-items: flex-start; transition: border-color .2s; }
|
| 299 |
+
.art-fact:hover { border-color: var(--red); }
|
| 300 |
+
.art-fact-icon { font-size: 1.3rem; flex-shrink: 0; }
|
| 301 |
+
.art-fact-title { font-weight: 700; font-size: .85rem; color: white; margin-bottom: .25rem; }
|
| 302 |
+
.art-fact-body { font-size: .77rem; color: var(--muted); line-height: 1.55; }
|
| 303 |
+
.art-fact-tag { margin-top: .4rem; font-size: .65rem; color: var(--red); font-family: 'JetBrains Mono', monospace; }
|
| 304 |
+
|
| 305 |
+
/* โโโโโโโโโโโโโโ SLIDE 10 โ DEMO โโโโโโโโโโโโโโ */
|
| 306 |
+
#s10 { background: var(--black); justify-content: center; align-items: center; }
|
| 307 |
+
#s10 .bg-glow { width: 600px; height: 600px; background: rgba(229,9,20,.06); top: 50%; left: 50%; transform: translate(-50%,-50%); }
|
| 308 |
+
.demo-container { text-align: center; max-width: 700px; width: 100%; }
|
| 309 |
+
.demo-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(229,9,20,.1); border: 1px solid rgba(229,9,20,.25); border-radius: 99px; padding: .4rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--red); font-weight: 700; letter-spacing: .1em; margin-bottom: 1.5rem; }
|
| 310 |
+
.demo-badge::before { content: ''; width: 7px; height: 7px; background: var(--red); border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; }
|
| 311 |
+
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
|
| 312 |
+
.demo-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 7vw, 5.5rem); color: white; line-height: .95; margin-bottom: 1.2rem; }
|
| 313 |
+
.demo-title span { color: var(--red); }
|
| 314 |
+
.demo-subtitle { font-size: .97rem; color: var(--muted); line-height: 1.75; margin-bottom: 2.5rem; }
|
| 315 |
+
.demo-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: left; }
|
| 316 |
+
.demo-slot { background: var(--card); border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; padding: 1.4rem; transition: border-color .2s; }
|
| 317 |
+
.demo-slot:hover { border-color: rgba(229,9,20,.35); border-style: solid; }
|
| 318 |
+
.ds-icon { font-size: 1.8rem; margin-bottom: .7rem; }
|
| 319 |
+
.ds-title { font-weight: 700; font-size: .9rem; color: white; margin-bottom: .35rem; }
|
| 320 |
+
.ds-desc { font-size: .78rem; color: var(--muted); line-height: 1.55; }
|
| 321 |
+
.ds-status { margin-top: .7rem; font-size: .65rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
|
| 322 |
+
|
| 323 |
+
/* โโโโโโโโโโโโโโ SLIDE 11 โ TAKEAWAYS โโโโโโโโโโโโโโ */
|
| 324 |
+
#s11 { background: var(--dark); }
|
| 325 |
+
.takeaways-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; margin-top: 2rem; }
|
| 326 |
+
.takeaways-list { display: flex; flex-direction: column; gap: .85rem; }
|
| 327 |
+
.takeaway { display: flex; align-items: flex-start; gap: 1.2rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.4rem; transition: border-color .2s; }
|
| 328 |
+
.takeaway:hover { border-color: var(--red); }
|
| 329 |
+
.ta-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; color: rgba(229,9,20,.28); line-height: 1; flex-shrink: 0; width: 1.9rem; }
|
| 330 |
+
.ta-title { font-weight: 700; font-size: .9rem; color: white; margin-bottom: .25rem; }
|
| 331 |
+
.ta-desc { font-size: .78rem; color: var(--muted); line-height: 1.6; }
|
| 332 |
+
.ethics-panel { }
|
| 333 |
+
.ethics-label { font-size: .68rem; color: var(--warn); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-bottom: 1rem; }
|
| 334 |
+
.ethics-cards { display: flex; flex-direction: column; gap: .75rem; }
|
| 335 |
+
.eth-card { background: rgba(255,152,0,.05); border: 1px solid rgba(255,152,0,.15); border-radius: 10px; padding: 1.1rem 1.2rem; }
|
| 336 |
+
.eth-title { font-weight: 700; font-size: .85rem; color: var(--text); margin-bottom: .3rem; display: flex; align-items: center; gap: .5rem; }
|
| 337 |
+
.eth-icon { font-size: 1rem; }
|
| 338 |
+
.eth-desc { font-size: .78rem; color: var(--muted); line-height: 1.55; }
|
| 339 |
+
.future-note { margin-top: 1.2rem; padding: 1rem 1.2rem; background: rgba(70,211,105,.05); border: 1px solid rgba(70,211,105,.18); border-radius: 10px; }
|
| 340 |
+
.fn-label { font-size: .65rem; color: var(--green); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .6rem; font-weight: 700; }
|
| 341 |
+
.fn-items { display: flex; flex-direction: column; gap: .4rem; }
|
| 342 |
+
.fn-item { font-size: .8rem; color: var(--muted); display: flex; gap: .5rem; align-items: flex-start; line-height: 1.4; }
|
| 343 |
+
.fn-dot { color: var(--green); flex-shrink: 0; }
|
| 344 |
+
|
| 345 |
+
/* โโโโโโโโโโโโโโ SLIDE 12 โ END โโโโโโโโโโโโโโ */
|
| 346 |
+
#s12 { background: var(--dark); justify-content: center; align-items: center; text-align: center; }
|
| 347 |
+
#s12 .bg-glow { width: 700px; height: 700px; background: rgba(229,9,20,.11); top: 50%; left: 50%; transform: translate(-50%,-50%); }
|
| 348 |
+
.final-logo { font-family: 'Bebas Neue', sans-serif; font-size: 5rem; color: var(--red); letter-spacing: 6px; margin-bottom: 1.3rem; }
|
| 349 |
+
.final-tag { font-size: .82rem; color: var(--muted); font-weight: 300; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 2.2rem; }
|
| 350 |
+
.final-qa { font-family: 'Bebas Neue', sans-serif; font-size: 4.5rem; color: white; margin-bottom: .5rem; }
|
| 351 |
+
.final-sub { font-size: .97rem; color: var(--muted); max-width: 520px; margin: .8rem auto 0; line-height: 1.75; }
|
| 352 |
+
|
| 353 |
+
/* โโ RESPONSIVE โโ */
|
| 354 |
+
@media (max-width: 1024px) {
|
| 355 |
+
.hero-grid, .signals-layout, .artwork-layout, .takeaways-layout { grid-template-columns: 1fr; }
|
| 356 |
+
.timeline, .pipeline-steps, .pipeline-steps-row2 { grid-template-columns: 1fr 1fr; }
|
| 357 |
+
.why-grid, .challenges, .story-insight, .algo-intro { grid-template-columns: 1fr 1fr; }
|
| 358 |
+
.pipeline-flow { grid-template-columns: 1fr; }
|
| 359 |
+
.algo-mf-card { grid-template-columns: 1fr; }
|
| 360 |
+
.profiles-grid { grid-template-columns: 1fr; }
|
| 361 |
+
.demo-slots { grid-template-columns: 1fr; }
|
| 362 |
+
.ps-arrow { display: none; }
|
| 363 |
+
}
|
| 364 |
+
@media (max-width: 640px) {
|
| 365 |
+
.nav-links button { font-size: .58rem; padding: .25rem .4rem; }
|
| 366 |
+
.timeline, .why-grid, .challenges, .story-insight, .algo-intro, .hero-stats, .pipeline-steps, .pipeline-steps-row2 { grid-template-columns: 1fr; }
|
| 367 |
+
.thumb-showcase { grid-template-columns: repeat(2, 1fr); }
|
| 368 |
+
.rl-cols { grid-template-columns: 1fr; }
|
| 369 |
+
}
|
| 370 |
+
</style>
|
| 371 |
+
</head>
|
| 372 |
+
<body>
|
| 373 |
+
|
| 374 |
+
<div class="progress-bar" id="progressBar"></div>
|
| 375 |
+
|
| 376 |
+
<!-- NAV -->
|
| 377 |
+
<nav>
|
| 378 |
+
<div class="nav-logo">NETFLIX</div>
|
| 379 |
+
<div class="nav-links">
|
| 380 |
+
<button onclick="goTo(0)">Intro</button>
|
| 381 |
+
<button onclick="goTo(1)">Story</button>
|
| 382 |
+
<button onclick="goTo(2)">Why Netflix</button>
|
| 383 |
+
<button onclick="goTo(3)">Signals</button>
|
| 384 |
+
<button onclick="goTo(4)">Algorithms e1</button>
|
| 385 |
+
<button onclick="goTo(5)">Algorithms e2</button>
|
| 386 |
+
<button onclick="goTo(6)">How it works</button>
|
| 387 |
+
<button onclick="goTo(7)">User Profiles</button>
|
| 388 |
+
<button onclick="goTo(8)">Artwork</button>
|
| 389 |
+
<button onclick="goTo(9)">Demo</button>
|
| 390 |
+
<button onclick="goTo(10)">Takeaways</button>
|
| 391 |
+
<button onclick="goTo(11)">End</button>
|
| 392 |
+
</div>
|
| 393 |
+
<div class="slide-counter" id="slideCounter">01 / 12</div>
|
| 394 |
+
</nav>
|
| 395 |
+
|
| 396 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 1: INTRO โโโโโโโโโโโโโโ -->
|
| 397 |
+
<section class="slide active" id="s1">
|
| 398 |
+
<div class="bg-glow"></div><div class="bg-glow"></div>
|
| 399 |
+
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 400 |
+
<div class="hero-grid">
|
| 401 |
+
<div>
|
| 402 |
+
<div class="slide-tag">Decode the Tech ยท Season 2026</div>
|
| 403 |
+
<h1 class="hero">HOW<br><span>NETFLIX</span><br>KNOWS YOU</h1>
|
| 404 |
+
<div class="divider"></div>
|
| 405 |
+
<p class="subtitle">Your homepage is different from everyone else's. That is not a coincidence. It is the result of two decades of invisible intelligence โ tracking signals you never noticed you were sending.</p>
|
| 406 |
+
<div class="hero-badges" style="margin-top:1.6rem;">
|
| 407 |
+
<span class="badge badge-red">Machine Learning</span>
|
| 408 |
+
<span class="badge badge-white">Behavioral Signals</span>
|
| 409 |
+
<span class="badge badge-white">Deep Learning</span>
|
| 410 |
+
<span class="badge badge-red">Real-Time AI</span>
|
| 411 |
+
<span class="badge badge-white">Personalization at Scale</span>
|
| 412 |
+
</div>
|
| 413 |
+
<div class="intro-reveal" style="margin-top:1.5rem;">
|
| 414 |
+
<p>Right now, <strong>250 million people</strong> are each looking at a completely unique version of Netflix. The algorithm decides what you see first โ and most of us have no idea it's happening.</p>
|
| 415 |
+
</div>
|
| 416 |
+
</div>
|
| 417 |
+
<div class="hero-stats">
|
| 418 |
+
<div class="hero-stat"><div class="num">250M+</div><div class="lbl">Global Subscribers</div></div>
|
| 419 |
+
<div class="hero-stat"><div class="num">~80%</div><div class="lbl">Content Found via Recommendations</div></div>
|
| 420 |
+
<div class="hero-stat"><div class="num">$30B+</div><div class="lbl">Annual Revenue (2024)</div></div>
|
| 421 |
+
<div class="hero-stat"><div class="num">190+</div><div class="lbl">Countries ยท 60+ Languages</div></div>
|
| 422 |
+
</div>
|
| 423 |
+
</div>
|
| 424 |
+
</div>
|
| 425 |
+
</section>
|
| 426 |
+
|
| 427 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 2: STORY โโโโโโโโโโโโโโ -->
|
| 428 |
+
<section class="slide" id="s2">
|
| 429 |
+
<div class="bg-glow"></div>
|
| 430 |
+
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 431 |
+
<div class="slide-tag">The Origin Story</div>
|
| 432 |
+
<h2 class="sec">FROM DVD RENTAL<br><span>TO AI COMPANY</span></h2>
|
| 433 |
+
<p class="subtitle">Netflix didn't start as an AI company. It became one โ because the alternative was death by content overload.</p>
|
| 434 |
+
<div class="timeline">
|
| 435 |
+
<div class="tl-item"><div class="tl-dot"></div><div class="tl-year">1997</div><div class="tl-title">DVD-by-Mail Startup</div><div class="tl-body">Hastings & Randolph launch Netflix as a rental service. No late fees. No Blockbuster. Early catalog browsing sparks a simple question: how do we help users find the right movie?</div></div>
|
| 436 |
+
<div class="tl-item"><div class="tl-dot"></div><div class="tl-year">2007</div><div class="tl-title">Streaming Changes Everything</div><div class="tl-body">1,000 titles go online. Within a year the catalog explodes. Now the real problem arrives: too much content, not enough discovery. The recommendation engine stops being a feature โ it becomes the product.</div></div>
|
| 437 |
+
<div class="tl-item"><div class="tl-dot"></div><div class="tl-year">2009</div><div class="tl-title">The $1M Netflix Prize</div><div class="tl-body">Netflix offers $1 million to any team that improves prediction accuracy by 10%. The contest accelerates global ML research by years and signals to the world that Netflix is an AI-first company.</div></div>
|
| 438 |
+
<div class="tl-item"><div class="tl-dot"></div><div class="tl-year">2013+</div><div class="tl-title">Data Greenlit Content</div><div class="tl-body">House of Cards gets the green light based entirely on algorithm data โ viewer taste clusters, director popularity, genre affinity. Stranger Things, Squid Game, The Crown follow the same model.</div></div>
|
| 439 |
+
</div>
|
| 440 |
+
<div class="story-insight">
|
| 441 |
+
<div class="si-card"><div class="si-icon">๐</div><div><div class="si-title">Global Personalization</div><div class="si-body">Localized recommendations per region. A user in Mumbai, Lagos, and Sรฃo Paulo each see a differently weighted catalog โ same platform, different personalized reality.</div></div></div>
|
| 442 |
+
<div class="si-card"><div class="si-icon">โ๏ธ</div><div><div class="si-title">The Competitive Moat</div><div class="si-body">Amazon Prime has more data. Disney+ has stronger franchises. Hotstar dominates live sports. Yet Netflix leads in personalization โ because 20 years of taste modeling cannot be purchased overnight.</div></div></div>
|
| 443 |
+
<div class="si-card"><div class="si-icon">๐ง </div><div><div class="si-title">Recommendation = Retention</div><div class="si-body">Netflix's internal research links recommendation quality directly to subscriber retention. A user who can't find something to watch within 60โ90 seconds is far more likely to churn.</div></div></div>
|
| 444 |
+
</div>
|
| 445 |
+
<div class="story-thesis">
|
| 446 |
+
<p><strong>The core insight:</strong> Netflix's recommendation engine didn't help the business โ it became the business. Every engineering, content, and product decision now revolves around one question: how do we surface the right title to the right person at exactly the right moment?</p>
|
| 447 |
+
</div>
|
| 448 |
+
</div>
|
| 449 |
+
</section>
|
| 450 |
+
|
| 451 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 3: WHY NETFLIX โโโโโโโโโโโโโโ -->
|
| 452 |
+
<section class="slide" id="s3">
|
| 453 |
+
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 454 |
+
<div class="slide-tag">Competitive Advantage ยท Honest Assessment</div>
|
| 455 |
+
<h2 class="sec">WHY NETFLIX<br><span>STILL LEADS</span></h2>
|
| 456 |
+
<p class="subtitle">Real structural advantages โ and real limitations too. A system this complex doesn't get everything right.</p>
|
| 457 |
+
<div class="why-grid">
|
| 458 |
+
<div class="why-card"><div class="why-icon">๐</div><div class="why-title">The Data Flywheel</div><div class="why-desc">More users generate more behavioral signals. Better signals train better models. Better models produce better recommendations. More recommendations retain more users. The loop has been compounding for 20+ years.</div><span class="why-metric">Structural moat</span></div>
|
| 459 |
+
<div class="why-card"><div class="why-icon">๐ฌ</div><div class="why-title">Scientific A/B Culture</div><div class="why-desc">Netflix runs thousands of A/B tests per year. Every feature โ row order, thumbnail, algorithm variant โ is tested before it ships. This institutional rigor is genuinely rare in entertainment companies.</div><span class="why-metric">Data-driven decisions</span></div>
|
| 460 |
+
<div class="why-card"><div class="why-icon">โก</div><div class="why-title">Real-Time Personalization</div><div class="why-desc">Your homepage refreshes periodically based on live behavioral signals. Competitors tend toward more static recommendation cycles. Netflix's real-time engine is a substantial multi-year infrastructure effort.</div><span class="why-metric">Continuous refresh</span></div>
|
| 461 |
+
<div class="why-card"><div class="why-icon">๐ค</div><div class="why-title">Foundation Model (2025)</div><div class="why-desc">Netflix's FM-Intent model predicts user intent and the next recommended item simultaneously in a single unified architecture โ replacing what previously required multiple separate systems.</div><span class="why-metric">State-of-the-art 2025</span></div>
|
| 462 |
+
<div class="why-card"><div class="why-icon">๐งช</div><div class="why-title">ML as Core Infrastructure</div><div class="why-desc">Recommendation ML sits at the center of Netflix's engineering stack โ not as a product layer on top. This architectural decision shapes how fast the company can iterate and improve.</div><span class="why-metric">Deeply embedded</span></div>
|
| 463 |
+
<div class="why-card"><div class="why-icon">๐</div><div class="why-title">Measurable ROI Loop</div><div class="why-desc">Because every algorithmic change is A/B tested against engagement and retention metrics, Netflix can quantify the business impact of each improvement โ which justifies continued ML investment.</div><span class="why-metric">Self-funding R&D cycle</span></div>
|
| 464 |
+
</div>
|
| 465 |
+
<div class="challenge-section">
|
| 466 |
+
<div class="challenge-label">โ Known Limitations โ The Algorithm Isn't Perfect</div>
|
| 467 |
+
<div class="challenges">
|
| 468 |
+
<div class="ch-card"><div class="ch-icon">๐</div><div><div class="ch-title">Repetitive Suggestions</div><div class="ch-body">Watch several thrillers in a row and your homepage can get locked into one genre, making the catalog feel much smaller than it is.</div></div></div>
|
| 469 |
+
<div class="ch-card"><div class="ch-icon">๐ง</div><div><div class="ch-title">Stale Recommendations</div><div class="ch-body">Profiles that haven't been used in weeks may receive outdated suggestions until enough fresh signals arrive to recalibrate.</div></div></div>
|
| 470 |
+
<div class="ch-card"><div class="ch-icon">๐ซง</div><div><div class="ch-title">Filter Bubbles</div><div class="ch-body">Heavy personalization can narrow your perceived catalog โ you may never discover content outside your established taste signature unless diversity injection kicks in.</div></div></div>
|
| 471 |
+
</div>
|
| 472 |
+
</div>
|
| 473 |
+
</div>
|
| 474 |
+
</section>
|
| 475 |
+
|
| 476 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 4: SIGNALS โโโโโโโโโโโโโโ -->
|
| 477 |
+
<section class="slide" id="s4">
|
| 478 |
+
<div class="bg-glow"></div>
|
| 479 |
+
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 480 |
+
<div class="slide-tag">Decode the Tech ยท Behavioral Layer</div>
|
| 481 |
+
<h2 class="sec">NETFLIX<br><span>READS YOU</span></h2>
|
| 482 |
+
<p class="subtitle">You think you're watching Netflix. Netflix is also watching you โ every interaction becomes a data point that refines what appears next.</p>
|
| 483 |
+
<div class="signals-layout">
|
| 484 |
+
<div class="signal-grid">
|
| 485 |
+
<div class="signal-card"><div class="signal-icon">โธ๏ธ</div><div class="signal-name">Pause Behavior</div><div class="signal-desc">When you pause matters. Mid-scene? Probably a bathroom break. At a plot twist? High engagement signal.</div><div class="signal-weight"><div class="sw-bar"><div class="sw-fill" style="width:88%"></div></div><div class="sw-label">High weight</div></div></div>
|
| 486 |
+
<div class="signal-card"><div class="signal-icon">โญ๏ธ</div><div class="signal-name">Skip & Fast-Forward</div><div class="signal-desc">Skipping the intro is normal. Skipping dialog mid-episode signals low engagement โ or a genre mismatch.</div><div class="signal-weight"><div class="sw-bar"><div class="sw-fill" style="width:82%"></div></div><div class="sw-label">High weight</div></div></div>
|
| 487 |
+
<div class="signal-card"><div class="signal-icon">๐</div><div class="signal-name">Rewind</div><div class="signal-desc">Rewinding a scene signals genuine interest or confusion โ both are valuable engagement signals the algorithm tracks.</div><div class="signal-weight"><div class="sw-bar"><div class="sw-fill" style="width:74%"></div></div><div class="sw-label">Medium-high</div></div></div>
|
| 488 |
+
<div class="signal-card"><div class="signal-icon">๐ฑ๏ธ</div><div class="signal-name">Hover Time</div><div class="signal-desc">How long you hover over a thumbnail before clicking โ or not clicking. Curiosity without commitment tells its own story.</div><div class="signal-weight"><div class="sw-bar"><div class="sw-fill" style="width:65%"></div></div><div class="sw-label">Medium</div></div></div>
|
| 489 |
+
<div class="signal-card"><div class="signal-icon">๐บ</div><div class="signal-name">Completion Rate</div><div class="signal-desc">Finishing a show vs. abandoning it 40% in. The drop-off point is often more informative than a five-star rating ever was.</div><div class="signal-weight"><div class="sw-bar"><div class="sw-fill" style="width:92%"></div></div><div class="sw-label">Very high</div></div></div>
|
| 490 |
+
<div class="signal-card"><div class="signal-icon">๐</div><div class="signal-name">Watch Time & Device</div><div class="signal-desc">A 45-minute episode watched at 11 PM on a phone signals a very different mood from the same show on a TV at 8 PM.</div><div class="signal-weight"><div class="sw-bar"><div class="sw-fill" style="width:70%"></div></div><div class="sw-label">Medium-high</div></div></div>
|
| 491 |
+
<div class="signal-card"><div class="signal-icon">๐ฌ</div><div class="signal-name">Binge Patterns</div><div class="signal-desc">Watching 4 episodes back-to-back immediately boosts that genre's weight. Watching one episode per week suggests casual engagement.</div><div class="signal-weight"><div class="sw-bar"><div class="sw-fill" style="width:85%"></div></div><div class="sw-label">High weight</div></div></div>
|
| 492 |
+
<div class="signal-card"><div class="signal-icon">๐</div><div class="signal-name">Scroll Behavior</div><div class="signal-desc">How far you scroll without clicking. A long scroll without a pick signals the homepage isn't resonating โ a direct feedback signal to the ranking system.</div><div class="signal-weight"><div class="sw-bar"><div class="sw-fill" style="width:60%"></div></div><div class="sw-label">Medium</div></div></div>
|
| 493 |
+
</div>
|
| 494 |
+
<div class="signal-story">
|
| 495 |
+
<div class="ss-title">WHAT NETFLIX <span>INFERS</span><br>FROM YOUR BEHAVIOR</div>
|
| 496 |
+
<div class="signal-scenario">
|
| 497 |
+
<div class="sc-action">You rewound that one scene three times</div>
|
| 498 |
+
<div class="sc-inference">Netflix infers: this type of scene โ this actor, this tension style, this narrative beat โ generates unusually high engagement for you. It promotes similar content in your next session.</div>
|
| 499 |
+
<div class="sc-tag">SIGNAL โ INFERENCE โ RANK ADJUSTMENT</div>
|
| 500 |
+
</div>
|
| 501 |
+
<div class="signal-scenario">
|
| 502 |
+
<div class="sc-action">You abandoned a show after episode 2</div>
|
| 503 |
+
<div class="sc-inference">Netflix infers: slow-burn format may not suit your viewing style. Future ranking models de-weight slow-paced shows in your recommendations โ even ones you've never seen.</div>
|
| 504 |
+
<div class="sc-tag">IMPLICIT NEGATIVE SIGNAL โ PROFILE UPDATE</div>
|
| 505 |
+
</div>
|
| 506 |
+
<div class="signal-scenario">
|
| 507 |
+
<div class="sc-action">You scroll past 40 thumbnails without clicking</div>
|
| 508 |
+
<div class="sc-inference">Netflix infers: the current recommendation set missed the mark. A homepage refresh or diversity injection is triggered. The absence of a click is data too.</div>
|
| 509 |
+
<div class="sc-tag">INACTION IS ALSO A SIGNAL</div>
|
| 510 |
+
</div>
|
| 511 |
+
</div>
|
| 512 |
+
<div class="signals-footer">
|
| 513 |
+
<strong>The key insight:</strong> Netflix doesn't just collect the signals you consciously give (ratings, searches). It reads the signals you never thought to give โ your hesitations, your habits, your timing. The system is designed to know you better than you know your own taste.
|
| 514 |
+
</div>
|
| 515 |
+
</div>
|
| 516 |
+
</div>
|
| 517 |
+
</section>
|
| 518 |
+
|
| 519 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 5: ALGORITHMS E1 โโโโโโโโโโโโโโ -->
|
| 520 |
+
<section class="slide" id="s5">
|
| 521 |
+
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 522 |
+
<div class="slide-tag">Algorithms ยท Part One</div>
|
| 523 |
+
<h2 class="sec">HOW NETFLIX<br><span>FINDS SIMILAR TASTE</span></h2>
|
| 524 |
+
<p class="subtitle">Before going deep, let's build the intuition. Three foundational ideas that explain most of what Netflix's recommender does โ no math required.</p>
|
| 525 |
+
<div class="algo-intro">
|
| 526 |
+
<div class="algo-main-card">
|
| 527 |
+
<div class="algo-num-big">01</div>
|
| 528 |
+
<div class="algo-name">Collaborative Filtering</div>
|
| 529 |
+
<div class="algo-analogy">"People like you also loved this."</div>
|
| 530 |
+
<div class="algo-desc">Find users who watched the same things you did and rated them similarly. Whatever they loved next โ but you haven't seen yet โ gets surfaced to you. Pure community wisdom at scale.</div>
|
| 531 |
+
<div class="algo-visual">
|
| 532 |
+
<span class="hl">You</span> watched: Breaking Bad, Ozark, Mindhunter<br>
|
| 533 |
+
<span class="hl">Similar users</span> also watched: The Wire, Narcos<br>
|
| 534 |
+
โ <span class="hl">Recommendation</span>: The Wire (score: 0.91)
|
| 535 |
+
</div>
|
| 536 |
+
</div>
|
| 537 |
+
<div class="algo-main-card">
|
| 538 |
+
<div class="algo-num-big">02</div>
|
| 539 |
+
<div class="algo-name">Content-Based Filtering</div>
|
| 540 |
+
<div class="algo-analogy">"More of what you already love."</div>
|
| 541 |
+
<div class="algo-desc">Analyze the attributes of shows you've enjoyed โ genre, director, cast, themes, pacing, tone, era โ and find other content that shares those attributes. Works even for brand-new users with no community data yet.</div>
|
| 542 |
+
<div class="algo-visual">
|
| 543 |
+
You loved: <span class="hl">Dark</span> (sci-fi, German, complex, non-linear)<br>
|
| 544 |
+
Similar attributes: <span class="hl">1899</span>, <span class="hl">Travelers</span>, <span class="hl">Dark Matter</span><br>
|
| 545 |
+
โ <span class="hl">Recommendation</span>: 1899 (metadata match: 0.87)
|
| 546 |
+
</div>
|
| 547 |
+
</div>
|
| 548 |
+
<div class="algo-main-card">
|
| 549 |
+
<div class="algo-num-big">03</div>
|
| 550 |
+
<div class="algo-name">Reinforcement Learning Diversity</div>
|
| 551 |
+
<div class="algo-analogy">"Explore, don't just repeat."</div>
|
| 552 |
+
<div class="algo-desc">Pure collaborative or content-based filtering creates echo chambers. RL constantly injects a controlled percentage of diverse content โ genres outside your signature โ to prevent boredom and expand your taste profile over time.</div>
|
| 553 |
+
<div class="algo-visual">
|
| 554 |
+
Your profile: <span class="hl">85% Crime/Thriller</span><br>
|
| 555 |
+
RL injects: <span class="hl">~15% diverse genres</span> (comedy, documentaryโฆ)<br>
|
| 556 |
+
โ Prevents <span class="hl">genre lock</span> ยท Discovers new tastes
|
| 557 |
+
</div>
|
| 558 |
+
</div>
|
| 559 |
+
</div>
|
| 560 |
+
<div class="algo-mf-card">
|
| 561 |
+
<div class="algo-mf-matrix">
|
| 562 |
+
<span class="h">Matrix Factorization</span><br>
|
| 563 |
+
<span class="u">User โ Show โ</span> <span class="h">BB</span> <span class="h">Ozark</span> <span class="h">Friends</span> <span class="h">Dark</span><br>
|
| 564 |
+
<span class="u">Arjun</span> <span class="v"> 5</span> <span class="v"> 5</span> <span class="u"> ?</span> <span class="v"> 4</span><br>
|
| 565 |
+
<span class="u">Priya</span> <span class="u"> ?</span> <span class="u"> ?</span> <span class="v"> 5</span> <span class="u"> ?</span><br>
|
| 566 |
+
<span class="u">Rahul</span> <span class="v"> 4</span> <span class="u"> ?</span> <span class="u"> ?</span> <span class="v"> 5</span>
|
| 567 |
+
</div>
|
| 568 |
+
<div>
|
| 569 |
+
<div class="algo-name" style="font-size:1rem;margin-bottom:.5rem;">Matrix Factorization โ Filling the Gaps</div>
|
| 570 |
+
<div class="algo-desc" style="font-size:.82rem;color:var(--muted);line-height:1.65;">Netflix has 250M users and hundreds of thousands of titles โ but each user has only seen a tiny fraction of the catalog. The rating matrix is almost entirely blank. Matrix factorization decomposes this sparse matrix into hidden "taste dimensions" (dark vs. light tone, complex vs. simple plot, fast vs. slow pacing) and uses those to predict how much you'd enjoy something you've never watched.</div>
|
| 571 |
+
<div style="margin-top:.8rem;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--red);">USER_VECTOR ยท ITEM_VECTOR = PREDICTED RATING</div>
|
| 572 |
+
</div>
|
| 573 |
+
<div>
|
| 574 |
+
<div class="algo-name" style="font-size:1rem;margin-bottom:.5rem;">Why It Matters</div>
|
| 575 |
+
<div class="algo-desc" style="font-size:.82rem;color:var(--muted);line-height:1.65;">This is how Netflix can confidently recommend a show you've never heard of โ it doesn't need you to have watched it. It just needs to know your hidden taste dimensions and the show's hidden attribute dimensions. When those vectors align, the predicted rating is high, and the recommendation appears on your homepage.</div>
|
| 576 |
+
</div>
|
| 577 |
+
</div>
|
| 578 |
+
</div>
|
| 579 |
+
</section>
|
| 580 |
+
|
| 581 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 6: ALGORITHMS E2 โโโโโโโโโโโโโโ -->
|
| 582 |
+
<section class="slide" id="s6">
|
| 583 |
+
<div class="bg-glow"></div>
|
| 584 |
+
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 585 |
+
<div class="slide-tag">Algorithms ยท Part Two</div>
|
| 586 |
+
<h2 class="sec">HOW NETFLIX<br><span>THINKS AT SCALE</span></h2>
|
| 587 |
+
<p class="subtitle">From millions of titles to the ten you actually see โ the two-stage pipeline that makes real-time personalization possible at 250M-user scale.</p>
|
| 588 |
+
<div class="pipeline-flow">
|
| 589 |
+
<div class="pf-card featured">
|
| 590 |
+
<div class="pf-label">Stage 01 ยท Retrieval</div>
|
| 591 |
+
<div class="pf-title">Candidate Generation</div>
|
| 592 |
+
<div class="pf-desc">Netflix's catalog contains hundreds of thousands of titles โ far too many to score individually in real time. The first stage uses fast, approximate algorithms to narrow the field from hundreds of thousands down to a few hundred candidates that might be relevant to you.</div>
|
| 593 |
+
<div class="pf-scale">
|
| 594 |
+
<div class="scale-text"><strong>Hundreds of thousands of titles</strong> โ fast retrieval โ <strong>~500 candidates</strong></div>
|
| 595 |
+
</div>
|
| 596 |
+
<div class="pf-desc" style="margin-top:.7rem;font-size:.75rem;">This stage prioritizes recall โ better to include something borderline than to miss a great fit. Speed matters most here. Models used: approximate nearest neighbor search, lightweight collaborative filtering, embedding lookup.</div>
|
| 597 |
+
</div>
|
| 598 |
+
<div class="pf-card featured">
|
| 599 |
+
<div class="pf-label">Stage 02 ยท Ranking</div>
|
| 600 |
+
<div class="pf-title">Deep Learning Ranker</div>
|
| 601 |
+
<div class="pf-desc">With only ~500 candidates, Netflix can afford to run expensive deep learning models to produce precise, personalized scores for each title. Neural Collaborative Filtering, Transformer-based sequence models, and Graph Neural Networks all contribute to the final ranking.</div>
|
| 602 |
+
<div class="pf-scale">
|
| 603 |
+
<div class="scale-text"><strong>~500 candidates</strong> โ deep scoring โ <strong>~40โ60 shown</strong></div>
|
| 604 |
+
</div>
|
| 605 |
+
<div class="pf-desc" style="margin-top:.7rem;font-size:.75rem;">The ranker also factors in row context โ what row it appears in matters. "Because you watched X" rows have different ranking logic than "Top Picks" or "Trending Now" rows.</div>
|
| 606 |
+
</div>
|
| 607 |
+
<div class="rl-explainer">
|
| 608 |
+
<div class="pf-label">Reinforcement Learning ยท The Long-Game Optimizer</div>
|
| 609 |
+
<div class="pf-title" style="font-size:.97rem;color:white;font-weight:700;margin-bottom:.5rem;">Exploration vs. Exploitation</div>
|
| 610 |
+
<div class="pf-desc" style="font-size:.82rem;color:var(--muted);">Standard recommendation models optimize for the next click. RL optimizes for long-term satisfaction โ a fundamentally different objective.</div>
|
| 611 |
+
<div class="rl-cols">
|
| 612 |
+
<div class="rl-col">
|
| 613 |
+
<div class="rl-col-title exploit">โก Exploitation โ Play it safe</div>
|
| 614 |
+
<div class="rl-desc">Show the user what the model is most confident they'll enjoy right now โ proven genres, familiar formats, high-rated similar titles. Maximizes short-term engagement but risks creating a flavor rut over time.</div>
|
| 615 |
+
</div>
|
| 616 |
+
<div class="rl-col">
|
| 617 |
+
<div class="rl-col-title explore">๐ฑ Exploration โ Take a small bet</div>
|
| 618 |
+
<div class="rl-desc">Intentionally inject content outside the user's established profile โ a new genre, an unfamiliar format, an under-watched gem. Most bets don't land. But the ones that do expand the user's taste model and increase long-term retention.</div>
|
| 619 |
+
</div>
|
| 620 |
+
</div>
|
| 621 |
+
</div>
|
| 622 |
+
<div class="fm-card">
|
| 623 |
+
<div class="fm-badge">
|
| 624 |
+
<div class="fm-badge-label">Published</div>
|
| 625 |
+
<div class="fm-badge-year">2025</div>
|
| 626 |
+
</div>
|
| 627 |
+
<div>
|
| 628 |
+
<div class="fm-title">FM-Intent: The Foundation Model for Personalized Recommendation</div>
|
| 629 |
+
<div class="fm-desc">Netflix's latest published research introduces a unified foundation model that handles both intent prediction ("what kind of content is this user looking for?") and item recommendation simultaneously โ replacing what previously required multiple separate specialized models. By training on a massive unified representation of user behavior, the model generalizes better across sessions, devices, and contexts.</div>
|
| 630 |
+
<div class="fm-tag">netflixtechblog.com ยท foundation-model-for-personalized-recommendation ยท July 2025</div>
|
| 631 |
+
</div>
|
| 632 |
+
</div>
|
| 633 |
+
</div>
|
| 634 |
+
</div>
|
| 635 |
+
</section>
|
| 636 |
+
|
| 637 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 7: HOW IT WORKS โโโโโโโโโโโโโโ -->
|
| 638 |
+
<section class="slide" id="s7">
|
| 639 |
+
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 640 |
+
<div class="slide-tag">Systems Design ยท The Full Pipeline</div>
|
| 641 |
+
<h2 class="sec">WHAT HAPPENS BEFORE<br><span>YOUR HOMEPAGE APPEARS</span></h2>
|
| 642 |
+
<p class="subtitle">Eight orchestrated stages โ from the moment you tap the app to the personalized homepage rendered in under 200ms.</p>
|
| 643 |
+
<div class="pipeline-steps">
|
| 644 |
+
<div class="ps-card"><div class="ps-step-num">STEP 01</div><div class="ps-icon">๐ฒ</div><div class="ps-title">App Opens</div><div class="ps-desc">Session begins. Device type, time of day, location context, and current network quality are captured instantly. These context signals immediately affect what gets retrieved.</div><div class="ps-arrow">โ</div></div>
|
| 645 |
+
<div class="ps-card"><div class="ps-step-num">STEP 02</div><div class="ps-icon">๐ก</div><div class="ps-title">Signals Loaded</div><div class="ps-desc">Your full behavioral profile โ watch history, pauses, skips, completions, hover patterns โ is retrieved from distributed cache in under 20ms. No cold reads from the database on every request.</div><div class="ps-arrow">โ</div></div>
|
| 646 |
+
<div class="ps-card"><div class="ps-step-num">STEP 03</div><div class="ps-icon">๐</div><div class="ps-title">Candidate Generation</div><div class="ps-desc">Fast retrieval models scan the full catalog and narrow hundreds of thousands of titles to ~500 candidates using approximate nearest-neighbor search and lightweight collaborative filtering.</div><div class="ps-arrow">โ</div></div>
|
| 647 |
+
<div class="ps-card"><div class="ps-step-num">STEP 04</div><div class="ps-icon">๐ง </div><div class="ps-title">Ranking Models</div><div class="ps-desc">Deep learning models (NCF, Transformers, GNNs) score each of the ~500 candidates against your precise behavioral profile. Multiple model outputs are combined into a single composite score per title.</div><div class="ps-arrow">โ</div></div>
|
| 648 |
+
</div>
|
| 649 |
+
<div class="pipeline-steps-row2">
|
| 650 |
+
<div class="ps-card"><div class="ps-step-num">STEP 05</div><div class="ps-icon">๐</div><div class="ps-title">Diversity Injection</div><div class="ps-desc">The RL system reviews the ranked list and injects a controlled portion of genre-diverse content to prevent filter bubbles and long-term taste narrowing. Exploration over pure exploitation.</div><div class="ps-arrow">โ</div></div>
|
| 651 |
+
<div class="ps-card"><div class="ps-step-num">STEP 06</div><div class="ps-icon">๐ผ๏ธ</div><div class="ps-title">Thumbnail Selection</div><div class="ps-desc">For each title selected, a separate personalization model picks the thumbnail most likely to generate a click from you specifically โ based on your actor preferences, emotional cues, and visual history.</div><div class="ps-arrow">โ</div></div>
|
| 652 |
+
<div class="ps-card"><div class="ps-step-num">STEP 07</div><div class="ps-icon">๐งช</div><div class="ps-title">A/B Testing Layer</div><div class="ps-desc">A portion of users are silently assigned to experimental variants โ different ranking weights, row layouts, or algorithm configurations. The homepage you see may itself be a live experiment.</div><div class="ps-arrow">โ</div></div>
|
| 653 |
+
<div class="ps-card"><div class="ps-step-num">STEP 08</div><div class="ps-icon">๐ฅ๏ธ</div><div class="ps-title">Homepage Rendered</div><div class="ps-desc">A ranked, diversity-injected, thumbnail-personalized homepage unique to you is assembled and rendered โ typically within 200ms of opening the app. No two users see the same result.</div></div>
|
| 654 |
+
</div>
|
| 655 |
+
<div class="pipeline-footer">
|
| 656 |
+
<div class="pf-stat"><div class="pf-stat-num"><200ms</div><div class="pf-stat-label">End-to-end pipeline latency target</div></div>
|
| 657 |
+
<div class="pf-stat"><div class="pf-stat-num">250M+</div><div class="pf-stat-label">Unique homepages generated per session</div></div>
|
| 658 |
+
<div class="pf-stat"><div class="pf-stat-num">8 stages</div><div class="pf-stat-label">From app open to personalized render</div></div>
|
| 659 |
+
</div>
|
| 660 |
+
</div>
|
| 661 |
+
</section>
|
| 662 |
+
|
| 663 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 8: USER PROFILES โโโโโโโโโโโโโโ -->
|
| 664 |
+
<section class="slide" id="s8">
|
| 665 |
+
<div class="content" style="width:100%;max-width:1300px;margin:0 auto;">
|
| 666 |
+
<div class="slide-tag">Personalization in Action</div>
|
| 667 |
+
<h2 class="sec">THREE USERS.<br><span>THREE DIFFERENT NETFLIXES.</span></h2>
|
| 668 |
+
<p class="subtitle">Same platform, same catalog, same moment in time โ but the algorithm constructs an entirely different personalized reality for each person.</p>
|
| 669 |
+
<div class="profiles-grid">
|
| 670 |
+
|
| 671 |
+
<!-- USER A -->
|
| 672 |
+
<div class="profile-card user-a">
|
| 673 |
+
<div class="profile-avatar avatar-a">๐ต๏ธ</div>
|
| 674 |
+
<div class="profile-name">ARJUN</div>
|
| 675 |
+
<div class="profile-type type-a">Crime Drama Enthusiast ยท Late Night Binger</div>
|
| 676 |
+
<div class="profile-stats">
|
| 677 |
+
<div class="ps-item"><div class="ps-label">Peak Time</div><div class="ps-value">10โ12 PM</div></div>
|
| 678 |
+
<div class="ps-item"><div class="ps-label">Binge Speed</div><div class="ps-value">3 eps/day</div></div>
|
| 679 |
+
<div class="ps-item"><div class="ps-label">Device</div><div class="ps-value">Smart TV</div></div>
|
| 680 |
+
<div class="ps-item"><div class="ps-label">Completion</div><div class="ps-value">91%</div></div>
|
| 681 |
+
</div>
|
| 682 |
+
<div class="profile-watched">
|
| 683 |
+
<div class="pw-label">Recently Completed</div>
|
| 684 |
+
<span class="show-pill">Breaking Bad <span class="stars">โ
โ
โ
โ
โ
</span></span>
|
| 685 |
+
<span class="show-pill">Mindhunter <span class="stars">โ
โ
โ
โ
โ
</span></span>
|
| 686 |
+
<span class="show-pill">True Detective <span class="stars">โ
โ
โ
โ
โ
</span></span>
|
| 687 |
+
</div>
|
| 688 |
+
<div class="why-rec">
|
| 689 |
+
<div class="why-rec-label">Why his homepage looks like this</div>
|
| 690 |
+
<div class="why-rec-items">
|
| 691 |
+
<div class="wri"><span class="wri-dot">โธ</span>100% completion rate signals very high genre affinity</div>
|
| 692 |
+
<div class="wri"><span class="wri-dot">โธ</span>Collaborative filter: users like him rated Ozark 4.8โ
</div>
|
| 693 |
+
<div class="wri"><span class="wri-dot">โธ</span>Late-night TV session โ longer format content ranked higher</div>
|
| 694 |
+
</div>
|
| 695 |
+
</div>
|
| 696 |
+
<div class="netflix-ui-mock">
|
| 697 |
+
<div class="nf-ui-header"><span class="nf-ui-logo">NETFLIX</span><span class="nf-ui-user">๐ค Arjun</span></div>
|
| 698 |
+
<div class="nf-row"><div class="nf-row-label">Top Picks for Arjun</div>
|
| 699 |
+
<div class="nf-thumbnails">
|
| 700 |
+
<div class="nf-thumb t1"><span>OZARK</span></div>
|
| 701 |
+
<div class="nf-thumb t2"><span>THE WIRE</span></div>
|
| 702 |
+
<div class="nf-thumb t3"><span>NARCOS</span></div>
|
| 703 |
+
<div class="nf-thumb t4"><span>OZARK S4</span></div>
|
| 704 |
+
<div class="nf-thumb t5"><span>HANNIBAL</span></div>
|
| 705 |
+
</div></div>
|
| 706 |
+
<div class="nf-row"><div class="nf-row-label">Because you watched Mindhunter</div>
|
| 707 |
+
<div class="nf-thumbnails">
|
| 708 |
+
<div class="nf-thumb t2"><span>THE FALL</span></div>
|
| 709 |
+
<div class="nf-thumb t1"><span>YOU</span></div>
|
| 710 |
+
<div class="nf-thumb t3"><span>ZODIAC</span></div>
|
| 711 |
+
<div class="nf-thumb t5"><span>SEVEN</span></div>
|
| 712 |
+
<div class="nf-thumb t4"><span>MARCELLA</span></div>
|
| 713 |
+
</div></div>
|
| 714 |
+
</div>
|
| 715 |
+
</div>
|
| 716 |
+
|
| 717 |
+
<!-- USER B -->
|
| 718 |
+
<div class="profile-card user-b">
|
| 719 |
+
<div class="profile-avatar avatar-b">๐</div>
|
| 720 |
+
<div class="profile-name">PRIYA</div>
|
| 721 |
+
<div class="profile-type type-b">Comedy Fan ยท Casual Evening Viewer</div>
|
| 722 |
+
<div class="profile-stats">
|
| 723 |
+
<div class="ps-item"><div class="ps-label">Peak Time</div><div class="ps-value">9โ10 PM</div></div>
|
| 724 |
+
<div class="ps-item"><div class="ps-label">Style</div><div class="ps-value">1 ep/night</div></div>
|
| 725 |
+
<div class="ps-item"><div class="ps-label">Device</div><div class="ps-value">Laptop</div></div>
|
| 726 |
+
<div class="ps-item"><div class="ps-label">Completion</div><div class="ps-value">78%</div></div>
|
| 727 |
+
</div>
|
| 728 |
+
<div class="profile-watched">
|
| 729 |
+
<div class="pw-label">Recently Completed</div>
|
| 730 |
+
<span class="show-pill">The Office <span class="stars">โ
โ
โ
โ
โ
</span></span>
|
| 731 |
+
<span class="show-pill">Parks & Rec <span class="stars">โ
โ
โ
โ
โ
</span></span>
|
| 732 |
+
<span class="show-pill">Brooklyn 99 <span class="stars">โ
โ
โ
โ
</span></span>
|
| 733 |
+
</div>
|
| 734 |
+
<div class="why-rec">
|
| 735 |
+
<div class="why-rec-label">Why her homepage looks like this</div>
|
| 736 |
+
<div class="why-rec-items">
|
| 737 |
+
<div class="wri"><span class="wri-dot">โธ</span>Workplace comedy taste cluster โ Schitt's Creek highly predicted</div>
|
| 738 |
+
<div class="wri"><span class="wri-dot">โธ</span>One-episode-per-night pattern โ 22โ30 min episodes ranked higher</div>
|
| 739 |
+
<div class="wri"><span class="wri-dot">โธ</span>Laptop at 9 PM โ lighter, lower-stakes content preferred</div>
|
| 740 |
+
</div>
|
| 741 |
+
</div>
|
| 742 |
+
<div class="netflix-ui-mock">
|
| 743 |
+
<div class="nf-ui-header"><span class="nf-ui-logo">NETFLIX</span><span class="nf-ui-user">๐ค Priya</span></div>
|
| 744 |
+
<div class="nf-row"><div class="nf-row-label">Top Picks for Priya</div>
|
| 745 |
+
<div class="nf-thumbnails">
|
| 746 |
+
<div class="nf-thumb t7"><span>SCHITT'S CREEK</span></div>
|
| 747 |
+
<div class="nf-thumb t6"><span>COMMUNITY</span></div>
|
| 748 |
+
<div class="nf-thumb t9"><span>Abbott ELEM.</span></div>
|
| 749 |
+
<div class="nf-thumb t3"><span>NEVER HAVE I</span></div>
|
| 750 |
+
<div class="nf-thumb t4"><span>DERRY GIRLS</span></div>
|
| 751 |
+
</div></div>
|
| 752 |
+
<div class="nf-row"><div class="nf-row-label">Because you loved The Office</div>
|
| 753 |
+
<div class="nf-thumbnails">
|
| 754 |
+
<div class="nf-thumb t7"><span>WHAT WE DO</span></div>
|
| 755 |
+
<div class="nf-thumb t6"><span>EXTRAS</span></div>
|
| 756 |
+
<div class="nf-thumb t3"><span>FLEABAG</span></div>
|
| 757 |
+
<div class="nf-thumb t4"><span>TED LASSO</span></div>
|
| 758 |
+
<div class="nf-thumb t9"><span>CATASTROPHE</span></div>
|
| 759 |
+
</div></div>
|
| 760 |
+
</div>
|
| 761 |
+
</div>
|
| 762 |
+
|
| 763 |
+
<!-- USER C -->
|
| 764 |
+
<div class="profile-card user-c">
|
| 765 |
+
<div class="profile-avatar avatar-c">๐</div>
|
| 766 |
+
<div class="profile-name">RAHUL</div>
|
| 767 |
+
<div class="profile-type type-c">Sci-Fi Nerd ยท Weekend Marathon Watcher</div>
|
| 768 |
+
<div class="profile-stats">
|
| 769 |
+
<div class="ps-item"><div class="ps-label">Peak Time</div><div class="ps-value">Weekends</div></div>
|
| 770 |
+
<div class="ps-item"><div class="ps-label">Style</div><div class="ps-value">Full season</div></div>
|
| 771 |
+
<div class="ps-item"><div class="ps-label">Device</div><div class="ps-value">4K TV</div></div>
|
| 772 |
+
<div class="ps-item"><div class="ps-label">Completion</div><div class="ps-value">97%</div></div>
|
| 773 |
+
</div>
|
| 774 |
+
<div class="profile-watched">
|
| 775 |
+
<div class="pw-label">Recently Completed</div>
|
| 776 |
+
<span class="show-pill">Dark <span class="stars">โ
โ
โ
โ
โ
</span></span>
|
| 777 |
+
<span class="show-pill">The Expanse <span class="stars">โ
โ
โ
โ
โ
</span></span>
|
| 778 |
+
<span class="show-pill">Severance <span class="stars">โ
โ
โ
โ
โ
</span></span>
|
| 779 |
+
</div>
|
| 780 |
+
<div class="why-rec">
|
| 781 |
+
<div class="why-rec-label">Why his homepage looks like this</div>
|
| 782 |
+
<div class="why-rec-items">
|
| 783 |
+
<div class="wri"><span class="wri-dot">โธ</span>97% completion rate โ extreme engagement signal, very high confidence</div>
|
| 784 |
+
<div class="wri"><span class="wri-dot">โธ</span>Full-season marathons โ long-format, complex narrative ranked highest</div>
|
| 785 |
+
<div class="wri"><span class="wri-dot">โธ</span>Content graph: Dark โ 1899 โ Pantheon โ 4K preferred signal</div>
|
| 786 |
+
</div>
|
| 787 |
+
</div>
|
| 788 |
+
<div class="netflix-ui-mock">
|
| 789 |
+
<div class="nf-ui-header"><span class="nf-ui-logo">NETFLIX</span><span class="nf-ui-user">๐ค Rahul</span></div>
|
| 790 |
+
<div class="nf-row"><div class="nf-row-label">Top Picks for Rahul</div>
|
| 791 |
+
<div class="nf-thumbnails">
|
| 792 |
+
<div class="nf-thumb t10"><span>WESTWORLD</span></div>
|
| 793 |
+
<div class="nf-thumb t5"><span>ALTERED CARBON</span></div>
|
| 794 |
+
<div class="nf-thumb t1"><span>SENSE8</span></div>
|
| 795 |
+
<div class="nf-thumb t8"><span>THE OA</span></div>
|
| 796 |
+
<div class="nf-thumb t4"><span>PANTHEON</span></div>
|
| 797 |
+
</div></div>
|
| 798 |
+
<div class="nf-row"><div class="nf-row-label">Because you watched Dark</div>
|
| 799 |
+
<div class="nf-thumbnails">
|
| 800 |
+
<div class="nf-thumb t5"><span>1899</span></div>
|
| 801 |
+
<div class="nf-thumb t10"><span>DARK MATTER</span></div>
|
| 802 |
+
<div class="nf-thumb t1"><span>TRAVELERS</span></div>
|
| 803 |
+
<div class="nf-thumb t8"><span>UNDONE</span></div>
|
| 804 |
+
<div class="nf-thumb t4"><span>STATION ELEVEN</span></div>
|
| 805 |
+
</div></div>
|
| 806 |
+
</div>
|
| 807 |
+
</div>
|
| 808 |
+
|
| 809 |
+
</div>
|
| 810 |
+
</div>
|
| 811 |
+
</section>
|
| 812 |
+
|
| 813 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 9: ARTWORK โโโโโโโโโโโโโโ -->
|
| 814 |
+
<section class="slide" id="s9">
|
| 815 |
+
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 816 |
+
<div class="slide-tag">Decode the Tech ยท Visual Layer</div>
|
| 817 |
+
<h2 class="sec">THE THUMBNAIL<br><span>YOU SEE IS NOT RANDOM</span></h2>
|
| 818 |
+
<p class="subtitle">The image Netflix shows you for a title is personalized โ selected by a separate AI system that optimizes for your individual click behavior.</p>
|
| 819 |
+
<div class="artwork-layout">
|
| 820 |
+
<div class="artwork-left">
|
| 821 |
+
<div class="thumb-showcase">
|
| 822 |
+
<div class="thumb-variant tv1"><div class="tv-ctr">CTR 4.2%</div><div class="tv-label">MYSTERIOUS<br>FOREST PATH</div></div>
|
| 823 |
+
<div class="thumb-variant tv2"><div class="tv-ctr">CTR 6.8%</div><div class="tv-label">LEAD ACTOR<br>CLOSE-UP</div></div>
|
| 824 |
+
<div class="thumb-variant tv3"><div class="tv-ctr">CTR 3.1%</div><div class="tv-label">ACTION<br>EXPLOSION</div></div>
|
| 825 |
+
<div class="thumb-variant tv4"><div class="tv-ctr">CTR 5.5%</div><div class="tv-label">EMOTIONAL<br>CONFRONTATION</div></div>
|
| 826 |
+
<div class="thumb-variant tv5"><div class="tv-ctr">CTR 7.3%</div><div class="tv-label">VILLAIN<br>SILHOUETTE</div></div>
|
| 827 |
+
<div class="thumb-variant tv6"><div class="tv-ctr">CTR 4.9%</div><div class="tv-label">GROUP<br>ENSEMBLE</div></div>
|
| 828 |
+
</div>
|
| 829 |
+
<div class="showcase-caption">Six possible thumbnails for the same title. You see the one predicted to earn your click.</div>
|
| 830 |
+
<div style="background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1.2rem;">
|
| 831 |
+
<div style="font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.8rem;font-weight:700;">How it works</div>
|
| 832 |
+
<div style="display:flex;flex-direction:column;gap:.5rem;">
|
| 833 |
+
<div style="font-size:.8rem;color:var(--muted);line-height:1.55;display:flex;gap:.6rem;"><span style="color:var(--red);flex-shrink:0;">1.</span> Multiple thumbnails are created per title using computer vision and design tools</div>
|
| 834 |
+
<div style="font-size:.8rem;color:var(--muted);line-height:1.55;display:flex;gap:.6rem;"><span style="color:var(--red);flex-shrink:0;">2.</span> Each variant is A/B tested across user segments to measure click-through rate</div>
|
| 835 |
+
<div style="font-size:.8rem;color:var(--muted);line-height:1.55;display:flex;gap:.6rem;"><span style="color:var(--red);flex-shrink:0;">3.</span> A ranking model learns which visual attributes correlate with clicks for each user profile</div>
|
| 836 |
+
<div style="font-size:.8rem;color:var(--muted);line-height:1.55;display:flex;gap:.6rem;"><span style="color:var(--red);flex-shrink:0;">4.</span> At render time, your profile determines which thumbnail is served</div>
|
| 837 |
+
</div>
|
| 838 |
+
</div>
|
| 839 |
+
</div>
|
| 840 |
+
<div class="artwork-right">
|
| 841 |
+
<div class="artwork-facts">
|
| 842 |
+
<div class="art-fact"><div class="art-fact-icon">๐ค</div><div><div class="art-fact-title">Actor Preference Detection</div><div class="art-fact-body">If your watch history shows you consistently engage with content featuring certain actors, Netflix's thumbnail ranker prioritizes images where those actors appear prominently โ even for shows you've never seen.</div><div class="art-fact-tag">BEHAVIORAL SIGNAL โ VISUAL PREFERENCE</div></div></div>
|
| 843 |
+
<div class="art-fact"><div class="art-fact-icon">๐ฎ</div><div><div class="art-fact-title">Emotion & Expression Targeting</div><div class="art-fact-body">Computer vision analyzes the emotional expression in each frame. Action-oriented users tend to engage more with high-tension expressions. Drama fans tend to respond to nuanced emotional moments. The model learns these correlations.</div><div class="art-fact-tag">CV + CLICK DATA โ EMOTION RANKING</div></div></div>
|
| 844 |
+
<div class="art-fact"><div class="art-fact-icon">๐จ</div><div><div class="art-fact-title">Color & Composition Signals</div><div class="art-fact-body">Beyond faces, the system tracks engagement patterns related to color palette, composition style, text presence, and image density. These visual features are encoded and matched against your click history.</div><div class="art-fact-tag">IMAGE FEATURES โ CLICK PREDICTION</div></div></div>
|
| 845 |
+
<div class="art-fact"><div class="art-fact-icon">๐งช</div><div><div class="art-fact-title">Continuous A/B Optimization</div><div class="art-fact-body">Thumbnail selection is never "done." New variants are constantly tested, click-through rates are continuously monitored, and the model is retrained as user preferences shift. The thumbnail showing today may differ from the one showing next week.</div><div class="art-fact-tag">ONGOING EXPERIMENTATION ยท NO STATIC DEFAULTS</div></div></div>
|
| 846 |
+
</div>
|
| 847 |
+
</div>
|
| 848 |
+
</div>
|
| 849 |
+
</div>
|
| 850 |
+
</section>
|
| 851 |
+
|
| 852 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 10: DEMO โโโโโโโโโโโโโโ -->
|
| 853 |
+
<section class="slide" id="s10">
|
| 854 |
+
<div class="bg-glow"></div>
|
| 855 |
+
<div class="content demo-container">
|
| 856 |
+
<div class="demo-badge">LIVE DEMO</div>
|
| 857 |
+
<div class="demo-title">SEE IT<br><span>IN ACTION</span></div>
|
| 858 |
+
<p class="demo-subtitle">This section is reserved for an interactive live demonstration โ showing the hidden personalization layer in real time.</p>
|
| 859 |
+
<div class="demo-slots">
|
| 860 |
+
<div class="demo-slot">
|
| 861 |
+
<div class="ds-icon">๐ </div>
|
| 862 |
+
<div class="ds-title">Homepage Contrast Demo</div>
|
| 863 |
+
<div class="ds-desc">Switch between two Netflix profiles live โ show the audience how dramatically different the same platform looks for two different users with different behavioral histories.</div>
|
| 864 |
+
<div class="ds-status">โ Recommended: Live screen recording</div>
|
| 865 |
+
</div>
|
| 866 |
+
<div class="demo-slot">
|
| 867 |
+
<div class="ds-icon">๐ผ๏ธ</div>
|
| 868 |
+
<div class="ds-title">Thumbnail Personalization</div>
|
| 869 |
+
<div class="ds-desc">Use an incognito browser alongside a logged-in session to show how the same title can display different thumbnails to different user profiles.</div>
|
| 870 |
+
<div class="ds-status">โ Recommended: Side-by-side browser windows</div>
|
| 871 |
+
</div>
|
| 872 |
+
<div class="demo-slot">
|
| 873 |
+
<div class="ds-icon">๐งฎ</div>
|
| 874 |
+
<div class="ds-title">Collaborative Filtering Simulation</div>
|
| 875 |
+
<div class="ds-desc">A visual walkthrough of how user clusters form โ and how a recommendation propagates from one user's behavior to another user's homepage in real time.</div>
|
| 876 |
+
<div class="ds-status">โ Future: Interactive widget placeholder</div>
|
| 877 |
+
</div>
|
| 878 |
+
<div class="demo-slot">
|
| 879 |
+
<div class="ds-icon">๐ก</div>
|
| 880 |
+
<div class="ds-title">Signal Tracking Visualization</div>
|
| 881 |
+
<div class="ds-desc">A real-time signal map showing which behavioral events are being captured during a viewing session โ pauses, skips, hover, completion โ and how they alter recommendation scores.</div>
|
| 882 |
+
<div class="ds-status">โ Future: Interactive widget placeholder</div>
|
| 883 |
+
</div>
|
| 884 |
+
</div>
|
| 885 |
+
</div>
|
| 886 |
+
</section>
|
| 887 |
+
|
| 888 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 11: TAKEAWAYS โโโโโโโโโโโโโโ -->
|
| 889 |
+
<section class="slide" id="s11">
|
| 890 |
+
<div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
|
| 891 |
+
<div class="slide-tag">Reflection ยท The Bigger Picture</div>
|
| 892 |
+
<h2 class="sec">THE ALGORITHM<br><span>SHAPES US TOO</span></h2>
|
| 893 |
+
<p class="subtitle">The same system that surfaces the perfect show is also optimizing your attention, shaping your taste, and influencing what culture you consume.</p>
|
| 894 |
+
<div class="takeaways-layout">
|
| 895 |
+
<div class="takeaways-list">
|
| 896 |
+
<div class="takeaway"><div class="ta-num">01</div><div><div class="ta-title">Netflix is an AI company that streams video</div><div class="ta-desc">The recommendation engine is the core product. Content is the data source. Every strategic decision โ from original content to pricing tiers โ is designed to feed the personalization machine.</div></div></div>
|
| 897 |
+
<div class="takeaway"><div class="ta-num">02</div><div><div class="ta-title">~80% of what you watch, you never searched for</div><div class="ta-desc">The algorithm surfaced it before you knew you wanted it. This changes the nature of discovery โ and shifts cultural gatekeeping from editors and critics to machine learning models.</div></div></div>
|
| 898 |
+
<div class="takeaway"><div class="ta-num">03</div><div><div class="ta-title">Two stages, not one โ retrieval then ranking</div><div class="ta-desc">The most important architectural insight: no single algorithm runs over the full catalog. Fast retrieval + precise ranking is what makes real-time personalization possible at 250M-user scale.</div></div></div>
|
| 899 |
+
<div class="takeaway"><div class="ta-num">04</div><div><div class="ta-title">The future is conversational and explainable</div><div class="ta-desc">LLM-based recommendation ("show me dark sci-fi for this weekend"), foundation models like FM-Intent, and explainable suggestions are all active research areas. The interface is about to change.</div></div></div>
|
| 900 |
+
<div class="takeaway"><div class="ta-num">05</div><div><div class="ta-title">Small improvements compound into billions</div><div class="ta-desc">Because every change is measurable at 250M-user scale, even marginal ranking improvements translate into millions of additional viewing hours โ which justifies continuous, compounding investment in ML R&D.</div></div></div>
|
| 901 |
+
</div>
|
| 902 |
+
<div class="ethics-panel">
|
| 903 |
+
<div class="ethics-label">โ Questions Worth Asking</div>
|
| 904 |
+
<div class="ethics-cards">
|
| 905 |
+
<div class="eth-card">
|
| 906 |
+
<div class="eth-title"><span class="eth-icon">๐</span>Addictive Loops & Binge Engineering</div>
|
| 907 |
+
<div class="eth-desc">Autoplay, cliffhanger optimization, and next-episode timing are all tuned to maximize watch time โ not necessarily wellbeing. The line between helpful recommendation and engineered compulsion is blurry.</div>
|
| 908 |
+
</div>
|
| 909 |
+
<div class="eth-card">
|
| 910 |
+
<div class="eth-title"><span class="eth-icon">๐ซง</span>Filter Bubbles & Cultural Narrowing</div>
|
| 911 |
+
<div class="eth-desc">Personalization optimizes for engagement with what you already like โ which can narrow your cultural exposure over time. What content never reaches you because the algorithm doesn't predict you'll click?</div>
|
| 912 |
+
</div>
|
| 913 |
+
<div class="eth-card">
|
| 914 |
+
<div class="eth-title"><span class="eth-icon">๐คซ</span>Invisible Influence at Scale</div>
|
| 915 |
+
<div class="eth-desc">A recommendation algorithm that reaches 250 million people simultaneously shapes collective culture. The decisions about what to promote โ and what to bury โ are made by optimization objectives most users don't know exist.</div>
|
| 916 |
+
</div>
|
| 917 |
+
</div>
|
| 918 |
+
<div class="future-note">
|
| 919 |
+
<div class="fn-label">๐ Where This Goes Next</div>
|
| 920 |
+
<div class="fn-items">
|
| 921 |
+
<div class="fn-item"><span class="fn-dot">โธ</span>Conversational recommendations: "Show me dark sci-fi I can finish this weekend"</div>
|
| 922 |
+
<div class="fn-item"><span class="fn-dot">โธ</span>Explainable AI: "We recommend this because 94% of users like you rated it 4+ stars"</div>
|
| 923 |
+
<div class="fn-item"><span class="fn-dot">โธ</span>Foundation models unifying search, recommendations, and ranking into one system</div>
|
| 924 |
+
<div class="fn-item"><span class="fn-dot">โธ</span>Sub-100ms inference at 250M+ scale โ a multi-year infrastructure build in progress</div>
|
| 925 |
+
</div>
|
| 926 |
+
</div>
|
| 927 |
+
</div>
|
| 928 |
+
</div>
|
| 929 |
+
</div>
|
| 930 |
+
</section>
|
| 931 |
+
|
| 932 |
+
<!-- โโโโโโโโโโโโโโ SLIDE 12: END โโโโโโโโโโโโโโ -->
|
| 933 |
+
<section class="slide" id="s12">
|
| 934 |
+
<div class="bg-glow"></div>
|
| 935 |
+
<div class="content" style="width:100%;max-width:900px;text-align:center;">
|
| 936 |
+
<div class="final-logo">NETFLIX</div>
|
| 937 |
+
<div class="final-tag">Decode the Tech Series ยท 2026</div>
|
| 938 |
+
<div class="final-qa">QUESTIONS?</div>
|
| 939 |
+
<div class="final-sub">You will never look at your Netflix homepage the same way again. Every scroll, every pause, every abandoned episode โ it was all being read.</div>
|
| 940 |
+
<div style="display:flex;gap:.9rem;justify-content:center;margin-top:2.5rem;flex-wrap:wrap;">
|
| 941 |
+
<span style="padding:.5rem 1rem;border:1px solid var(--border);border-radius:6px;font-size:.72rem;color:var(--muted);font-family:'JetBrains Mono',monospace;">research.netflix.com</span>
|
| 942 |
+
<span style="padding:.5rem 1rem;border:1px solid var(--border);border-radius:6px;font-size:.72rem;color:var(--muted);font-family:'JetBrains Mono',monospace;">netflixtechblog.com</span>
|
| 943 |
+
<span style="padding:.5rem 1rem;border:1px solid var(--border);border-radius:6px;font-size:.72rem;color:var(--muted);font-family:'JetBrains Mono',monospace;">arxiv.org/abs/2511.07280</span>
|
| 944 |
+
</div>
|
| 945 |
+
</div>
|
| 946 |
+
</section>
|
| 947 |
+
|
| 948 |
+
<!-- NAVIGATION -->
|
| 949 |
+
<div class="slide-nav">
|
| 950 |
+
<button class="btn-nav" id="prevBtn" onclick="changeSlide(-1)" disabled>โ Prev</button>
|
| 951 |
+
<button class="btn-nav" id="nextBtn" onclick="changeSlide(1)">Next โ</button>
|
| 952 |
+
</div>
|
| 953 |
+
|
| 954 |
+
<script>
|
| 955 |
+
const slides = document.querySelectorAll('.slide');
|
| 956 |
+
const navBtns = document.querySelectorAll('.nav-links button');
|
| 957 |
+
const progressBar = document.getElementById('progressBar');
|
| 958 |
+
const slideCounter = document.getElementById('slideCounter');
|
| 959 |
+
let current = 0;
|
| 960 |
+
|
| 961 |
+
function goTo(idx) {
|
| 962 |
+
slides[current].classList.remove('active');
|
| 963 |
+
navBtns[current].classList.remove('active');
|
| 964 |
+
current = Math.max(0, Math.min(slides.length - 1, idx));
|
| 965 |
+
slides[current].classList.add('active');
|
| 966 |
+
navBtns[current].classList.add('active');
|
| 967 |
+
document.getElementById('prevBtn').disabled = current === 0;
|
| 968 |
+
document.getElementById('nextBtn').disabled = current === slides.length - 1;
|
| 969 |
+
const pct = (current / (slides.length - 1)) * 100;
|
| 970 |
+
progressBar.style.width = pct + '%';
|
| 971 |
+
slideCounter.textContent = String(current + 1).padStart(2,'0') + ' / ' + String(slides.length).padStart(2,'0');
|
| 972 |
+
window.scrollTo(0, 0);
|
| 973 |
+
}
|
| 974 |
+
|
| 975 |
+
function changeSlide(dir) { goTo(current + dir); }
|
| 976 |
+
|
| 977 |
+
document.addEventListener('keydown', e => {
|
| 978 |
+
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') changeSlide(1);
|
| 979 |
+
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') changeSlide(-1);
|
| 980 |
+
});
|
| 981 |
+
|
| 982 |
+
// Init
|
| 983 |
+
navBtns[0].classList.add('active');
|
| 984 |
+
progressBar.style.width = '0%';
|
| 985 |
+
</script>
|
| 986 |
+
</body>
|
| 987 |
+
</html>
|