@layer cm {
	.cm-instruction {
		position: relative;
		display: flex;
		min-height: var(--cm-screen-h);
		width: 100%;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		padding-inline: 1rem;
		padding-block: 1.5rem;
		-webkit-user-select: none;
		user-select: none;
	}

	@media (min-width: 640px) {
		.cm-instruction {
			padding-block: 2rem;
		}
	}

	.cm-instruction__content {
		position: relative;
		z-index: 10;
		margin-block: auto;
		display: flex;
		width: 100%;
		max-width: 840px;
		flex-direction: column;
		align-items: center;
		padding-inline: 0.5rem;
		padding-block: 1rem;
		text-align: center;
	}

	@media (min-width: 640px) {
		.cm-instruction__content {
			padding-inline: 1rem;
		}
	}

	.cm-instruction__title {
		margin-bottom: 1rem;
		font-family: FactorA,sans-serif;
		font-size: 24px;
		line-height: 110%;
		font-weight: 800;
		letter-spacing: 0%;
		color: #fff;
	}

	@media (min-width: 640px) {
		.cm-instruction__title {
			margin-bottom: 1.25rem;
			font-size: 32px;
		}
	}

	@media (min-width: 768px) {
		.cm-instruction__title {
			font-size: 40px;
		}
	}

	.cm-instruction__dots {
		margin-bottom: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
	}

	.cm-instruction__dot {
		height: 0.5rem;
		width: 0.5rem;
		border-radius: 9999px;
		background-color: #ffffff59;
		transition-property: width, background-color;
		transition-duration: .4s;
		transition-timing-function: cubic-bezier(.25,1,.4,1);
	}

	.cm-instruction__dot--active {
		width: 1.5rem;
		background-color: #fff;
	}

	.cm-instruction__stage {
		width: 100%;
		max-width: 640px;
	}

	.cm-instruction__step {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
	}

	.cm-instruction-step-enter-active,
	.cm-instruction-step-leave-active {
		transition-property: opacity, translate;
		transition-duration: .4s;
		transition-timing-function: cubic-bezier(.25,1,.4,1);
	}

	.cm-instruction-step-leave-active {
		transition-duration: .25s;
		transition-timing-function: ease-in;
	}

	.cm-instruction-step-enter-from,
	.cm-instruction-step-leave-to {
		opacity: 0;
	}

	.cm-instruction__stage--forward .cm-instruction-step-enter-from,
	.cm-instruction__stage--back .cm-instruction-step-leave-to {
		translate: 2.5rem 0;
	}

	.cm-instruction__stage--forward .cm-instruction-step-leave-to,
	.cm-instruction__stage--back .cm-instruction-step-enter-from {
		translate: -2.5rem 0;
	}

	.cm-instruction__line {
		display: flex;
		min-height: 4.6em;
		max-width: 560px;
		align-items: center;
		justify-content: center;
		font-family: FactorA,sans-serif;
		font-size: 15px;
		line-height: 125%;
		font-weight: 400;
		color: #fffffff2;
	}

	@media (min-width: 640px) {
		.cm-instruction__line {
			min-height: 3.8em;
			font-size: 17px;
		}
	}

	@media (min-width: 1024px) {
		.cm-instruction__line {
			font-size: 18px;
		}
	}

	.cm-instruction__visual {
		margin-top: 0.75rem;
		display: flex;
		height: 280px;
		width: 100%;
		align-items: center;
		justify-content: center;
	}

	@media (min-width: 640px) {
		.cm-instruction__visual {
			margin-top: 1.25rem;
			height: 300px;
		}
	}

	.cm-instruction__duel {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	.cm-instruction__clash {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
	}

	.cm-instruction__health {
		width: 220px;
	}

	@media (max-width: 767px) {
		.cm-instruction__health {
			width: min(240px, 70vw);
		}
	}

	.cm-attack {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		max-width: 420px;
		align-items: center;
		justify-content: space-between;
	}

	.cm-attack__monster {
		height: auto;
		width: 46%;
		max-width: 190px;
		filter: drop-shadow(0 18px 30px #0000008c);
	}

	.cm-attack__monster--toks {
		position: relative;
		aspect-ratio: 1070 / 1204;
	}

	.cm-attack__monster--toks .cm-toks {
		--cm-toks-size: 128.55%;
		--cm-toks-shift-x: -15.68%;
		--cm-toks-shift-y: 6.26%;
	}

	.cm-attack__card {
		will-change: transform, opacity;
		animation: 3.2s cubic-bezier(.25,1,.4,1) infinite myth-card-attack;
		height: 190px;
		width: 136px;
		flex-shrink: 0;
		filter: drop-shadow(0 16px 30px #00000080);
	}

	@media (min-width: 640px) {
		.cm-attack__card {
			height: 210px;
			width: 150px;
		}
	}

	.cm-defog {
		position: relative;
		height: 100%;
		width: 100%;
		max-width: 480px;
		overflow: hidden;
		border-radius: 18px;
		border-style: solid;
		border-width: 1px;
		border-color: #ffffff33;
		box-shadow: 0 20px 44px #00000073;
	}

	.cm-defog__photo {
		position: absolute;
		inset: 0;
		height: 100%;
		width: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 50% 78%;
	}

	@media (min-width: 768px) {
		.cm-defog__photo {
			object-position: 50% 62%;
			scale: 1.25;
			transform-origin: 50% 80%;
		}
	}

	.cm-defog__photo--fog {
		will-change: opacity;
		animation: 2.6s ease-in-out .7s both defog-fade;
	}

	.cm-defog__mist {
		will-change: transform, opacity;
		animation: 2.4s ease-in-out .5s both defog-mist-lift;
		pointer-events: none;
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: 55%;
		overflow: hidden;
		opacity: .8;
	}

	.cm-instruction__actions {
		margin-top: 1.25rem;
		display: flex;
		width: 100%;
		max-width: 420px;
		align-items: stretch;
		justify-content: center;
		gap: 0.75rem;
	}

	@media (min-width: 640px) {
		.cm-instruction__actions {
			margin-top: 1.75rem;
		}
	}

	.cm-instruction__btn {
		flex: 1;
	}

	.cm-instruction__back {
		min-height: 48px;
		padding: 16px 24px;
		color: #fff;
		background-color: #ffffff2e;
		box-shadow: inset 0 0 0 1px #ffffff40, 0 8px 20px #00000033;
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		transition: background-color .2s linear, box-shadow .2s linear, scale .15s ease;
	}

	@media (hover: hover) {
		.cm-instruction__back:hover {
			background-color: #ffffff47;
			box-shadow: inset 0 0 0 1px #ffffff66, 0 8px 20px #00000033;
		}
	}

	.cm-instruction__back:active {
		scale: .98;
		background-color: #ffffff1f;
	}

	.cm-instruction__back:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	.cm-instruction__back[aria-disabled="true"] {
		cursor: default;
		opacity: .5;
		scale: 1;
	}

	@media (min-width: 640px) {
		.cm-instruction__btn {
			flex: 0 1 220px;
		}
	}

	.cm-instruction__back,
	.cm-instruction__back + .cm-instruction__btn {
		flex: 1 1 0;
		min-width: 0;
	}

	@media (max-width: 767px) {
		.cm-instruction__visual {
			height: auto;
			min-height: 280px;
		}

		.cm-defog {
			height: 280px;
		}

		.cm-attack--phone {
			height: auto;
			flex-direction: column;
			justify-content: center;
			gap: 0.25rem;
		}

		.cm-attack--phone .cm-attack__monster {
			width: 40%;
			max-width: 150px;
		}

		.cm-instruction__boss {
			width: 100%;
			max-width: 420px;
			text-align: left;
		}

		.cm-instruction__boss--plain .cm-boss {
			padding-top: 0.75rem;
		}

		.cm-instruction__boss--plain .cm-boss__avatar {
			display: none;
		}

		.cm-instruction__boss--plain .cm-boss__bubble {
			padding-left: 0.875rem;
		}

		.cm-instruction__boss--plain .cm-boss__bubble::after {
			content: '';
			position: absolute;
			bottom: -8px;
			left: 50%;
			height: 14px;
			width: 14px;
			translate: -50% 0;
			rotate: 45deg;
			border-right: 2px solid var(--cm-boss-tone);
			border-bottom: 2px solid var(--cm-boss-tone);
			border-bottom-right-radius: 3px;
			background-color: #1b1928;
		}

		.cm-instruction__duel {
			gap: 0.75rem;
		}

		.cm-instruction__demo {
			display: flex;
			width: 100%;
			max-width: 420px;
			flex-direction: column;
			gap: 0.75rem;
			text-align: left;
		}

		.cm-instruction__demo-card {
			pointer-events: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.cm-instruction__dot,
		.cm-instruction-step-enter-active,
		.cm-instruction-step-leave-active {
			transition-property: opacity;
		}

		.cm-instruction__stage--forward .cm-instruction-step-enter-from,
		.cm-instruction__stage--back .cm-instruction-step-leave-to,
		.cm-instruction__stage--forward .cm-instruction-step-leave-to,
		.cm-instruction__stage--back .cm-instruction-step-enter-from {
			translate: 0 0;
		}

		.cm-attack__monster,
		.cm-attack__card,
		.cm-instruction .cm-clash__fact,
		.cm-instruction .cm-fog__stream-3 {
			animation: none;
		}

		.cm-instruction .cm-clash__half-left,
		.cm-instruction .cm-clash__half-right,
		.cm-instruction .cm-clash__sparks,
		.cm-defog__mist,
		.cm-defog__photo--fog {
			animation: none;
			opacity: 0;
		}
	}

	.cm-clash {
		pointer-events: none;
		position: relative;
		margin-block: 0;
		display: flex;
		height: 220px;
		width: 100%;
		align-items: center;
		justify-content: center;
		-webkit-user-select: none;
		user-select: none;
	}

	@media (min-width: 640px) {
		.cm-clash {
			height: 240px;
		}
	}

	.cm-clash__deck {
		position: relative;
		display: flex;
		height: 190px;
		width: 136px;
		align-items: center;
		justify-content: center;
	}

	@media (min-width: 640px) {
		.cm-clash__deck {
			height: 210px;
			width: 150px;
		}
	}

	.cm-clash__half-left {
		will-change: transform, opacity;
		animation: 4.5s cubic-bezier(.25,1,.4,1) infinite myth-left-flyin-rip;
		position: absolute;
		inset: 0;
		overflow: hidden;
		border-radius: 14px;
	}

	.cm-clash__half-clip {
		position: absolute;
		inset: 0;
	}

	.cm-clash__myth-card {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		border-radius: 14px;
		border-style: solid;
		border-width: 1px;
		border-color: #dd740099;
		background-color: #121620;
		background-image: linear-gradient(to bottom right in oklab, #1e1a26, #151c26, #0c1117);
		padding: 7px;
		opacity: 1;
	}

	.cm-clash__myth-frame {
		pointer-events: none;
		position: absolute;
		inset: 5px;
		border-radius: 10px;
		border-style: solid;
		border-width: 1px;
		border-color: #f99c0040;
	}

	.cm-clash__corner {
		position: relative;
		z-index: 10;
		display: flex;
		width: 1.25rem;
		flex-direction: column;
		align-items: center;
		line-height: 1;
	}

	.cm-clash__myth-letter {
		font-family: FactorA,sans-serif;
		font-size: 15px;
		font-weight: 900;
		color: oklch(63.7% .237 25.331);
		filter: drop-shadow(0 1px 2px #00000026);
	}

	.cm-clash__myth-suit {
		margin-top: 1px;
		font-size: 11px;
		color: #fb2c36e6;
	}

	.cm-clash__center {
		position: relative;
		z-index: 10;
		margin-block: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cm-clash__myth-word {
		font-family: FactorA,sans-serif;
		font-size: 22px;
		font-weight: 900;
		letter-spacing: .05em;
		color: #fff;
		text-transform: uppercase;
	}

	@media (min-width: 640px) {
		.cm-clash__myth-word {
			font-size: 25px;
		}
	}

	.cm-clash__corner-flip {
		position: relative;
		z-index: 10;
		display: flex;
		width: 1.25rem;
		rotate: 180deg;
		flex-direction: column;
		align-items: center;
		align-self: flex-end;
		line-height: 1;
	}

	.cm-clash__half-right {
		will-change: transform, opacity;
		animation: 4.5s cubic-bezier(.25,1,.4,1) infinite myth-right-flyin-rip;
		position: absolute;
		inset: 0;
		overflow: hidden;
		border-radius: 14px;
	}

	.cm-clash__sparks {
		will-change: transform, opacity;
		animation: 4.5s ease-out infinite rip-sparks-soft;
		pointer-events: none;
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cm-clash__spark-dot {
		height: 0.375rem;
		width: 0.375rem;
		border-radius: 9999px;
		background-color: oklch(87.9% .169 91.605);
		opacity: .9;
	}

	.cm-clash__spark-a {
		position: absolute;
		height: 0.125rem;
		width: 0.5rem;
		translate: 0.75rem -0.5rem;
		rotate: -45deg;
		background-color: oklch(70.4% .191 22.216);
		opacity: .7;
	}

	.cm-clash__spark-b {
		position: absolute;
		height: 0.125rem;
		width: 0.5rem;
		translate: -0.75rem 0.75rem;
		rotate: 45deg;
		background-color: oklch(70.4% .191 22.216);
		opacity: .7;
	}

	.cm-clash__spark-c {
		position: absolute;
		height: 0.375rem;
		width: 0.375rem;
		translate: .25rem -1rem;
		border-radius: 9999px;
		background-color: #fff;
		opacity: .9;
	}

	.cm-clash__fact {
		will-change: transform, opacity;
		animation: 4.5s cubic-bezier(.25,1,.4,1) infinite fact-right-flyin;
		position: absolute;
		inset: 0;
		z-index: 20;
	}

	.cm-clash__fact-card {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		border-radius: 14px;
		border-style: solid;
		border-width: 2px;
		border-color: oklch(69.6% .17 162.48);
		background-image: linear-gradient(to bottom right in oklab, #fff, #f7f9fc, #e8edf4);
		padding: 7px;
		box-shadow: 0 16px 36px #0000008c, 0 4px 10px #0000004d;
	}

	.cm-clash__fact-gloss {
		pointer-events: none;
		position: absolute;
		inset-inline: -2.5rem;
		top: -3rem;
		height: 6rem;
		rotate: 12deg;
		background-image: linear-gradient(to bottom in oklab, #fff9, transparent);
	}

	.cm-clash__fact-frame {
		pointer-events: none;
		position: absolute;
		inset: 5px;
		border-radius: 10px;
		border-style: solid;
		border-width: 1px;
		border-color: #0097674d;
	}

	.cm-clash__fact-letter {
		font-family: FactorA,sans-serif;
		font-size: 15px;
		font-weight: 900;
		color: oklch(50.8% .118 165.612);
		filter: drop-shadow(0 1px 2px #00000026);
	}

	.cm-clash__fact-suit {
		margin-top: 1px;
		font-size: 11px;
		color: oklch(59.6% .145 163.225);
	}

	.cm-clash__fact-word {
		font-family: FactorA,sans-serif;
		font-size: 22px;
		font-weight: 900;
		letter-spacing: .05em;
		color: #133827;
		text-transform: uppercase;
		filter: drop-shadow(0 1px 2px #00000026);
	}

	@media (min-width: 640px) {
		.cm-clash__fact-word {
			font-size: 25px;
		}
	}
}