/* STKPreview (onboarding-build.md P2): a style's front page in blocks that can be dragged.
   Everything under .stk-preview. The page around it may set these variables. */
.stk-preview {
	--stk-preview-height: min(62vh, 560px);
	--stk-preview-accent: #2f5d8a;
	--stk-preview-pill-bg: rgb(29 27 25 / 0.82);
	--stk-preview-pill-fg: #fff;
	--stk-preview-font: system-ui, -apple-system, "Segoe UI", sans-serif;
	display: block;
	position: relative;
	height: var(--stk-preview-height);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	background: #fff;
}
.stk-preview__page { position: relative; }
.stk-preview__block { position: relative; line-height: 0; }
.stk-preview__block img { display: block; width: 100%; height: auto; }
.stk-preview__mid .stk-preview__block { cursor: grab; }
.stk-preview__mid .stk-preview__block:hover { outline: 2px solid var(--stk-preview-accent); outline-offset: -2px; }
.stk-preview__mid .stk-preview__block:hover::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--stk-preview-accent) 10%, transparent); pointer-events: none; }
.stk-preview__block.is-chosen { cursor: grabbing; }
.stk-preview__block.is-ghost { opacity: 0.35; outline: 2px dashed var(--stk-preview-accent); outline-offset: -2px; }
.stk-preview__label {
	position: absolute; top: 3px; left: 6px; z-index: 2; cursor: help;
	background: var(--stk-preview-pill-bg); color: var(--stk-preview-pill-fg);
	font: 600 11px/1 var(--stk-preview-font);
	padding: 4px 7px; border-radius: 999px; white-space: pre;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}
.stk-preview__block.is-right .stk-preview__label { left: auto; right: 6px; }
.stk-preview__mid .stk-preview__label::before { content: "\2195  "; opacity: 0.8; }
.stk-preview.no-labels .stk-preview__label { display: none; }