/* StreamForge Cinema.
   Committed dark room: this is a cinema, it does not follow the OS theme. */
:root{
  --ink:#0A0A0B; --panel:#141416; --raise:#1C1C20; --edge:#2A2A30;
  --text:#F2F2F3; --dim:#8A8A93; --dimmer:#5C5C66;
  --hot:#E0452A; --hot-dim:#8E2A1A; --good:#3FB950;
  --nav-h:64px;
  --r:4px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--text)}
body{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
     overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:60;display:flex;align-items:center;
     gap:26px;padding:0 42px;transition:background .25s,backdrop-filter .25s;
     background:linear-gradient(180deg,rgba(10,10,11,.92),rgba(10,10,11,0))}
.navsub{display:none}
.nav.solid{background:rgba(10,10,11,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
.brand{font-weight:800;letter-spacing:-.02em;font-size:20px;margin-right:6px}
.brand span{color:var(--hot)}
.nl{font-size:14px;color:var(--dim);font-weight:500;transition:color .15s}
.nl:hover,.nl.on{color:var(--text)}
.srch{margin-left:auto;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);
      border:1px solid var(--edge);border-radius:2px;padding:0 12px;height:36px;width:330px;
      transition:border-color .2s,background .2s}
.srch:focus-within{border-color:var(--hot);background:rgba(255,255,255,.09)}
.srch svg{width:15px;height:15px;fill:none;stroke:var(--dim);stroke-width:2;flex:none}
.srch input{border:0;background:none;color:var(--text);font-size:13.5px;width:100%;outline:none}
.srch input::placeholder{color:var(--dimmer)}
.who{display:flex;align-items:center;gap:11px}
.av{width:30px;height:30px;border-radius:2px;background:var(--hot);display:grid;place-items:center;
    font-weight:700;font-size:14px}
.out{font-size:12px;color:var(--dim)}
.out:hover{color:var(--text)}

/* ---------- billboard ---------- */
.bill{position:relative;height:74vh;min-height:520px;max-height:760px;display:flex;align-items:flex-end;
      padding:0 42px 88px}
.bill-img{position:absolute;inset:0;overflow:hidden;background:var(--panel)}
/* The fade is a CSS animation, not a class JavaScript has to remember to add: the
   billboard is the first thing on the page and must never depend on a script to
   become visible. */
.bill-img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
              animation:billin .8s ease-out both}
@keyframes billin{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bill-img img{animation:none}}
.bill-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,11,.96) 0%,rgba(10,10,11,.72) 38%,rgba(10,10,11,.1) 70%),
             linear-gradient(0deg,var(--ink) 2%,rgba(10,10,11,0) 46%)}
.bill-in{position:relative;max-width:620px}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--hot);
        text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.kicker::before{content:"";width:22px;height:1px;background:var(--hot)}
.bill h1{font-size:clamp(38px,5.2vw,68px);line-height:.98;margin:0 0 16px;font-weight:800;
         letter-spacing:-.03em;text-wrap:balance}
.meta{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--dim);margin-bottom:16px;
      font-family:"IBM Plex Mono",monospace}
