.mi-stories,
			.mi-stories * {
				box-sizing: border-box;
			}

			.mi-stories {
				--mi-story-navy: #082b49;
				--mi-story-blue: #0f6399;
				--mi-story-sky: #35a8d4;
				--mi-story-orange: #f1873d;
				--mi-story-violet: #8b5cf6;
				--mi-story-violet-dark: #6d28d9;
				--mi-story-ink: #0b2f4f;
				--mi-story-label: #143b5a;
				--mi-story-white: #ffffff;

				position: relative;
				isolation: isolate;
				width: 100%;
				padding: 24px 22px 20px;
				overflow: hidden;

				border:
					1px solid
					rgba(255, 255, 255, 0.72);

				border-radius: 24px;

				background:
					linear-gradient(
						135deg,
						rgba(255, 255, 255, 0.84) 0%,
						rgba(241, 249, 252, 0.74) 55%,
						rgba(224, 240, 246, 0.68) 100%
					);

				box-shadow:
					0 18px 45px rgba(16, 47, 79, 0.16),
					inset 0 1px 0 rgba(255, 255, 255, 0.9);

				backdrop-filter:
					blur(20px)
					saturate(125%)
					brightness(110%);

				-webkit-backdrop-filter:
					blur(20px)
					saturate(125%)
					brightness(110%);

				color: var(--mi-story-ink);

				font-family:
					system-ui,
					-apple-system,
					BlinkMacSystemFont,
					"Segoe UI",
					sans-serif;

				-webkit-font-smoothing: antialiased;
				text-rendering: optimizeLegibility;
			}

			.mi-stories::before {
				position: absolute;
				z-index: -1;
				top: -100px;
				left: -70px;
				width: 240px;
				height: 240px;
				border-radius: 50%;

				background:
					radial-gradient(
						circle,
						rgba(255, 255, 255, 0.65) 0%,
						rgba(255, 255, 255, 0) 70%
					);

				pointer-events: none;
				content: "";
			}

			.mi-stories::after {
				content: "!";
				position: absolute;
				z-index: 0;
				right: 36px;
				bottom: -22px;

				display: grid;
				place-items: center;

				width: 190px;
				height: 172px;
				padding-top: 18px;

				background:
					rgba(8, 43, 73, 0.065);

				color:
					rgba(8, 43, 73, 0.14);

				font-family:
					"Segoe UI",
					system-ui,
					sans-serif;

				font-size: 7.2rem;
				font-weight: 900;
				line-height: 1;

				clip-path:
					polygon(
						50% 0%,
						100% 88%,
						0% 88%
					);

				-webkit-clip-path:
					polygon(
						50% 0%,
						100% 88%,
						0% 88%
					);

				pointer-events: none;
				user-select: none;
			}

			.mi-stories__header {
				position: relative;
				z-index: 1;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				gap: 18px;
				margin-bottom: 15px;
				padding: 0 2px;
			}

			.mi-stories__eyebrow {
				display: block;
				margin: 0 0 4px;
				color: var(--mi-story-blue) !important;
				font-size: 11px;
				font-weight: 850;
				letter-spacing: 0.11em;
				line-height: 1.2;
				text-shadow:
					0 1px 0
					rgba(255, 255, 255, 0.75);
				text-transform: uppercase;
			}

			.mi-stories__title {
				margin: 0;
				color: var(--mi-story-navy) !important;
				font-size: clamp(22px, 3vw, 30px);
				font-weight: 850;
				letter-spacing: -0.025em;
				line-height: 1.1;
				text-shadow:
					0 1px 0
					rgba(255, 255, 255, 0.82);
			}

			.mi-stories__all {
				display: inline-flex;
				flex: 0 0 auto;
				align-items: center;
				justify-content: center;
				min-height: 34px;
				padding: 6px 11px;

				border:
					1px solid
					rgba(15, 99, 153, 0.2);

				border-radius: 999px;
				background: rgba(255, 255, 255, 0.52);
				color: var(--mi-story-blue) !important;
				font-size: 13px;
				font-weight: 800;
				line-height: 1.2;
				text-decoration: none !important;

				box-shadow:
					0 4px 12px
					rgba(16, 47, 79, 0.06);

				transition:
					background-color 0.2s ease,
					color 0.2s ease,
					transform 0.2s ease;
			}

			.mi-stories__all:hover {
				background: rgba(255, 255, 255, 0.85);
				color: var(--mi-story-navy) !important;
				text-decoration: none !important;
				transform: translateY(-1px);
			}

			.mi-stories__rail {
				position: relative;
				z-index: 1;
				display: flex;
				gap: 14px;
				width: 100%;
				padding: 12px 3px 9px;
				overflow-x: auto;
				overflow-y: hidden;
				overscroll-behavior-inline: contain;
				scrollbar-width: none;
				scroll-snap-type: x proximity;
				-webkit-overflow-scrolling: touch;
			}

			.mi-stories__rail::-webkit-scrollbar {
				display: none;
			}

			.mi-story-thumb {
				position: relative;
				display: flex;
				flex: 0 0 88px;
				flex-direction: column;
				align-items: center;
				gap: 7px;
				min-width: 0;
				color: var(--mi-story-ink) !important;
				text-decoration: none !important;
				scroll-snap-align: start;
				-webkit-tap-highlight-color: transparent;
			}

			.mi-story-thumb__ring {
				position: relative;
				display: grid;
				width: 78px;
				height: 78px;
				padding: 3px;
				border-radius: 50%;

				background:
					linear-gradient(
						145deg,
						var(--mi-story-orange),
						var(--mi-story-sky) 48%,
						var(--mi-story-blue)
					);

				box-shadow:
					0 7px 20px
					rgba(16, 47, 79, 0.2);

				transition:
					transform 0.22s ease,
					filter 0.22s ease,
					box-shadow 0.22s ease;
			}

			.mi-story-thumb:hover
			.mi-story-thumb__ring,
			.mi-story-thumb:focus-visible
			.mi-story-thumb__ring {
				transform:
					translateY(-3px)
					scale(1.045);

				filter:
					saturate(1.08)
					brightness(1.03);

				box-shadow:
					0 12px 26px
					rgba(16, 47, 79, 0.25);
			}

			.mi-story-thumb:focus-visible {
				outline:
					3px solid
					rgba(53, 168, 212, 0.38);

				outline-offset: 5px;
				border-radius: 14px;
			}

			.mi-story-thumb__photo {
				display: block;
				width: 100%;
				height: 100%;

				border:
					3px solid
					var(--mi-story-white);

				border-radius: 50%;
				background-color: var(--mi-story-navy);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.mi-story-thumb__label {
				display: -webkit-box;
				width: 100%;
				min-height: 34px;
				padding: 1px 2px;
				overflow: hidden;
				color: var(--mi-story-label) !important;
				font-size: 12.5px;
				font-weight: 800;
				letter-spacing: -0.012em;
				line-height: 1.3;
				text-align: center;

				text-shadow:
					0 1px 0
					rgba(255, 255, 255, 0.82);

				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.mi-story-thumb:hover
			.mi-story-thumb__label,
			.mi-story-thumb:focus-visible
			.mi-story-thumb__label {
				color: var(--mi-story-blue) !important;
			}

			.mi-story-thumb__update {
				position: absolute;
				top: 59px;
				left: 50%;
				z-index: 2;
				padding: 3px 7px;

				border:
					2px solid
					var(--mi-story-white);

				border-radius: 999px;

				background:
					linear-gradient(
						135deg,
						var(--mi-story-violet),
						var(--mi-story-violet-dark)
					);

				color: #ffffff !important;
				font-size: 7px;
				font-weight: 900;
				letter-spacing: 0.045em;
				line-height: 1.2;
				white-space: nowrap;

				text-shadow:
					0 1px 1px
					rgba(46, 16, 101, 0.26);

				text-transform: uppercase;
				transform: translateX(-50%);

				box-shadow:
					0 4px 10px
					rgba(109, 40, 217, 0.28);
			}

			.mi-story-thumb__new {
				position: absolute;
				top: 59px;
				left: 50%;
				z-index: 2;
				padding: 2px 7px;

				border:
					2px solid
					var(--mi-story-white);

				border-radius: 999px;
				background: var(--mi-story-orange);
				color: #ffffff !important;
				font-size: 8px;
				font-weight: 900;
				letter-spacing: 0.06em;
				line-height: 1.2;

				text-shadow:
					0 1px 1px
					rgba(92, 38, 0, 0.22);

				text-transform: uppercase;
				transform: translateX(-50%);

				box-shadow:
					0 3px 8px
					rgba(16, 47, 79, 0.12);
			}

			@media (max-width: 600px) {

				.mi-stories {
					padding: 19px 16px 17px;
					border-radius: 20px;

					border:
						1px solid
						rgba(255, 255, 255, 0.68);

					background:
						linear-gradient(
							135deg,
							rgba(255, 255, 255, 0.84) 0%,
							rgba(238, 248, 252, 0.7) 58%,
							rgba(221, 240, 247, 0.64) 100%
						);

					box-shadow:
						0 15px 34px rgba(16, 47, 79, 0.15),
						inset 0 1px 0 rgba(255, 255, 255, 0.88);

					backdrop-filter:
						blur(18px)
						saturate(122%)
						brightness(109%);

					-webkit-backdrop-filter:
						blur(18px)
						saturate(122%)
						brightness(109%);
				}

				.mi-stories::after {
					right: 12px;
					bottom: -14px;
					width: 128px;
					height: 116px;
					padding-top: 12px;
					background:
						rgba(8, 43, 73, 0.05);
					color:
						rgba(8, 43, 73, 0.105);
					font-size: 4.8rem;
				}

				.mi-stories__header {
					align-items: center;
					gap: 10px;
				}

				.mi-stories__title {
					font-size: 22px;
				}

				.mi-stories__all {
					min-height: 32px;
					padding: 5px 9px;
					font-size: 11.5px;
				}

				.mi-stories__rail {
					width: calc(100% + 12px);
					margin-right: -12px;
					padding-right: 12px;
				}

				.mi-story-thumb {
					flex-basis: 86px;
				}

				.mi-story-thumb__label {
					font-size: 12px;
				}
			}

			@media (max-width: 380px) {

				.mi-stories__header {
					align-items: flex-start;
				}

				.mi-stories__all {
					padding-right: 8px;
					padding-left: 8px;
					white-space: nowrap;
				}
			}

			@media (prefers-reduced-motion: reduce) {

				.mi-story-thumb__ring,
				.mi-stories__all {
					transition: none;
				}
			}