.series-progress-root {
	--series-progress-accent: #7cbd3e;
	--series-progress-bar: #7cbd3e;
	--series-progress-complete: #7cbd3e;
	--series-progress-track: #303030;
	--series-progress-card-width: 150px;
	--series-progress-gap: clamp(12px, 1.6vw, 24px);
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	color: inherit;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	margin-block: 2rem;
	container-type: inline-size;
}
.series-progress-root .series-progress-heading { color: inherit; font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.2; margin: 0 0 1.5rem; }
.series-progress-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.series-progress-root .series-progress-filter { appearance: none; box-sizing: border-box; border: 0; margin: 0; background: #303030; color: #fff; border-radius: 3px; padding: 10px 14px; font: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; min-height: 44px; text-transform: none; letter-spacing: normal; }
.series-progress-root .series-progress-filter[aria-pressed="true"] { background: var(--series-progress-accent); color: #17230c; }
.series-progress-items { display: grid; gap: var(--series-progress-gap); align-items: start; justify-content: space-between; }
.series-progress-columns-0 { grid-template-columns: repeat(auto-fill, minmax(0, min(100%, var(--series-progress-card-width)))); }
.series-progress-layout-cards .series-progress-card { width: 100%; max-width: var(--series-progress-card-width); justify-self: center; }
.series-progress-columns-1 { grid-template-columns: minmax(0, 1fr); }
.series-progress-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.series-progress-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.series-progress-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.series-progress-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.series-progress-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.series-progress-columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.series-progress-columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.series-progress-card { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; color: #fff; box-sizing: border-box; }
.series-progress-details { margin: 0; padding: 0; border: 0; }
.series-progress-details[open] { position: relative; z-index: 20; }
.series-progress-root .series-progress-cover { position: relative; display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 0; aspect-ratio: 17 / 25; list-style: none; cursor: pointer; border: 0; border-radius: 6px; overflow: hidden; background: #151515; color: #fff; isolation: isolate; }
.series-progress-cover::-webkit-details-marker { display: none; }
.series-progress-cover::marker { content: ''; }
.series-progress-cover::after { content: ''; position: absolute; inset: 28% 0 0; background: linear-gradient(transparent, #0005 40%, #000e 100%); z-index: -1; pointer-events: none; }
.series-progress-poster-wrap, .series-progress-cover-background { position: absolute; inset: 0; display: block; background: linear-gradient(145deg, #383838, #171717); z-index: -2; }
.series-progress-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #777; font-size: 3rem; }
.series-progress-root .series-progress-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; transition: transform .2s ease; }
.series-progress-cover:hover .series-progress-poster { transform: scale(1.025); }
.series-progress-cover-caption { position: absolute; inset: auto 8px 12px; text-align: center; text-shadow: 0 1px 3px #000; }
.series-progress-cover-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; color: #fff; font-size: clamp(13px, calc(var(--series-progress-card-width) / 11), 16px); font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; }
.series-progress-cover-status { display: block; margin-top: 6px; color: #ddd; font-size: 11px; line-height: 1.2; }
.series-progress-cover-percent { position: absolute; inset: 9px 9px auto auto; padding: 3px 7px; border-radius: 3px; background: #ffe500; color: #111; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.series-progress-cover-featured { position: absolute; inset: 9px auto auto 9px; color: #ffe500; text-shadow: 0 1px 3px #000; font-size: 20px; line-height: 1; }
.series-progress-card-content { position: absolute; top: var(--series-progress-panel-top, calc(100% - 25px)); left: var(--series-progress-panel-shift, 0px); width: 360px; max-width: var(--series-progress-panel-width, calc(100vw - 32px)); max-height: min(520px, 80vh); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; background: #4b4b4b; color: #fff; border-radius: 5px; box-shadow: 0 8px 24px #0006; text-align: left; }
.series-progress-root .series-progress-close { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 3px; background: #333; color: #fff; cursor: pointer; font: 24px/1 Arial, sans-serif; }
.series-progress-layout-cards .series-progress-card-content .series-progress-title { padding-right: 56px; }
.series-progress-root .series-progress-title { margin: 0; padding: 15px; color: #9add65; font-size: 20px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.series-progress-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 9px 15px; background: #2c2c2c; }
.series-progress-badge { padding: 3px 7px; background: #ffe500; color: #151515; font-size: 13px; font-weight: 700; }
.series-progress-year, .series-progress-featured-label { color: #9add65; font-size: 13px; font-weight: 700; }
.series-progress-panel-body { padding: 15px; }
.series-progress-numbers { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; color: #fff; font-size: 13px; }
.series-progress-percent { font-variant-numeric: tabular-nums; }
.series-progress-bar { appearance: none; border: 0; display: block; width: 100%; height: 6px; border-radius: 0; overflow: hidden; background: var(--series-progress-track); color: var(--series-progress-bar); }
.series-progress-bar::-webkit-progress-bar { background: var(--series-progress-track); }
.series-progress-bar::-webkit-progress-value { background: var(--series-progress-bar); }
.series-progress-bar::-moz-progress-bar { background: var(--series-progress-bar); }
.series-progress-cover-bar { position: absolute; inset: auto 0 0; height: 4px; margin: 0; }
.series-progress-status-completed { --series-progress-bar: var(--series-progress-complete); }
.series-progress-status-completed .series-progress-cover-status { color: #b3ef85; }
.series-progress-root .series-progress-note { margin: 14px 0; color: #fff; font-size: 14px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.series-progress-root .series-progress-link { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 12px; border: 0; border-radius: 0; color: #17230c; background: var(--series-progress-accent); text-align: center; text-decoration: none; font-size: 16px; font-weight: 700; line-height: 1.4; }
.series-progress-root .series-progress-link:hover { background: #92d251; color: #17230c; text-decoration: none; }
.series-progress-play { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #17230c; color: #a5df70; font-size: 10px; }
.series-progress-link:focus-visible, .series-progress-filter:focus-visible, .series-progress-cover:focus-visible, .series-progress-close:focus-visible { outline: 3px solid #9add65; outline-offset: 3px; }
.series-progress-layout-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.series-progress-layout-list .series-progress-details { display: grid; grid-template-columns: 140px minmax(0, 1fr); background: #4b4b4b; border-radius: 6px; }
.series-progress-root .series-progress-layout-list .series-progress-cover { cursor: default; }
.series-progress-layout-list .series-progress-details::details-content { display: contents; }
.series-progress-layout-list .series-progress-card-content { position: static; width: auto; max-width: none; max-height: none; overflow: visible; box-shadow: none; }
.series-progress-layout-list .series-progress-link { width: fit-content; min-width: 140px; }
.series-progress-empty, .series-progress-filter-empty { padding: 1.5rem; background: #292929; border: 1px dashed #555; border-radius: 4px; color: #eee; }
.series-progress-root [hidden] { display: none !important; }
.series-progress-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@container (max-width: 1100px) {
	.series-progress-columns-5, .series-progress-columns-6, .series-progress-columns-7, .series-progress-columns-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.series-progress-layout-list { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 700px) {
	.series-progress-items { gap: 16px; }
	.series-progress-columns-3, .series-progress-columns-4, .series-progress-columns-5, .series-progress-columns-6, .series-progress-columns-7, .series-progress-columns-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.series-progress-layout-list { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 520px) {
	.series-progress-layout-cards:not(.series-progress-columns-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.series-progress-layout-cards .series-progress-card:has(> .series-progress-details[open]) { grid-column: 1 / -1; max-width: none; }
	.series-progress-layout-cards .series-progress-details[open] .series-progress-cover { width: min(100%, var(--series-progress-card-width)); margin-inline: auto; }
	.series-progress-layout-cards .series-progress-card-content { position: relative; top: auto; left: auto; width: 100%; max-width: none; max-height: none; margin-top: 12px; overflow: visible; box-shadow: 0 3px 12px #0003; }
	.series-progress-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.series-progress-root .series-progress-filter { padding: 9px 6px; font-size: 12px; }
	.series-progress-cover-title { font-size: 13px; }
	.series-progress-cover-percent { inset: 7px 7px auto auto; padding: 2px 6px; font-size: 11px; }
	.series-progress-layout-list .series-progress-details { grid-template-columns: 85px minmax(0, 1fr); }
	.series-progress-layout-list .series-progress-title { font-size: 16px; }
	.series-progress-layout-list .series-progress-panel-body, .series-progress-layout-list .series-progress-title, .series-progress-layout-list .series-progress-badges { padding: 10px; }
	.series-progress-layout-list .series-progress-link { min-width: 0; font-size: 14px; }
}
@container (max-width: 280px) {
	.series-progress-layout-cards:not(.series-progress-columns-1) { grid-template-columns: minmax(0, 1fr); }
	.series-progress-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.series-progress-layout-list .series-progress-details { grid-template-columns: minmax(0, 1fr); }
	.series-progress-layout-list .series-progress-cover { max-width: 120px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .series-progress-root .series-progress-poster { transition: none; } }
