Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Decode the Tech — Netflix Personalization System</title> | |
| <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"> | |
| <style> | |
| :root { | |
| --red: #E50914; | |
| --red-dim: #b0060f; | |
| --black: #0a0a0a; | |
| --dark: #141414; | |
| --card: #1c1c1c; | |
| --card2: #242424; | |
| --border: rgba(255,255,255,0.08); | |
| --text: #e5e5e5; | |
| --muted: #888; | |
| --gold: #f5c518; | |
| --green: #46d369; | |
| --blue: #0071eb; | |
| --prime: #00a8e0; | |
| --warn: #ff9800; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'DM Sans', sans-serif; | |
| background: var(--black); | |
| color: var(--text); | |
| overflow-x: hidden; | |
| } | |
| /* ── PROGRESS BAR ── */ | |
| .progress-bar { position: fixed; top: 0; left: 0; height: 2px; background: var(--red); z-index: 9999; transition: width .35s ease; } | |
| /* ── NAV ── */ | |
| nav { | |
| position: fixed; top: 0; left: 0; right: 0; z-index: 999; | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 0 1.5rem; height: 56px; | |
| background: linear-gradient(180deg, rgba(0,0,0,.97) 0%, transparent 100%); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--red); letter-spacing: 2px; flex-shrink: 0; } | |
| .nav-links { display: flex; gap: .25rem; flex-wrap: wrap; } | |
| .nav-links button { | |
| background: none; border: none; color: var(--muted); font-family: 'DM Sans', sans-serif; | |
| font-size: .63rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; | |
| cursor: pointer; padding: .3rem .5rem; border-radius: 4px; transition: all .2s; | |
| } | |
| .nav-links button:hover, .nav-links button.active { color: white; background: rgba(255,255,255,.08); } | |
| .slide-counter { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--muted); flex-shrink: 0; } | |
| /* ── SLIDES ── */ | |
| .slide { min-height: 100vh; padding: 80px 5% 80px; display: none; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } | |
| .slide.active { display: flex; } | |
| .slide.active { animation: fadeIn .4s ease; } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } | |
| /* ── COMMON ── */ | |
| .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; } | |
| h1.hero { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 9vw, 7.5rem); line-height: .93; color: white; } | |
| h1.hero span { color: var(--red); } | |
| h2.sec { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.4rem, 4.8vw, 4rem); color: white; line-height: 1; margin-bottom: .5rem; } | |
| h2.sec span { color: var(--red); } | |
| .subtitle { color: var(--muted); font-size: .97rem; font-weight: 300; max-width: 700px; line-height: 1.75; } | |
| .divider { width: 48px; height: 3px; background: var(--red); border-radius: 2px; margin: 1rem 0; } | |
| .bg-glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; } | |
| .content { position: relative; z-index: 1; } | |
| /* ── NAV BUTTONS ── */ | |
| .slide-nav { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: .9rem; z-index: 999; align-items: center; } | |
| .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; } | |
| .btn-nav:hover { background: var(--red); border-color: var(--red); } | |
| .btn-nav:disabled { opacity: .3; cursor: not-allowed; } | |
| .btn-nav:disabled:hover { background: var(--card); border-color: var(--border); } | |
| /* ── SCROLLBAR ── */ | |
| ::-webkit-scrollbar { width: 4px; height: 4px; } | |
| ::-webkit-scrollbar-track { background: var(--dark); } | |
| ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; } | |
| /* ══ SLIDE 1 — INTRO ══ */ | |
| #s1 { background: var(--dark); } | |
| #s1 .bg-glow:nth-child(1) { width: 620px; height: 620px; background: rgba(229,9,20,.17); top: -120px; right: -100px; } | |
| #s1 .bg-glow:nth-child(2) { width: 380px; height: 380px; background: rgba(229,9,20,.07); bottom: 0; left: -80px; } | |
| .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } | |
| .hero-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.8rem; } | |
| .badge { padding: .3rem .85rem; border-radius: 99px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } | |
| .badge-red { background: rgba(229,9,20,.18); color: var(--red); border: 1px solid rgba(229,9,20,.3); } | |
| .badge-white { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--border); } | |
| .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } | |
| .hero-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: border-color .2s; } | |
| .hero-stat:hover { border-color: var(--red); } | |
| .hero-stat .num { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; color: var(--red); line-height: 1; } | |
| .hero-stat .lbl { font-size: .72rem; color: var(--muted); margin-top: .3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } | |
| .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; } | |
| .intro-reveal p { font-size: .92rem; color: var(--text); line-height: 1.7; } | |
| .intro-reveal strong { color: var(--red); } | |
| /* ══ SLIDE 2 — STORY ══ */ | |
| #s2 { background: var(--black); } | |
| #s2 .bg-glow { width: 700px; height: 350px; background: rgba(229,9,20,.05); top: 45%; left: 50%; transform: translateX(-50%); } | |
| .two-users { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; } | |
| .user-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; } | |
| .user-box-label { font-family: 'JetBrains Mono', monospace; font-size: .66rem; color: var(--red); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .5rem; } | |
| .user-box-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: white; margin-bottom: .4rem; } | |
| .user-box-sub { font-size: .78rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.5; } | |
| .mini-nf { background: #0a0a0a; border-radius: 8px; padding: .7rem; border: 1px solid rgba(255,255,255,.04); } | |
| .mini-nf-header { font-family: 'Bebas Neue', sans-serif; color: var(--red); font-size: .8rem; letter-spacing: 2px; margin-bottom: .5rem; } | |
| .mini-row-label { font-size: .62rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35rem; } | |
| .mini-thumbs { display: flex; gap: .3rem; margin-bottom: .5rem; } | |
| .mini-thumb { border-radius: 4px; aspect-ratio: 16/9; flex: 1; display: flex; align-items: flex-end; padding: .25rem; font-size: .45rem; font-weight: 700; color: white; position: relative; overflow: hidden; } | |
| .mini-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent 55%); } | |
| .mini-thumb span { position: relative; z-index: 1; } | |
| .mt1 { background: linear-gradient(135deg, #1a0a28, #3d1060); } | |
| .mt2 { background: linear-gradient(135deg, #0a1e35, #1a4a7a); } | |
| .mt3 { background: linear-gradient(135deg, #1a2a00, #3a5a00); } | |
| .mt4 { background: linear-gradient(135deg, #2a0a0a, #6a1818); } | |
| .mt5 { background: linear-gradient(135deg, #0a0a2a, #202060); } | |
| .mt6 { background: linear-gradient(135deg, #1c1c0e, #3a3a1a); } | |
| .mt7 { background: linear-gradient(135deg, #1b3a1b, #0d4a3a); } | |
| .mt8 { background: linear-gradient(135deg, #3a1a28, #5c2a3a); } | |
| .mt9 { background: linear-gradient(135deg, #141428, #2a2a4a); } | |
| .mt10 { background: linear-gradient(135deg, #0a1628, #1a3050); } | |
| .story-three-step { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; } | |
| .step-card { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.2rem; display: flex; gap: .8rem; align-items: flex-start; } | |
| .step-num { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: rgba(229,9,20,.3); line-height: 1; flex-shrink: 0; } | |
| .step-body-title { font-weight: 700; font-size: .85rem; color: white; margin-bottom: .2rem; } | |
| .step-body-desc { font-size: .76rem; color: var(--muted); line-height: 1.55; } | |
| .story-thesis { margin-top: 1.2rem; padding: 1rem 1.4rem; background: rgba(229,9,20,.07); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; } | |
| .story-thesis p { font-size: .88rem; color: var(--text); line-height: 1.65; } | |
| .story-thesis strong { color: var(--red); } | |
| /* ══ SLIDE 3 — WHY NETFLIX ══ */ | |
| #s3 { background: var(--dark); } | |
| .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.8rem; } | |
| .why-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; transition: all .25s; } | |
| .why-card:hover { border-color: var(--red); background: linear-gradient(135deg, rgba(229,9,20,.05), var(--card)); transform: translateY(-3px); } | |
| .why-icon { font-size: 1.9rem; margin-bottom: .9rem; } | |
| .why-title { font-weight: 700; font-size: .95rem; color: white; margin-bottom: .45rem; } | |
| .why-desc { font-size: .8rem; color: var(--muted); line-height: 1.65; } | |
| .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; } | |
| /* ══ SLIDE 4 — SIGNALS ══ */ | |
| #s4 { background: var(--black); } | |
| #s4 .bg-glow:nth-child(1) { width: 480px; height: 480px; background: rgba(229,9,20,.06); top: 10%; left: 8%; } | |
| #s4 .bg-glow:nth-child(2) { width: 560px; height: 560px; background: rgba(229,9,20,.05); bottom: -18%; right: -8%; } | |
| .signals-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 2rem; } | |
| .signal-rail-card { | |
| position: relative; min-height: 26.5rem; padding: 1rem 1rem 1.15rem; border-radius: 18px; | |
| border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, rgba(10,10,12,.96), rgba(6,6,8,.98)); | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 32px rgba(0,0,0,.32); overflow: hidden; | |
| display: flex; flex-direction: column; justify-content: flex-start; | |
| } | |
| .signal-rail-card::after { | |
| content: ''; position: absolute; inset: 0; pointer-events: none; | |
| background: linear-gradient(180deg, rgba(229,9,20,.04), transparent 32%, rgba(255,255,255,.01)); | |
| } | |
| .signal-rail-card.rail-active { | |
| border-color: rgba(229,9,20,.95); | |
| box-shadow: 0 0 0 1px rgba(229,9,20,.32), 0 20px 44px rgba(229,9,20,.12), inset 0 1px 0 rgba(255,255,255,.04); | |
| } | |
| .signal-visual { | |
| height: 9.75rem; border-radius: 14px; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,.05); | |
| background-size: cover; background-position: center; position: relative; overflow: hidden; | |
| } | |
| .sv-interaction { | |
| background: | |
| radial-gradient(circle at 20% 30%, rgba(229,9,20,.95) 0 2px, transparent 3px), | |
| radial-gradient(circle at 58% 28%, rgba(255,72,72,.9) 0 3px, transparent 4px), | |
| radial-gradient(circle at 72% 66%, rgba(229,9,20,.9) 0 2px, transparent 3px), | |
| radial-gradient(circle at 35% 70%, rgba(255,82,82,.9) 0 2px, transparent 3px), | |
| linear-gradient(135deg, rgba(229,9,20,.18), rgba(20,0,0,.92)); | |
| } | |
| .sv-interaction::before { | |
| content:''; position:absolute; inset:0; | |
| background: | |
| linear-gradient(45deg, transparent 48%, rgba(255,50,50,.28) 49%, rgba(255,50,50,.28) 51%, transparent 52%), | |
| linear-gradient(-18deg, transparent 43%, rgba(255,50,50,.16) 44%, rgba(255,50,50,.16) 46%, transparent 47%), | |
| linear-gradient(75deg, transparent 40%, rgba(255,50,50,.14) 41%, rgba(255,50,50,.14) 43%, transparent 44%); | |
| opacity:.95; | |
| } | |
| .sv-collab { background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.7)), linear-gradient(135deg, rgba(33,33,40,.72), rgba(10,10,12,.95)); } | |
| .sv-collab::before { | |
| content:''; position:absolute; inset:0; opacity:.9; | |
| background-image: linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02)), linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px), linear-gradient(rgba(255,255,255,.04) 0 1px, transparent 1px); | |
| background-size: 100% 100%, 34px 34px, 34px 34px; | |
| } | |
| .sv-content { background: radial-gradient(circle at 70% 72%, rgba(229,9,20,.35), transparent 24%), linear-gradient(180deg, rgba(11,19,34,.96), rgba(6,10,18,.98)); } | |
| .sv-content::before { | |
| content:''; position:absolute; inset:14px; border-radius:12px; opacity:.95; | |
| background: linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px), linear-gradient(rgba(255,255,255,.06) 0 1px, transparent 1px); | |
| background-size: 28px 28px; | |
| } | |
| .sv-context { background: linear-gradient(180deg, rgba(229,9,20,.14), transparent 30%), linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,.45)), linear-gradient(180deg, rgba(35,5,5,.95), rgba(8,8,10,.98)); } | |
| .sv-context::before { | |
| content:''; position:absolute; inset:0; | |
| background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.025) 26px 27px), linear-gradient(180deg, transparent 0 20%, rgba(255,80,80,.28) 48%, transparent 52%, transparent 100%); | |
| } | |
| .sv-intent { background: radial-gradient(circle at 50% 50%, rgba(28,87,255,.22), transparent 28%), radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 1px, transparent 2px), linear-gradient(180deg, rgba(6,16,30,.96), rgba(5,8,15,.98)); } | |
| .sv-intent::before { | |
| content:''; position:absolute; inset:14px; border-radius:50%; border:1px solid rgba(92,144,255,.22); | |
| box-shadow: 0 0 0 22px rgba(92,144,255,.05), 0 0 0 44px rgba(92,144,255,.03); | |
| } | |
| .sv-guardrails { background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.78)), linear-gradient(135deg, rgba(25,25,30,.75), rgba(9,9,12,.96)); } | |
| .sv-guardrails::before { | |
| content:''; position:absolute; inset:0; opacity:.72; | |
| background-image: linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px), linear-gradient(rgba(255,255,255,.03) 0 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| .signal-icon { color: var(--red); font-size: 2rem; line-height: 1; margin-bottom: .95rem; position: relative; z-index: 1; } | |
| .signal-card-title { font-size: 1.95rem; font-weight: 900; line-height: .98; letter-spacing: -.03em; position: relative; z-index: 1; } | |
| .signal-card-line { width: 2.2rem; height: 4px; border-radius: 999px; background: var(--red); margin: 1rem 0 1rem; position: relative; z-index: 1; } | |
| .signal-card-desc { color: var(--muted); font-size: .96rem; line-height: 1.62; position: relative; z-index: 1; } | |
| .signals-dots { display:flex; justify-content:center; gap:.55rem; margin: 1rem 0 1.1rem; } | |
| .signals-dots .dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); } | |
| .signals-dots .dot.active { background: var(--red); } | |
| .signals-summary-bar { | |
| display:flex; align-items:center; gap:1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); | |
| background: linear-gradient(180deg, rgba(11,11,13,.96), rgba(7,7,9,.98)); padding: 1rem 1.25rem; | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 36px rgba(0,0,0,.24); | |
| } | |
| .summary-icon { color: var(--red); font-size: 2rem; line-height: 1; } | |
| .summary-copy { color: var(--muted); font-size: 1.02rem; line-height: 1.6; } | |
| /* ══ SLIDE 5 — OBJECTIVES ══ */ | |
| #s5 { background: var(--dark); } | |
| .objectives-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; } | |
| .obj-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; transition: all .25s; } | |
| .obj-card:hover { border-color: var(--red); transform: translateY(-2px); } | |
| .obj-card.featured { border-color: rgba(229,9,20,.3); background: linear-gradient(135deg, rgba(229,9,20,.06), var(--card)); } | |
| .obj-icon { font-size: 1.8rem; margin-bottom: .8rem; } | |
| .obj-title { font-weight: 700; font-size: 1rem; color: white; margin-bottom: .45rem; } | |
| .obj-desc { font-size: .8rem; color: var(--muted); line-height: 1.65; } | |
| .obj-note { margin-top: .7rem; font-size: .72rem; color: var(--green); font-family: 'JetBrains Mono', monospace; } | |
| .explore-exploit { margin-top: 1.5rem; background: var(--card); border: 1px solid rgba(70,211,105,.2); border-radius: 14px; padding: 1.4rem; } | |
| .ee-label { font-size: .65rem; color: var(--green); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-bottom: .8rem; } | |
| .ee-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } | |
| .ee-col-title { font-weight: 700; font-size: .9rem; margin-bottom: .4rem; } | |
| .ee-exploit { color: var(--red); } | |
| .ee-explore { color: var(--green); } | |
| .ee-desc { font-size: .8rem; color: var(--muted); line-height: 1.6; } | |
| /* ══ SLIDE 6 — HOW IT WORKS (pipeline) ══ */ | |
| #s6 { background: var(--black); } | |
| #s6 .bg-glow { width: 500px; height: 500px; background: rgba(229,9,20,.06); bottom: -100px; right: -100px; } | |
| .pipeline-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; } | |
| .ps-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.3rem; position: relative; transition: all .22s; } | |
| .ps-card:hover { border-color: var(--red); transform: translateY(-2px); } | |
| .ps-step-num { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--red); font-weight: 700; letter-spacing: .12em; margin-bottom: .45rem; } | |
| .ps-icon { font-size: 1.6rem; margin-bottom: .6rem; } | |
| .ps-title { font-weight: 700; font-size: .88rem; color: white; margin-bottom: .35rem; } | |
| .ps-desc { font-size: .75rem; color: var(--muted); line-height: 1.55; } | |
| .ps-arrow { position: absolute; top: 50%; right: -1.1rem; transform: translateY(-50%); font-size: .85rem; color: var(--red); z-index: 2; } | |
| .ps-card:nth-child(4) .ps-arrow, | |
| .ps-card:nth-child(8) .ps-arrow { display: none; } | |
| .pipeline-steps-row2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; } | |
| .pipeline-footer { margin-top: 1.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } | |
| .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; } | |
| .pf-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--red); line-height: 1; } | |
| .pf-stat-label { font-size: .7rem; color: var(--muted); margin-top: .25rem; text-transform: uppercase; letter-spacing: .07em; } | |
| /* ══ SLIDE 7 — ALGORITHMS FOUNDATIONS ══ */ | |
| #s7 { background: var(--dark); } | |
| .algo-intro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; } | |
| .algo-main-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem; transition: all .25s; } | |
| .algo-main-card:hover { border-color: var(--red); transform: translateY(-3px); } | |
| .algo-num-big { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: rgba(229,9,20,.25); line-height: 1; margin-bottom: .5rem; } | |
| .algo-name { font-weight: 700; color: white; font-size: 1rem; margin-bottom: .5rem; } | |
| .algo-analogy { font-size: .78rem; color: var(--green); font-weight: 600; margin-bottom: .5rem; font-style: italic; } | |
| .algo-desc { font-size: .8rem; color: var(--muted); line-height: 1.65; } | |
| .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; } | |
| .algo-visual .hl { color: var(--red); } | |
| .algo-limit { margin-top: .7rem; padding: .6rem .8rem; background: rgba(255,152,0,.05); border: 1px solid rgba(255,152,0,.15); border-radius: 6px; font-size: .72rem; color: var(--warn); } | |
| .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; } | |
| .algo-mf-card:hover { border-color: var(--red); } | |
| .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; } | |
| .algo-mf-matrix .h { color: var(--red); font-weight: 700; } | |
| .algo-mf-matrix .v { color: var(--green); } | |
| .algo-mf-matrix .u { color: var(--muted); } | |
| .algo-footer-note { grid-column: 1 / -1; margin-top: .4rem; padding: .8rem 1.2rem; background: rgba(70,211,105,.05); border: 1px solid rgba(70,211,105,.15); border-radius: 8px; font-size: .8rem; color: var(--muted); line-height: 1.65; } | |
| .algo-footer-note strong { color: var(--green); } | |
| /* ══ SLIDE 8 — USER PROFILES / COLD START ══ */ | |
| #s8 { background: var(--black); } | |
| .coldstart-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2.5rem; align-items: start; margin-top: 2rem; } | |
| .coldstart-left { } | |
| .coldstart-steps { display: flex; flex-direction: column; gap: .8rem; } | |
| .cs-step { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.3rem; display: flex; gap: 1rem; align-items: flex-start; transition: border-color .2s; } | |
| .cs-step:hover { border-color: var(--red); } | |
| .cs-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: rgba(229,9,20,.3); line-height: 1; flex-shrink: 0; } | |
| .cs-title { font-weight: 700; font-size: .88rem; color: white; margin-bottom: .25rem; } | |
| .cs-desc { font-size: .77rem; color: var(--muted); line-height: 1.55; } | |
| .recency-note { margin-top: 1rem; padding: .9rem 1.1rem; background: rgba(229,9,20,.07); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; font-size: .82rem; color: var(--text); line-height: 1.65; } | |
| .recency-note strong { color: var(--red); } | |
| .profiles-grid-v3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } | |
| .profile-card { border-radius: 14px; padding: 1.3rem; border: 1px solid var(--border); position: relative; overflow: hidden; } | |
| .profile-card.user-a { background: linear-gradient(160deg, rgba(229,9,20,.12) 0%, var(--card) 50%); border-color: rgba(229,9,20,.25); } | |
| .profile-card.user-b { background: linear-gradient(160deg, rgba(70,211,105,.08) 0%, var(--card) 50%); border-color: rgba(70,211,105,.2); } | |
| .profile-card.user-c { background: linear-gradient(160deg, rgba(0,113,235,.09) 0%, var(--card) 50%); border-color: rgba(0,113,235,.25); } | |
| .profile-avatar { width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .8rem; } | |
| .avatar-a { background: rgba(229,9,20,.18); } | |
| .avatar-b { background: rgba(70,211,105,.18); } | |
| .avatar-c { background: rgba(0,113,235,.18); } | |
| .profile-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: white; letter-spacing: .05em; } | |
| .profile-type { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .7rem; } | |
| .type-a { color: var(--red); } .type-b { color: var(--green); } .type-c { color: var(--blue); } | |
| .show-pill { display: inline-block; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 4px; padding: .15rem .45rem; font-size: .68rem; color: var(--text); margin: .12rem .1rem .12rem 0; font-weight: 600; } | |
| .pw-label { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; font-weight: 700; } | |
| .mini-nf-card { background: #0a0a0a; border-radius: 8px; padding: .7rem; border: 1px solid rgba(255,255,255,.04); margin-top: .8rem; } | |
| .nf-ui-header { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; } | |
| .nf-ui-logo { font-family: 'Bebas Neue', sans-serif; color: var(--red); font-size: .9rem; letter-spacing: 2px; } | |
| .nf-ui-user { margin-left: auto; font-size: .65rem; color: var(--muted); } | |
| .nf-row-label { font-size: .62rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; letter-spacing: .02em; } | |
| .nf-thumbnails { display: flex; gap: .3rem; overflow: hidden; margin-bottom: .45rem; } | |
| .nf-thumb { border-radius: 4px; aspect-ratio: 16/9; flex: 0 0 calc(20% - .24rem); display: flex; align-items: flex-end; padding: .25rem; font-size: .45rem; font-weight: 700; color: white; letter-spacing: .03em; position: relative; overflow: hidden; } | |
| .nf-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent 60%); } | |
| .nf-thumb span { position: relative; z-index: 1; } | |
| .t1 { background: linear-gradient(135deg, #1a1a2e, #4a1c1c); } | |
| .t2 { background: linear-gradient(135deg, #0d2137, #2d1b1b); } | |
| .t3 { background: linear-gradient(135deg, #1c1c0e, #3a3a1a); } | |
| .t4 { background: linear-gradient(135deg, #0a2820, #1a5c3c); } | |
| .t5 { background: linear-gradient(135deg, #2d1040, #0d2137); } | |
| .t6 { background: linear-gradient(135deg, #2a1a0e, #5c3a1a); } | |
| .t7 { background: linear-gradient(135deg, #1b3a1b, #0d4a3a); } | |
| .t8 { background: linear-gradient(135deg, #141428, #2a2a4a); } | |
| .t9 { background: linear-gradient(135deg, #3a1a28, #5c2a3a); } | |
| .t10 { background: linear-gradient(135deg, #0a1628, #1a3050); } | |
| /* ══ SLIDE 9 — ARTWORK ══ */ | |
| #s9 { background: var(--dark); } | |
| .artwork-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; margin-top: 2rem; } | |
| .thumb-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.2rem; } | |
| .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; } | |
| .thumb-variant:hover { transform: scale(1.03); } | |
| .thumb-variant::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 50%); } | |
| .tv-label { position: relative; z-index: 1; font-size: .58rem; font-weight: 700; color: white; text-align: center; letter-spacing: .04em; margin-top: auto; } | |
| .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; } | |
| .tv1 { background: linear-gradient(135deg, #1a0a28, #3d1060); } | |
| .tv2 { background: linear-gradient(135deg, #0a1e35, #1a4a7a); } | |
| .tv3 { background: linear-gradient(135deg, #1a2a00, #3a5a00); } | |
| .tv4 { background: linear-gradient(135deg, #2a0a0a, #6a1818); } | |
| .tv5 { background: linear-gradient(135deg, #0a0a2a, #202060); } | |
| .tv6 { background: linear-gradient(135deg, #1a100a, #4a2a18); } | |
| .showcase-caption { font-size: .75rem; color: var(--muted); text-align: center; margin-bottom: 1.2rem; font-style: italic; } | |
| .artwork-facts { display: flex; flex-direction: column; gap: .8rem; } | |
| .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; } | |
| .art-fact:hover { border-color: var(--red); } | |
| .art-fact-icon { font-size: 1.3rem; flex-shrink: 0; } | |
| .art-fact-title { font-weight: 700; font-size: .85rem; color: white; margin-bottom: .25rem; } | |
| .art-fact-body { font-size: .77rem; color: var(--muted); line-height: 1.55; } | |
| .art-fact-tag { margin-top: .4rem; font-size: .65rem; color: var(--red); font-family: 'JetBrains Mono', monospace; } | |
| .artwork-layer-note { margin-top: 1.1rem; padding: .9rem 1.2rem; background: rgba(229,9,20,.07); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; font-size: .83rem; color: var(--text); line-height: 1.65; } | |
| .artwork-layer-note strong { color: var(--red); } | |
| /* ══ SLIDE 10 — TRADE-OFFS ══ */ | |
| #s10 { background: var(--black); } | |
| #s10 .bg-glow { width: 500px; height: 500px; background: rgba(229,9,20,.05); top: 50%; left: 50%; transform: translate(-50%,-50%); } | |
| .tradeoffs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; } | |
| .to-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; transition: all .25s; } | |
| .to-card:hover { border-color: rgba(255,152,0,.4); transform: translateY(-2px); } | |
| .to-icon { font-size: 1.7rem; margin-bottom: .8rem; } | |
| .to-title { font-weight: 700; font-size: .95rem; color: white; margin-bottom: .45rem; } | |
| .to-desc { font-size: .8rem; color: var(--muted); line-height: 1.65; } | |
| .to-tension { margin-top: .75rem; font-size: .72rem; color: var(--warn); font-family: 'JetBrains Mono', monospace; } | |
| .tradeoffs-insight { margin-top: 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } | |
| .ti-card { padding: 1rem 1.2rem; border-radius: 10px; } | |
| .ti-card.hard { background: rgba(229,9,20,.06); border: 1px solid rgba(229,9,20,.18); } | |
| .ti-card.nuance { background: rgba(70,211,105,.05); border: 1px solid rgba(70,211,105,.15); } | |
| .ti-label { font-size: .62rem; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: .5rem; } | |
| .ti-label.hard-label { color: var(--red); } | |
| .ti-label.nuance-label { color: var(--green); } | |
| .ti-items { display: flex; flex-direction: column; gap: .35rem; } | |
| .ti-item { font-size: .78rem; color: var(--muted); display: flex; gap: .5rem; line-height: 1.4; } | |
| .ti-dot-r { color: var(--red); flex-shrink: 0; } | |
| .ti-dot-g { color: var(--green); flex-shrink: 0; } | |
| /* ══ SLIDE 11 — DEMO ══ */ | |
| #s11 { background: var(--dark); justify-content: center; align-items: center; } | |
| #s11 .bg-glow { width: 600px; height: 600px; background: rgba(229,9,20,.06); top: 50%; left: 50%; transform: translate(-50%,-50%); } | |
| .demo-container { text-align: center; max-width: 700px; width: 100%; } | |
| .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; } | |
| .demo-badge::before { content: ''; width: 7px; height: 7px; background: var(--red); border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; } | |
| @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} } | |
| .demo-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 7vw, 5.5rem); color: white; line-height: .95; margin-bottom: 1.2rem; } | |
| .demo-title span { color: var(--red); } | |
| .demo-subtitle { font-size: .97rem; color: var(--muted); line-height: 1.75; margin-bottom: 2.5rem; } | |
| .demo-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: left; } | |
| .demo-slot { background: var(--card); border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; padding: 1.4rem; transition: border-color .2s; } | |
| .demo-slot:hover { border-color: rgba(229,9,20,.35); border-style: solid; } | |
| .ds-icon { font-size: 1.8rem; margin-bottom: .7rem; } | |
| .ds-title { font-weight: 700; font-size: .9rem; color: white; margin-bottom: .35rem; } | |
| .ds-desc { font-size: .78rem; color: var(--muted); line-height: 1.55; } | |
| .ds-status { margin-top: .7rem; font-size: .65rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; } | |
| /* ══ SLIDE 12 — TAKEAWAYS ══ */ | |
| #s12 { background: var(--dark); } | |
| .takeaways-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; margin-top: 2rem; } | |
| .takeaways-list { display: flex; flex-direction: column; gap: .85rem; } | |
| .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; } | |
| .takeaway:hover { border-color: var(--red); } | |
| .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; } | |
| .ta-title { font-weight: 700; font-size: .9rem; color: white; margin-bottom: .25rem; } | |
| .ta-desc { font-size: .78rem; color: var(--muted); line-height: 1.6; } | |
| .ta-right { } | |
| .ta-sources { margin-bottom: 1.2rem; } | |
| .ta-sources-label { font-size: .65rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: .7rem; } | |
| .source-link { display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: .5rem; text-decoration: none; transition: border-color .2s; cursor: default; } | |
| .source-link:hover { border-color: var(--red); } | |
| .source-icon { font-size: 1rem; flex-shrink: 0; } | |
| .source-name { font-weight: 700; font-size: .82rem; color: white; } | |
| .source-desc { font-size: .7rem; color: var(--muted); } | |
| .final-callout { padding: 1.3rem 1.5rem; background: rgba(229,9,20,.07); border-left: 3px solid var(--red); border-radius: 0 12px 12px 0; } | |
| .fc-quote { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; color: white; line-height: 1.1; margin-bottom: .5rem; } | |
| .fc-sub { font-size: .8rem; color: var(--muted); line-height: 1.6; } | |
| /* ══ SLIDE 13 — END ══ */ | |
| #s13 { background: var(--dark); justify-content: center; align-items: center; text-align: center; } | |
| #s13 .bg-glow { width: 700px; height: 700px; background: rgba(229,9,20,.11); top: 50%; left: 50%; transform: translate(-50%,-50%); } | |
| .final-logo { font-family: 'Bebas Neue', sans-serif; font-size: 5rem; color: var(--red); letter-spacing: 6px; margin-bottom: 1.3rem; } | |
| .final-tag { font-size: .82rem; color: var(--muted); font-weight: 300; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 2.2rem; } | |
| .final-qa { font-family: 'Bebas Neue', sans-serif; font-size: 4.5rem; color: white; margin-bottom: .5rem; } | |
| .final-sub { font-size: .97rem; color: var(--muted); max-width: 520px; margin: .8rem auto 0; line-height: 1.75; } | |
| /* ── RESPONSIVE ── */ | |
| @media (max-width: 1024px) { | |
| .hero-grid, .artwork-layout, .takeaways-layout, .coldstart-layout { grid-template-columns: 1fr; } | |
| .signals-rail { grid-template-columns: repeat(2, 1fr); } | |
| .why-grid, .algo-intro, .objectives-grid, .tradeoffs-grid { grid-template-columns: 1fr 1fr; } | |
| .pipeline-steps, .pipeline-steps-row2 { grid-template-columns: 1fr 1fr; } | |
| .two-users, .profiles-grid-v3 { grid-template-columns: 1fr; } | |
| .demo-slots { grid-template-columns: 1fr; } | |
| .ps-arrow { display: none; } | |
| .tradeoffs-insight { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 640px) { | |
| .nav-links button { font-size: .55rem; padding: .22rem .38rem; } | |
| .signals-rail { grid-template-columns: 1fr; } | |
| .signals-summary-bar { flex-direction: column; align-items: flex-start; } | |
| .why-grid, .algo-intro, .objectives-grid, .tradeoffs-grid, .pipeline-steps, .pipeline-steps-row2 { grid-template-columns: 1fr; } | |
| .thumb-showcase { grid-template-columns: repeat(2, 1fr); } | |
| .ee-cols { grid-template-columns: 1fr; } | |
| .story-three-step { grid-template-columns: 1fr; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="progress-bar" id="progressBar"></div> | |
| <!-- NAV --> | |
| <nav> | |
| <div class="nav-logo">NETFLIX</div> | |
| <div class="nav-links"> | |
| <button onclick="goTo(0)">Intro</button> | |
| <button onclick="goTo(1)">Story</button> | |
| <button onclick="goTo(2)">Why Netflix</button> | |
| <button onclick="goTo(3)">Signals</button> | |
| <button onclick="goTo(4)">Objectives</button> | |
| <button onclick="goTo(5)">Pipeline</button> | |
| <button onclick="goTo(6)">Algorithms</button> | |
| <button onclick="goTo(7)">Profiles</button> | |
| <button onclick="goTo(8)">Artwork</button> | |
| <button onclick="goTo(9)">Trade-offs</button> | |
| <button onclick="goTo(10)">Demo</button> | |
| <button onclick="goTo(11)">Takeaways</button> | |
| <button onclick="goTo(12)">End</button> | |
| </div> | |
| <div class="slide-counter" id="slideCounter">01 / 13</div> | |
| </nav> | |
| <!-- ══════════════ SLIDE 1: INTRO ══════════════ --> | |
| <section class="slide active" id="s1"> | |
| <div class="bg-glow"></div><div class="bg-glow"></div> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="hero-grid"> | |
| <div> | |
| <div class="slide-tag">Decode the Tech · Episode 4</div> | |
| <h1 class="hero">SIMPLE<br><span>INTERFACE.</span><br>HIDDEN SYSTEM.</h1> | |
| <div class="divider"></div> | |
| <p class="subtitle">Your Netflix homepage feels effortless. That feeling is the product. Behind it sits a layered machine learning system making hundreds of decisions before a single thumbnail loads.</p> | |
| <div class="hero-badges" style="margin-top:1.6rem;"> | |
| <span class="badge badge-red">Machine Learning</span> | |
| <span class="badge badge-red">Behavioral Signals</span> | |
| <span class="badge badge-red">Multi-Stage Ranking</span> | |
| <span class="badge badge-red">Personalization at Scale</span> | |
| <span class="badge badge-red">Representation Learning</span> | |
| </div> | |
| <div class="intro-reveal" style="margin-top:1.5rem;"> | |
| <p>Netflix <strong>personalizes</strong> more than which titles you see — it personalizes which rows appear, how titles are ordered within those rows, and even which thumbnail represents the same show to different viewers. <strong>A deep dive into the layered machine learning system behind a familiar interface.</strong></p> | |
| </div> | |
| </div> | |
| <div class="hero-stats"> | |
| <div class="hero-stat"><div class="num">325M+</div><div class="lbl">Paid Memberships Worldwide</div></div> | |
| <div class="hero-stat"><div class="num">80%+</div><div class="lbl">Viewing Discovered via Recommendations</div></div> | |
| <div class="hero-stat"><div class="num">$45.2B</div><div class="lbl">Annual Revenue (FY2025)</div></div> | |
| <div class="hero-stat"><div class="num">190+</div><div class="lbl">Countries · 60+ Languages</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 2: STORY ══════════════ --> | |
| <section class="slide" id="s2"> | |
| <div class="bg-glow"></div> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="slide-tag">The Hidden Complexity Story</div> | |
| <h2 class="sec">SAME APP.<br><span>DIFFERENT REALITY.</span></h2> | |
| <p class="subtitle">Two people open Netflix at the same moment. They see different rows, different rankings, and different thumbnails for the same title. That difference is not UI decoration — it is the output of ranking systems.</p> | |
| <div class="two-users"> | |
| <div class="user-box"> | |
| <div class="user-box-label">User A · Late-night crime drama viewer</div> | |
| <div class="user-box-name">ARJUN</div> | |
| <div class="user-box-sub">Smart TV · 11 PM · Binge-watcher · 100% completion rate on crime/thriller</div> | |
| <div class="mini-nf"> | |
| <div class="mini-nf-header">NETFLIX</div> | |
| <div class="mini-row-label">Top Picks for Arjun</div> | |
| <div class="mini-thumbs"> | |
| <div class="mini-thumb mt1"><span>OZARK</span></div> | |
| <div class="mini-thumb mt2"><span>THE WIRE</span></div> | |
| <div class="mini-thumb mt4"><span>NARCOS</span></div> | |
| <div class="mini-thumb mt5"><span>HANNIBAL</span></div> | |
| </div> | |
| <div class="mini-row-label">Because you watched Mindhunter</div> | |
| <div class="mini-thumbs"> | |
| <div class="mini-thumb mt2"><span>THE FALL</span></div> | |
| <div class="mini-thumb mt1"><span>YOU</span></div> | |
| <div class="mini-thumb mt3"><span>ZODIAC</span></div> | |
| <div class="mini-thumb mt5"><span>MARCELLA</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="user-box"> | |
| <div class="user-box-label">User B · Weekend sci-fi marathon viewer</div> | |
| <div class="user-box-name">RAHUL</div> | |
| <div class="user-box-sub">4K TV · Weekend · Full-season marathoner · 97% completion on sci-fi</div> | |
| <div class="mini-nf"> | |
| <div class="mini-nf-header">NETFLIX</div> | |
| <div class="mini-row-label">Top Picks for Rahul</div> | |
| <div class="mini-thumbs"> | |
| <div class="mini-thumb mt10"><span>WESTWORLD</span></div> | |
| <div class="mini-thumb mt5"><span>ALT. CARBON</span></div> | |
| <div class="mini-thumb mt9"><span>SENSE8</span></div> | |
| <div class="mini-thumb mt8"><span>PANTHEON</span></div> | |
| </div> | |
| <div class="mini-row-label">Because you watched Dark</div> | |
| <div class="mini-thumbs"> | |
| <div class="mini-thumb mt5"><span>1899</span></div> | |
| <div class="mini-thumb mt10"><span>DARK MATTER</span></div> | |
| <div class="mini-thumb mt1"><span>TRAVELERS</span></div> | |
| <div class="mini-thumb mt8"><span>UNDONE</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="story-three-step"> | |
| <div class="step-card"><div class="step-num">01</div><div><div class="step-body-title">Same app, same catalog</div><div class="step-body-desc">Both users open the same Netflix platform with access to the same titles at the same moment in time.</div></div></div> | |
| <div class="step-card"><div class="step-num">02</div><div><div class="step-body-title">Different homepage</div><div class="step-body-desc">Rows are different. The order of titles within rows is different. Even thumbnails for the same content can differ.</div></div></div> | |
| <div class="step-card"><div class="step-num">03</div><div><div class="step-body-title">Ranking systems at work</div><div class="step-body-desc">Netflix ranks rows, titles within rows, and visual representations separately — each driven by behavioral and contextual signals.</div></div></div> | |
| </div> | |
| <div class="story-thesis"> | |
| <p><strong>The core lens for this talk:</strong> Netflix is not "predicting what you like" — it is assembling a personalized interface through multiple ranking and representation decisions at every level of the homepage.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 3: WHY NETFLIX ══════════════ --> | |
| <section class="slide" id="s3"> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="slide-tag">Why This System Matters</div> | |
| <h2 class="sec">WHY NETFLIX<br><span>IS THE RIGHT EXAMPLE</span></h2> | |
| <p class="subtitle">Recommendation is not a side feature here — it shapes discovery, presentation, ranking, and long-term retention across the entire product.</p> | |
| <div class="why-grid"> | |
| <div class="why-card"><div class="why-icon">🔭</div><div class="why-title">Discovery at Catalog Scale</div><div class="why-desc">With an enormous catalog, browsing alone does not work. Recommendation is the product layer that makes the catalog navigable and watchable at all.</div><span class="why-metric">Discovery problem at scale</span></div> | |
| <div class="why-card"><div class="why-icon">🧩</div><div class="why-title">Layered Personalization</div><div class="why-desc">Netflix personalizes rows, the titles inside those rows, their order, and even the visual representation of the same title for different members.</div><span class="why-metric">Rows · Titles · Artwork</span></div> | |
| <div class="why-card"><div class="why-icon">📚</div><div class="why-title">Public Technical Material</div><div class="why-desc">Netflix has published unusually useful explanations across its Help Center, Tech Blog, and Research site, making the system easier to decode than most commercial recommenders.</div><span class="why-metric">Rare public visibility</span></div> | |
| <div class="why-card"><div class="why-icon">⚙️</div><div class="why-title">Multiple Models, Not One</div><div class="why-desc">Netflix describes specialized recommendation models for different homepage surfaces and use cases, which makes it a better real-world example than a single ranked-list demo.</div><span class="why-metric">Production system complexity</span></div> | |
| <div class="why-card"><div class="why-icon">🖼️</div><div class="why-title">Presentation Is Personalized Too</div><div class="why-desc">The system does not stop after choosing a title. It also chooses how that title is shown, including which artwork is most likely to attract the right viewer.</div><span class="why-metric">Recommendation beyond ranking</span></div> | |
| <div class="why-card"><div class="why-icon">⏱️</div><div class="why-title">Latency Meets Personalization</div><div class="why-desc">Netflix must make all of these decisions fast enough for a homepage to feel instant, which turns recommendation into both an ML problem and a systems problem.</div><span class="why-metric">Millisecond serving constraints</span></div> | |
| <div class="why-card"><div class="why-icon">🧪</div><div class="why-title">Experimentation Culture</div><div class="why-desc">Rows, ranking logic, and visual treatments are continuously evaluated, which makes the system a strong example of ML tied directly to product experimentation.</div><span class="why-metric">Measured product iteration</span></div> | |
| <div class="why-card"><div class="why-icon">🚀</div><div class="why-title">Clear Evolution Path</div><div class="why-desc">Netflix gives a rare view of how recommenders evolve — from collaborative filtering era ideas to deep learning, contextual personalization, and foundation-model direction.</div><span class="why-metric">From Prize era to foundation models</span></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 4: SIGNALS ══════════════ --> | |
| <section class="slide" id="s4"> | |
| <div class="bg-glow"></div><div class="bg-glow"></div> | |
| <div class="content" style="width:100%;max-width:1320px;margin:0 auto;"> | |
| <div class="slide-tag">Decode the Tech · Inputs to the System</div> | |
| <h2 class="sec">WHAT GOES INTO<br><span>THE SYSTEM</span></h2> | |
| <p class="subtitle">The recommendation stack learns from multiple signal families at once. Together they help Netflix estimate taste, intent, context, and uncertainty before ranking the homepage.</p> | |
| <div class="signals-rail"> | |
| <div class="signal-rail-card rail-active"> | |
| <div class="signal-visual sv-interaction"></div> | |
| <div class="signal-icon">↻</div> | |
| <div class="signal-card-title">Interaction<br>Signals</div> | |
| <div class="signal-card-line"></div> | |
| <div class="signal-card-desc">Watch history, completion, rewatches, searches, skips, and watch duration reveal what members actually do — not just what they say.</div> | |
| </div> | |
| <div class="signal-rail-card"> | |
| <div class="signal-visual sv-collab"></div> | |
| <div class="signal-icon">◎</div> | |
| <div class="signal-card-title">Collaborative<br>Patterns</div> | |
| <div class="signal-card-line"></div> | |
| <div class="signal-card-desc">The system compares you with members who behave similarly and uses those patterns to surface titles you have not discovered yet.</div> | |
| </div> | |
| <div class="signal-rail-card"> | |
| <div class="signal-visual sv-content"></div> | |
| <div class="signal-icon">△</div> | |
| <div class="signal-card-title">Content<br>Metadata</div> | |
| <div class="signal-card-line"></div> | |
| <div class="signal-card-desc">Genre, cast, language, release year, format, and learned title representations help the model understand what a title actually is.</div> | |
| </div> | |
| <div class="signal-rail-card"> | |
| <div class="signal-visual sv-context"></div> | |
| <div class="signal-icon">◌</div> | |
| <div class="signal-card-title">Request-Time<br>Context</div> | |
| <div class="signal-card-line"></div> | |
| <div class="signal-card-desc">Device, time of day, current session state, and recent actions shape what makes sense for this exact request — not just for the user overall.</div> | |
| </div> | |
| <div class="signal-rail-card"> | |
| <div class="signal-visual sv-intent"></div> | |
| <div class="signal-icon">✦</div> | |
| <div class="signal-card-title">Session Intent<br>Inference</div> | |
| <div class="signal-card-line"></div> | |
| <div class="signal-card-desc">A burst of similar plays, quick abandonment, or repeated rewatches helps infer short-term intent and re-rank the next page in real time.</div> | |
| </div> | |
| <div class="signal-rail-card"> | |
| <div class="signal-visual sv-guardrails"></div> | |
| <div class="signal-icon">⌁</div> | |
| <div class="signal-card-title">Negative Signals<br>& Guardrails</div> | |
| <div class="signal-card-line"></div> | |
| <div class="signal-card-desc">Skipping, dropping, or ignoring recommendations matters too. Netflix also says age and gender are not used as recommendation inputs.</div> | |
| </div> | |
| </div> | |
| <div class="signals-dots" aria-hidden="true"> | |
| <span class="dot active"></span> | |
| <span class="dot"></span> | |
| <span class="dot"></span> | |
| <span class="dot"></span> | |
| <span class="dot"></span> | |
| <span class="dot"></span> | |
| </div> | |
| <div class="signals-summary-bar"> | |
| <div class="summary-icon">⌘</div> | |
| <div class="summary-copy">Netflix combines long-term taste, short-term behavior, title understanding, and request-time context to decide what to rank now — while also learning what not to show next.</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 5: OBJECTIVES ══════════════ --> | |
| <section class="slide" id="s5"> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="slide-tag">System Design · What the System Optimizes For</div> | |
| <h2 class="sec">WHAT IS THE SYSTEM<br><span>ACTUALLY TRYING TO DO?</span></h2> | |
| <p class="subtitle">Before architecture, understand the objective function. A modern recommender does not optimize for clicks alone — it balances satisfaction, speed, freshness, and long-term value under product constraints.</p> | |
| <div class="objectives-grid"> | |
| <div class="obj-card featured"> | |
| <div class="obj-icon">🎯</div> | |
| <div class="obj-title">Relevance</div> | |
| <div class="obj-desc">Match each member with titles they are genuinely likely to value, using interaction history, similar-member patterns, metadata, and learned representations instead of a single rule.</div> | |
| <div class="obj-note">PRIMARY · Personalized utility estimation</div> | |
| </div> | |
| <div class="obj-card featured"> | |
| <div class="obj-icon">⚡</div> | |
| <div class="obj-title">Discovery Speed</div> | |
| <div class="obj-desc">Reduce time-to-first-play. A strong homepage gets members to a good decision quickly, so ranking, row ordering, and presentation all help compress search time.</div> | |
| <div class="obj-note">CRITICAL · Lower decision friction</div> | |
| </div> | |
| <div class="obj-card"> | |
| <div class="obj-icon">🔄</div> | |
| <div class="obj-title">Freshness and Adaptation</div> | |
| <div class="obj-desc">The model should react quickly when a member's taste shifts. Recent actions, session intent, and request-time context help prevent stale recommendations from dominating the page.</div> | |
| <div class="obj-note">Fast profile updates from new behavior</div> | |
| </div> | |
| <div class="obj-card"> | |
| <div class="obj-icon">🌱</div> | |
| <div class="obj-title">Long-Term Satisfaction</div> | |
| <div class="obj-desc">The best system is not the one that only gets the next click. It should broaden the member's useful catalog over time and improve the chance they return tomorrow, next week, and next month.</div> | |
| <div class="obj-note">Beyond immediate engagement</div> | |
| </div> | |
| </div> | |
| <div class="explore-exploit"> | |
| <div class="ee-label">Exploration vs. Exploitation</div> | |
| <div class="ee-cols"> | |
| <div> | |
| <div class="ee-col-title ee-exploit">⚡ Exploitation — Maximize near-term confidence</div> | |
| <div class="ee-desc">Rank what the system already believes is most likely to work: familiar genres, reliable franchises, strong collaborative matches, and high-confidence titles for the current session.</div> | |
| </div> | |
| <div> | |
| <div class="ee-col-title ee-explore">🌱 Exploration — Spend a few slots learning</div> | |
| <div class="ee-desc">Reserve limited surface area for calculated bets: adjacent genres, less-exposed titles, new launches, or representation changes that teach the system something new about the member.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 6: HOW IT WORKS (pipeline) ══════════════ --> | |
| <section class="slide" id="s6"> | |
| <div class="bg-glow"></div> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="slide-tag">Systems Design · The Multi-Stage Pipeline</div> | |
| <h2 class="sec">WHAT HAPPENS BEFORE<br><span>YOUR HOMEPAGE APPEARS</span></h2> | |
| <p class="subtitle">Netflix describes personalization operating at the levels of row choice, title selection within rows, ordering, and title representation. Here is how those decisions are orchestrated.</p> | |
| <div class="pipeline-steps"> | |
| <div class="ps-card"><div class="ps-step-num">STEP 01</div><div class="ps-icon">📲</div><div class="ps-title">Context Capture</div><div class="ps-desc">Session begins. Device type, time of day, and current context signals are captured. These immediately affect which rows and content categories get prioritized.</div><div class="ps-arrow">→</div></div> | |
| <div class="ps-card"><div class="ps-step-num">STEP 02</div><div class="ps-icon">📡</div><div class="ps-title">Behavioral Profile Loaded</div><div class="ps-desc">Your full interaction history — watch history, completions, pauses, skips, hover patterns — is retrieved. Recency-weighted: recent signals matter more.</div><div class="ps-arrow">→</div></div> | |
| <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 catalog and narrow hundreds of thousands of titles to a manageable candidate set using approximate nearest-neighbor search and lightweight collaborative filtering.</div><div class="ps-arrow">→</div></div> | |
| <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">Heavier models score each candidate against your behavioral profile. The ranker also considers row context — "Because you watched X" rows use different ranking logic than "Top Picks" rows.</div><div class="ps-arrow">→</div></div> | |
| </div> | |
| <div class="pipeline-steps-row2"> | |
| <div class="ps-card"><div class="ps-step-num">STEP 05</div><div class="ps-icon">🌈</div><div class="ps-title">Row Selection & Ordering</div><div class="ps-desc">Which rows appear on your homepage, and in what order, is itself a ranking decision. The system selects and orders rows based on predicted relevance — not a fixed layout.</div><div class="ps-arrow">→</div></div> | |
| <div class="ps-card"><div class="ps-step-num">STEP 06</div><div class="ps-icon">🖼️</div><div class="ps-title">Artwork / Representation</div><div class="ps-desc">For each selected title, a separate model picks the thumbnail most likely to earn your click — based on your watch history and inferred visual preferences. Same title, different image for different viewers.</div><div class="ps-arrow">→</div></div> | |
| <div class="ps-card"><div class="ps-step-num">STEP 07</div><div class="ps-icon">🧪</div><div class="ps-title">Experimentation Layer</div><div class="ps-desc">A portion of users are silently in experimental variants — different ranking weights, layout configurations, or algorithm versions. The homepage you see may itself be a live A/B test.</div><div class="ps-arrow">→</div></div> | |
| <div class="ps-card"><div class="ps-step-num">STEP 08</div><div class="ps-icon">🖥️</div><div class="ps-title">Homepage Assembled</div><div class="ps-desc">A ranked, diversity-injected, thumbnail-personalized homepage is assembled and rendered. Each user's homepage is the result of decisions made at every layer — row, title, and representation.</div></div> | |
| </div> | |
| <div class="pipeline-footer"> | |
| <div class="pf-stat"><div class="pf-stat-num"><200ms</div><div class="pf-stat-label">End-to-end pipeline latency target</div></div> | |
| <div class="pf-stat"><div class="pf-stat-num">3 layers</div><div class="pf-stat-label">Row · Title · Representation — each ranked separately</div></div> | |
| <div class="pf-stat"><div class="pf-stat-num">250M+</div><div class="pf-stat-label">Strongly personalized homepages per session</div></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 7: ALGORITHMS FOUNDATIONS ══════════════ --> | |
| <section class="slide" id="s7"> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="slide-tag">Algorithms · Foundational Building Blocks</div> | |
| <h2 class="sec">THE TECHNIQUES<br><span>BEHIND THE PIPELINE</span></h2> | |
| <p class="subtitle">Industrial recommender systems are not one algorithm — they are a combination of foundational techniques, each addressing a different part of the problem. Here are the building blocks.</p> | |
| <div class="algo-intro"> | |
| <div class="algo-main-card"> | |
| <div class="algo-num-big">01</div> | |
| <div class="algo-name">Collaborative Filtering</div> | |
| <div class="algo-analogy">"People like you also loved this."</div> | |
| <div class="algo-desc">Find users who watched the same content you did and rated it similarly. Whatever they loved — but you haven't seen yet — gets surfaced. Pure community taste signal at scale.</div> | |
| <div class="algo-visual"> | |
| <span class="hl">You</span> watched: Breaking Bad, Ozark, Mindhunter<br> | |
| <span class="hl">Similar users</span> also watched: The Wire, Narcos<br> | |
| → <span class="hl">Recommendation</span>: The Wire (score: 0.91) | |
| </div> | |
| <div class="algo-limit">⚠ Limitation: Sparse history for new users; can create echo chambers if used alone.</div> | |
| </div> | |
| <div class="algo-main-card"> | |
| <div class="algo-num-big">02</div> | |
| <div class="algo-name">Content-Based Filtering</div> | |
| <div class="algo-analogy">"More of what you already love."</div> | |
| <div class="algo-desc">Analyze attributes of content you've enjoyed — genre, director, cast, themes, pacing, era — and find titles sharing those attributes. Works for new users with no community data yet.</div> | |
| <div class="algo-visual"> | |
| You loved: <span class="hl">Dark</span> (sci-fi, complex, non-linear)<br> | |
| Similar attributes: <span class="hl">1899</span>, <span class="hl">Travelers</span><br> | |
| → <span class="hl">Recommendation</span>: 1899 (metadata match: 0.87) | |
| </div> | |
| <div class="algo-limit">⚠ Limitation: Can over-specialize; misses cross-genre discoveries that users might love.</div> | |
| </div> | |
| <div class="algo-main-card"> | |
| <div class="algo-num-big">03</div> | |
| <div class="algo-name">Deep Learning Ranking</div> | |
| <div class="algo-analogy">"Precise scoring at candidate scale."</div> | |
| <div class="algo-desc">After candidate generation, heavier neural models (NCF, Transformers, GNNs) score each candidate precisely. They combine behavioral, collaborative, and content signals in a unified representation.</div> | |
| <div class="algo-visual"> | |
| Candidates: <span class="hl">~500 titles</span><br> | |
| Models score each against your profile<br> | |
| → <span class="hl">Top 40–60 shown</span> on homepage | |
| </div> | |
| <div class="algo-limit">⚠ Too expensive to run over the full catalog — only applied after fast retrieval narrows the field.</div> | |
| </div> | |
| </div> | |
| <div class="algo-mf-card"> | |
| <div class="algo-mf-matrix"> | |
| <span class="h">Matrix Factorization</span><br> | |
| <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> | |
| <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> | |
| <span class="u">Priya</span> <span class="u"> ?</span> <span class="u"> ?</span> <span class="v"> 5</span> <span class="u"> ?</span><br> | |
| <span class="u">Rahul</span> <span class="v"> 4</span> <span class="u"> ?</span> <span class="u"> ?</span> <span class="v"> 5</span> | |
| </div> | |
| <div> | |
| <div class="algo-name" style="font-size:1rem;margin-bottom:.5rem;">Matrix Factorization — Filling the Gaps</div> | |
| <div class="algo-desc" style="font-size:.82rem;color:var(--muted);line-height:1.65;">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" and uses those to predict how much you'd enjoy something you've never watched.</div> | |
| <div style="margin-top:.8rem;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--red);">USER_VECTOR · ITEM_VECTOR = PREDICTED SCORE</div> | |
| </div> | |
| <div> | |
| <div class="algo-name" style="font-size:1rem;margin-bottom:.5rem;">The Bigger Picture</div> | |
| <div class="algo-desc" style="font-size:.82rem;color:var(--muted);line-height:1.65;">Collaborative filtering was foundational — especially in the Netflix Prize era — but it is one building block among many. The full product experience involves candidate generation, multi-stage ranking, row assembly, and representation decisions working together. No single algorithm "is" Netflix.</div> | |
| </div> | |
| </div> | |
| <div class="algo-footer-note"><strong>Key framing:</strong> Each of these techniques is useful but incomplete on its own. Industrial systems combine collaborative, content-based, and contextual signals, then add ranking and representation layers. The interaction between them is what produces the homepage you experience.</div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 8: USER PROFILES / COLD START ══════════════ --> | |
| <section class="slide" id="s8"> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="slide-tag">Personalization · Profiles and Cold Start</div> | |
| <h2 class="sec">WHAT HAPPENS WHEN<br><span>NETFLIX DOESN'T KNOW YOU YET?</span></h2> | |
| <p class="subtitle">Every new user — and every new profile — presents the cold start problem. Here is how Netflix bootstraps personalization when behavioral history is sparse or absent.</p> | |
| <div class="coldstart-layout"> | |
| <div class="coldstart-left"> | |
| <div class="coldstart-steps"> | |
| <div class="cs-step"> | |
| <div class="cs-num">01</div> | |
| <div> | |
| <div class="cs-title">New account: initial title selection</div> | |
| <div class="cs-desc">When a new profile is created, Netflix may offer users a few titles to select to jump-start recommendations. These choices seed the initial taste model before any watch history exists.</div> | |
| </div> | |
| </div> | |
| <div class="cs-step"> | |
| <div class="cs-num">02</div> | |
| <div> | |
| <div class="cs-title">If skipped: diverse and popular starting set</div> | |
| <div class="cs-desc">If initial selection is skipped, Netflix starts with a diverse, popular set of titles that spans multiple genres — maximizing the chance that something resonates quickly and generates the first real behavioral signals.</div> | |
| </div> | |
| </div> | |
| <div class="cs-step"> | |
| <div class="cs-num">03</div> | |
| <div> | |
| <div class="cs-title">Early signals rapidly update the model</div> | |
| <div class="cs-desc">Even a few completions, pauses, or skips quickly override the default starting set. The system is designed to learn fast from sparse data — a critical property when every second of friction risks churn.</div> | |
| </div> | |
| </div> | |
| <div class="cs-step"> | |
| <div class="cs-num">04</div> | |
| <div> | |
| <div class="cs-title">Separate profiles prevent leakage</div> | |
| <div class="cs-desc">Separate household profiles mean a child's viewing history doesn't distort an adult's recommendations. Each profile maintains its own behavioral model independently.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="recency-note"><strong>Recency weighting:</strong> Recent interactions carry more weight than older ones. Later behavior supersedes early choices — your taste model today reflects who you are now, not who you were when you joined.</div> | |
| </div> | |
| <div> | |
| <div class="profiles-grid-v3"> | |
| <div class="profile-card user-a"> | |
| <div class="profile-avatar avatar-a">🕵️</div> | |
| <div class="profile-name">ARJUN</div> | |
| <div class="profile-type type-a">Crime Drama · Late Night</div> | |
| <div class="pw-label">Watch History</div> | |
| <span class="show-pill">Breaking Bad</span> | |
| <span class="show-pill">Mindhunter</span> | |
| <span class="show-pill">True Detective</span> | |
| <div class="mini-nf-card"> | |
| <div class="nf-ui-header"><span class="nf-ui-logo">NETFLIX</span><span class="nf-ui-user">👤 Arjun</span></div> | |
| <div class="nf-row-label">Top Picks for Arjun</div> | |
| <div class="nf-thumbnails"> | |
| <div class="nf-thumb t1"><span>OZARK</span></div> | |
| <div class="nf-thumb t2"><span>THE WIRE</span></div> | |
| <div class="nf-thumb t3"><span>NARCOS</span></div> | |
| <div class="nf-thumb t5"><span>HANNIBAL</span></div> | |
| <div class="nf-thumb t4"><span>OZARK S4</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="profile-card user-b"> | |
| <div class="profile-avatar avatar-b">😄</div> | |
| <div class="profile-name">PRIYA</div> | |
| <div class="profile-type type-b">Comedy · Casual Viewer</div> | |
| <div class="pw-label">Watch History</div> | |
| <span class="show-pill">The Office</span> | |
| <span class="show-pill">Parks & Rec</span> | |
| <span class="show-pill">Brooklyn 99</span> | |
| <div class="mini-nf-card"> | |
| <div class="nf-ui-header"><span class="nf-ui-logo">NETFLIX</span><span class="nf-ui-user">👤 Priya</span></div> | |
| <div class="nf-row-label">Top Picks for Priya</div> | |
| <div class="nf-thumbnails"> | |
| <div class="nf-thumb t7"><span>SCHITT'S CREEK</span></div> | |
| <div class="nf-thumb t6"><span>COMMUNITY</span></div> | |
| <div class="nf-thumb t9"><span>ABBOTT ELEM.</span></div> | |
| <div class="nf-thumb t3"><span>FLEABAG</span></div> | |
| <div class="nf-thumb t4"><span>DERRY GIRLS</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="profile-card user-c"> | |
| <div class="profile-avatar avatar-c">🚀</div> | |
| <div class="profile-name">RAHUL</div> | |
| <div class="profile-type type-c">Sci-Fi · Weekend Marathoner</div> | |
| <div class="pw-label">Watch History</div> | |
| <span class="show-pill">Dark</span> | |
| <span class="show-pill">The Expanse</span> | |
| <span class="show-pill">Severance</span> | |
| <div class="mini-nf-card"> | |
| <div class="nf-ui-header"><span class="nf-ui-logo">NETFLIX</span><span class="nf-ui-user">👤 Rahul</span></div> | |
| <div class="nf-row-label">Top Picks for Rahul</div> | |
| <div class="nf-thumbnails"> | |
| <div class="nf-thumb t10"><span>WESTWORLD</span></div> | |
| <div class="nf-thumb t5"><span>ALT. CARBON</span></div> | |
| <div class="nf-thumb t1"><span>SENSE8</span></div> | |
| <div class="nf-thumb t8"><span>THE OA</span></div> | |
| <div class="nf-thumb t4"><span>PANTHEON</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 9: ARTWORK ══════════════ --> | |
| <section class="slide" id="s9"> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="slide-tag">Decode the Tech · Representation Layer</div> | |
| <h2 class="sec">RECOMMENDATION IS NOT ONLY<br><span>WHAT TO SHOW — BUT HOW</span></h2> | |
| <p class="subtitle">Artwork personalization is a separate decision layer. The same title can be represented with different thumbnails to different viewers — selected by a ranking model optimizing for your individual click behavior.</p> | |
| <div class="artwork-layout"> | |
| <div> | |
| <div class="thumb-showcase"> | |
| <div class="thumb-variant tv1"><div class="tv-ctr">CTR 4.2%</div><div class="tv-label">MYSTERIOUS<br>FOREST PATH</div></div> | |
| <div class="thumb-variant tv2"><div class="tv-ctr">CTR 6.8%</div><div class="tv-label">LEAD ACTOR<br>CLOSE-UP</div></div> | |
| <div class="thumb-variant tv3"><div class="tv-ctr">CTR 3.1%</div><div class="tv-label">ACTION<br>EXPLOSION</div></div> | |
| <div class="thumb-variant tv4"><div class="tv-ctr">CTR 5.5%</div><div class="tv-label">EMOTIONAL<br>CONFRONTATION</div></div> | |
| <div class="thumb-variant tv5"><div class="tv-ctr">CTR 7.3%</div><div class="tv-label">VILLAIN<br>SILHOUETTE</div></div> | |
| <div class="thumb-variant tv6"><div class="tv-ctr">CTR 4.9%</div><div class="tv-label">GROUP<br>ENSEMBLE</div></div> | |
| </div> | |
| <div class="showcase-caption">Six possible thumbnails for the same title. You see the one predicted to earn your click.</div> | |
| <div class="artwork-layer-note"><strong>Why this matters architecturally:</strong> Artwork selection is not a cosmetic detail — it is a distinct ML decision operating after title selection. A title that was correctly recommended can still fail to get watched if its visual representation doesn't resonate. The full personalization chain runs: what to show → how to rank → how to represent.</div> | |
| <div style="background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1.2rem;margin-top:1rem;"> | |
| <div style="font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.8rem;font-weight:700;">How artwork personalization works</div> | |
| <div style="display:flex;flex-direction:column;gap:.5rem;"> | |
| <div style="font-size:.78rem;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</div> | |
| <div style="font-size:.78rem;color:var(--muted);line-height:1.55;display:flex;gap:.6rem;"><span style="color:var(--red);flex-shrink:0;">2.</span> Each variant is tested across user segments to measure click-through rate</div> | |
| <div style="font-size:.78rem;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 viewer profile</div> | |
| <div style="font-size:.78rem;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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="artwork-facts"> | |
| <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 consistent engagement with content featuring certain actors, the 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> | |
| <div class="art-fact"><div class="art-fact-icon">😮</div><div><div class="art-fact-title">Emotion and Expression Signals</div><div class="art-fact-body">Computer vision analyzes emotional expression in each thumbnail candidate. The model learns correlations between visual emotion cues and engagement for different viewer profiles — action-oriented viewers, drama fans, and others respond differently.</div><div class="art-fact-tag">CV + CLICK DATA → EMOTION RANKING</div></div></div> | |
| <div class="art-fact"><div class="art-fact-icon">🎨</div><div><div class="art-fact-title">Color, Composition, and Layout</div><div class="art-fact-body">Beyond faces, the system tracks engagement patterns related to color palette, composition style, and image density. These visual features are encoded and matched against click history.</div><div class="art-fact-tag">IMAGE FEATURES → CLICK PREDICTION</div></div></div> | |
| <div class="art-fact"><div class="art-fact-icon">🧪</div><div><div class="art-fact-title">Continuous Experimentation</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 updated as preferences shift. Netflix has discussed contextual bandit approaches in this context — balancing known-good thumbnails with exploration of new variants.</div><div class="art-fact-tag">ONGOING EXPERIMENTATION · BANDIT-STYLE OPTIMIZATION</div></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 10: TRADE-OFFS AND LIMITS ══════════════ --> | |
| <section class="slide" id="s10"> | |
| <div class="bg-glow"></div> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="slide-tag">Intellectual Depth · What Makes This Hard</div> | |
| <h2 class="sec">LIMITS AND<br><span>TRADE-OFFS</span></h2> | |
| <p class="subtitle">Understanding where a system struggles is as important as understanding where it succeeds. These are the genuinely hard problems in large-scale personalized recommendation.</p> | |
| <div class="tradeoffs-grid"> | |
| <div class="to-card"> | |
| <div class="to-icon">🧊</div> | |
| <div class="to-title">Cold Start</div> | |
| <div class="to-desc">New users and new profiles have no behavioral history. The system must bootstrap from sparse signals — initial title selections, early completions — without misguiding the first experience. Poor cold start leads directly to churn.</div> | |
| <div class="to-tension">Tension: Personalize fast vs. need data to personalize</div> | |
| </div> | |
| <div class="to-card"> | |
| <div class="to-icon">🫧</div> | |
| <div class="to-title">Filter Bubbles</div> | |
| <div class="to-desc">Heavy personalization can narrow your perceived catalog. A system that only exploits known preferences may never surface content you would love but would never have searched for yourself. The exploration–exploitation balance is a design choice with real cultural consequences.</div> | |
| <div class="to-tension">Tension: Relevance vs. discovery breadth</div> | |
| </div> | |
| <div class="to-card"> | |
| <div class="to-icon">🔄</div> | |
| <div class="to-title">Shifting Tastes</div> | |
| <div class="to-desc">Viewing habits change over time — moods, life stages, seasons, shared accounts. A profile built on last year's behavior may not reflect this week's preferences. Recency weighting helps, but sparse new signals can leave the model lagging.</div> | |
| <div class="to-tension">Tension: Historical accuracy vs. current relevance</div> | |
| </div> | |
| <div class="to-card"> | |
| <div class="to-icon">📐</div> | |
| <div class="to-title">Measuring Success</div> | |
| <div class="to-desc">Optimizing for clicks is not the same as optimizing for satisfaction. A thumbnail that earns a click but leads to an abandoned show is a bad recommendation — even though it "won" on the short-term metric. Measuring long-term satisfaction, not only immediate engagement, is an active research challenge.</div> | |
| <div class="to-tension">Tension: Short-term clicks vs. long-term satisfaction</div> | |
| </div> | |
| <div class="to-card"> | |
| <div class="to-icon">⚖️</div> | |
| <div class="to-title">Content Fairness</div> | |
| <div class="to-desc">A ranking system that promotes what gets clicks will systematically surface popular content over niche content — regardless of quality. This shapes which creators and titles are commercially viable on the platform, raising questions about the system's broader cultural role.</div> | |
| <div class="to-tension">Tension: Engagement optimization vs. content diversity</div> | |
| </div> | |
| <div class="to-card"> | |
| <div class="to-icon">🔒</div> | |
| <div class="to-title">Opacity and Trust</div> | |
| <div class="to-desc">Users generally cannot see why a title is being recommended. The system explains itself only partially (e.g., "because you watched X"). Explainability — giving users genuine insight into and control over their recommendation profile — remains an open design and engineering problem.</div> | |
| <div class="to-tension">Tension: System complexity vs. user understanding</div> | |
| </div> | |
| </div> | |
| <div class="tradeoffs-insight"> | |
| <div class="ti-card hard"> | |
| <div class="ti-label hard-label">Genuinely hard problems</div> | |
| <div class="ti-items"> | |
| <div class="ti-item"><span class="ti-dot-r">▸</span>No ground truth for "satisfaction" — only behavioral proxies</div> | |
| <div class="ti-item"><span class="ti-dot-r">▸</span>Sparse signals in new accounts; dense signals in old ones that may be stale</div> | |
| <div class="ti-item"><span class="ti-dot-r">▸</span>Optimizing for engagement at scale can shape culture in ways the optimization objective never specified</div> | |
| </div> | |
| </div> | |
| <div class="ti-card nuance"> | |
| <div class="ti-label nuance-label">Where the field is heading</div> | |
| <div class="ti-items"> | |
| <div class="ti-item"><span class="ti-dot-g">▸</span>Foundation models that unify intent prediction and recommendation (Netflix's FM-Intent, 2025)</div> | |
| <div class="ti-item"><span class="ti-dot-g">▸</span>Explainable recommendations that surface reasoning to users</div> | |
| <div class="ti-item"><span class="ti-dot-g">▸</span>Conversational interfaces: "Show me dark sci-fi I can finish this weekend"</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 11: DEMO ══════════════ --> | |
| <section class="slide" id="s11"> | |
| <div class="bg-glow"></div> | |
| <div class="content demo-container"> | |
| <div class="demo-badge">LIVE DEMO</div> | |
| <div class="demo-title">SEE IT<br><span>IN ACTION</span></div> | |
| <p class="demo-subtitle">This section is reserved for an interactive live demonstration. Map each demo element to a specific stage of the pipeline from slide 6.</p> | |
| <div class="demo-slots"> | |
| <div class="demo-slot"> | |
| <div class="ds-icon">🏠</div> | |
| <div class="ds-title">Homepage Contrast Demo</div> | |
| <div class="ds-desc">Switch between two Netflix profiles live — show how rows, ordering, and thumbnails differ. Map each visible difference to the pipeline stage that produced it: row selection, title ranking, or artwork personalization.</div> | |
| <div class="ds-status">→ Maps to: Steps 05, 06 of pipeline</div> | |
| </div> | |
| <div class="demo-slot"> | |
| <div class="ds-icon">🖼️</div> | |
| <div class="ds-title">Thumbnail Personalization</div> | |
| <div class="ds-desc">Use an incognito browser alongside a logged-in session to show how the same title can display different thumbnails. This demonstrates the representation layer operating independently of title selection.</div> | |
| <div class="ds-status">→ Maps to: Step 06 · Artwork layer</div> | |
| </div> | |
| <div class="demo-slot"> | |
| <div class="ds-icon">🧮</div> | |
| <div class="ds-title">Collaborative Filtering Intuition</div> | |
| <div class="ds-desc">A visual walkthrough of how user taste clusters form and how a recommendation propagates from one user's behavior to another's homepage — connecting the algorithm slide to a live visible outcome.</div> | |
| <div class="ds-status">→ Maps to: Step 03 · Candidate generation</div> | |
| </div> | |
| <div class="demo-slot"> | |
| <div class="ds-icon">📡</div> | |
| <div class="ds-title">Signal Demonstration</div> | |
| <div class="ds-desc">Walk through the four signal categories from slide 4 on a live profile — identifying which behavioral signals are most likely driving specific row or title choices visible in the current homepage.</div> | |
| <div class="ds-status">→ Maps to: Step 02 · Behavioral signals</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 12: TAKEAWAYS ══════════════ --> | |
| <section class="slide" id="s12"> | |
| <div class="content" style="width:100%;max-width:1200px;margin:0 auto;"> | |
| <div class="slide-tag">Reflection · Technical Conclusions</div> | |
| <h2 class="sec">WHAT WE<br><span>ACTUALLY LEARNED</span></h2> | |
| <p class="subtitle">Specific, technically grounded conclusions — not broad statements about AI, but precise observations about how this system works.</p> | |
| <div class="takeaways-layout"> | |
| <div class="takeaways-list"> | |
| <div class="takeaway"><div class="ta-num">01</div><div><div class="ta-title">Familiar interfaces hide layered optimization systems</div><div class="ta-desc">The Netflix homepage feels natural because three separate ranking decisions — row selection, title ordering, and thumbnail representation — are each optimized independently and assembled in under 200ms.</div></div></div> | |
| <div class="takeaway"><div class="ta-num">02</div><div><div class="ta-title">Recommendation is not just item ranking</div><div class="ta-desc">Netflix personalizes at the row level, the title level, and the visual representation level. Understanding a recommender system means understanding all three — not just which titles appear.</div></div></div> | |
| <div class="takeaway"><div class="ta-num">03</div><div><div class="ta-title">Behavioral signals, not demographics, drive the system</div><div class="ta-desc">Age and gender are not used. What you watch, how you watch it, when you abandon it, and how long you hover — these implicit behavioral signals are the actual inputs to personalization.</div></div></div> | |
| <div class="takeaway"><div class="ta-num">04</div><div><div class="ta-title">No single algorithm is "the Netflix algorithm"</div><div class="ta-desc">Collaborative filtering, content-based methods, deep learning rankers, and artwork selection models each play distinct roles at different pipeline stages. Industrial recommendation is orchestration, not a single technique.</div></div></div> | |
| <div class="takeaway"><div class="ta-num">05</div><div><div class="ta-title">The magic is not one algorithm — it is orchestration of many small decisions</div><div class="ta-desc">Product experience emerges from ranking, layout, and representation working together across a multi-stage pipeline. The quality of the homepage is the quality of every handoff between those stages.</div></div></div> | |
| </div> | |
| <div class="ta-right"> | |
| <div class="ta-sources"> | |
| <div class="ta-sources-label">Sources for this lecture</div> | |
| <div class="source-link"><div class="source-icon">📖</div><div><div class="source-name">Netflix Help Center</div><div class="source-desc">How Netflix's Recommendations System Works — official explanation of signals, rows, rankings, and what is not used</div></div></div> | |
| <div class="source-link"><div class="source-icon">📝</div><div><div class="source-name">Netflix Tech Blog</div><div class="source-desc">netflixtechblog.com — engineering deep dives on recommendation, artwork personalization, and foundation models</div></div></div> | |
| <div class="source-link"><div class="source-icon">🔬</div><div><div class="source-name">Netflix Research</div><div class="source-desc">research.netflix.com — published papers on personalization, adaptive recommendation, and FM-Intent (2025)</div></div></div> | |
| </div> | |
| <div class="final-callout"> | |
| <div class="fc-quote">"THE MAGIC IS NOT ONE ALGORITHM — IT IS THE ORCHESTRATION OF MANY SMALL DECISIONS."</div> | |
| <div class="fc-sub">Familiar interfaces hide layered optimization systems. Recommenders shape discovery, not just click prediction. Product experience comes from ranking, layout, and representation working together.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════════ SLIDE 13: END ══════════════ --> | |
| <section class="slide" id="s13"> | |
| <div class="bg-glow"></div> | |
| <div class="content" style="width:100%;max-width:900px;text-align:center;"> | |
| <div class="final-logo">NETFLIX</div> | |
| <div class="final-tag">Decode the Tech Series · 2026</div> | |
| <div class="final-qa">QUESTIONS?</div> | |
| <div class="final-sub">Netflix looks simple because the complexity is hidden well. Every scroll, every pause, every abandoned episode — the system is reading all of it, at every layer.</div> | |
| <div style="display:flex;gap:.9rem;justify-content:center;margin-top:2.5rem;flex-wrap:wrap;"> | |
| <span style="padding:.5rem 1rem;border:1px solid var(--border);border-radius:6px;font-size:.72rem;color:var(--muted);font-family:'JetBrains Mono',monospace;">help.netflix.com — How Recommendations Work</span> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- NAVIGATION --> | |
| <div class="slide-nav"> | |
| <button class="btn-nav" id="prevBtn" onclick="changeSlide(-1)" disabled>← Prev</button> | |
| <button class="btn-nav" id="nextBtn" onclick="changeSlide(1)">Next →</button> | |
| </div> | |
| <script> | |
| const slides = document.querySelectorAll('.slide'); | |
| const navBtns = document.querySelectorAll('.nav-links button'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const slideCounter = document.getElementById('slideCounter'); | |
| let current = 0; | |
| function goTo(idx) { | |
| slides[current].classList.remove('active'); | |
| navBtns[current].classList.remove('active'); | |
| current = Math.max(0, Math.min(slides.length - 1, idx)); | |
| slides[current].classList.add('active'); | |
| navBtns[current].classList.add('active'); | |
| document.getElementById('prevBtn').disabled = current === 0; | |
| document.getElementById('nextBtn').disabled = current === slides.length - 1; | |
| const pct = (current / (slides.length - 1)) * 100; | |
| progressBar.style.width = pct + '%'; | |
| slideCounter.textContent = String(current + 1).padStart(2,'0') + ' / ' + String(slides.length).padStart(2,'0'); | |
| window.scrollTo(0, 0); | |
| } | |
| function changeSlide(dir) { goTo(current + dir); } | |
| document.addEventListener('keydown', e => { | |
| if (e.key === 'ArrowRight' || e.key === 'ArrowDown') changeSlide(1); | |
| if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') changeSlide(-1); | |
| }); | |
| // Init | |
| navBtns[0].classList.add('active'); | |
| progressBar.style.width = '0%'; | |
| </script> | |
| </body> | |
| </html> | |