.zoowai-fifth-act {
	--fifth-ink: #08233d;
	--fifth-muted: rgba(17, 55, 84, 0.68);
	--fifth-accent: #168bd0;
	position: relative;
	z-index: 7;
	min-height: 110svh;
	padding: clamp(104px, 12svh, 144px) 24px clamp(112px, 14svh, 168px);
	overflow: clip;
	isolation: isolate;
	color: var(--fifth-ink);
	background: transparent;
}

.zoowai-fifth-act::before {
	content: "";
	position: absolute;
	inset: 4% -8% 0;
	z-index: -1;
	background:
		radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.62), transparent 38%),
		radial-gradient(circle at 15% 58%, rgba(94, 187, 225, 0.1), transparent 24%),
		radial-gradient(circle at 84% 36%, rgba(76, 159, 207, 0.1), transparent 26%);
	pointer-events: none;
}

.zoowai-fifth-shell {
	width: min(1600px, 100%);
	margin: 0 auto;
}

.zoowai-fifth-heading {
	position: relative;
	z-index: 3;
	width: min(1040px, calc(100% - 48px));
	margin: 0 auto clamp(24px, 3svh, 36px);
	text-align: center;
}

.zoowai-fifth-kicker {
	margin: 0 0 10px;
	color: var(--fifth-accent);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zoowai-fifth-heading h2 {
	margin: 0;
	max-width: none;
	color: #071f37;
	font-size: clamp(40px, 4.2vw, 64px);
	font-weight: 880;
	line-height: 1.04;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.zoowai-fifth-heading h2 strong,
.zoowai-fifth-heading h2 span {
	font: inherit;
}

.zoowai-fifth-heading h2 strong {
	color: #082a48;
}

.zoowai-fifth-heading h2 span {
	color: #2e91c2;
}

.zoowai-fifth-heading > p:last-child {
	max-width: 64ch;
	margin: 12px auto 0;
	color: var(--fifth-muted);
	font-size: 14px;
	line-height: 1.68;
}

.zoowai-fifth-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(210px, 270px) minmax(560px, 1fr) minmax(210px, 270px);
	align-items: center;
	gap: clamp(18px, 2.5vw, 42px);
	perspective: 1400px;
	pointer-events: none;
}

.zoowai-fifth-side-card {
	position: relative;
	min-height: clamp(390px, 46vw, 470px);
	padding: 1px;
	overflow: hidden;
	border: 0;
	border-radius: 28px;
	color: var(--fifth-ink);
	text-align: left;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(151, 215, 238, 0.28), rgba(255, 255, 255, 0.5));
	box-shadow:
		0 28px 72px rgba(43, 111, 155, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	cursor: pointer;
	isolation: isolate;
	pointer-events: auto;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.zoowai-fifth-side-card::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 0;
	border-radius: 27px;
	background:
		radial-gradient(circle at 72% 8%, rgba(255, 255, 255, 0.84), transparent 32%),
		linear-gradient(150deg, rgba(255, 255, 255, 0.74), rgba(229, 247, 252, 0.58));
	backdrop-filter: blur(20px) saturate(1.18);
	-webkit-backdrop-filter: blur(20px) saturate(1.18);
	pointer-events: none;
}

.zoowai-fifth-side-card:hover,
.zoowai-fifth-side-card:focus-visible {
	box-shadow:
		0 32px 78px rgba(43, 111, 155, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.zoowai-fifth-side-card:focus-visible {
	outline: 3px solid rgba(36, 145, 205, 0.58);
	outline-offset: 5px;
}

.zoowai-fifth-side-inner {
	position: relative;
	z-index: 2;
	display: flex;
	min-height: inherit;
	flex-direction: column;
	padding: 24px 24px 22px;
	pointer-events: none;
}

.zoowai-fifth-side-direction {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: rgba(26, 79, 112, 0.65);
	font-size: 11px;
	font-weight: 820;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.zoowai-fifth-side-index {
	display: block;
	margin-top: auto;
	color: rgba(26, 95, 137, 0.54);
	font-size: 13px;
	font-weight: 830;
}

.zoowai-fifth-side-card h3 {
	margin: 14px 0 0;
	color: #08233d;
	font-size: clamp(24px, 2vw, 31px);
	font-weight: 880;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.zoowai-fifth-side-en {
	display: block;
	margin-top: 8px;
	color: rgba(16, 76, 116, 0.58);
	font-size: 11px;
	font-weight: 760;
	line-height: 1.38;
}

.zoowai-fifth-side-copy {
	display: block;
	margin-top: 15px;
	color: rgba(10, 46, 73, 0.68);
	font-size: 13px;
	line-height: 1.58;
}

.zoowai-fifth-side-action {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: #137bb8;
	font-size: 12px;
	font-weight: 820;
}

.zoowai-fifth-side-action::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
}

.zoowai-fifth-side-ripple {
	position: absolute;
	z-index: 3;
	width: 72px;
	height: 72px;
	border: 1px solid rgba(61, 143, 191, 0.22);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(69, 151, 198, 0.055) 0 44%, rgba(69, 151, 198, 0) 70%);
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.18);
	opacity: 0.52;
	animation: zoowai-fifth-side-ripple 240ms cubic-bezier(0.2, 0.72, 0.32, 1) forwards;
}

@keyframes zoowai-fifth-side-ripple {
	to {
		transform: translate(-50%, -50%) scale(3.2);
		opacity: 0;
	}
}

.zoowai-fifth-hero {
	position: relative;
	min-width: 0;
	pointer-events: none;
}

.zoowai-fifth-media {
	position: relative;
	min-height: clamp(500px, 50vw, 680px);
	overflow: hidden;
	border: 1px solid rgba(120, 193, 230, 0.4);
	border-radius: 34px;
	background: rgba(235, 248, 253, 0.8);
	box-shadow:
		0 42px 110px rgba(33, 99, 144, 0.19),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
	isolation: isolate;
}

.zoowai-fifth-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 280ms ease;
}

.zoowai-fifth-video.is-active {
	z-index: 1;
	opacity: 1;
}

.zoowai-fifth-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(5, 31, 51, 0.04) 42%, rgba(5, 31, 51, 0.68) 100%),
		linear-gradient(90deg, rgba(224, 244, 251, 0.12), transparent 34%);
	pointer-events: none;
}

