.kps-story {
	--kps-accent: #e0a040;
	--kps-muted: rgba(255, 255, 255, 0.62);
	--kps-faint: rgba(255, 255, 255, 0.45);
	--kps-rule: rgba(255, 255, 255, 0.14);
	--kps-num: #fff;
}
.kps { margin: 0 0 2rem; color: inherit; }
.kps p { margin: 0; }
.kps-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kps-muted, rgba(255, 255, 255, 0.62));
	margin: 0 0 10px !important;
}
.kps-note { font-size: 11px; color: var(--kps-faint, rgba(255, 255, 255, 0.45)); margin-top: 8px !important; }
.kps-note a { color: inherit; text-decoration: underline; }

/* Palette */
.kps-swatches { display: flex; max-width: 420px; border-radius: 8px; overflow: hidden; }
.kps-swatch {
	flex: 1;
	height: 64px;
	position: relative;
	border: 0;
	padding: 0;
	margin: 0;
	background: var(--kps-c);
	cursor: pointer;
	transition: flex 0.25s ease;
}
.kps-swatch:hover, .kps-swatch:focus-visible { flex: 1.6; }
.kps-swatch:focus-visible { outline: 2px solid var(--kps-accent, #e0a040); outline-offset: -2px; }
.kps-swatch span {
	position: absolute;
	left: 10px;
	bottom: 8px;
	font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--kps-t, #fff);
}

/* Posters */
.kps-posters { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kps-posters li { margin: 0; padding: 0; }
.kps-poster {
	display: flex;
	width: 108px;
	aspect-ratio: 2 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	outline: 1px solid var(--kps-rule, rgba(255, 255, 255, 0.14));
	outline-offset: -1px;
	transition: transform 0.2s ease;
}
.kps-poster:hover { transform: translateY(-3px); }
.kps-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kps-poster-text { align-self: flex-end; padding: 8px; font-size: 11px; line-height: 1.3; color: #fff; }

/* Results */
.kps-metrics {
	display: grid;
	grid-template-columns: repeat(var(--kps-cols, 4), minmax(0, 1fr));
	gap: 20px;
}
.kps-metric { border-top: 1px solid var(--kps-rule, rgba(255, 255, 255, 0.14)); padding-top: 12px; }
.kps-num { font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--kps-num, #fff); }
.kps-metric.is-lead .kps-num { color: var(--kps-accent, #e0a040); }
.kps-bar { height: 3px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; margin: 8px 0 2px; }
.kps-bar span { display: block; height: 3px; border-radius: 2px; background: var(--kps-accent, #e0a040); }
.kps-cap { font-size: 12px; line-height: 1.4; color: var(--kps-muted, rgba(255, 255, 255, 0.62)); margin: 6px 0 8px !important; }
.kps-src { font-size: 11px; color: var(--kps-faint, rgba(255, 255, 255, 0.45)); display: flex; align-items: center; gap: 5px; }
.kps-ico { width: 13px; height: 13px; flex: none; }

.kps-quote {
	margin: 26px 0 0;
	padding: 2px 0 2px 14px;
	border: 0;
	border-left: 2px solid var(--kps-accent, #e0a040);
	border-radius: 0;
	background: none;
}
.kps-quote p { font-size: 16px; font-style: italic; line-height: 1.5; margin: 0 0 4px !important; }
.kps-quote cite { font-size: 11px; font-style: normal; color: var(--kps-faint, rgba(255, 255, 255, 0.45)); }
.kps-quote cite a { color: inherit; text-decoration: underline; }

@media (max-width: 780px) {
	.kps-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
	.kps-poster { width: calc(50% - 5px); }
	.kps-posters li { width: calc(50% - 5px); }
	.kps-posters li .kps-poster { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.kps-swatch, .kps-poster { transition: none; }
}