@layer base {

  *, *::before, *::after { box-sizing: border-box; }

  
  [hidden] { display: none !important; }

  
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { width: 0; height: 0; display: none; }

  html {
    background: var(--n-bg);
    color-scheme: dark;
    
    overscroll-behavior: none;
  }

  body {
    margin: 0;
    background: var(--n-bg);
    color: var(--n-text);
    font-family: var(--n-font);
    font-size: var(--n-fs-body);
    line-height: var(--n-lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    
    height: 100dvh;
    overflow: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--n-font-display);
    font-weight: 700;
    line-height: var(--n-lh-head);
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }
  button { background: none; border: 0; padding: 0; cursor: pointer; }

  
  :focus-visible {
    outline: 3px solid var(--n-hue);
    outline-offset: 3px;
  }

  
  button:focus-visible,
  [role="button"]:focus-visible { outline: none; }

  

  
  .num, .meta, time { font-variant-numeric: tabular-nums; }

  img { max-width: 100%; display: block; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer layout {

  
  .shell {
    display: grid;
    grid-template-columns: var(--n-rail-w) minmax(0, 1fr);
    height: 100dvh;
  }

  
  
  @media (min-width: 1200px) {
    
    
    .shell { grid-template-columns: 132px minmax(0, 1fr); }
    .shell > .rail { width: 132px; }
    .shell .rail-label { opacity: 1; }
    
    .shell > .rail.is-open { width: 132px; }
    
    .shell .rail-item {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: var(--n-s2);
      padding: var(--n-s3);
    }
  }

  
  

  
  @media (display-mode: standalone) {
    body { height: 100vh; }
    .shell { height: 100vh; }
  }
  body.is-standalone { height: 100vh; }
  body.is-standalone .shell { height: 100vh; }

  
  .content {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  
  html, body { max-width: 100%; overflow-x: hidden; }

  
  .rail {
    grid-area: 1 / 1;
    z-index: 20;
    width: var(--n-rail-w);
    background: var(--n-rail-bg, var(--n-ink-2, #0c1219));
    
    border-right: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--n-s2);
    padding: var(--n-s4) 0 calc(var(--n-s4) + var(--n-sab));
    transition: width var(--n-t-panel) var(--n-ease);
  }
  
  
  html:not([data-shell="tv"]) .rail::after {
    content: "";
    position: absolute; top: 14px; bottom: 14px; right: 0;
    width: 2px; pointer-events: none; z-index: 4;
    background: linear-gradient(180deg,
      transparent 0,
      var(--n-seam) var(--n-fade),
      var(--n-seam) calc(100% - var(--n-fade)),
      transparent 100%);
  }
  .rail.is-open { width: var(--n-rail-w-open); }

  .rail-item {
    display: flex;
    align-items: center;
    gap: var(--n-s3);
    padding: var(--n-s3) 0 var(--n-s3) calc((var(--n-rail-w) - 22px) / 2);
    color: var(--n-muted);
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    transition: color var(--n-t-panel) var(--n-ease);
  }
  .rail-item:hover { color: var(--n-text); }

  
  
  .rail-glyph {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: block;
    opacity: .5;
  }

  .rail-label {
    font-size: var(--n-fs-cap);
    opacity: 0;
    transition: opacity var(--n-t-panel) var(--n-ease);
  }
  .rail.is-open .rail-label { opacity: 1; }

  
  .rail-item.is-on { color: var(--n-text); }
  
  .rail-item[data-goto="live"]   { --sec: var(--n-sec-live); }
  .rail-item[data-goto="movies"] { --sec: var(--n-sec-movies); }
  
  
  
  
  .rail-item[data-goto="series"] { --sec: var(--n-sec-series); }
  .rail-item[data-goto="mylist"] { --sec: var(--n-sec-mylist); }
  
  
  .rail-item.is-on .rail-glyph {
    opacity: 1;
    color: var(--sec, var(--n-hue));
  }
  .rail-item.is-on .rail-label { color: var(--sec, var(--n-hue)); }
  .rail-item.is-on::before { background: var(--sec, var(--n-hue)); }
  .rail-item.is-on::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--n-hue);
  }

  
  @media (max-width: 1200px) {
    .shell { grid-template-columns: minmax(0, 1fr); }

    .rail {
      
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      
      bottom: var(--n-sab);
      width: auto;
      flex-direction: row;
      align-items: stretch;
      gap: 2px;
      padding: 4px;
      
      background: color-mix(in srgb, var(--n-panel) 54%, transparent);
      border: 1px solid transparent;
      border-top-color: rgba(255, 255, 255, .14);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .38),
                  inset 0 1px 0 rgba(255, 255, 255, .06);
      border-radius: 999px;
      background: var(--n-pill-bg);
      box-shadow: var(--n-pill-shadow);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      backdrop-filter: blur(20px) saturate(1.6);
      max-width: calc(100vw - 2 * var(--n-s3));
    }
    
    .rail.is-open { width: auto; }

    
    
    .rail-item {
      flex: 0 1 auto;
      flex-direction: column;
      gap: 4px;
      padding: var(--n-s2) 15px;
      justify-content: center;
      align-items: center;
      min-width: 44px;
      min-height: 44px;                 
      
      border-radius: var(--n-r-panel);
    }
    .rail-label { opacity: 1; font-size: 11.5px; }

    
    
    .rail-item.is-on { background: none; }
    .rail-item.is-on::before { content: none; }

    
    
    .content { padding-bottom: 0; }
    .pane-list,
    .rails,
    .scroller { padding-bottom: var(--n-pill-clear); }
  }

  
  @media (min-width: 2400px) {
    .shell { padding: 48px; }
  }

  
  .scaffold {
    margin: auto;
    max-width: 46ch;
    padding: var(--n-gutter);
    color: var(--n-muted);
    text-align: center;
  }
}


@layer sections {

  
  html[data-shell="tv"] :focus-visible {
    outline: 4px solid var(--sec, var(--n-hue));
    outline-offset: 3px;
  }

  
  html[data-shell="tv"] .card:focus-visible,
  html[data-shell="tv"] .card :focus-visible,
  html[data-shell="tv"] .card-name,
  html[data-shell="tv"] .card-meta { outline: none; }

  html[data-shell="tv"] .card:focus-visible .card-shot {
    outline: 4px solid var(--sec, var(--n-hue));
    outline-offset: 3px;
  }

  html[data-shell="tv"] .card:focus-visible .card-shot,
  html[data-shell="tv"] .grow:focus-visible,
  html[data-shell="tv"] .crow:focus-visible,
  html[data-shell="tv"] .ecard:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    
    position: relative;
    z-index: 2;
  }

  
  html[data-shell="tv"] .rail-item:hover,
  html[data-shell="tv"] .card:hover .card-shot,
  html[data-shell="tv"] .grow:hover,
  html[data-shell="tv"] .crow:hover {
    transform: none;
    box-shadow: none;
  }

  
  html[data-shell="tv"] .card {
    scroll-margin-inline: var(--n-s8);
    scroll-margin-block: var(--n-s6);
  }

}