.zoowai-fifth-sound {
	position: absolute;
	top: clamp(16px, 2vw, 24px);
	right: clamp(16px, 2vw, 24px);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 13px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(4, 35, 58, 0.46);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(14px) saturate(1.12);
	-webkit-backdrop-filter: blur(14px) saturate(1.12);
	color: rgba(255, 255, 255, 0.94);
	font: inherit;
	font-size: 11px;
	font-weight: 790;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.zoowai-fifth-sound:hover,
.zoowai-fifth-sound:focus-visible {
	border-color: rgba(255, 255, 255, 0.46);
	background: rgba(4, 35, 58, 0.62);
}

.zoowai-fifth-sound:focus-visible {
	outline: 3px solid rgba(125, 207, 247, 0.62);
	outline-offset: 3px;
}

.zoowai-fifth-sound[aria-pressed="true"] {
	background: rgba(7, 91, 139, 0.68);
}

.zoowai-fifth-sound .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
}

.zoowai-fifth-current-copy {
	position: absolute;
	left: clamp(22px, 3vw, 42px);
	right: clamp(22px, 3vw, 42px);
	bottom: clamp(22px, 3vw, 38px);
	z-index: 4;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
	align-items: end;
	gap: 24px;
	color: #ffffff;
}

.zoowai-fifth-current-index,
.zoowai-fifth-current-tag {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 6px 11px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(6, 43, 69, 0.26);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 11px;
	font-weight: 820;
}

.zoowai-fifth-current-title {
	margin: 14px 0 0;
	color: #ffffff;
	font-size: clamp(34px, 4vw, 60px);
	font-weight: 880;
	line-height: 0.98;
	letter-spacing: -0.04em;
	text-shadow: 0 12px 32px rgba(0, 32, 56, 0.24);
}

.zoowai-fifth-current-en {
	display: block;
	margin-top: 9px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	font-weight: 720;
}

.zoowai-fifth-current-detail {
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 20px;
	background: rgba(4, 39, 64, 0.34);
	backdrop-filter: blur(16px) saturate(1.12);
	-webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.zoowai-fifth-current-detail strong,
.zoowai-fifth-current-detail span {
	display: block;
}

.zoowai-fifth-current-detail strong {
	font-size: 16px;
	line-height: 1.35;
}

.zoowai-fifth-current-detail span {
	margin-top: 7px;
	color: rgba(255, 255, 255, 0.76);
	font-size: 12px;
	line-height: 1.55;
}

.zoowai-fifth-controls {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	margin-top: 24px;
	padding: 14px 16px;
	border: 1px solid rgba(99, 176, 218, 0.28);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.68);
	box-shadow: 0 18px 44px rgba(42, 108, 151, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	pointer-events: auto;
}

.zoowai-fifth-play {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid rgba(53, 145, 197, 0.24);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.84);
	color: #0b5c8c;
	font: inherit;
	font-size: 12px;
	font-weight: 820;
	cursor: pointer;
}

