.igs-container {
	--igs-ring-size: 74px;
	--igs-ring-name-size: 12px;
	--igs-ring-gap: 14px;
	--igs-ring-1: #f9ce34;
	--igs-ring-2: #ee2a7b;
	--igs-ring-3: #6228d7;
	--igs-seen: #c7c7c7;
	--igs-viewer-bg: #0b0b0d;
	width: 100%;
	max-width: 100%;
	padding: 12px 0;
	box-sizing: border-box;
	font-family: inherit;
}

.igs-container *,
.igs-viewer * { box-sizing: border-box; }
.igs-title { margin: 0 0 12px; font: inherit; font-size: 18px; font-weight: 700; color: inherit; }
.igs-section { margin: 0 0 18px; }
.igs-section:last-of-type { margin-bottom: 0; }
.igs-section-label { margin: 0 0 9px; font-size: 13px; font-weight: 700; color: inherit; opacity: .78; }

.igs-stories-row,
.igs-highlights-row,
.igs-single-row {
	display: flex;
	align-items: flex-start;
	gap: var(--igs-ring-gap);
	width: 100%;
	max-width: 100%;
	padding: 4px 2px 8px;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.igs-stories-row::-webkit-scrollbar,
.igs-highlights-row::-webkit-scrollbar,
.igs-single-row::-webkit-scrollbar { display: none; }

.igs-container.igs-rtl .igs-stories-row,
.igs-container.igs-rtl .igs-highlights-row,
.igs-container.igs-rtl .igs-single-row { direction: rtl; }

.igs-trigger,
.igs-story-ring,
.igs-highlight-ring {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 var(--igs-ring-size);
	width: var(--igs-ring-size);
	min-width: var(--igs-ring-size);
	min-height: calc(var(--igs-ring-size) + 24px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent !important;
	box-shadow: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: transform .18s ease;
}

.igs-trigger:hover { transform: translateY(-2px); }
.igs-trigger:active { transform: scale(.97); }
.igs-trigger:focus-visible .igs-ring-outer { outline: 3px solid color-mix(in srgb, var(--igs-ring-2) 35%, transparent); outline-offset: 3px; }

.igs-ring-outer {
	position: relative;
	width: var(--igs-ring-size);
	height: var(--igs-ring-size);
	padding: 3px;
	border-radius: 50%;
	display: block;
	background: linear-gradient(135deg, var(--igs-ring-1), var(--igs-ring-2) 52%, var(--igs-ring-3));
	box-sizing: border-box;
}

.igs-ring-img {
	display: block;
	width: 100%;
	height: 100%;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #eee center / cover no-repeat;
	box-sizing: border-box;
}

.igs-highlight-ring .igs-ring-outer { background: var(--igs-highlight-accent, #d7d7d7); }
.igs-trigger.igs-seen .igs-ring-outer { background: var(--igs-seen); animation: none !important; }
.igs-story-ring.igs-first-story:not(.igs-seen) .igs-ring-outer {
	background: linear-gradient(90deg, var(--igs-ring-1), var(--igs-ring-2), var(--igs-ring-3), var(--igs-ring-1));
	background-size: 240% 100%;
	animation: igs-ring-flow 3.5s linear infinite;
}

@keyframes igs-ring-flow { to { background-position: 240% 50%; } }

.igs-ring-name {
	display: block;
	width: calc(var(--igs-ring-size) + 10px);
	max-width: calc(var(--igs-ring-size) + 10px);
	margin-inline: -5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	font-size: var(--igs-ring-name-size);
	font-weight: 400;
	line-height: 1.35;
	color: inherit;
}

.igs-viewer[hidden] { display: none !important; }
.igs-viewer {
	--igs-viewer-bg: #0b0b0d;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: 22px;
	opacity: 0;
	visibility: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	transition: opacity .18s ease, visibility .18s ease;
	touch-action: none;
}

.igs-viewer.igs-open { opacity: 1; visibility: visible; }
.igs-viewer.igs-rtl { direction: rtl; }
.igs-viewer-backdrop { position: absolute; inset: 0; background: rgba(8,8,10,.92); backdrop-filter: blur(12px); }
.igs-viewer-shell {
	position: relative;
	z-index: 1;
	width: min(430px, calc((100vh - 44px) * .5625), calc(100vw - 120px));
	height: min(calc(100vh - 44px), calc((100vw - 120px) * 1.7778), 765px);
	min-height: 480px;
	overflow: visible;
	border-radius: 14px;
	background: var(--igs-viewer-bg);
	box-shadow: 0 24px 80px rgba(0,0,0,.55);
	transform: scale(.97);
	transition: transform .2s cubic-bezier(.2,.75,.25,1);
}
.igs-viewer.igs-open .igs-viewer-shell { transform: scale(1); }

.igs-viewer-progress {
	position: absolute;
	inset: 10px 10px auto;
	z-index: 30;
	display: flex;
	gap: 3px;
	direction: ltr;
}
.igs-progress-segment { flex: 1; height: 2.5px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.34); }
.igs-progress-segment i { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
.igs-progress-segment.is-complete i { width: 100%; }

.igs-viewer-topbar {
	position: absolute;
	inset: 19px 0 auto;
	z-index: 25;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px 28px;
	color: #fff;
	background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
	pointer-events: none;
}
.igs-viewer-profile { display: flex; align-items: center; gap: 9px; min-width: 0; pointer-events: auto; }
.igs-viewer-profile > span:last-child { display: grid; min-width: 0; }
.igs-viewer-avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,255,255,.16) center / cover no-repeat; color: #fff; font-size: 13px; font-weight: 700; }
.igs-viewer-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.igs-viewer-time { margin-top: 1px; color: rgba(255,255,255,.72); font-size: 10px; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.igs-viewer-controls { display: flex; align-items: center; gap: 2px; direction: ltr; pointer-events: auto; }
.igs-viewer-controls button,
.igs-viewer-nav {
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	color: #fff;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}
.igs-viewer-controls button { width: 34px; height: 34px; border-radius: 50%; transition: background .15s; }
.igs-viewer-controls button:hover,
.igs-viewer-controls button:focus-visible { background: rgba(255,255,255,.16); outline: 0; }
.igs-viewer-controls svg { width: 20px; height: 20px; fill: currentColor; }

.igs-viewer-stage { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: var(--igs-viewer-bg); }
.igs-viewer-media { position: absolute; inset: 0; opacity: 0; transform: scale(1.008); transition: opacity .18s ease, transform .4s ease; }
.igs-viewer-media.is-visible { opacity: 1; transform: scale(1); }
.igs-viewer-media img,
.igs-viewer-media video { display: block; width: 100%; height: 100%; margin: 0; background: var(--igs-viewer-bg); }
.igs-viewer-media .igs-fit-cover { object-fit: cover; }
.igs-viewer-media .igs-fit-contain { object-fit: contain; }
.igs-viewer-message { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 30px; color: #fff; text-align: center; }
.igs-viewer-message[hidden] { display: none; }

.igs-viewer-caption {
	position: absolute;
	inset: auto 18px 76px;
	z-index: 15;
	max-height: 38%;
	overflow: auto;
	padding: 12px 14px;
	border-radius: 12px;
	color: #fff;
	background: rgba(0,0,0,.38);
	backdrop-filter: blur(6px);
	font-size: 14px;
	line-height: 1.8;
	text-align: center;
	white-space: pre-line;
	text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.igs-viewer-caption[hidden] { display: none; }
.igs-viewer-cta {
	position: absolute;
	inset: auto 50% 20px auto;
	z-index: 20;
	min-width: 160px;
	max-width: calc(100% - 60px);
	padding: 11px 18px;
	border: 1px solid rgba(255,255,255,.72);
	border-radius: 12px;
	transform: translateX(50%);
	color: #111 !important;
	background: rgba(255,255,255,.94);
	box-shadow: 0 5px 20px rgba(0,0,0,.2);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.igs-viewer-cta[hidden] { display: none; }
.igs-viewer-cta:hover { background: #fff; transform: translateX(50%) translateY(-1px); }

.igs-tap-area {
	appearance: none;
	position: absolute;
	top: 72px;
	bottom: 70px;
	z-index: 7;
	width: 31%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.igs-tap-prev { left: 0; }
.igs-tap-next { right: 0; }
.igs-viewer.igs-rtl .igs-tap-prev { left: auto; right: 0; }
.igs-viewer.igs-rtl .igs-tap-next { right: auto; left: 0; }

.igs-viewer-nav {
	position: absolute;
	top: 50%;
	z-index: 20;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	color: #111;
	transform: translateY(-50%);
	box-shadow: 0 4px 18px rgba(0,0,0,.25);
	transition: transform .15s, background .15s;
}
.igs-viewer-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.igs-viewer-nav svg { width: 22px; height: 22px; fill: currentColor; }
.igs-viewer-nav-prev { left: -58px; }
.igs-viewer-nav-next { right: -58px; }
.igs-viewer.igs-rtl .igs-viewer-nav-prev { left: auto; right: -58px; }
.igs-viewer.igs-rtl .igs-viewer-nav-next { right: auto; left: -58px; }
.igs-viewer-nav[hidden] { display: none; }

.igs-viewer-toast {
	position: fixed;
	inset: auto 50% 24px auto;
	z-index: 50;
	padding: 9px 14px;
	border-radius: 30px;
	transform: translate(50%, 14px);
	opacity: 0;
	color: #fff;
	background: rgba(20,20,22,.88);
	font-size: 12px;
	pointer-events: none;
	transition: opacity .18s, transform .18s;
}
.igs-viewer-toast.is-visible { opacity: 1; transform: translate(50%, 0); }

@media (max-width: 600px) {
	.igs-viewer { padding: 0; }
	.igs-viewer-backdrop { background: #000; backdrop-filter: none; }
	.igs-viewer-shell { width: 100vw; height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; box-shadow: none; }
	.igs-viewer-stage { border-radius: 0; }
	.igs-viewer-nav { display: none !important; }
	.igs-viewer-progress { inset: max(8px, env(safe-area-inset-top)) 8px auto; }
	.igs-viewer-topbar { inset: max(16px, calc(env(safe-area-inset-top) + 7px)) 0 auto; padding-inline: 10px; }
	.igs-viewer-caption { inset-inline: 14px; bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px)); }
	.igs-viewer-cta { bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px)); }
}

@media (prefers-reduced-motion: reduce) {
	.igs-story-ring.igs-first-story .igs-ring-outer { animation: none; }
	.igs-trigger,
	.igs-viewer,
	.igs-viewer-shell,
	.igs-viewer-media { transition: none; }
}