/* Showcase preview: locked links + the note that explains them. */
[data-showcase-locked] { cursor: pointer; }

.lw-showcase-note {
	position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 200;
	display: flex; align-items: center; gap: 14px;
	width: max-content; max-width: calc(100vw - 32px);
	padding: 14px 18px 14px 16px; border-radius: 18px;
	background: #1F1D1B; color: #F6F1E8; border: 1px solid #3E3934;
	box-shadow: 0 24px 50px -24px rgba(20, 18, 16, .6);
	font: 400 .98rem/1.4 'Atkinson Hyperlegible Next', 'Segoe UI', Arial, sans-serif;
	opacity: 0; visibility: hidden; transform: translate(-50%, 14px);
	transition: opacity .3s, transform .45s cubic-bezier(.2, .7, .1, 1), visibility 0s .45s;
	pointer-events: none;
}
.lw-showcase-note.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.lw-showcase-note svg { width: 34px; height: auto; flex: none; color: #C9824E; }
.lw-showcase-note b {
	display: block; margin-bottom: 2px;
	font: 500 .72rem/1.2 'Atkinson Hyperlegible Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #C9824E;
}
@media (prefers-reduced-motion: reduce) {
	.lw-showcase-note { transition: none; }
}