.zoowai-fifth-play:focus-visible,
.zoowai-fifth-step:focus-visible {
	outline: 3px solid rgba(36, 145, 205, 0.42);
	outline-offset: 3px;
}

.zoowai-fifth-play .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.zoowai-fifth-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.zoowai-fifth-step {
	min-height: 38px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: rgba(18, 69, 102, 0.48);
	font: inherit;
	font-size: 12px;
	font-weight: 850;
	cursor: pointer;
	transition: color 180ms ease, background 180ms ease;
}

.zoowai-fifth-step:hover,
.zoowai-fifth-step.is-active {
	background: rgba(224, 244, 251, 0.78);
	color: #0b79b8;
}

.zoowai-fifth-progress {
	position: relative;
	width: 92px;
	height: 2px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(35, 114, 161, 0.14);
}

.zoowai-fifth-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: #168bd0;
	transform: scaleX(0);
	transform-origin: left;
}

.zoowai-fifth-progress.is-running span {
	animation: zoowai-fifth-progress 4200ms linear forwards;
}

@keyframes zoowai-fifth-progress {
	to { transform: scaleX(1); }
}

@media (min-width: 901px) {
	.zoowai-fifth-stage {
		position: relative;
		display: block;
		width: clamp(1280px, 125vw, 1600px);
		height: 760px;
		margin-left: 50%;
		transform: translateX(-50%);
		perspective: 1500px;
		transform-style: preserve-3d;
	}

	.zoowai-fifth-stage::before {
		content: "";
		position: absolute;
		left: 12%;
		right: 12%;
		top: 172px;
		height: 390px;
		z-index: 0;
		border: 1px solid rgba(60, 146, 205, 0.15);
		border-radius: 50%;
		box-shadow: 0 0 80px rgba(83, 180, 218, 0.08);
		transform: rotateX(68deg);
		pointer-events: none;
	}

	.zoowai-fifth-hero {
		position: absolute;
		left: 50%;
		top: 35px;
		z-index: 12;
		width: clamp(620px, 64vw, 820px);
		transform: translateX(-50%) translateZ(62px);
		transform-style: preserve-3d;
	}

	.zoowai-fifth-media {
		min-height: 580px;
	}

	.zoowai-fifth-side-card {
		position: absolute;
		top: 130px;
		z-index: 30;
		width: 270px;
		min-height: 460px;
		transform-style: preserve-3d;
	}

	.zoowai-fifth-side-card[data-zoowai-fifth-side="prev"] {
		left: 6.125%;
		transform: translateZ(-60px) rotateY(12deg) translateY(18px);
	}

	.zoowai-fifth-side-card[data-zoowai-fifth-side="next"] {
		right: 6.125%;
		transform: translateZ(-60px) rotateY(-12deg) translateY(18px);
	}

	.zoowai-fifth-controls {
		width: min(770px, calc(100% - 50px));
		margin: 24px auto 0;
	}
}

@media (max-width: 1180px) {
	.zoowai-fifth-side-inner {
		padding: 20px;
	}

	.zoowai-fifth-side-card h3 {
		font-size: 23px;
	}

	.zoowai-fifth-current-copy {
		grid-template-columns: 1fr;
	}

	.zoowai-fifth-current-detail {
		max-width: 520px;
	}
}