@layer sections {

  
  html[data-shell="tv"] :focus-visible,
  html[data-shell="tv"] .card:focus-visible,
  html[data-shell="tv"] .card:focus-visible .card-shot,
  html[data-shell="tv"] .rail-item:focus-visible,
  html[data-shell="tv"] .grow:focus-visible,
  html[data-shell="tv"] .crow:focus-visible,
  html[data-shell="tv"] .ecard:focus-visible {
    outline: none;
  }

  
  html[data-shell="tv"] .card:focus-visible .card-shot {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 0 0 3px #fff, 0 20px 44px rgba(0, 0, 0, .62);
  }

  
  html[data-shell="tv"] .card:focus-visible .card-name {
    color: var(--n-text);
  }

  
  html[data-shell="tv"] .card:hover:not(:focus-visible) .card-shot::before {
    transform: translateX(-120%);
  }
  html[data-shell="tv"] .card:hover:not(:focus-visible) .card-shot {
    transform: none;
    box-shadow: none;
  }

  html[data-shell="tv"] .card:focus-visible .card-shot::before {
    transform: translateX(120%);
  }

  
  html[data-shell="tv"] .card:focus-visible {
    position: relative;
    z-index: 3;
  }

  
  
  
  
  html[data-shell="tv"] button:focus-visible:not(.card),
  html[data-shell="tv"] a:focus-visible,
  html[data-shell="tv"] [tabindex]:focus-visible:not(.card) {
    background: var(--n-hue);
    color: #10141a;
    box-shadow: 0 0 0 3px var(--n-hue);
  }
  html[data-shell="tv"] button:focus-visible:not(.card) *,
  html[data-shell="tv"] a:focus-visible * {
    color: #10141a;
  }

  
  html[data-shell="tv"] .bar [data-role]:focus-visible,
  html[data-shell="tv"] .pane-head [data-role]:focus-visible {
    background: transparent;
    color: var(--n-text);
    box-shadow: 0 0 0 3px #fff;
  }
  html[data-shell="tv"] .bar [data-role]:focus-visible *,
  html[data-shell="tv"] .pane-head [data-role]:focus-visible * {
    color: var(--n-text);
  }

  
  html[data-shell="tv"] .card:focus-visible {
    background: none;
    box-shadow: none;
  }

  
  html[data-shell="tv"] .grow:focus-visible,
  html[data-shell="tv"] .crow:focus-visible,
  html[data-shell="tv"] .ecard:focus-visible,
  html[data-shell="tv"] .catrow:focus-visible,
  html[data-shell="tv"] .guide-cell:focus-visible {
    box-shadow: none;
  }

  
  html[data-shell="tv"] .rail-item:focus-visible,
  html[data-shell="tv"] .grow:focus-visible,
  html[data-shell="tv"] .crow:focus-visible,
  html[data-shell="tv"] .ecard:focus-visible,
  html[data-shell="tv"] .catrow:focus-visible {
    
    background: var(--n-hue);
    color: #10141a;
  }

  
  html[data-shell="tv"] .grow:focus-visible *,
  html[data-shell="tv"] .crow:focus-visible *,
  html[data-shell="tv"] .ecard:focus-visible *,
  html[data-shell="tv"] .catrow:focus-visible * {
    color: #10141a;
  }

  
  
  
  html[data-shell="tv"] .rail {
    padding-block: calc(var(--n-tv-safe-y) * 2.4) var(--n-tv-safe-y);
    gap: var(--n-s3);
  }

  html[data-shell="tv"] .rail-item {
    min-height: 84px;
    padding-block: var(--n-s3);
    justify-content: flex-start;
    white-space: nowrap;
  }
  
  html[data-shell="tv"] .rail-label { font-size: var(--n-fs-body-lg); }
  html[data-shell="tv"] .rail-glyph {
    width: 36px; height: 36px; flex: 0 0 36px;
  }

  
  html[data-shell="tv"] .shell { grid-template-columns: 116px minmax(0, 1fr); }
  html[data-shell="tv"] .shell > .rail { width: 116px; }
  html[data-shell="tv"] .shell .rail-label {
    opacity: 0;
    transition: opacity var(--n-t-panel) var(--n-ease);
  }

  
  
  html[data-shell="tv"] .shell > .rail { overflow: hidden; }

  
  
  html[data-shell="tv"] .rail:has(:focus-visible) .rail-label { opacity: 1; }
  html[data-shell="tv"] .shell .rail.is-open .rail-label { opacity: 1; }

  html[data-shell="tv"] .bar {
    padding-top: var(--n-tv-safe-y);
    
  }

  
  
  html[data-shell="tv"] .store,
  html[data-shell="tv"] .live {
    padding-bottom: var(--n-tv-safe-y);
  }

  
  html[data-shell="tv"] { --n-pill-clear: 0px; }

  
  html[data-shell="tv"] .store-shelf {
    padding-top: var(--n-s4);
  }

  html[data-shell="tv"] .rail-item.is-on::before {
    z-index: 2;
  }

}