.meta .sc{color:var(--good);font-weight:500}
.bill p{font-size:15px;line-height:1.6;color:#C9C9D0;margin:0 0 26px;max-width:540px}
.cta{display:flex;gap:11px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 26px;border-radius:2px;
     font-weight:600;font-size:14.5px;transition:transform .12s,background .15s,border-color .15s}
.btn:active{transform:scale(.97)}
.btn-play{background:var(--text);color:#0A0A0B}
.btn-play:hover{background:#fff}
.btn-ghost{background:rgba(255,255,255,.1);border:1px solid var(--edge);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn svg{width:17px;height:17px;fill:currentColor}

/* ---------- rows ---------- */
.rows{position:relative;z-index:2;margin-top:-46px;padding-bottom:70px}
.row{margin:0 0 42px}
.row-h{display:flex;align-items:baseline;gap:13px;padding:0 42px 13px}
.row-h h2{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em}
.row-h .note{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dimmer);
             letter-spacing:.04em}
.strip{display:flex;gap:9px;padding:24px 42px;overflow-x:auto;scroll-behavior:smooth;
       scrollbar-width:none;margin:-24px 0}
.strip::-webkit-scrollbar{display:none}
.card{flex:0 0 268px;position:relative;border-radius:var(--r);overflow:hidden;background:var(--panel);
      cursor:pointer;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s;
      transform-origin:center}
.card:hover{transform:scale(1.13);z-index:20;box-shadow:0 18px 44px rgba(0,0,0,.72)}
.card .shot{aspect-ratio:16/9;background:var(--raise)}
.card .shot img{width:100%;height:100%;object-fit:cover}
/* The title used to appear only on hover, which meant a phone never showed it at
   all and a glance at the page showed artwork with no names. It stays visible; the
   scrim deepens on hover instead. */
.card .info{position:absolute;inset:auto 0 0 0;padding:30px 12px 11px;
  background:linear-gradient(0deg,rgba(8,8,9,.94) 24%,rgba(8,8,9,.55) 62%,rgba(8,8,9,0));
  transition:background .22s}
.card:hover .info{background:linear-gradient(0deg,rgba(8,8,9,.99) 30%,rgba(8,8,9,.7) 70%,rgba(8,8,9,0))}
.card .info .t{font-size:13.5px;font-weight:600;line-height:1.25;margin-bottom:4px;
               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .info .s{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--dim)}
.badge{position:absolute;top:8px;left:8px;background:var(--hot);color:#fff;font-size:9px;
       font-weight:700;letter-spacing:.1em;padding:3px 6px;border-radius:2px;
       font-family:"IBM Plex Mono",monospace}

/* portrait variant for the top-10 style row */
.card.port{flex:0 0 172px}
/* A poster already carries its own title, so repeating it over the artwork just
   fights the art. Portrait cards keep the hover reveal. */
.card.port .info{opacity:0;transition:opacity .22s}
.card.port:hover .info{opacity:1}
.card.port .shot{aspect-ratio:2/3}
.rank{display:flex;align-items:flex-end;flex:0 0 auto;margin-right:-30px;position:relative;z-index:1}
.rank span{font-size:118px;font-weight:800;line-height:.72;color:transparent;
           -webkit-text-stroke:2px var(--edge);letter-spacing:-.06em}

/* ---------- grid (browse / search) ---------- */
.wrap{padding:calc(var(--nav-h) + 40px) 42px 80px;max-width:1680px;margin:0 auto}
.page-h{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.page-h h1{font-size:30px;font-weight:800;letter-spacing:-.025em;margin:0}
.page-sub{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--dim);margin-bottom:30px}
.grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
.grid .card{flex:none}
.grid .card .shot{aspect-ratio:2/3}
.grid .card:hover{transform:scale(1.07)}
.empty{padding:70px 0;text-align:center;color:var(--dim)}
.empty h3{color:var(--text);font-size:19px;margin:0 0 8px}

/* ---------- detail ---------- */
.hero{position:relative;min-height:66vh;display:flex;align-items:flex-end;padding:0 42px 52px}
.hero-img{position:absolute;inset:0;overflow:hidden;background:var(--panel)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,11,.95),rgba(10,10,11,.55) 55%,rgba(10,10,11,.2)),
             linear-gradient(0deg,var(--ink) 1%,rgba(10,10,11,0) 52%)}
.hero-in{position:relative;display:flex;gap:34px;align-items:flex-end;width:100%}
.hero-poster{flex:0 0 212px;border-radius:var(--r);overflow:hidden;box-shadow:0 22px 52px rgba(0,0,0,.6);
             border:1px solid var(--edge)}
.hero-txt{flex:1;max-width:680px}
.hero-txt h1{font-size:clamp(32px,4.2vw,54px);line-height:1;margin:0 0 14px;font-weight:800;
             letter-spacing:-.03em;text-wrap:balance}
.hero-txt p{font-size:15px;line-height:1.62;color:#C9C9D0;margin:0 0 24px}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--dim);
      border:1px solid var(--edge);border-radius:2px;padding:4px 9px;text-transform:uppercase}

/* ---------- seasons / episodes ---------- */
.sec{padding:44px 42px;max-width:1280px}
.sec h2{font-size:20px;font-weight:700;margin:0 0 18px;letter-spacing:-.01em}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}
.tab{padding:8px 15px;border:1px solid var(--edge);border-radius:2px;font-size:13px;color:var(--dim);
     font-weight:500;transition:.15s}
