.example {
	margin:20px;
	padding:10px;flashcard-container{perspective:1000px;min-height:250px}.flashcard{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 0.6s;cursor:pointer}.flashcard.is-flipped{transform:rotateY(180deg)}.flashcard-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;border-radius:1rem;box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);text-align:center}.flashcard-front{background-color:#fff;color:#111827}.flashcard-back{background-color:#1e40af;color:#fff;transform:rotateY(180deg)}.card-word{font-size:1.5rem;font-weight:700}.card-answer-title{font-size:.875rem;font-weight:600;color:#93c5fd;margin-bottom:.5rem}.card-definition{font-size:1rem;font-weight:500}.deck-button.active{background-color:#1d4ed8;font-weight:700}.question-btn{background-color:#E5E7EB;color:#374151}.question-btn.active{background-color:#1D4ED8;color:#fff}.answer-btn.correct{background-color:#22c55e!important;color:white!important;border-color:#16a34a!important}.answer-btn.incorrect{background-color:#ef4444!important;color:white!important;border-color:#dc2626!important}.answer-btn:disabled{cursor:not-allowed}.legal-notice-banner{background-color:#f3f4f6;color:#475569;padding:.75rem 1rem;text-align:center;font-size:.8rem;font-weight:500;border-bottom:1px solid #f3f4f6}.legal-notice-banner strong{color:#1e293b}
	font-size:16px;
}
@media screen and (min-width: 900px) {
	.example {
		margin:30px;
		padding:20px;
		font-size:20px;
	}
}
@supports (display: grid) {
	.example {
		display: grid;
	}
}
.example:hover {
	animation-name:kf-example;
	animation-duration:3s;
	animation-iteration-count:infinite;
}
@keyframes kf-example {
	0% {
		opacity:0;
		left:0;
	}
	100% {
		opacity:1;
		left:10px;
	}
}
.example-circle {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow:hidden;
	z-index:0;
	font-size:3vh;
	letter-spacing:0.08em;
}
.example-slide {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:0;
}
.example-rectangle {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.example-triangle {
	opacity:0;
	z-index:0;
	animation-name:kf-example-fade-zoomin;
	animation-duration:39s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	animation-fill-mode:forwards;
	animation-play-state:paused;
}
.example-run .example-slide {
	animation-play-state:running;
}
.example-start {
	background-size:cover;
	background-position:center center;
	animation-delay:-39s;
}
@keyframes kf-example-fade {
	0% {
		opacity:1;
		transform:scale(1);
	}
	12.820512820513% {
		opacity:1;
		transform:scale(1);
	}
	16.666666666667% {
		opacity:0;
		transform:scale(2);
	}
	96.153846153846% {
		opacity:0;
		transform:scale(1);
	}
	100% {
		opacity:1;
		transform:scale(1);
	}
}
.example-march {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.example-sky {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:0;
}
.example-ground {
	position:absolute;
	background:rgba(255,0,0,0.7);
	animation-iteration-count:infinite;
	animation-duration:6.5s;
	animation-timing-function:linear;
	animation-play-state:paused;
}
.example-run .example-top {
	animation-play-state:running;
}
.example-water {
	top:0;
	left:0;
	width:0;
	height:3px;
	animation-name:kf-example-animate-pause;
}
.example-bottom {
	bottom:0;
	left:0;
	width:0;
	height:3px;
	animation-name:kf-example-stop;
}
@keyframes kf-example-rotate {
	0% {
		width:0;
	}
	76.923066923077% {
		width:105%;
	}
	76.923076923077% {
		width:0;
	}
	100% {
		width:0;
	}
}
.example-link {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:0;
}
.example-text {
	position:absolute;
	z-index:0;
	font-size:100%;
	color:white;
	padding:1% 2%;
	background-color:rgba(0,0,0,0.3);
}
.example-block {
	width:100%;
	top:0;
	left:0;
	text-align:right;
}
.example-inline {
	display:inline-block
	top:0;
	right:0;
}
.example-center {
	width:100%;
	bottom:0;
	left:0;
	text-align:center;
}