#content-presentation { --cp-motion-ease: cubic-bezier(.22,.7,.2,1); position: relative; min-width: 0; color: var(--text, #f2efe8); }
#content-presentation[hidden], #content-presentation [hidden] { display: none !important; }
#content-presentation .cp-presentation { position: relative; min-width: 0; isolation: isolate; }
#content-presentation .cp-dot, #content-presentation .cp-scroll, #content-presentation .cp-episode-row, #content-progress .cp-episode-row { box-shadow: none; }
#content-presentation .cp-hero { --cp-title-height: 168px; --cp-plot-height: 96px; --cp-playback-height: 72px; --cp-action-height: 50px; --cp-inset-start: max(var(--page-gutter, 32px), env(safe-area-inset-left, 0px)); --cp-inset-end: max(var(--page-gutter, 32px), env(safe-area-inset-right, 0px)); position: relative; display: flex; align-items: center; min-height: max(782px, calc(100svh - 80px)); box-sizing: border-box; padding: 56px var(--cp-inset-end) 80px var(--cp-inset-start); margin: 0 calc(-1 * var(--cp-inset-end)) 0 calc(-1 * var(--cp-inset-start)); }
#content-presentation .cp-hero-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; opacity: .95; pointer-events: none; }
#content-presentation :is(.cp-hero-art,.cp-hero-poster,.cp-title-art,.cp-live-logo)[data-image="loading"] { visibility: hidden; }
#content-presentation .cp-hero[data-kind="movie"][data-backdrop="false"], #content-presentation .cp-hero[data-kind="series"][data-backdrop="false"] { background: radial-gradient(ellipse at 88% 38%,color-mix(in srgb,var(--accent, #e31332) 10%,transparent),transparent 57%),linear-gradient(135deg,transparent 45%,color-mix(in srgb,var(--surface, #141518) 50%,transparent)); }
#content-presentation .cp-poster-identity { position: absolute; z-index: 0; top: 50%; right: 6%; width: min(27%, 260px); height: 390px; transform: translateY(-50%); pointer-events: none; }
#content-presentation .cp-hero-poster { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 35px #0005); }
#content-presentation .cp-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 0 -2px; background: linear-gradient(90deg, #090a0c 0%, #090a0ce0 24%, #090a0c45 63%, #090a0c0a 100%), linear-gradient(0deg, #090a0c 0%, transparent 30%, #090a0c33 100%); background: linear-gradient(90deg, var(--canvas, #090a0c) 0%, color-mix(in srgb, var(--canvas, #090a0c) 88%, transparent) 24%, color-mix(in srgb, var(--canvas, #090a0c) 27%, transparent) 63%, transparent 100%), linear-gradient(0deg, var(--canvas, #090a0c) 0%, transparent 30%, color-mix(in srgb, var(--canvas, #090a0c) 20%, transparent) 100%); pointer-events: none; }
#content-presentation .cp-hero-copy { position: relative; z-index: 1; display: grid; grid-template-rows: 12px minmax(var(--cp-title-height), auto) 48px var(--cp-plot-height) var(--cp-playback-height) var(--cp-action-height) 28px; gap: 12px; width: min(600px, 65%); min-width: 0; padding: 0; }
#content-presentation .cp-hero[data-banner="true"] { touch-action: pan-y pinch-zoom; cursor: grab; overflow: clip; isolation: isolate; }
#content-presentation .cp-hero[data-banner="true"] .cp-hero-art { right: 0; width: 100%; }
#content-presentation .cp-hero[data-banner="true"]::before { right: 0; }
#content-presentation .cp-hero[data-banner="true"] :is(button,a,input,select,textarea) { cursor: pointer; }
#content-presentation .cp-hero.is-banner-dragging { cursor: grabbing; }
#content-presentation .cp-hero[data-banner="true"] .cp-hero-art { translate: var(--cp-banner-art-x, 0px) 0; transition: none; }
#content-presentation .cp-hero[data-banner="true"] .cp-hero-copy,
#content-presentation .cp-hero[data-banner="true"] :is(.cp-live-identity,.cp-poster-identity) { translate: var(--cp-banner-copy-x, 0px) 0; }
#content-presentation .cp-hero[data-banner="true"] .cp-live-identity { animation: none; }
#content-presentation .cp-hero[data-motion]:not([data-motion=""]) :is(.cp-hero-art,.cp-hero-copy,.cp-banner-peek-art,.cp-banner-ghost-image) { will-change: translate, opacity; }
#content-presentation :is(.cp-banner-ghost,.cp-banner-peek) { position: absolute; z-index: -2; inset: 0; pointer-events: none; overflow: clip; background: var(--canvas, #090a0c); }
#content-presentation :is(.cp-banner-ghost-image,.cp-banner-peek-art) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; object-fit: cover; pointer-events: none; }
#content-presentation .cp-banner-peek { background: transparent; }
/* Bounded parallax and a decoded neighboring scene share one stationary
   readability gradient. Typography and controls never cross a viewport. */