.tab:hover{color:var(--text);border-color:var(--dim)}
.tab.on{background:var(--text);color:#0A0A0B;border-color:var(--text)}
.eps{display:flex;flex-direction:column;gap:2px}
.ep{display:grid;grid-template-columns:44px 168px 1fr auto;gap:18px;align-items:center;
    padding:13px 14px;border-radius:var(--r);cursor:pointer;transition:background .15s}
.ep:hover{background:var(--raise)}
.ep .n{font-family:"IBM Plex Mono",monospace;font-size:17px;color:var(--dimmer);text-align:center}
.ep .th{aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:var(--raise);position:relative}
.ep .th img{width:100%;height:100%;object-fit:cover}
.ep .t{font-size:14.5px;font-weight:600;margin-bottom:4px}
.ep .o{font-size:12.5px;color:var(--dim);line-height:1.5;
       display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep .r{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dimmer);white-space:nowrap}

/* ---------- player ---------- */
.player{position:fixed;inset:0;background:#000;z-index:100;display:none}
.player.on{display:block}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.pback{position:absolute;top:22px;left:26px;z-index:5;font-size:14px;color:var(--dim);
       display:flex;align-items:center;gap:8px}
.pback:hover{color:var(--text)}
.pmeta{position:absolute;left:34px;bottom:96px;z-index:4;max-width:60%;pointer-events:none}
.pmeta h2{font-size:30px;font-weight:800;margin:0 0 7px;letter-spacing:-.02em}
.pmeta .rel{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--dim)}
.pmeta{transition:opacity .6s ease}
.pmeta.meta-out{opacity:0;pointer-events:none}
.live{display:inline-block;background:var(--hot);color:#fff;font-size:9px;font-weight:700;
      letter-spacing:.1em;padding:3px 7px;border-radius:2px;margin-left:11px;vertical-align:middle;
      font-family:"IBM Plex Mono",monospace}

/* engine HUD */
.hud{transition:opacity .6s ease}
.hud.hud-out{opacity:0;pointer-events:none}
.hud{position:absolute;top:70px;right:26px;width:342px;z-index:5;background:rgba(14,14,16,.93);
     border:1px solid var(--edge);border-radius:var(--r);backdrop-filter:blur(12px);overflow:hidden;
     font-family:"IBM Plex Mono",monospace}
.hud-h{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;
       border-bottom:1px solid var(--edge);font-size:10.5px;letter-spacing:.13em;color:var(--dim)}
.hud-h .dot{width:6px;height:6px;border-radius:50%;background:var(--good);display:inline-block;
            margin-right:7px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.step{display:flex;justify-content:space-between;gap:12px;padding:6px 14px;font-size:11px}
.step .l{color:var(--dim)}.step .v{color:var(--text)}
.step.pend .l,.step.pend .v{color:var(--dimmer)}
.hud-s{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--edge)}
.hud-s div{padding:11px 12px;text-align:center;border-right:1px solid var(--edge)}
.hud-s div:last-child{border-right:0}
.hud-s .k{font-size:9px;letter-spacing:.1em;color:var(--dimmer);margin-bottom:5px}
.hud-s .n{font-size:17px;font-weight:600}

/* spinner while resolving */
.resolving{position:absolute;inset:0;display:grid;place-items:center;background:#000;z-index:6}
.resolving[hidden]{display:none}
.resolving .box{text-align:center;max-width:520px;padding:0 24px}
.spin{width:38px;height:38px;border:2px solid var(--edge);border-top-color:var(--hot);
      border-radius:50%;animation:sp .8s linear infinite;margin:0 auto 22px}
@keyframes sp{to{transform:rotate(360deg)}}
.resolving h3{font-size:17px;font-weight:600;margin:0 0 9px}
.rlog{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim);line-height:1.85;
      text-align:left;max-height:190px;overflow:hidden;margin-top:18px;
      border-top:1px solid var(--edge);padding-top:14px}
.rlog .ok{color:var(--good)} .rlog .no{color:var(--hot)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--edge);padding:26px 42px;display:flex;justify-content:space-between;
      color:var(--dimmer);font-size:12px}