@media (min-width: 901px) and (max-width: 1180px) {
	.zoowai-fifth-stage {
		width: max(1080px, 100vw);
		height: 600px;
	}

	.zoowai-fifth-stage::before {
		left: 6%;
		right: 6%;
		top: 112px;
		height: 300px;
	}

	.zoowai-fifth-hero {
		top: 0;
		width: min(560px, 56vw);
		transform: translateX(-50%) translateZ(40px);
	}

	.zoowai-fifth-media {
		min-height: 440px;
	}

	.zoowai-fifth-side-card {
		top: 60px;
		width: 190px;
		min-height: 360px;
	}

	.zoowai-fifth-side-card[data-zoowai-fifth-side="prev"] {
		left: 55px;
	}

	.zoowai-fifth-side-card[data-zoowai-fifth-side="next"] {
		right: 55px;
	}

	.zoowai-fifth-side-inner {
		min-height: 360px;
		padding: 16px;
	}

	.zoowai-fifth-side-card h3 {
		font-size: 19px;
	}

	.zoowai-fifth-side-copy {
		font-size: 11px;
		line-height: 1.5;
	}

	.zoowai-fifth-current-copy {
		left: 22px;
		right: 22px;
		bottom: 22px;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 16px;
	}

	.zoowai-fifth-current-title {
		font-size: clamp(34px, 4.1vw, 42px);
	}

	.zoowai-fifth-current-detail {
		padding: 14px 16px;
	}

	.zoowai-fifth-current-detail strong {
		font-size: 14px;
	}

	.zoowai-fifth-current-detail span {
		font-size: 11px;
	}

	.zoowai-fifth-controls {
		width: min(620px, calc(100% - 24px));
		margin-top: 12px;
	}
}

@media (min-width: 1600px) {
	.zoowai-fifth-act {
		padding-top: clamp(80px, 8svh, 96px);
	}

	.zoowai-fifth-shell {
		width: min(1840px, 100%);
	}

	.zoowai-fifth-heading {
		width: min(1400px, calc(100% - 64px));
		margin-bottom: 24px;
	}

	.zoowai-fifth-heading h2 {
		font-size: clamp(54px, 3.2vw, 66px);
	}

	.zoowai-fifth-stage {
		width: clamp(1500px, 92vw, 1900px);
		height: 780px;
	}

	.zoowai-fifth-stage::before {
		top: 150px;
		height: 380px;
	}

	.zoowai-fifth-hero {
		top: 12px;
		width: clamp(860px, 47vw, 980px);
		transform: translateX(-50%) translateZ(62px);
	}

	.zoowai-fifth-media {
		min-height: 600px;
	}

	.zoowai-fifth-side-card {
		top: 115px;
		width: 300px;
		min-height: 500px;
	}

	.zoowai-fifth-side-card[data-zoowai-fifth-side="prev"] {
		left: 5.5%;
	}

	.zoowai-fifth-side-card[data-zoowai-fifth-side="next"] {
		right: 5.5%;
	}

	.zoowai-fifth-side-inner {
		min-height: 500px;
	}

	.zoowai-fifth-controls {
		width: min(880px, calc(100% - 50px));
		margin-top: 18px;
	}
}

@media (max-width: 900px) {
	.zoowai-fifth-act {
		min-height: auto;
		padding: 96px 18px 120px;
		overflow: hidden;
	}

	.zoowai-fifth-heading {
		width: min(100%, 680px);
		margin-left: auto;
		margin-right: auto;
	}

	.zoowai-fifth-stage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		max-width: 760px;
		margin: 0 auto;
	}

	.zoowai-fifth-hero {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.zoowai-fifth-side-card {
		min-height: 280px;
	}

	.zoowai-fifth-side-inner {
		min-height: 280px;
	}

	.zoowai-fifth-media {
		min-height: 560px;
	}
}

@media (max-width: 640px) {
	.zoowai-fifth-heading h2 {
		font-size: 42px;
	}

	.zoowai-fifth-stage {
		grid-template-columns: 1fr;
	}

	.zoowai-fifth-hero,
	.zoowai-fifth-side-card {
		grid-column: 1;
	}

	.zoowai-fifth-media {
		min-height: 520px;
		border-radius: 26px;
	}

	.zoowai-fifth-sound {
		top: 14px;
		right: 14px;
		min-width: 40px;
		padding: 0 11px;
	}

	.zoowai-fifth-sound [data-zoowai-fifth-sound-label] {
		display: none;
	}

	.zoowai-fifth-current-copy {
		left: 18px;
		right: 18px;
		bottom: 18px;
	}

	.zoowai-fifth-current-title {
		font-size: 38px;
	}

	.zoowai-fifth-current-detail {
		padding: 14px 16px;
	}

	.zoowai-fifth-controls {
		grid-template-columns: 1fr auto;
	}

	.zoowai-fifth-steps {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.zoowai-fifth-progress {
		width: 70px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zoowai-fifth-side-ripple {
		display: none;
	}

	.zoowai-fifth-video,
	.zoowai-fifth-step {
		transition-duration: 1ms;
	}

	.zoowai-fifth-progress.is-running span {
		animation: none;
		transform: scaleX(1);
	}
}