#content-presentation .cp-eyebrow { overflow: hidden; margin: 0; color: var(--muted, #a9abb1); font-size: 10px; font-weight: 600; line-height: 12px; letter-spacing: .36em; white-space: nowrap; }
#content-presentation .cp-title-slot { position: relative; display: grid; align-items: center; height: auto; min-height: var(--cp-title-height); min-width: 0; overflow: visible; }
#content-presentation .cp-hero-title { grid-area: 1 / 1; display: -webkit-box; max-width: 100%; max-height: none; overflow: hidden; margin: 0; padding-block: .04em; font-family: inherit; font-size: clamp(42px, 5.8vw, 90px); font-weight: 850; line-height: 1.05; letter-spacing: -.055em; text-wrap: balance; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#content-presentation .cp-title-art { grid-area: 1 / 1; display: block; width: min(100%, 500px); height: var(--cp-title-height); max-height: none; margin: 0; object-fit: contain; object-position: left center; }
/* The title row is a minimum reservation, never a clipping box. At90px,
   two1.05 line boxes exceed the old168px slot; text zoom can grow further.
   Natural grid sizing preserves complete line boxes before the next row. */
#content-presentation .cp-title-slot { box-sizing: border-box; padding: 2px; }
#content-presentation .cp-hero-title { line-height: 1.05; }
#content-presentation .cp-dot[aria-busy='true']::before { background: var(--text, #f2efe8); opacity: .8; transform: scaleX(.67); }
#content-presentation .cp-hero[data-preparing='true'] .cp-hero-pagination { cursor: progress; }
#content-presentation .cp-meta-slot { display: grid; grid-template-rows: 20px 24px; gap: 4px; min-width: 0; overflow: hidden; }
#content-presentation .cp-meta { overflow: hidden; margin: 0; color: var(--text, #f2efe8); font-size: 13px; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
#content-presentation .cp-ratings { display: flex; align-items: center; gap: 18px; min-width: 0; overflow: hidden; }
#content-presentation .cp-rating { flex: 0 0 auto; min-height: 24px; font-size: 12px; }
#content-presentation a.cp-rating:hover:where(body[data-input-modality="mouse"] *) { color: var(--text, #f2efe8); }
#content-presentation .cp-plot-slot { height: var(--cp-plot-height); min-width: 0; overflow: hidden; }
#content-presentation .cp-plot { max-width: 560px; margin: 0; color: var(--text, #f2efe8); font-size: 15px; line-height: 24px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#content-presentation .cp-playback-slot { display: grid; grid-template-rows: 18px 5px 34px; gap: 4px; min-width: 0; overflow: hidden; }
#content-presentation .cp-episode-state { grid-row: 1; overflow: hidden; margin: 0; color: var(--muted, #a9abb1); font-size: 12px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
#content-presentation .cp-detail-status { grid-row: 3; display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted, #a9abb1); font-size: 12px; line-height: 17px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#content-presentation .cp-detail-status::before { content: ''; display: inline-block; width: 9px; height: 12px; margin-right: 8px; vertical-align: -1px; background: var(--accent, #e31332); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: app-loading-signal 1.8s ease-in-out infinite; }
#content-presentation .cp-actions { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) 46px; align-items: center; gap: 10px; width: min(100%, 500px); height: var(--cp-action-height); margin: 0; }
#content-presentation .cp-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 24px; border: 1px solid #ffffff18; border-radius: 99px; background: linear-gradient(135deg, #ffffff18, #ffffff05), #191a1d8c; color: var(--text, #f2efe8); font-family: inherit; font-size: 13px; font-weight: 550; line-height: 1.4; box-shadow: inset 0 1px #ffffff12, 0 6px 20px #00000020; text-decoration: none; transform: none; }
#content-presentation .cp-action-primary { box-shadow: inset 0 1px #ffffff38, inset 0 -1px #e3133270, 0 8px 20px #e313320a; }
#content-presentation .cp-actions .cp-action { width: 100%; height: var(--cp-action-height); min-width: 0; min-height: 0; padding: 7px 14px; overflow: hidden; font-size: 12px; line-height: 16px; }
#content-presentation .cp-action-primary { grid-column: 1; grid-row: 1; }
#content-presentation .cp-action-secondary { grid-column: 2; grid-row: 1; }
#content-presentation .cp-action-primary[data-action="play"]::before, #content-presentation .cp-row-play::before { content: ''; display: block; width: 12px; height: 15px; flex: none; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#content-presentation .cp-action:hover:where(body[data-input-modality="mouse"] *), #content-presentation .cp-action:active { background-color: #ffffff15; transform: none; }
#content-presentation .cp-action:disabled { opacity: .5; cursor: progress; }
#content-presentation .cp-save { position: relative; grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 12px; width: 46px; height: var(--cp-action-height); min-width: 46px; min-height: 46px; padding: 0; border: 0; border-radius: 99px; background: transparent; color: var(--text, #f2efe8); text-align: left; transform: none; }
#content-presentation .cp-save:hover:where(body[data-input-modality="mouse"] *), #content-presentation .cp-save:active { background: transparent; transform: none; }
#content-presentation .cp-save-icon, #content-presentation .cp-empty-symbol { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 1px solid #ffffff12; border-radius: 50%; background: #191a1d80; }
#content-presentation .cp-save-icon::after, #content-presentation .cp-empty-symbol::after { content: ''; display: block; width: 22px; height: 27px; background: var(--muted, #a9abb1); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M4 2h16a1 1 0 0 1 1 1v25l-9-5-9 5V3a1 1 0 0 1 1-1Z' fill='white'/%3E%3Cpath d='m9 8 7 5-7 5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
#content-presentation .cp-save[aria-pressed="true"] .cp-save-icon::after, #content-presentation .cp-empty-symbol::after { background: var(--accent, #e31332); }
#content-presentation .cp-save-icon::after, #content-presentation .cp-empty-symbol::after { mask-mode: luminance; }
#content-presentation .cp-save-icon::after { background: var(--accent, #e31332); mask: var(--ui-favorite-outline) center / contain no-repeat; mask-mode: alpha; }
#content-presentation .cp-save[aria-pressed="true"] .cp-save-icon::after, #content-presentation .cp-empty-symbol::after { background: var(--accent, #e31332); mask: var(--ui-favorite-filled) center / contain no-repeat; mask-mode: alpha; }
html[data-theme="light"] #content-presentation .cp-action, html[data-theme="light"] #content-presentation .cp-save-icon, html[data-theme="light"] #content-presentation .cp-favorites-filters { background: var(--glass-background), var(--glass-surface); color: var(--text); border-color: var(--line); }
html[data-theme="light"] #content-presentation .cp-filter { box-shadow: none; }
#content-presentation .cp-save-copy { position: absolute; left: 58px; top: 50%; display: grid; gap: 4px; width: 175px; transform: translateY(-50%); font-size: 12px; font-weight: 500; }
#content-presentation .cp-save-copy small { color: var(--muted, #a9abb1); font-size: 11px; }
#content-presentation .cp-hero-pagination, #content-presentation .cp-carousel-pagination { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
#content-presentation .cp-hero-pagination { grid-row: 7; height: 28px; margin: 0; }
#content-presentation .cp-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; max-width: 65%; }
#content-presentation .cp-dot { position: relative; width: 22px; height: 28px; min-width: 22px; padding: 0; border: 0; background: transparent; transform: none; }
#content-presentation .cp-dot::before { content: ''; position: absolute; inset: 0; width: 18px; height: 7px; margin: auto; border-radius: 99px; background: var(--muted, #a9abb1); opacity: .5; transform: scaleX(.39); transition: transform 240ms var(--cp-motion-ease), opacity 240ms var(--cp-motion-ease), background-color 240ms var(--cp-motion-ease); }
#content-presentation .cp-dot[aria-pressed="true"]::before { background: var(--accent, #e31332); opacity: 1; transform: scaleX(1); }
#content-presentation .cp-dot:hover:where(body[data-input-modality="mouse"] *), #content-presentation .cp-dot:active { background: transparent; transform: none; }
#content-presentation .cp-counter { color: var(--muted, #a9abb1); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#content-presentation .cp-scroll { position: absolute; z-index: 1; bottom: 28px; left: 50%; display: grid; justify-items: center; gap: 12px; padding: 10px; border: 0; background: transparent; color: var(--muted, #a9abb1); font-size: 11px; font-weight: 400; transform: translateX(-50%); }
#content-presentation .cp-scroll::before { content: ''; width: 12px; height: 12px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
#content-presentation .cp-scroll:hover:where(body[data-input-modality="mouse"] *), #content-presentation .cp-scroll:active { background: transparent; color: var(--text, #f2efe8); transform: translateX(-50%); }
#content-presentation .cp-favorites-heading { position: absolute; z-index: 2; inset: 28px 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
#content-presentation .cp-favorites-title { margin: 0; font-family: inherit; font-size: clamp(27px, 3vw, 38px); font-weight: 750; letter-spacing: -.04em; line-height: 1.15; }
#content-presentation .cp-favorites-count { margin: 10px 0 0; color: var(--muted, #a9abb1); font-size: 13px; }
#content-presentation .cp-favorites-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 99px; background: #191a1d80; }
#content-presentation .cp-filter { min-height: 40px; padding: 9px 18px; border: 0; border-radius: 99px; background: transparent; color: var(--muted, #a9abb1); font-size: 12px; font-weight: 500; transform: none; }
#content-presentation .cp-filter[aria-pressed="true"] { color: var(--text, #f2efe8); background: #e313321a; box-shadow: inset 0 0 0 1px #e3133270, inset 0 -2px 8px #e3133218; }
#content-presentation .cp-filter:hover:where(body[data-input-modality="mouse"] *), #content-presentation .cp-filter:active { background-color: #ffffff08; color: var(--text, #f2efe8); transform: none; }
#content-presentation [data-view="favorites"] .cp-hero { --cp-title-height: 124px; --cp-plot-height: 75px; min-height: 583px; padding-top: 140px; padding-bottom: 20px; }
#content-presentation [data-view="favorites"] .cp-hero-copy { grid-template-rows: 0 minmax(var(--cp-title-height), auto) 48px var(--cp-plot-height) var(--cp-playback-height) var(--cp-action-height) 0; gap: 9px; width: min(630px, 72%); }
#content-presentation [data-view="favorites"] .cp-eyebrow { visibility: hidden; }
#content-presentation [data-view="favorites"] .cp-hero-title { font-size: clamp(42px, 4.2vw, 64px); }
#content-presentation [data-view="favorites"] .cp-plot { -webkit-line-clamp: 3; }
#content-presentation [data-view="favorites"] .cp-hero-art { height: calc(100% + 300px); }
#content-presentation [data-view="favorites"] .cp-hero::before { bottom: -300px; }
#content-presentation [data-kind="live"] .cp-hero-art { object-fit: contain; object-position: right center; padding: 80px 0 180px 45%; opacity: .4; }
/* Live channels share the cinematic hero, with their identity kept separate
   from scenery. Logos remain contained, including at mobile widths. */