.foot .mono{font-family:"IBM Plex Mono",monospace;font-size:11px}

@media (max-width:860px){
  /* The links used to be hidden outright, which left a phone with no way to reach
     Movies, Series or My List at all. They move to their own scrolling strip under
     the bar instead. */
  .nav{padding:0 18px;gap:12px}.srch{width:auto;flex:1;min-width:0}
  .nav .nl{display:none}
  .navsub{position:fixed;top:var(--nav-h);left:0;right:0;z-index:59;display:flex;gap:18px;
          padding:0 18px;height:42px;align-items:center;overflow-x:auto;scrollbar-width:none;
          background:rgba(10,10,11,.94);border-bottom:1px solid var(--edge)}
  .navsub::-webkit-scrollbar{display:none}
  .navsub .nl{display:block;font-size:13px;white-space:nowrap}
  body.watching .navsub{display:none}
  .wrap{padding-top:calc(var(--nav-h) + 74px)}
  /* On a narrow screen the billboard copy sits ON the artwork, so the veil has to
     run bottom-to-top rather than left-to-right or the text is unreadable. */
  .bill-img::after{background:linear-gradient(0deg,var(--ink) 18%,rgba(10,10,11,.82) 52%,rgba(10,10,11,.35) 100%)}
  .bill-in{max-width:none}
  .row-h{flex-wrap:wrap;gap:4px 10px}
  .row-h .note{flex-basis:100%;font-size:10.5px}
  .bill,.hero{padding-left:18px;padding-right:18px}
  .wrap,.sec{padding-left:18px;padding-right:18px}
  .strip,.row-h{padding-left:18px;padding-right:18px}
  .hero-in{flex-direction:column;align-items:flex-start;gap:20px}
  .hero-poster{flex:0 0 auto;width:132px}
  .ep{grid-template-columns:32px 116px 1fr;gap:12px}.ep .r{display:none}
  .hud{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- browse / grid ------------------------------------------------------- */
.browse-h{display:flex;align-items:baseline;gap:18px;padding:112px 0 22px}
.browse-h h1{font-size:34px;font-weight:800;letter-spacing:-.02em}
.browse-h .cnt{color:var(--dim);font-size:12px}
.filters{display:flex;flex-direction:column;gap:10px;padding-bottom:26px;
         border-bottom:1px solid var(--edge);margin-bottom:26px}
.fgroup{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.fsep{width:1px;height:18px;background:var(--edge);margin:0 8px}
.chip{display:inline-block;padding:6px 12px;border:1px solid var(--edge);border-radius:2px;
      color:var(--dim);font-size:12px;letter-spacing:.02em;text-decoration:none;
      transition:border-color .15s,color .15s,background .15s}
.chip:hover{color:var(--text);border-color:#3A3A44}
.chip.on{background:var(--text);border-color:var(--text);color:var(--ink);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:26px 18px}
.gcard{text-decoration:none;color:inherit;display:block}
.gshot{position:relative;aspect-ratio:2/3;background:var(--panel);border:1px solid var(--edge);
       overflow:hidden;transition:border-color .18s,transform .18s}
.gshot img{width:100%;height:100%;object-fit:cover;display:block}
.gcard:hover .gshot{border-color:var(--hot);transform:translateY(-3px)}
.gv{position:absolute;top:8px;right:8px;background:rgba(10,10,11,.86);border:1px solid var(--edge);
    padding:2px 6px;font:500 11px/1 'IBM Plex Mono',monospace;color:var(--good)}
.gt{margin-top:9px;font-size:13px;font-weight:600;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gs{margin-top:3px;font-size:11px;color:var(--dim);font-family:'IBM Plex Mono',monospace}
.pager{display:flex;align-items:center;justify-content:center;gap:20px;padding:52px 0 30px;
       font-size:12px;color:var(--dim)}
.empty{padding:90px 0;text-align:center;color:var(--dim)}
.empty p{margin:0 0 6px;font-size:15px}
.empty .mono{font-size:12px}
.bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
.bar i{display:block;height:100%;background:var(--hot)}
.nav.lift{background:rgba(10,10,11,.94);border-bottom-color:var(--edge)}

/* Mobile overrides for the browse grid. These live at the end of the file on purpose:
   the grid rules above were appended after the main mobile query and were winning it. */
@media (max-width:860px){
  .browse-h{padding:10px 0 18px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:20px 12px}
  .filters{padding-bottom:20px;margin-bottom:20px}
  .pager{padding:34px 0 20px;gap:12px;flex-wrap:wrap}
}

/* ---- info block, cast strip and person pages ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
       gap:16px 26px;margin-top:22px;max-width:760px}
.fact .fk{font-size:9px;letter-spacing:.11em;text-transform:uppercase;
          color:var(--dimmer);margin-bottom:5px}
.fact .fv{font-size:13.5px;color:var(--text);line-height:1.45}
.fact .fv a{border-bottom:1px solid var(--edge)}
.fact .fv a:hover{color:var(--hot);border-bottom-color:var(--hot-dim)}

.strip.people{gap:20px}
.person{width:124px;flex:0 0 124px;display:block}
.face{width:124px;height:124px;border-radius:50%;overflow:hidden;background:var(--raise);
      border:1px solid var(--edge);display:grid;place-items:center}
.face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.person:hover .face{border-color:var(--hot-dim)}
.noface{font-size:34px;font-weight:700;color:var(--dimmer)}
.noface.big{font-size:72px}
.pn{margin-top:11px;font-size:12.5px;font-weight:600;line-height:1.3}
.pc{margin-top:3px;font-size:11px;color:var(--dim);line-height:1.3}
.person:hover .pn{color:var(--hot)}

.bio{display:grid;grid-template-columns:232px 1fr;gap:38px;align-items:start;padding-top:8px}
.bio-face{width:232px;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;
          background:var(--raise);border:1px solid var(--edge);display:grid;place-items:center}
.bio-face img{width:100%;height:100%;object-fit:cover;display:block}
.bio-txt h1{font-size:38px;margin:4px 0 0;letter-spacing:-.02em}
.bio-body{margin-top:24px;max-width:70ch;font-size:14px;line-height:1.72;color:#D6D6D9}
@media(max-width:760px){
  .bio{grid-template-columns:1fr;gap:24px}
  .bio-face{width:164px}
  .bio-txt h1{font-size:28px}
  .person,.face{width:96px;flex-basis:96px}
  .face{height:96px}
}
.rsub{margin-top:10px;font-size:13px;color:var(--dim)}

/* ---- up next ---- */
.upnext{position:absolute;inset:0;z-index:7;display:grid;place-items:center;
        background:rgba(6,6,8,.9)}
/* An author rule setting display beats the browser's [hidden]{display:none}, so
   without this the card rendered empty on every watch page from load. Any class
   here that sets display needs its own [hidden] guard. */
.upnext[hidden]{display:none}
.un-box{width:min(520px,88vw);background:var(--panel);border:1px solid var(--edge);
        border-radius:var(--r);padding:26px 26px 22px;text-align:left}
.un-k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);
      margin-bottom:14px}
.un-shot{border-radius:var(--r);overflow:hidden;background:var(--raise);margin-bottom:16px}
.un-shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.un-t{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.un-s{margin-top:5px;font-size:12.5px;color:var(--dim)}
.un-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;align-items:center}
.un-cta .btn{font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .un-box{padding:20px}
  .un-cta .btn{flex:1 1 auto;justify-content:center}
}

/* ---- billboard trailer ---------------------------------------------------
   The video sits inside .bill-img so the existing gradient keeps sitting on top
   of it, which is what keeps the title readable once motion starts. */
.bill-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 22%;opacity:0;transition:opacity .9s ease}
.bill-vid.on{opacity:1}
.bill-img img{transition:opacity .9s ease}
.bill.vid .bill-img img{animation:none;opacity:0}  /* billin has fill-mode both, so its final keyframe outranks a plain opacity until the animation is cancelled */
/* Heading gives ground to the picture once the trailer is running, the way a
   billboard does when it comes alive. */
.bill h1{transition:font-size .6s ease,margin-bottom .6s ease}
.bill.vid h1{font-size:clamp(26px,3.4vw,44px);margin-bottom:12px}
.bill #billOv{transition:opacity .5s ease,max-height .6s ease,margin-bottom .6s ease}
.bill.vid #billOv{opacity:0;max-height:0;margin-bottom:0;overflow:hidden}
.bill-mute,.hero-mute{position:absolute;right:42px;bottom:52px;z-index:3;
  width:44px;height:44px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.42);background:rgba(10,10,11,.42);color:#fff;
  display:flex;align-items:center;justify-content:center}
.bill-mute:hover{background:rgba(10,10,11,.7);border-color:rgba(255,255,255,.75)}
.bill-mute:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bill-mute svg{width:20px;height:20px;fill:currentColor}
@media(max-width:860px){.bill-mute{right:18px;bottom:24px}}

/* ---- rotating billboard (Movies and Series tabs) --------------------------
   Ten titles cycle here rather than one, so the page needs a way to say where
   you are in that run and to let you jump. The bars double as a progress
   readout: the active one fills as its trailer plays. */
.bill-rot{margin-bottom:4px}
/* The wrap's 104px of top padding exists to clear the fixed nav. The billboard
   already covers that space, so under a billboard it is 104px of nothing. */
.bill-rot ~ .wrap{padding-top:0}  /* general sibling: the JSON data block sits between them, so + never matches */
.browse-h.under-bill{padding-top:30px}
.browse-h.under-bill h1{margin-top:0}
.bill-img.swap img{opacity:0}
.bill-dots{position:absolute;right:42px;bottom:52px;z-index:3;display:flex;gap:7px;align-items:center}
.bill-dot{width:28px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.26);overflow:hidden;position:relative;transition:background .2s ease}
.bill-dot:hover{background:rgba(255,255,255,.55)}
.bill-dot.on{background:rgba(255,255,255,.34);width:44px}
.bill-dot i{display:block;height:100%;width:0;background:#fff}
.bill-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Mute sits above the bars rather than fighting them for the same corner. */
.bill-rot .bill-mute{bottom:88px}
@media(max-width:860px){
  .bill-dots{right:18px;bottom:24px;gap:5px}
  .bill-dot{width:18px}.bill-dot.on{width:30px}
  .bill-rot .bill-mute{bottom:58px}
}

/* ---- closed captions toggle ----------------------------------------------
   Sits opposite the back link. Most releases carry no subtitle file, so these
   are transcribed from the audio and the button has to say so while that is
   still happening rather than looking broken. */
.pcc{position:absolute;top:22px;right:22px;z-index:6;
  min-width:44px;height:32px;padding:0 10px;border-radius:6px;cursor:pointer;
  font:600 12px/1 Archivo,system-ui,sans-serif;letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.34);background:rgba(10,10,11,.5);color:#C9C9D0}
.pcc:hover{background:rgba(10,10,11,.78);border-color:rgba(255,255,255,.7);color:#fff}
.pcc.on{background:#fff;border-color:#fff;color:#0A0A0B}
.pcc.wait{opacity:.72}
.pcc.wait::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;
  border-radius:50%;background:currentColor;animation:ccpulse 1.1s ease-in-out infinite}
@keyframes ccpulse{0%,100%{opacity:.25}50%{opacity:1}}
.pcc:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* The browser paints cues itself; this only keeps them off the very bottom edge
   and readable over bright frames. */
video::cue{background:rgba(10,10,11,.78);color:#fff;font-family:Archivo,system-ui,sans-serif}
@media(max-width:860px){.pcc{top:14px;right:14px}}

/* ---- caption language menu ------------------------------------------------
   Anchored under the CC button. A plain vertical list on purpose: the same
   markup has to be drivable by a TV remote later, where anything cleverer than
   up, down and select is a liability. */
.ccmenu{position:absolute;top:60px;right:22px;z-index:7;min-width:168px;padding:6px;
  display:flex;flex-direction:column;gap:2px;border-radius:8px;
  background:rgba(14,14,16,.96);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px rgba(0,0,0,.6)}
.ccmenu[hidden]{display:none}
.ccmenu{max-height:min(62vh,420px);overflow-y:auto;overscroll-behavior:contain}
.ccmenu button{appearance:none;text-align:left;cursor:pointer;
  padding:9px 12px;border:0;border-radius:5px;background:transparent;color:#C9C9D0;
  font:500 13px/1.2 Archivo,system-ui,sans-serif}
.ccmenu button:hover{background:rgba(255,255,255,.1);color:#fff}
.ccmenu button.on{background:#fff;color:#0A0A0B;font-weight:700}
.ccmenu button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
@media(max-width:860px){.ccmenu{top:52px;right:14px}}

/* ---- removing something from My List ------------------------------------- */
/* The card is a link, so the remove button sits beside it rather than inside it
   and this wrapper is what holds the two together. */
.tile{position:relative}
/* The card used to BE the flex item in a strip. The wrapper took that role and the
   268px basis stayed behind on the card, which collapsed every tile to 93px. */
.strip>.tile{flex:0 0 268px}
.strip>.tile>.card{flex:none;width:100%}
/* A hovered card scales up and lifts to z-index 20, so the button has to sit above
   that or it ends up underneath the very card it belongs to and cannot be clicked. */
.tile .rm{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:2px;
  background:rgba(10,10,11,.82);border:1px solid var(--edge);color:var(--text);
  font-size:16px;line-height:1;display:grid;place-items:center;
  opacity:0;transition:opacity .15s,background .15s,border-color .15s;z-index:25}
.tile:hover .rm,.tile .rm:focus-visible{opacity:1}
.tile .rm:hover{background:var(--hot);border-color:var(--hot)}
/* Touch and the Fire Cube remote never hover, so the control has to be visible. */
@media (hover:none){.tile .rm{opacity:.9}}

.rm-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:16px;padding:11px 14px 11px 17px;
  background:var(--raise);border:1px solid var(--edge);border-radius:3px;
  font-size:13.5px;box-shadow:0 8px 28px rgba(0,0,0,.5)}
.rm-toast button{border:1px solid var(--edge);border-radius:2px;padding:5px 12px;
  font-size:12.5px;font-weight:600;background:var(--panel)}
.rm-toast button:hover{border-color:var(--hot);color:var(--hot)}

/* Trailer in a title hero. The still is left in place underneath so the cut to
   video is a fade rather than a flash of black, and the .hero-img scrim above it
   is unchanged, so the headline stays as readable over motion as over a picture. */
.hero-img .hero-vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 20%;opacity:0;transition:opacity .45s ease}
.hero-img .hero-vid.on{opacity:1}
.hero-mute{bottom:34px}
@media(max-width:860px){.hero-mute{right:18px;bottom:18px}}

/* A trailer under a full title page is inaudible to the eye: the hero scrim is
   95% black on the left and the poster, synopsis and fact grid sit on top of it,
   so the film plays where nobody can see it. While one is running the page steps
   back, the way Netflix's own title page does, and steps forward again the moment
   it stops. Only opacity changes, so nothing moves and nothing reflows. */
.hero-poster,.hero-txt p,.hero .facts,.hero .kicker{transition:opacity .4s ease}
.hero.tl-on .hero-img::after{
  background:linear-gradient(90deg,rgba(10,10,11,.74),rgba(10,10,11,.3) 55%,rgba(10,10,11,0)),
             linear-gradient(0deg,var(--ink) 1%,rgba(10,10,11,0) 52%)}
.hero.tl-on .hero-txt p,
.hero.tl-on .facts,
.hero.tl-on .kicker{opacity:0;pointer-events:none}
.hero.tl-on .hero-poster{opacity:.14;pointer-events:none}

/* Availability. A green badge means the stream is already on our disk; the hot
   badge means a release is pinned and Play will fetch it. */
.badge.on{background:var(--good);color:#06210c}
.ready{display:flex;align-items:center;gap:8px;margin-top:16px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--dim)}
.ready i{width:7px;height:7px;border-radius:50%;background:var(--dimmer)}
.ready.on{color:var(--good)}
.ready.on i{background:var(--good);box-shadow:0 0 0 3px rgba(63,185,80,.18)}

/* An episode with no thumbnail anywhere. Its number, set in the same mono face the
   rest of the engine detail uses, on the same raised panel a thumbnail sits on. */
.ep .noshot{position:absolute;inset:0;display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:20px;letter-spacing:.08em;
  color:var(--dimmer);background:var(--raise)}

/* The count inside a search facet chip. Quieter than the label it follows, because
   the label is what is being chosen and the number is only how much of it there is. */
.chip .cn{color:var(--dimmer);font-variant-numeric:tabular-nums;margin-left:2px}
.chip.on .cn{color:inherit;opacity:.55}

/* Phase 7: what you have already watched, shown outside the player.
   The tick sits opposite the READY/FOUND badge so the two never collide. */
.ep .tick{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.ep .tick::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:8px;
  border:2px solid #06210c;border-top:0;border-left:0;transform:rotate(42deg)}
.ep .pbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
.ep .pbar i{display:block;height:100%;background:var(--hot)}
.ep .t .up{margin-left:9px;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.09em;color:var(--hot);vertical-align:1px}

/* Thumbs. Two states plus off, so they are outlined until pressed. Green for a
   like, hot for a bury, matching what those colours already mean on this site. */
.thumbs{display:inline-flex;gap:6px;margin-left:2px}
.th-b{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--edge);background:transparent;color:var(--dim);cursor:pointer;
  transition:color .15s ease,border-color .15s ease}
.th-b svg{width:17px;height:17px;fill:currentColor}
.th-b:hover{color:var(--text);border-color:var(--dim)}
.th-b.on{color:var(--good);border-color:var(--good)}
.th-b:last-child.on{color:var(--hot);border-color:var(--hot)}
.th-b:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* Watched page: when it was finished, sat on the poster the way a badge sits on an
   episode thumbnail, so the grid stays a grid and nothing new is invented. */
.gshot{position:relative}
.gshot .seen{position:absolute;left:8px;bottom:8px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.05em;
  padding:3px 7px;border-radius:2px;background:rgba(10,10,11,.78);color:var(--text)}

/* Profiles. The picker borrows the card grid's rhythm rather than inventing a new
   one: square avatar, name under it, the profile you are already watching as lit. */
.who-wrap{max-width:900px}
.who-err{margin:0 0 20px;padding:10px 14px;border-left:2px solid var(--hot);
  background:var(--panel);font-size:13px;color:var(--text)}
.pf-row{display:flex;flex-wrap:wrap;gap:22px;margin:8px 0 34px}
.pf{margin:0}
.pf-b{display:flex;flex-direction:column;align-items:center;gap:10px;width:132px;padding:14px 8px;
  background:transparent;border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  color:var(--dim);font:inherit}
.pf-b:hover{color:var(--text);border-color:var(--edge)}
.pf-b.on{color:var(--text);border-color:var(--hot)}
.pf-av{display:grid;place-items:center;width:92px;height:92px;border-radius:var(--r);
  background:var(--raise);color:var(--text);font-size:34px;font-weight:700;letter-spacing:.02em}
.pf-b.on .pf-av{background:var(--hot);color:#fff}
.pf-av.sm{width:40px;height:40px;font-size:16px}
.pf-n{font-size:14px;font-weight:600}
.pf-k{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--dimmer)}
.pf-manage{display:flex;flex-direction:column;gap:12px;margin:8px 0 28px}
.pf-edit{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel);
  border:1px solid var(--edge);border-radius:var(--r)}
.pf-edit.new{border-style:dashed}
.pf-in{flex:1;min-width:0;background:var(--ink);border:1px solid var(--edge);border-radius:var(--r);
  color:var(--text);font:inherit;font-size:14px;padding:9px 11px}
.pf-in:focus{outline:none;border-color:var(--dim)}
.pf-kid{display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.btn.danger:hover{border-color:var(--hot);color:var(--hot)}
a.av{text-decoration:none}