@property --shelf-fade-start{
		syntax: "<length>";
		inherits: false;
		initial-value: 0px;
	}@property --shelf-fade-end{
		syntax: "<length>";
		inherits: false;
		initial-value: 0px;
	}.x0ooyre41fdy8nw{
		position: relative;
		display: block;
		width: 100%;
		border-radius: 8px;
	}.x0ooyre41fdy8nw:has(> .shelf-viewport:focus-visible){
		outline: 2px solid var(--colour-accent);
		outline-offset: 6px;
	}.x0ooyre41fdy8nw .shelf-viewport{
		--shelf-fade-start: 2.5rem;
		--shelf-fade-end: 2.5rem;

		display: flex;
		gap: 1rem;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		scroll-snap-type: x proximity;
		scrollbar-width: none;

		mask-image: linear-gradient(
			to right,
			transparent,
			black var(--shelf-fade-start),
			black calc(100% - var(--shelf-fade-end)),
			transparent
		);
		transition:
			--shelf-fade-start 0.25s cubic-bezier(0.4, 0, 0.2, 1),
			--shelf-fade-end 0.25s cubic-bezier(0.4, 0, 0.2, 1);

		&::-webkit-scrollbar {
			display: none;
		}

		&:focus-visible {
			outline: none;
		}
	}.x0ooyre41fdy8nw .shelf-viewport.at-start{
		--shelf-fade-start: 0px;
	}.x0ooyre41fdy8nw .shelf-viewport.at-end{
		--shelf-fade-end: 0px;
	}.x0ooyre41fdy8nw .shelf-control{
		position: absolute;
		top: var(--shelf-control-top, 50%);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		border-radius: 9999px;
		border: 4px solid var(--colour-base);
		background: var(--colour-text);
		color: var(--colour-base);
		opacity: 0.8;
		transform: translateY(-50%) scale(1);
		transition:
			opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
			visibility 0s linear 0s;
	}.x0ooyre41fdy8nw .shelf-control:hover,.x0ooyre41fdy8nw .shelf-control:focus-visible{
		opacity: 1;
		transform: translateY(-50%) scale(1.06);
	}.x0ooyre41fdy8nw .shelf-control:disabled{
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-50%) scale(0.8);
		transition:
			opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0.25s;
	}.x0ooyre41fdy8nw .shelf-control-start{
		left: calc(1rem * -1);
	}.x0ooyre41fdy8nw .shelf-control-end{
		right: calc(1rem * -1);
	}@media (prefers-reduced-motion: reduce){.x0ooyre41fdy8nw .shelf-viewport{
			scroll-behavior: auto;
			transition: none;
		}.x0ooyre41fdy8nw .shelf-control,.x0ooyre41fdy8nw .shelf-control:disabled{
			transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
			transform: translateY(-50%);
		}}