.lkar {
	--lkar-accent: var(--accent, #7da3ff);
	--lkar-glow: var(--glow, #b29fff);
	--lkar-field: var(--field, #14161e);
	--lkar-text: var(--text, #e6e8f0);
	--lkar-mute: var(--mute, #9aa3b8);
	--lkar-radius: var(--card, 16px);
	--lkar-ratio: 4 / 5;
	color: var(--lkar-text);
}
.lkar--light {
	--lkar-accent: #2c4f9e;
	--lkar-glow: #2c4f9e;
	--lkar-field: #e8eaef;
	--lkar-text: #1c2030;
	--lkar-mute: #5c6578;
}
.lkar__frame {
	position: relative;
	aspect-ratio: var(--lkar-ratio);
	border-radius: var(--lkar-radius);
	overflow: hidden;
	background: var(--lkar-field);
	outline: none;
	touch-action: pan-y;
}
.lkar__frame:focus-visible {
	outline: 2px solid var(--lkar-glow);
	outline-offset: 3px;
}
.lkar__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
}
.lkar__slide.is-on {
	opacity: 1;
	visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
	.lkar__slide { transition: opacity 0.35s ease; }
}
.lkar__controls {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}
.lkar__btn {
	appearance: none;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid #0e1020;
	border-radius: 8px;
	background: #1a1d38;
	color: #d4d8ee;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}
.lkar--light .lkar__btn {
	border-color: #c5cad6;
	background: #f7f8fb;
	color: #1c2030;
}
.lkar__btn:focus-visible,
.lkar__dot:focus-visible {
	outline: 2px solid var(--lkar-glow);
	outline-offset: 2px;
}
.lkar__dots {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	min-width: 0;
}
.lkar__dot {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.lkar__dot span {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 auto;
	border-radius: 99px;
	background: rgba(154, 163, 184, 0.55);
}
.lkar__dot[aria-current="true"] span {
	width: 22px;
	background: var(--lkar-accent);
}
@media (max-width: 480px) {
	.lkar__controls {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "dots dots" "prev next";
		gap: 0 8px;
	}
	.lkar__controls .lkar__btn:first-child { grid-area: prev; }
	.lkar__dots { grid-area: dots; }
	.lkar__controls .lkar__btn:last-child { grid-area: next; }
}
@media (hover: hover) {
	.lkar__btn:hover { background: #2c3160; color: #f2f3ff; }
	.lkar--light .lkar__btn:hover { background: #e6e9f2; }
}