Spaces:
Running
Running
File size: 90,193 Bytes
23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 4f90172 23aedef 4f90172 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 4f90172 1f37349 23aedef 1f37349 23aedef 1f37349 4f90172 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef dea8d25 1f37349 23aedef 1f37349 23aedef dea8d25 1f37349 dea8d25 23aedef dea8d25 23aedef dea8d25 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef dea8d25 1f37349 dea8d25 23aedef dea8d25 23aedef 4f90172 1f37349 4f90172 23aedef 4f90172 23aedef 4f90172 23aedef 4f90172 23aedef 1f37349 23aedef 1f37349 dea8d25 1f37349 dea8d25 1f37349 dea8d25 1f37349 dea8d25 1f37349 dea8d25 1f37349 dea8d25 1f37349 dea8d25 1f37349 dea8d25 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 23aedef 1f37349 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 | <!DOCTYPE html>
<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>
|