#content-presentation .cp-presentation[data-kind="live"] .cp-hero { --cp-title-height: 148px; --cp-plot-height: 72px; --cp-playback-height: 42px; }
#content-presentation .cp-presentation[data-kind="live"] .cp-hero-copy { width: min(600px, 58%); }
#content-presentation .cp-presentation[data-kind="live"] .cp-hero::before { background: linear-gradient(0deg, var(--canvas, #090a0c), transparent 30%), radial-gradient(ellipse at 84% 48%, #e313321a, transparent 43%), linear-gradient(90deg, var(--canvas, #090a0c), color-mix(in srgb, var(--canvas, #090a0c) 92%, transparent) 35%, color-mix(in srgb, var(--canvas, #090a0c) 26%, transparent) 68%, transparent 100%); }
#content-presentation .cp-presentation[data-kind="live"] .cp-hero-art { object-fit: cover; object-position: right center; padding: 0; opacity: .9; }
#content-presentation .cp-presentation[data-kind="live"] .cp-hero-title { font-size: clamp(42px, 5.5vw, 82px); }
#content-presentation .cp-presentation[data-kind="live"] .cp-eyebrow { color: var(--accent, #e31332); letter-spacing: .24em; }
#content-presentation .cp-presentation[data-kind="live"] .cp-save-copy { display: none; }
#content-presentation .cp-presentation[data-kind="live"] .cp-actions[data-secondary="false"] { grid-template-columns: minmax(0, 1fr) 46px; }
#content-presentation .cp-presentation[data-kind="live"] .cp-actions[data-secondary="false"] .cp-save { grid-column: 2; }
#content-presentation .cp-live-identity { position: absolute; z-index: 0; top: 50%; right: 4%; display: grid; grid-template-rows: 20px 64px 24px; justify-items: center; gap: 25px; width: 34%; max-width: 430px; transform: translateY(-50%); pointer-events: none; animation: cp-live-arrive .55s ease both; }
#content-presentation .cp-live-signal { display: inline-flex; align-items: center; gap: 9px; color: var(--text-muted, #a9abb1); font-size: 9px; font-weight: 600; line-height: 20px; letter-spacing: .28em; }
#content-presentation .cp-live-signal::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #e31332); box-shadow: 0 0 12px #e3133280; animation: cp-live-pulse 2.8s ease-in-out infinite; }
#content-presentation .cp-live-brand { position: relative; display: grid; place-items: center; width: 100%; height: 64px; min-width: 0; }
#content-presentation .cp-live-logo { position: absolute; width: min(100%, 120px); height: 48px; object-fit: contain; background: transparent; border: 0; border-radius: 0; filter: none; box-shadow: none; }
#content-presentation .cp-live-brand-name { display: -webkit-box; max-width: 100%; max-height: 170px; overflow: hidden; color: var(--text, #f2efe8); font-size: clamp(16px, 1.5vw, 22px); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; text-align: center; text-wrap: balance; overflow-wrap: anywhere; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#content-presentation .cp-live-frequency { width: 75%; height: 1px; margin-top: 12px; background: linear-gradient(90deg, transparent, #e3133240 25%, #ff526a 50%, #e3133240 75%, transparent); box-shadow: 0 0 15px #e3133230; }
#content-presentation [data-view="favorites"][data-kind="live"] .cp-live-identity { right: 0; width: 27%; opacity: .75; }
#content-presentation [data-view="favorites"][data-kind="live"] .cp-hero { --cp-title-height: 124px; --cp-plot-height: 75px; --cp-playback-height: 72px; }
#content-presentation [data-view="favorites"][data-kind="live"] .cp-hero-copy { width: min(630px, 72%); }
#content-presentation [data-view="favorites"][data-kind="live"] .cp-hero-title { font-size: clamp(42px, 4.2vw, 64px); }
@keyframes cp-live-pulse { 0%, 100% { opacity: .55; box-shadow: 0 0 8px #e3133260; } 50% { opacity: 1; box-shadow: 0 0 17px #e3133290; } }
@keyframes cp-live-arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
#content-presentation .cp-coverflow { position: relative; z-index: 1; margin: 0 0 44px; }
#content-presentation .cp-stage-wrap { position: relative; padding-inline: 38px; }
#content-presentation .cp-stage { position: relative; height: 350px; overflow: hidden; perspective: 1100px; touch-action: pan-y; cursor: grab; }
#content-presentation .cp-stage.is-dragging { cursor: grabbing; }
#content-presentation .cp-track { position: absolute; inset: 0; transform-style: preserve-3d; }
#content-presentation .cp-cover { position: absolute; left: calc(50% - var(--cp-card-width, 220px) / 2); top: 10px; width: var(--cp-card-width, 220px); aspect-ratio: 2/3; overflow: hidden; padding: 0; border: 0; border-radius: 9px; background: var(--surface, #141518); color: var(--text, #f2efe8); box-shadow: 0 14px 30px #0006; transform-origin: center; will-change: transform; user-select: none; }
#content-presentation .cp-cover:hover:where(body[data-input-modality="mouse"] *), #content-presentation .cp-cover:active { background: var(--surface, #141518); }
#content-presentation .cp-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#content-presentation .cp-cover[data-kind="live"] .cp-cover-image { object-fit: contain; padding: 24px; }
#content-presentation .cp-cover-fallback { display: grid; place-items: center; width: 100%; height: 100%; padding: 20px; background: linear-gradient(160deg, var(--surface-elevated, #191a1d), var(--surface, #141518)); color: var(--muted, #a9abb1); font-size: 17px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
#content-presentation .cp-cover-kind { position: absolute; bottom: 10px; left: 10px; padding: 4px 6px; border-radius: 3px; background: #090a0cb3; color: #f2efe8; font-size: 9px; font-weight: 600; letter-spacing: .04em; }
#content-presentation .cp-cover-rating-slot { --text: #f2efe8; --text-muted: #bec0c7; position: absolute; right: 0; bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; min-height: 46px; padding: 16px 10px 8px; background: linear-gradient(transparent, #090a0ca6); pointer-events: none; }
#content-presentation .cp-cover-rating { font-size: 10px; line-height: 18px; }
#content-presentation .cp-cover-rating .service-rating-logo { filter: invert(1); }
#content-presentation .cp-arrow { position: absolute; top: calc(50% - 22px); z-index: 110; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--muted, #a9abb1) 20%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--surface, #191a1d) 50%, transparent); color: var(--text, #f2efe8); font-size: 0; line-height: 1; transform: none; }
#content-presentation .cp-arrow-icon { display: block; width: 20px; height: 20px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
#content-presentation .cp-arrow-previous .cp-arrow-icon { transform: rotate(180deg); }
#content-presentation .cp-arrow-previous { left: 0; } #content-presentation .cp-arrow-next { right: 0; }
#content-presentation .cp-arrow:hover:where(body[data-input-modality="mouse"] *), #content-presentation .cp-arrow:active { background: #ffffff15; transform: none; }
#content-presentation .cp-arrow:disabled { opacity: .25; cursor: default; }
#content-presentation .cp-carousel-pagination { justify-content: center; flex-wrap: wrap; margin-top: 8px; }
#content-presentation .cp-drag-hint { color: var(--muted, #a9abb1); font-size: 11px; }
#content-presentation .cp-progress-lists { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin: 36px 0 48px; }
#content-presentation .cp-section-title { margin: 0 0 18px; font-size: 21px; font-weight: 500; letter-spacing: -.035em; }
#content-presentation .cp-episode-rows { display: grid; gap: 16px; }
#content-presentation .cp-episode-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 32px; align-items: center; gap: 16px; width: 100%; min-height: 78px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text, #f2efe8); text-align: left; transform: none; }
#content-presentation .cp-episode-row:hover:where(body[data-input-modality="mouse"] *), #content-presentation .cp-episode-row:active { background: transparent; color: var(--text, #f2efe8); transform: none; }
#content-presentation .cp-episode-image { width: 130px; height: 78px; border-radius: 8px; object-fit: cover; }
#content-presentation .cp-episode-copy { display: grid; gap: 5px; min-width: 0; }
#content-presentation .cp-episode-copy strong { overflow: hidden; color: var(--text, #f2efe8); font-size: 13px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
#content-presentation .cp-episode-copy small { color: var(--muted, #a9abb1); font-size: 11px; line-height: 1.4; }
#content-presentation .cp-row-play { display: grid; place-items: center; width: 32px; height: 44px; color: var(--text, #f2efe8); opacity: .7; }
#content-presentation .cp-episode-row:hover:where(body[data-input-modality="mouse"] *) .cp-row-play { opacity: 1; }
#content-presentation .cp-hero-progress { grid-row: 2; width: min(360px, 100%); margin: 0; }
#content-presentation .progress-track { position: relative; display: block; width: 100%; height: 5px; border-radius: 99px; background: #414248; }
#content-presentation .progress-fill { position: relative; display: block; height: 100%; border-radius: inherit; background: var(--accent, #e31332); box-shadow: 0 0 8px #e3133260; }
#content-presentation .progress-fill::after { content: ''; position: absolute; right: -2px; top: -1px; width: 7px; height: 7px; border-radius: 50%; background: #f2efe8; box-shadow: 0 0 7px #e31332c0; }
#content-presentation .cp-row-progress { margin-top: 4px; }
#content-presentation .cp-empty { display: grid; justify-items: start; gap: 18px; min-height: 330px; align-content: center; padding: 50px 0; }
#content-presentation .cp-empty h2 { margin: 0; font-size: clamp(27px, 4vw, 42px); line-height: 1.1; letter-spacing: -.04em; }
#content-presentation .cp-empty p { max-width: 430px; margin: 0; color: var(--muted, #a9abb1); font-size: 14px; line-height: 1.6; }
#content-presentation [data-empty="true"] .cp-favorites-heading { position: relative; inset: auto; padding-top: 24px; }
#content-presentation .cp-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
#content-presentation button:focus-visible, #content-presentation .cp-rating:focus-visible { outline: 2px solid var(--text, #f2efe8); outline-offset: 4px; }
@supports (backdrop-filter: blur(8px)) { #content-presentation .cp-action, #content-presentation .cp-save-icon, #content-presentation .cp-favorites-filters, #content-presentation .cp-arrow { backdrop-filter: blur(12px); } }
@media (max-width: 1100px) { #content-presentation .cp-hero-copy { width: 75%; } #content-presentation .cp-save-copy { display: none; } #content-presentation .cp-progress-lists { gap: 28px; } #content-presentation .cp-episode-row { grid-template-columns: 100px minmax(0, 1fr) 28px; gap: 12px; } #content-presentation .cp-episode-image { width: 100px; height: 68px; } #content-presentation .cp-favorites-heading { align-items: start; } #content-presentation .cp-filter { padding-inline: 13px; } }
@media (max-width: 800px) { #content-presentation .cp-hero { --cp-title-height: 132px; --cp-plot-height: 66px; --cp-action-height: 56px; min-height: 706px; padding-top: 120px; padding-bottom: 78px; align-items: end; } #content-presentation .cp-hero-copy, #content-presentation [data-view="favorites"] .cp-hero-copy { width: 100%; gap: 10px; } #content-presentation .cp-hero-title, #content-presentation [data-view="favorites"] .cp-hero-title { font-size: clamp(38px, 8vw, 66px); } #content-presentation .cp-hero-art { object-position: 65% top; opacity: .7; } #content-presentation .cp-hero::before { background: linear-gradient(0deg, var(--canvas, #090a0c) 0%, transparent 100%), linear-gradient(90deg, var(--canvas, #090a0c), #090a0c30 100%); } #content-presentation .cp-plot { max-width: 520px; font-size: 14px; line-height: 22px; -webkit-line-clamp: 3; } #content-presentation .cp-favorites-heading { position: relative; inset: auto; padding-top: 24px; min-height: 98px; } #content-presentation [data-view="favorites"] .cp-hero { --cp-title-height: 132px; --cp-plot-height: 66px; min-height: 490px; padding-top: 40px; padding-bottom: 16px; } #content-presentation .cp-progress-lists { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 580px) { #content-presentation .cp-hero { --cp-title-height: 114px; min-height: max(666px, calc(100svh - 120px)); padding-top: 100px; } #content-presentation .cp-eyebrow { font-size: 9px; letter-spacing: .23em; } #content-presentation .cp-hero-title, #content-presentation [data-view="favorites"] .cp-hero-title { font-size: clamp(34px, 10vw, 56px); } #content-presentation .cp-meta { font-size: 12px; } #content-presentation .cp-actions { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 44px; gap: 8px; width: 100%; } #content-presentation .cp-actions .cp-action { gap: 7px; padding-inline: 8px; font-size: 11px; } #content-presentation .cp-save, #content-presentation .cp-save-icon { min-width: 44px; width: 44px; } #content-presentation .cp-favorites-count { font-size: 12px; } #content-presentation .cp-favorites-filters { width: 100%; justify-content: space-between; } #content-presentation .cp-filter { padding-inline: 11px; font-size: 11px; } #content-presentation [data-view="favorites"] .cp-hero { --cp-title-height: 114px; min-height: 474px; padding-top: 40px; } #content-presentation .cp-stage-wrap { padding-inline: 20px; } #content-presentation .cp-stage { height: 305px; } #content-presentation .cp-arrow { width: 40px; height: 40px; top: calc(50% - 20px); } #content-presentation .cp-carousel-pagination { gap: 10px; } #content-presentation .cp-drag-hint { flex-basis: 100%; text-align: center; font-size: 10px; } #content-presentation .cp-progress-lists { margin-block: 24px 36px; } #content-presentation .cp-section-title { font-size: 20px; } #content-presentation .cp-episode-row { grid-template-columns: 94px minmax(0, 1fr) 28px; gap: 10px; } #content-presentation .cp-episode-image { width: 94px; height: 65px; } }
@media (max-width: 1000px) and (min-width: 801px) { #content-presentation .cp-live-identity { right: 1%; width: 34%; } #content-presentation .cp-live-logo { height: 48px; } }
@media (max-width: 800px) {
  #content-presentation .cp-poster-identity { display: none; }
  #content-presentation .cp-presentation[data-kind="live"] .cp-hero { --cp-title-height: 132px; --cp-plot-height: 66px; --cp-playback-height: 42px; min-height: 756px; padding-top: 188px; padding-bottom: 78px; }
  #content-presentation .cp-presentation[data-kind="live"] .cp-hero-copy { width: 100%; }
  #content-presentation .cp-presentation[data-kind="live"] .cp-hero-title { font-size: clamp(38px, 8vw, 66px); }
  #content-presentation .cp-live-identity { top: 26px; right: 0; width: min(260px, 100%); max-width: 100%; grid-template-rows: 16px 48px 1px; gap: 10px; transform: none; }
  #content-presentation .cp-live-brand { height: 48px; }
  #content-presentation .cp-live-logo { width: min(100%, 96px); height: 40px; }
  #content-presentation .cp-live-brand-name { max-height: 48px; font-size: 18px; -webkit-line-clamp: 2; }
  #content-presentation .cp-live-frequency { margin-top: 0; }
  #content-presentation [data-view="favorites"][data-kind="live"] .cp-live-identity { display: none; }
  #content-presentation [data-view="favorites"][data-kind="live"] .cp-hero { --cp-title-height: 132px; --cp-plot-height: 66px; --cp-playback-height: 72px; min-height: 490px; padding-top: 40px; padding-bottom: 16px; }
  #content-presentation [data-view="favorites"][data-kind="live"] .cp-hero-copy { width: 100%; }
  #content-presentation [data-view="favorites"][data-kind="live"] .cp-hero-title { font-size: clamp(38px, 8vw, 66px); }
}
@media (max-width: 580px) {
  #content-presentation .cp-presentation[data-kind="live"] .cp-hero { --cp-title-height: 114px; min-height: max(756px, calc(100svh - 120px)); }
  #content-presentation .cp-presentation[data-kind="live"] .cp-hero-title { font-size: clamp(34px, 10vw, 56px); }
  #content-presentation .cp-live-identity { right: 12px; width: 60%; }
  #content-presentation .cp-presentation[data-kind="live"] .cp-actions[data-secondary="false"] { grid-template-columns: minmax(0, 1fr) 44px; }
  #content-presentation [data-view="favorites"][data-kind="live"] .cp-hero { --cp-title-height: 114px; min-height: 474px; }
  #content-presentation [data-view="favorites"][data-kind="live"] .cp-hero-title { font-size: clamp(34px, 10vw, 56px); }
}
@media (prefers-reduced-motion: reduce) { #content-presentation *, #content-presentation *::before, #content-presentation *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: reduce) {
  #content-presentation .cp-hero[data-banner="true"] :is(.cp-hero-art,.cp-live-identity,.cp-poster-identity),
  #content-presentation .cp-hero[data-banner="true"] .cp-hero-copy { translate: none; scale: none; opacity: 1; }
  #content-presentation :is(.cp-banner-peek,.cp-banner-ghost) { display: none; }
  #content-presentation .cp-hero[data-banner="true"]::after { opacity: 0; }
}

/* Optional second mount keeps episode rows after the real catalog shelves. */
#content-progress { min-width: 0; color: var(--text, #f2efe8); }
#content-progress[hidden], #content-progress [hidden] { display: none !important; }
#content-progress .cp-progress-lists { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin: 36px 0 48px; }
#content-progress .cp-section-title { margin: 0 0 18px; font-size: 21px; font-weight: 500; letter-spacing: -.035em; }
#content-progress .cp-episode-rows { display: grid; gap: 16px; }
#content-progress .cp-episode-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 32px; align-items: center; gap: 16px; width: 100%; min-height: 78px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text, #f2efe8); text-align: left; transform: none; }
#content-progress .cp-episode-row:hover:where(body[data-input-modality="mouse"] *), #content-progress .cp-episode-row:active { background: transparent; transform: none; }
#content-progress .cp-episode-image { width: 130px; height: 78px; border-radius: 8px; object-fit: cover; }
:is(#content-presentation, #content-progress) .cp-episode-row::before { content: ''; grid-column: 1; grid-row: 1; width: 100%; height: 78px; border-radius: 8px; background: var(--surface, #141518); }
:is(#content-presentation, #content-progress) .cp-episode-image { grid-column: 1; grid-row: 1; z-index: 1; }
:is(#content-presentation, #content-progress) .cp-episode-copy { grid-column: 2; grid-row: 1; }
:is(#content-presentation, #content-progress) .cp-row-play { grid-column: 3; grid-row: 1; }
#content-progress .cp-episode-copy { display: grid; gap: 5px; min-width: 0; }
#content-progress .cp-episode-copy strong { overflow: hidden; color: var(--text, #f2efe8); font-size: 13px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
#content-progress .cp-episode-copy small { color: var(--muted, #a9abb1); font-size: 11px; line-height: 1.4; }
#content-progress .cp-row-play { display: grid; place-items: center; width: 32px; height: 44px; color: var(--text, #f2efe8); opacity: .7; }
#content-progress .cp-row-play::before { content: ''; display: block; width: 12px; height: 15px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#content-progress .cp-episode-row:hover:where(body[data-input-modality="mouse"] *) .cp-row-play { opacity: 1; }
#content-progress .progress-track { position: relative; display: block; width: 100%; height: 5px; border-radius: 99px; background: #414248; }
#content-progress .progress-fill { position: relative; display: block; height: 100%; border-radius: inherit; background: var(--accent, #e31332); box-shadow: 0 0 8px #e3133260; }
#content-progress .progress-fill::after { content: ''; position: absolute; right: -2px; top: -1px; width: 7px; height: 7px; border-radius: 50%; background: #f2efe8; box-shadow: 0 0 7px #e31332c0; }
#content-progress .cp-row-progress { margin-top: 4px; }
#content-progress button:focus-visible { outline: 2px solid var(--text, #f2efe8); outline-offset: 4px; }
@media (max-width: 1100px) { #content-progress .cp-progress-lists { gap: 28px; } #content-progress .cp-episode-row { grid-template-columns: 100px minmax(0, 1fr) 28px; gap: 12px; } #content-progress .cp-episode-image { width: 100px; height: 68px; } }
@media (max-width: 800px) { #content-progress .cp-progress-lists { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 580px) { #content-progress .cp-progress-lists { margin-block: 24px 36px; } #content-progress .cp-section-title { font-size: 20px; } #content-progress .cp-episode-row { grid-template-columns: 94px minmax(0, 1fr) 28px; gap: 10px; } #content-progress .cp-episode-image { width: 94px; height: 65px; } }