/**
 * OSKY Cue — popups.
 *
 * Every design choice is a custom property on .osky-cue (set inline from the
 * popup's settings), so themes can restyle a popup without fighting
 * specificity. Layout, position and motion are modifier classes on the root.
 *
 * Structure:
 *   .osky-cue                 fixed, full viewport, click-through; the size container
 *     .osky-cue__overlay      backdrop (modal, drawer)
 *     .osky-cue__wrap         positions the dialog
 *       .osky-cue__dialog     the card
 *         .osky-cue__close
 *         .osky-cue__media    optional image
 *         .osky-cue__body > .osky-cue__content.osky-cue-prose
 *
 * Phone layouts use a container query on .osky-cue, so the admin preview
 * (a small box, not a small screen) shows them too.
 */

/* ─── Root & tokens ──────────────────────────────────────────────────────── */

.osky-cue {
	--osky-cue-width: 560px;
	--osky-cue-min-h: 0px;
	--osky-cue-pad: 44px;
	--osky-cue-offset: 24px;
	--osky-cue-bg: #ffffff;
	--osky-cue-bg2: #eef2ff;
	--osky-cue-angle: 135deg;
	--osky-cue-heading: #0f172a;
	--osky-cue-text: #475569;
	--osky-cue-accent: #111827;
	--osky-cue-accent-text: #ffffff;
	--osky-cue-heading-font: inherit;
	--osky-cue-body-font: inherit;
	--osky-cue-scale: 100;
	--osky-cue-radius: 20px;
	--osky-cue-border-w: 0px;
	--osky-cue-border-c: #0f172a;
	--osky-cue-overlay-c: #0f172a;
	--osky-cue-overlay-o: 55;
	--osky-cue-blur: 4px;
	--osky-cue-speed: 420ms;
	--osky-cue-img-w: 44%;
	--osky-cue-img-h: 220px;
	--osky-cue-scrim: 55;
	--osky-cue-z: 99990;

	/* Derived, not settings. */
	--osky-cue-dur: var(--osky-cue-speed);
	--osky-cue-from: scale(0.86);
	--osky-cue-ease: cubic-bezier(0.34, 1.5, 0.64, 1);
	--osky-cue-justify: center;
	--osky-cue-align: center;
	--osky-cue-btn-radius: calc(var(--osky-cue-radius) * 0.55);
	--osky-cue-inner-radius: max(0px, calc(var(--osky-cue-radius) - var(--osky-cue-border-w)));

	position: fixed;
	inset: 0;
	z-index: var(--osky-cue-z);
	pointer-events: none;
	container: osky-cue / inline-size;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.osky-cue[hidden],
.osky-cue [hidden],
.osky-cue-teaser[hidden] {
	display: none !important;
}

.osky-cue *,
.osky-cue *::before,
.osky-cue *::after {
	box-sizing: border-box;
}

/* Admin previews: inside a box instead of the window. */
.osky-cue--static {
	position: absolute;
}

/* ─── Backdrop ───────────────────────────────────────────────────────────── */

.osky-cue__overlay {
	position: absolute;
	inset: 0;
	display: none;
	background: rgba(15, 23, 42, 0.55);
	background: color-mix(in srgb, var(--osky-cue-overlay-c) calc(var(--osky-cue-overlay-o) * 1%), transparent);
	-webkit-backdrop-filter: blur(var(--osky-cue-blur));
	backdrop-filter: blur(var(--osky-cue-blur));
	opacity: 0;
	transition: opacity var(--osky-cue-dur) ease;
}

.osky-cue--overlay.osky-cue--layout-modal .osky-cue__overlay,
.osky-cue--overlay.osky-cue--layout-drawer .osky-cue__overlay {
	display: block;
}

.osky-cue.is-open .osky-cue__overlay {
	opacity: 1;
}

/* ─── Positioning wrapper ────────────────────────────────────────────────── */

.osky-cue__wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--osky-cue-offset);
	pointer-events: none;
}

/* Blocking layouts catch clicks outside the dialog. */
.osky-cue--layout-modal .osky-cue__wrap,
.osky-cue--layout-fullscreen .osky-cue__wrap,
.osky-cue--layout-drawer .osky-cue__wrap {
	pointer-events: auto;
}

.osky-cue--pos-top-left .osky-cue__wrap      { align-items: flex-start; justify-content: flex-start; }
.osky-cue--pos-top-center .osky-cue__wrap    { align-items: flex-start; justify-content: center; }
.osky-cue--pos-top-right .osky-cue__wrap     { align-items: flex-start; justify-content: flex-end; }
.osky-cue--pos-center-left .osky-cue__wrap   { align-items: center; justify-content: flex-start; }
.osky-cue--pos-center .osky-cue__wrap        { align-items: center; justify-content: center; }
.osky-cue--pos-center-right .osky-cue__wrap  { align-items: center; justify-content: flex-end; }
.osky-cue--pos-bottom-left .osky-cue__wrap   { align-items: flex-end; justify-content: flex-start; }
.osky-cue--pos-bottom-center .osky-cue__wrap { align-items: flex-end; justify-content: center; }
.osky-cue--pos-bottom-right .osky-cue__wrap  { align-items: flex-end; justify-content: flex-end; }

/* Keep clear of the WordPress admin bar. */
.admin-bar .osky-cue:not(.osky-cue--static) .osky-cue__wrap {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* ─── Dialog ─────────────────────────────────────────────────────────────── */

.osky-cue__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--osky-cue-width);
	min-height: var(--osky-cue-min-h);
	max-height: 100%;
	margin: 0;
	background: var(--osky-cue-bg);
	color: var(--osky-cue-text);
	border: var(--osky-cue-border-w) solid var(--osky-cue-border-c);
	border-radius: var(--osky-cue-radius);
	font-family: var(--osky-cue-body-font);
	font-size: calc(16px * var(--osky-cue-scale) / 100);
	line-height: 1.55;
	text-align: var(--osky-cue-align);
	pointer-events: auto;
	outline: none;
	isolation: isolate;
	opacity: 0;
	transform: var(--osky-cue-from);
	transition: opacity var(--osky-cue-dur) ease, transform var(--osky-cue-dur) var(--osky-cue-ease);
	will-change: transform, opacity;
}

.osky-cue.is-open .osky-cue__dialog {
	opacity: 1;
	transform: none;
}

.osky-cue__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	padding: var(--osky-cue-pad);
	overflow: auto;
	overscroll-behavior: contain;
	border-radius: var(--osky-cue-inner-radius);
}

.osky-cue__content {
	width: 100%;
}

.osky-cue--align-left   { --osky-cue-align: left;   --osky-cue-justify: flex-start; }
.osky-cue--align-center { --osky-cue-align: center; --osky-cue-justify: center; }
.osky-cue--align-right  { --osky-cue-align: right;  --osky-cue-justify: flex-end; }

/* ─── Fills ──────────────────────────────────────────────────────────────── */

.osky-cue--bg-gradient .osky-cue__dialog {
	background: linear-gradient(var(--osky-cue-angle), var(--osky-cue-bg), var(--osky-cue-bg2));
}

/* A soft light in the corner gives gradients depth. */
.osky-cue--bg-gradient .osky-cue__dialog::after,
.osky-cue--bg-glass .osky-cue__dialog::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
	pointer-events: none;
}

.osky-cue--bg-glass .osky-cue__dialog {
	background:
		radial-gradient(90% 70% at 0% 0%, rgba(236, 72, 153, 0.32), transparent 60%),
		radial-gradient(90% 80% at 100% 100%, rgba(56, 189, 248, 0.3), transparent 60%),
		color-mix(in srgb, var(--osky-cue-bg) 16%, transparent);
	-webkit-backdrop-filter: blur(26px) saturate(1.8);
	backdrop-filter: blur(26px) saturate(1.8);
}

/* ─── Shadows ────────────────────────────────────────────────────────────── */

.osky-cue--shadow-soft .osky-cue__dialog   { box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.16); }
.osky-cue--shadow-medium .osky-cue__dialog { box-shadow: 0 22px 50px -14px rgba(15, 23, 42, 0.38), 0 2px 6px rgba(15, 23, 42, 0.06); }
.osky-cue--shadow-deep .osky-cue__dialog   { box-shadow: 0 40px 90px -24px rgba(15, 23, 42, 0.6), 0 12px 24px -12px rgba(15, 23, 42, 0.25); }
.osky-cue--shadow-glow .osky-cue__dialog   { box-shadow: 0 24px 60px -22px color-mix(in srgb, var(--osky-cue-accent) 55%, transparent), 0 10px 24px -14px rgba(15, 23, 42, 0.4); }
.osky-cue--shadow-hard .osky-cue__dialog   { box-shadow: 8px 8px 0 0 var(--osky-cue-border-c); }

/* ─── Image ──────────────────────────────────────────────────────────────── */

.osky-cue__media {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	background: color-mix(in srgb, var(--osky-cue-accent) 10%, var(--osky-cue-bg));
}

.osky-cue__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.osky-cue--fit-contain .osky-cue__media img {
	object-fit: contain;
	padding: 6%;
}

.osky-cue--has-img.osky-cue--img-left .osky-cue__dialog  { flex-direction: row; }
.osky-cue--has-img.osky-cue--img-right .osky-cue__dialog { flex-direction: row-reverse; }

.osky-cue--has-img:is(.osky-cue--img-left, .osky-cue--img-right) .osky-cue__media {
	flex-basis: var(--osky-cue-img-w);
	align-self: stretch;
}

.osky-cue--has-img.osky-cue--img-left .osky-cue__media  { border-radius: var(--osky-cue-inner-radius) 0 0 var(--osky-cue-inner-radius); }
.osky-cue--has-img.osky-cue--img-right .osky-cue__media { border-radius: 0 var(--osky-cue-inner-radius) var(--osky-cue-inner-radius) 0; }

.osky-cue--has-img.osky-cue--img-top .osky-cue__media {
	height: var(--osky-cue-img-h);
	border-radius: var(--osky-cue-inner-radius) var(--osky-cue-inner-radius) 0 0;
}

.osky-cue--has-img.osky-cue--img-background .osky-cue__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--osky-cue-inner-radius);
}

.osky-cue--has-img.osky-cue--img-background .osky-cue__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--osky-cue-bg) calc(var(--osky-cue-scrim) * 1%), transparent);
}

/* ─── Close button ───────────────────────────────────────────────────────── */

.osky-cue .osky-cue__close {
	position: absolute;
	top: 0.85em;
	right: 0.85em;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 2.3em;
	height: 2.3em;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--osky-cue-close-bg, color-mix(in srgb, var(--osky-cue-heading) 10%, transparent));
	color: var(--osky-cue-close-c, var(--osky-cue-heading));
	box-shadow: none;
	font: inherit;
	font-size: 1em;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.35s ease, visibility 0.35s, transform 0.2s ease;
}

.osky-cue .osky-cue__close:hover {
	background: var(--osky-cue-close-bg, color-mix(in srgb, var(--osky-cue-heading) 18%, transparent));
}

.osky-cue .osky-cue__close svg {
	width: 1em;
	height: 1em;
	transition: transform 0.25s ease;
}

.osky-cue .osky-cue__close:hover svg {
	transform: rotate(90deg);
}

.osky-cue .osky-cue__close:focus-visible {
	outline: 2px solid var(--osky-cue-accent);
	outline-offset: 2px;
}

.osky-cue__close-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.osky-cue--close-plain .osky-cue__close  { background: transparent; }
.osky-cue--close-square .osky-cue__close { border-radius: calc(var(--osky-cue-btn-radius) * 0.7); }

.osky-cue.osky-cue--close-text .osky-cue__close {
	width: auto;
	padding: 0 0.95em 0 1em;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.osky-cue--close-text .osky-cue__close-text {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

.osky-cue--close-outside .osky-cue__close {
	top: -0.9em;
	right: -0.9em;
	background: var(--osky-cue-close-bg, #ffffff);
	color: var(--osky-cue-close-c, #0f172a);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.osky-cue--close-outside .osky-cue__close:hover {
	background: var(--osky-cue-close-bg, #ffffff);
	transform: scale(1.08);
}

.osky-cue--close-none .osky-cue__close { display: none; }

.osky-cue--close-at-left .osky-cue__close { right: auto; left: 0.85em; }
.osky-cue--close-at-left.osky-cue--close-outside .osky-cue__close { left: -0.9em; }

.osky-cue .osky-cue__close.is-waiting {
	opacity: 0;
	visibility: hidden;
}

/* ─── Motion ─────────────────────────────────────────────────────────────── */

.osky-cue--anim-pop         { --osky-cue-from: scale(0.82); --osky-cue-ease: cubic-bezier(0.34, 1.56, 0.64, 1); }
.osky-cue--anim-fade        { --osky-cue-from: none; }
.osky-cue--anim-zoom        { --osky-cue-from: scale(0.94); --osky-cue-ease: cubic-bezier(0.2, 0.8, 0.2, 1); }
.osky-cue--anim-slide-up    { --osky-cue-from: translateY(56px); --osky-cue-ease: cubic-bezier(0.2, 0.85, 0.25, 1); }
.osky-cue--anim-slide-down  { --osky-cue-from: translateY(-56px); --osky-cue-ease: cubic-bezier(0.2, 0.85, 0.25, 1); }
.osky-cue--anim-slide-left  { --osky-cue-from: translateX(72px); --osky-cue-ease: cubic-bezier(0.2, 0.85, 0.25, 1); }
.osky-cue--anim-slide-right { --osky-cue-from: translateX(-72px); --osky-cue-ease: cubic-bezier(0.2, 0.85, 0.25, 1); }
.osky-cue--anim-drop        { --osky-cue-from: translateY(-140px); --osky-cue-ease: cubic-bezier(0.34, 1.45, 0.6, 1); }
.osky-cue--anim-flip        { --osky-cue-from: perspective(1100px) rotateX(-32deg) translateY(-12px); --osky-cue-ease: cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.osky-cue--anim-none        { --osky-cue-from: none; --osky-cue-dur: 1ms; }

.osky-cue--anim-flip .osky-cue__dialog {
	transform-origin: 50% 0;
}

/* ─── Layout: welcome mat ────────────────────────────────────────────────── */

.osky-cue--layout-fullscreen .osky-cue__wrap {
	padding: 0;
}

.osky-cue--layout-fullscreen .osky-cue__dialog {
	max-width: none;
	height: 100%;
	border-width: 0;
	border-radius: 0;
	box-shadow: none;
}

.osky-cue--layout-fullscreen .osky-cue__body {
	align-items: center;
	border-radius: 0;
}

.osky-cue--layout-fullscreen .osky-cue__content {
	max-width: var(--osky-cue-width);
}

.osky-cue--layout-fullscreen .osky-cue__media {
	border-radius: 0 !important;
}

.osky-cue--layout-fullscreen .osky-cue__close {
	top: 1.4em;
	right: 1.4em;
	font-size: 1.15em;
}

.osky-cue--layout-fullscreen.osky-cue--close-at-left .osky-cue__close {
	left: 1.4em;
}

/* ─── Layout: bar ────────────────────────────────────────────────────────── */

.osky-cue--layout-bar .osky-cue__wrap {
	padding: 0;
	align-items: flex-start;
}

.osky-cue--layout-bar.osky-cue--bar-bottom .osky-cue__wrap {
	align-items: flex-end;
}

.osky-cue--layout-bar .osky-cue__dialog {
	max-width: none;
	min-height: 0;
	border-width: 0;
	border-radius: 0;
	font-size: calc(15px * var(--osky-cue-scale) / 100);
}

.osky-cue--layout-bar.osky-cue--bar-top .osky-cue__dialog    { border-bottom-width: var(--osky-cue-border-w); }
.osky-cue--layout-bar.osky-cue--bar-bottom .osky-cue__dialog { border-top-width: var(--osky-cue-border-w); }

.osky-cue--layout-bar .osky-cue__media {
	display: none;
}

.osky-cue--layout-bar .osky-cue__body {
	padding: 0.75em 3.6em 0.75em 1.25em;
	border-radius: 0;
}

.osky-cue--layout-bar .osky-cue__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--osky-cue-justify);
	gap: 0.5em 1.25em;
	max-width: var(--osky-cue-width);
	margin: 0 auto;
}

.osky-cue--layout-bar .osky-cue-prose > * {
	margin: 0;
}

.osky-cue--layout-bar .osky-cue-prose .wp-block-buttons {
	margin: 0;
}

.osky-cue--layout-bar .osky-cue-prose .wp-block-button__link,
.osky-cue--layout-bar .osky-cue-form__submit {
	min-height: 2.5em;
	padding: 0.5em 1.15em;
	font-size: 0.93em;
}

.osky-cue--layout-bar .osky-cue-form-wrap {
	flex: 0 1 28em;
}

.osky-cue--layout-bar .osky-cue-form {
	margin: 0;
}

.osky-cue--layout-bar .osky-cue-form input {
	height: 2.5em;
}

.osky-cue.osky-cue--layout-bar .osky-cue__close {
	top: 50%;
	right: 0.7em;
	width: 2em;
	height: 2em;
	margin-top: -1em;
	box-shadow: none;
}

.osky-cue.osky-cue--layout-bar.osky-cue--close-outside .osky-cue__close {
	background: var(--osky-cue-close-bg, color-mix(in srgb, var(--osky-cue-heading) 10%, transparent));
	color: var(--osky-cue-close-c, var(--osky-cue-heading));
}

.osky-cue.osky-cue--layout-bar.osky-cue--close-at-left .osky-cue__close {
	left: 0.7em;
}

.osky-cue--layout-bar.osky-cue--bar-top    { --osky-cue-from: translateY(-100%); --osky-cue-ease: cubic-bezier(0.2, 0.85, 0.25, 1); }
.osky-cue--layout-bar.osky-cue--bar-bottom { --osky-cue-from: translateY(100%); --osky-cue-ease: cubic-bezier(0.2, 0.85, 0.25, 1); }

/* Bars sit flush to the page: a quiet edge shadow whatever the style. */
.osky-cue--layout-bar:not(.osky-cue--shadow-none) .osky-cue__dialog {
	box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.35);
}

.osky-cue--layout-bar.osky-cue--bar-bottom:not(.osky-cue--shadow-none) .osky-cue__dialog {
	box-shadow: 0 -6px 20px -10px rgba(15, 23, 42, 0.35);
}

/* ─── Layout: drawer ─────────────────────────────────────────────────────── */

.osky-cue--layout-drawer .osky-cue__wrap {
	padding: 0;
	align-items: stretch;
	justify-content: flex-end;
}

.osky-cue--layout-drawer.osky-cue--side-left .osky-cue__wrap {
	justify-content: flex-start;
}

.osky-cue--layout-drawer .osky-cue__dialog {
	height: 100%;
	max-height: none;
	border-radius: var(--osky-cue-radius) 0 0 var(--osky-cue-radius);
}

.osky-cue--layout-drawer.osky-cue--side-left .osky-cue__dialog {
	border-radius: 0 var(--osky-cue-radius) var(--osky-cue-radius) 0;
}

.osky-cue--layout-drawer .osky-cue__body {
	justify-content: flex-start;
	padding-top: calc(var(--osky-cue-pad) + 1.25em);
}

.osky-cue--layout-drawer.osky-cue--has-img .osky-cue__dialog {
	flex-direction: column;
}

.osky-cue--layout-drawer.osky-cue--has-img .osky-cue__media {
	flex-basis: auto !important;
	height: var(--osky-cue-img-h);
	border-radius: 0 !important;
}

.osky-cue--layout-drawer.osky-cue--side-right { --osky-cue-from: translateX(100%); --osky-cue-ease: cubic-bezier(0.2, 0.85, 0.25, 1); }
.osky-cue--layout-drawer.osky-cue--side-left  { --osky-cue-from: translateX(-100%); --osky-cue-ease: cubic-bezier(0.2, 0.85, 0.25, 1); }

/* Fade/none still mean fade/none on bars and drawers. */
.osky-cue.osky-cue--anim-fade:is(.osky-cue--layout-bar, .osky-cue--layout-drawer) { --osky-cue-from: none; }
.osky-cue.osky-cue--anim-none:is(.osky-cue--layout-bar, .osky-cue--layout-drawer) { --osky-cue-from: none; }

/* ─── Layout: toast ──────────────────────────────────────────────────────── */

.osky-cue--layout-toast .osky-cue__dialog {
	font-size: calc(15px * var(--osky-cue-scale) / 100);
}

.osky-cue--layout-toast .osky-cue__close,
.osky-cue--layout-slide-in .osky-cue__close {
	top: 0.6em;
	right: 0.6em;
	width: 2em;
	height: 2em;
}

.osky-cue--layout-toast.osky-cue--close-at-left .osky-cue__close,
.osky-cue--layout-slide-in.osky-cue--close-at-left .osky-cue__close {
	left: 0.6em;
}

.osky-cue--layout-toast.osky-cue--close-outside .osky-cue__close,
.osky-cue--layout-slide-in.osky-cue--close-outside .osky-cue__close {
	top: -0.8em;
	right: -0.8em;
}

/* ─── Inline (shortcode) ─────────────────────────────────────────────────── */

.osky-cue.osky-cue--inline {
	position: relative;
	inset: auto;
	z-index: auto;
	margin: 2em auto;
	pointer-events: auto;
}

.osky-cue--inline .osky-cue__dialog {
	margin: 0 auto;
	opacity: 1;
	transform: none;
}

/* ─── Content ────────────────────────────────────────────────────────────── */

.osky-cue-prose {
	color: var(--osky-cue-text);
	font-family: var(--osky-cue-body-font);
	text-align: var(--osky-cue-align);
	overflow-wrap: break-word;
}

.osky-cue-prose > * {
	margin-top: 0;
	margin-bottom: 0.9em;
}

.osky-cue-prose > :last-child {
	margin-bottom: 0;
}

.osky-cue-prose :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.45em;
	padding: 0;
	color: var(--osky-cue-heading);
	font-family: var(--osky-cue-heading-font);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-transform: none;
	text-wrap: balance;
}

.osky-cue-prose h1 { font-size: 2.5em; }
.osky-cue-prose h2 { font-size: 2em; }
.osky-cue-prose h3 { font-size: 1.45em; letter-spacing: -0.01em; }
.osky-cue-prose h4 { font-size: 1.2em; letter-spacing: 0; }

.osky-cue-prose .osky-cue-display {
	font-size: 2.85em;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.osky-cue-prose h1.osky-cue-display {
	font-size: 3.6em;
}

.osky-cue-prose p {
	margin-top: 0;
	font-size: 1em;
	line-height: 1.6;
	text-wrap: pretty;
}

.osky-cue-prose .osky-cue-eyebrow {
	margin-bottom: 0.9em;
	color: var(--osky-cue-accent);
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* The bold theme: the eyebrow becomes a sticker. */
.osky-cue--shadow-hard .osky-cue-prose .osky-cue-eyebrow {
	display: inline-block;
	padding: 0.45em 0.7em 0.4em;
	border: 2px solid var(--osky-cue-border-c);
	background: var(--osky-cue-accent);
	color: var(--osky-cue-accent-text);
	transform: rotate(-2deg);
}

.osky-cue-prose .osky-cue-fineprint {
	margin-top: 1em;
	font-size: 0.8em;
	opacity: 0.72;
}

.osky-cue-prose strong {
	color: var(--osky-cue-heading);
	font-weight: 700;
}

.osky-cue-prose a:not(.wp-block-button__link):not(.wp-element-button) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.osky-cue-prose a:not(.wp-block-button__link):not(.wp-element-button):hover {
	color: var(--osky-cue-heading);
}

.osky-cue-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--osky-cue-btn-radius);
}

.osky-cue-prose figure {
	margin-left: 0;
	margin-right: 0;
}

/* Embeds (video) fill the width, 16:9. */
.osky-cue-prose .wp-block-embed {
	margin: 0;
}

.osky-cue-prose .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--osky-cue-inner-radius);
}

.osky-cue-prose .wp-block-embed__wrapper::before {
	display: none;
}

.osky-cue-prose .wp-block-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.osky-cue-logo {
	margin-bottom: 1.1em;
	text-align: var(--osky-cue-align);
}

.osky-cue-logo img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.osky-cue-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--osky-cue-justify);
	gap: 0.6em;
	margin-top: 1.3em;
}

.osky-cue-prose .wp-block-button {
	margin: 0;
}

:is(.osky-cue, .osky-cue-canvas) .osky-cue-prose .wp-block-button__link,
.osky-cue-form .osky-cue-form__submit,
.osky-cue-open.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 3.1em;
	margin: 0;
	padding: 0.8em 1.65em;
	border: 2px solid transparent;
	border-radius: var(--osky-cue-btn-radius);
	background: var(--osky-cue-accent);
	color: var(--osky-cue-accent-text);
	box-shadow: none;
	font-family: var(--osky-cue-body-font);
	font-size: 1em;
	font-weight: 650;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.2s ease, background-color 0.2s ease;
}

:is(.osky-cue, .osky-cue-canvas) .osky-cue-prose .wp-block-button__link:hover,
.osky-cue-form .osky-cue-form__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--osky-cue-accent) 80%, transparent);
	filter: brightness(1.06);
	color: var(--osky-cue-accent-text);
}

:is(.osky-cue, .osky-cue-canvas) .osky-cue-prose .wp-block-button__link:active,
.osky-cue-form .osky-cue-form__submit:active {
	transform: translateY(0);
}

:is(.osky-cue, .osky-cue-canvas) .osky-cue-prose .wp-block-button__link:focus-visible,
.osky-cue-form .osky-cue-form__submit:focus-visible {
	outline: 2px solid var(--osky-cue-accent);
	outline-offset: 3px;
}

:is(.osky-cue, .osky-cue-canvas) .osky-cue-prose .is-style-outline > .wp-block-button__link {
	border-color: currentColor;
	background: transparent;
	color: var(--osky-cue-accent);
}

:is(.osky-cue, .osky-cue-canvas) .osky-cue-prose .is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--osky-cue-accent) 10%, transparent);
	color: var(--osky-cue-accent);
	box-shadow: none;
}

:is(.osky-cue, .osky-cue-canvas) .osky-cue-prose .is-style-osky-cue-text > .wp-block-button__link {
	min-height: 0;
	padding: 0.55em 0.5em;
	border: 0;
	background: transparent;
	color: var(--osky-cue-text);
	font-weight: 500;
	font-size: 0.92em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	opacity: 0.85;
}

:is(.osky-cue, .osky-cue-canvas) .osky-cue-prose .is-style-osky-cue-text > .wp-block-button__link:hover {
	box-shadow: none;
	filter: none;
	color: var(--osky-cue-heading);
	opacity: 1;
}

/* The bold theme: hard edges on buttons too. */
.osky-cue--shadow-hard .osky-cue-prose .wp-block-button:not(.is-style-osky-cue-text) > .wp-block-button__link,
.osky-cue--shadow-hard .osky-cue-form__submit {
	border-color: var(--osky-cue-border-c);
	box-shadow: 3px 3px 0 var(--osky-cue-border-c);
}

.osky-cue--shadow-hard .osky-cue-prose .wp-block-button:not(.is-style-osky-cue-text) > .wp-block-button__link:hover,
.osky-cue--shadow-hard .osky-cue-form__submit:hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--osky-cue-border-c);
	filter: none;
}

/* ─── Forms (ours and other plugins' inside a popup) ─────────────────────── */

.osky-cue-form-wrap {
	margin-top: 1.2em;
}

.osky-cue-form {
	margin: 0;
	text-align: left;
}

.osky-cue-form__fields {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.osky-cue-form--inline .osky-cue-form__fields {
	flex-direction: row;
	flex-wrap: wrap;
}

.osky-cue-form--inline .osky-cue-form__field {
	flex: 1 1 11em;
}

.osky-cue-form__field {
	display: block;
	margin: 0;
}

.osky-cue-form input[type="text"],
.osky-cue-form input[type="email"],
.osky-cue-form input[type="tel"],
.osky-cue-form textarea,
.osky-cue-prose input[type="text"],
.osky-cue-prose input[type="email"],
.osky-cue-prose input[type="tel"],
.osky-cue-prose input[type="number"],
.osky-cue-prose input[type="url"],
.osky-cue-prose select,
.osky-cue-prose textarea {
	width: 100%;
	height: 3.1em;
	margin: 0;
	padding: 0 1.05em;
	border: 1.5px solid color-mix(in srgb, var(--osky-cue-text) 24%, transparent);
	border-radius: var(--osky-cue-btn-radius);
	background: color-mix(in srgb, var(--osky-cue-text) 6%, transparent);
	color: var(--osky-cue-heading);
	box-shadow: none;
	font-family: var(--osky-cue-body-font);
	font-size: 1em;
	line-height: 1.3;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.osky-cue-form textarea,
.osky-cue-prose textarea {
	height: auto;
	min-height: 6.5em;
	padding: 0.85em 1.05em;
	resize: vertical;
}

.osky-cue-form :is(input, textarea)::placeholder,
.osky-cue-prose :is(input, textarea)::placeholder {
	color: var(--osky-cue-text);
	opacity: 0.75;
}

.osky-cue-form :is(input, textarea):focus,
.osky-cue-prose :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--osky-cue-accent);
	background: color-mix(in srgb, var(--osky-cue-text) 3%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--osky-cue-accent) 22%, transparent);
}

.osky-cue-form .is-invalid {
	border-color: #ef4444 !important;
}

.osky-cue-form .osky-cue-form__submit {
	position: relative;
	flex: 0 0 auto;
}

.osky-cue-form:not(.osky-cue-form--inline) .osky-cue-form__submit {
	width: 100%;
	margin-top: 0.15em;
}

.osky-cue-form.is-loading .osky-cue-form__submit {
	color: transparent;
	pointer-events: none;
}

.osky-cue-form.is-loading .osky-cue-form__submit::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1em;
	height: 1.1em;
	margin: -0.55em 0 0 -0.55em;
	border: 2px solid var(--osky-cue-accent-text);
	border-right-color: transparent;
	border-radius: 50%;
	animation: osky-cue-spin 0.7s linear infinite;
}

.osky-cue-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin-top: 0.8em;
	font-size: 0.85em;
	line-height: 1.45;
	cursor: pointer;
}

.osky-cue-form__consent input {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0.12em 0 0;
	accent-color: var(--osky-cue-accent);
}

.osky-cue-form__error {
	margin: 0.7em 0 0;
	color: #ef4444;
	font-size: 0.86em;
	font-weight: 600;
}

.osky-cue-form__hp {
	/* Clipped in place: a -9999px offset can be scrolled to on right-to-left sites. */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.osky-cue-form__success {
	padding: 0.6em 0;
	color: var(--osky-cue-accent);
	text-align: center;
	animation: osky-cue-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.osky-cue-form__success svg {
	display: block;
	margin: 0 auto 0.6em;
}

.osky-cue-form__success svg path {
	stroke-dasharray: 20;
	stroke-dashoffset: 20;
	animation: osky-cue-tick 0.5s 0.2s ease forwards;
}

.osky-cue-form__success p {
	margin: 0;
	color: var(--osky-cue-heading);
	font-size: 1.12em;
	font-weight: 600;
}

.osky-cue-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Forms outside a popup (inline block) use the default look. */
.osky-cue-form-wrap:not(:is(.osky-cue, .osky-cue-canvas) .osky-cue-form-wrap) {
	--osky-cue-text: currentColor;
	--osky-cue-heading: currentColor;
	--osky-cue-accent: #111827;
	--osky-cue-accent-text: #ffffff;
	--osky-cue-btn-radius: 10px;
	--osky-cue-body-font: inherit;
	max-width: 36em;
}

/* ─── Coupon ─────────────────────────────────────────────────────────────── */

.osky-cue-coupon {
	display: flex;
	align-items: stretch;
	max-width: 22em;
	margin: 1.2em auto 0;
	overflow: hidden;
	border: 2px dashed color-mix(in srgb, var(--osky-cue-heading) 45%, transparent);
	border-radius: var(--osky-cue-btn-radius);
	background: color-mix(in srgb, var(--osky-cue-heading) 6%, transparent);
}

.osky-cue--align-left .osky-cue-coupon  { margin-left: 0; }
.osky-cue--align-right .osky-cue-coupon { margin-right: 0; }

.osky-cue-coupon .osky-cue-coupon__code {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding: 0.7em 1em;
	background: none;
	color: var(--osky-cue-heading);
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.osky-cue-coupon .osky-cue-coupon__copy {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	padding: 0 1.1em;
	border: 0;
	border-radius: 0;
	background: var(--osky-cue-accent);
	color: var(--osky-cue-accent-text);
	font: inherit;
	font-size: 0.9em;
	font-weight: 650;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.osky-cue-coupon .osky-cue-coupon__copy:hover {
	filter: brightness(1.08);
}

.osky-cue-coupon.is-copied {
	border-style: solid;
	border-color: var(--osky-cue-accent);
}

/* ─── Countdown ──────────────────────────────────────────────────────────── */

.osky-cue-countdown {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--osky-cue-justify, center);
	gap: 0.55em;
	margin: 1.2em 0 0;
	font-variant-numeric: tabular-nums;
}

.osky-cue-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4.3em;
	padding: 0.75em 0.5em 0.6em;
	border-radius: var(--osky-cue-btn-radius);
	background: color-mix(in srgb, var(--osky-cue-heading) 8%, transparent);
}

.osky-cue--shadow-hard .osky-cue-countdown__unit {
	border: 2px solid var(--osky-cue-border-c);
	background: var(--osky-cue-bg);
}

.osky-cue-countdown__unit b {
	color: var(--osky-cue-heading);
	font-family: var(--osky-cue-heading-font);
	font-size: 2em;
	font-weight: 700;
	line-height: 1;
}

.osky-cue-countdown__unit small {
	margin-top: 0.45em;
	font-size: 0.68em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

.osky-cue-countdown.no-days .osky-cue-countdown__unit:first-child {
	display: none;
}

.osky-cue-countdown--inline .osky-cue-countdown__unit {
	flex-direction: row;
	align-items: baseline;
	gap: 0.2em;
	min-width: 0;
	padding: 0;
	background: none;
}

.osky-cue-countdown--inline .osky-cue-countdown__unit b {
	font-size: 1.3em;
}

.osky-cue-countdown.is-expired {
	display: block;
	color: var(--osky-cue-heading);
	font-weight: 600;
}

/* ─── Teaser tab ─────────────────────────────────────────────────────────── */

.osky-cue-teaser {
	--osky-cue-accent: #111827;
	--osky-cue-accent-text: #ffffff;

	position: fixed;
	bottom: 20px;
	z-index: 99989;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	padding: 0.85em 1.3em 0.85em 1.1em;
	border: 0;
	border-radius: 999px;
	background: var(--osky-cue-accent);
	color: var(--osky-cue-accent-text);
	box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--osky-cue-accent) 70%, transparent), 0 2px 8px rgba(0, 0, 0, 0.14);
	font-family: var(--osky-cue-body-font, inherit);
	font-size: 15px;
	font-weight: 650;
	line-height: 1;
	cursor: pointer;
	animation: osky-cue-teaser-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.osky-cue-teaser::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 0 currentColor;
	animation: osky-cue-pulse 2.2s ease-out infinite;
}

.osky-cue-teaser:hover {
	transform: translateY(-2px);
}

.osky-cue-teaser:focus-visible {
	outline: 2px solid var(--osky-cue-accent);
	outline-offset: 3px;
}

.osky-cue-teaser--bottom-left  { left: 20px; }
.osky-cue-teaser--bottom-right { right: 20px; }

.osky-cue-teaser--left,
.osky-cue-teaser--right {
	top: 50%;
	bottom: auto;
	padding: 1.2em 0.85em;
	writing-mode: vertical-rl;
	animation-name: osky-cue-teaser-edge;
}

.osky-cue-teaser--left {
	left: 0;
	border-radius: 0 12px 12px 0;
	transform: translateY(-50%) rotate(180deg);
}

.osky-cue-teaser--right {
	right: 0;
	border-radius: 12px 0 0 12px;
	transform: translateY(-50%);
}

.osky-cue-teaser--left:hover  { transform: translateY(-50%) rotate(180deg) translateY(2px); }
.osky-cue-teaser--right:hover { transform: translateY(-50%) translateX(-2px); }

.osky-cue-teaser--left::before,
.osky-cue-teaser--right::before {
	display: none;
}

/* ─── Page states ────────────────────────────────────────────────────────── */

html.osky-cue-lock,
html.osky-cue-lock body {
	overflow: hidden !important;
}

html.osky-cue-lock body {
	padding-right: var(--osky-cue-scrollbar, 0px);
}

html.osky-cue-push body {
	transition: margin 0.4s cubic-bezier(0.2, 0.85, 0.25, 1);
}

html.osky-cue-push-top body    { margin-top: var(--osky-cue-push-top, 0px) !important; }
html.osky-cue-push-bottom body { margin-bottom: var(--osky-cue-push-bottom, 0px) !important; }

/* ─── Phones (container width, so the admin preview matches) ─────────────── */

@container osky-cue (max-width: 600px) {
	.osky-cue__dialog {
		font-size: calc(15px * var(--osky-cue-scale) / 100);
	}

	.osky-cue__body {
		padding: min(var(--osky-cue-pad), 28px);
	}

	.osky-cue-prose h1 { font-size: 2.05em; }
	.osky-cue-prose h2 { font-size: 1.7em; }
	.osky-cue-prose .osky-cue-display { font-size: 2.25em; }
	.osky-cue-prose h1.osky-cue-display { font-size: 2.6em; }

	/* Images stack above the text, or go. */
	.osky-cue--has-img:is(.osky-cue--img-left, .osky-cue--img-right, .osky-cue--img-top) .osky-cue__dialog {
		flex-direction: column;
	}

	.osky-cue--has-img:is(.osky-cue--img-left, .osky-cue--img-right, .osky-cue--img-top) .osky-cue__media {
		flex-basis: auto;
		height: 180px;
		border-radius: var(--osky-cue-inner-radius) var(--osky-cue-inner-radius) 0 0;
	}

	/* Tall illustrations keep their lower half (where the subject usually is) in a short strip. */
	.osky-cue--has-img:is(.osky-cue--img-left, .osky-cue--img-right) .osky-cue__media img {
		object-position: 50% 72%;
	}

	.osky-cue:not(.osky-cue--m-img):is(.osky-cue--img-left, .osky-cue--img-right, .osky-cue--img-top) .osky-cue__media {
		display: none;
	}

	/* Bottom sheet. */
	.osky-cue--m-sheet:is(.osky-cue--layout-modal, .osky-cue--layout-slide-in, .osky-cue--layout-toast) .osky-cue__wrap {
		align-items: flex-end;
		justify-content: center;
		padding: 0;
	}

	.osky-cue--m-sheet:is(.osky-cue--layout-modal, .osky-cue--layout-slide-in, .osky-cue--layout-toast) .osky-cue__dialog {
		--osky-cue-from: translateY(100%);
		--osky-cue-ease: cubic-bezier(0.2, 0.85, 0.25, 1);
		max-width: 100%;
		max-height: 92%;
		border-width: var(--osky-cue-border-w) 0 0;
		border-radius: max(18px, var(--osky-cue-radius)) max(18px, var(--osky-cue-radius)) 0 0;
	}

	.osky-cue--m-sheet:is(.osky-cue--layout-modal, .osky-cue--layout-slide-in, .osky-cue--layout-toast) .osky-cue__dialog::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		z-index: 6;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 4px;
		background: color-mix(in srgb, var(--osky-cue-heading) 25%, transparent);
	}

	.osky-cue--m-sheet:is(.osky-cue--layout-modal, .osky-cue--layout-slide-in, .osky-cue--layout-toast) .osky-cue__media,
	.osky-cue--m-sheet:is(.osky-cue--layout-modal, .osky-cue--layout-slide-in, .osky-cue--layout-toast) .osky-cue__body {
		border-radius: max(18px, var(--osky-cue-radius)) max(18px, var(--osky-cue-radius)) 0 0;
	}

	.osky-cue--m-sheet.osky-cue--close-outside .osky-cue__close {
		top: 0.85em;
		right: 0.85em;
	}

	/* Full screen. */
	.osky-cue--m-full:is(.osky-cue--layout-modal, .osky-cue--layout-slide-in, .osky-cue--layout-toast) .osky-cue__wrap {
		padding: 0;
	}

	.osky-cue--m-full:is(.osky-cue--layout-modal, .osky-cue--layout-slide-in, .osky-cue--layout-toast) .osky-cue__dialog {
		max-width: 100%;
		height: 100%;
		border-width: 0;
		border-radius: 0;
	}

	.osky-cue--m-full .osky-cue__media,
	.osky-cue--m-full .osky-cue__body {
		border-radius: 0 !important;
	}

	.osky-cue--m-full.osky-cue--close-outside .osky-cue__close {
		top: 0.85em;
		right: 0.85em;
	}

	/* Same as desktop, just shrunk. */
	.osky-cue--m-same .osky-cue__wrap {
		padding: 12px;
	}

	.osky-cue--layout-drawer .osky-cue__dialog {
		max-width: 100%;
		border-radius: 0;
	}

	/* Thumb-sized buttons, stacked. */
	.osky-cue:not(.osky-cue--layout-bar) .osky-cue-prose .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.osky-cue:not(.osky-cue--layout-bar) .osky-cue-prose .wp-block-button,
	.osky-cue:not(.osky-cue--layout-bar) .osky-cue-prose .wp-block-button__link {
		width: 100%;
	}

	.osky-cue-form--inline .osky-cue-form__fields {
		flex-direction: column;
	}

	.osky-cue-form--inline .osky-cue-form__field {
		flex: none;
	}

	.osky-cue--layout-bar .osky-cue__body {
		padding: 0.7em 3em 0.7em 1em;
	}

	.osky-cue--layout-bar .osky-cue__content {
		gap: 0.5em 0.8em;
	}

	.osky-cue-countdown__unit {
		min-width: 3.7em;
	}
}

/* ─── Effects (snow, bats, confetti…) ────────────────────────────────────── */

/* Shapes, shared with the admin card pictures. */
:root {
	--osky-cue-fx-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6c3-4 6-4 8-1 1-2 2-3 4-2 2-1 3 0 4 2 2-3 5-3 8 1-3-1-5 0-6 2-2-1-4 0-6 2-2-2-4-3-6-2-1-2-3-3-6-2z'/%3E%3C/svg%3E");
	--osky-cue-fx-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M10 0C4.5 0 1 4 1 9.5V24l3-3 3 3 3-3 3 3 3-3 3 3V9.5C19 4 15.5 0 10 0zM7 7.5a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2zm6 0a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2zM10 13a2 2.6 0 1 0 0 5.2 2 2.6 0 0 0 0-5.2z'/%3E%3C/svg%3E");
	--osky-cue-fx-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2 4 4-2-1 5 5 1-4 3 2 4-5-1-1 6h-4l-1-6-5 1 2-4-4-3 5-1-1-5 4 2z'/%3E%3C/svg%3E");
	--osky-cue-fx-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 18S0 11.5 0 5.5A5.5 5.5 0 0 1 10 2.6 5.5 5.5 0 0 1 20 5.5C20 11.5 10 18 10 18z'/%3E%3C/svg%3E");
	--osky-cue-fx-blossom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='4.6' r='3.8'/%3E%3Ccircle cx='15.2' cy='8.4' r='3.8'/%3E%3Ccircle cx='13.2' cy='14.6' r='3.8'/%3E%3Ccircle cx='6.8' cy='14.6' r='3.8'/%3E%3Ccircle cx='4.8' cy='8.4' r='3.8'/%3E%3C/svg%3E");
	--osky-cue-fx-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c1 6 4 9 10 10-6 1-9 4-10 10-1-6-4-9-10-10 6-1 9-4 10-10z'/%3E%3C/svg%3E");
}

.osky-cue__fx {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity calc(var(--osky-cue-dur) * 2) ease;
}

.osky-cue.is-open .osky-cue__fx {
	opacity: 1;
}

.osky-cue:not(.osky-cue--fx-none).osky-cue--fx-at-screen .osky-cue__fx--screen,
.osky-cue:not(.osky-cue--fx-none).osky-cue--fx-at-popup .osky-cue__fx--popup {
	display: block;
}

.osky-cue__fx--popup {
	z-index: 0;
}

/* Behind the words: soft enough that text stays readable. */
.osky-cue__fx--popup i {
	opacity: 0.4;
}

.osky-cue__fx i {
	--fx-w: 10px;
	--fx-h: 10px;

	position: absolute;
	top: -14%;
	left: var(--x);
	display: block;
	width: calc(var(--fx-w) * var(--s));
	height: calc(var(--fx-h) * var(--s));
	background: currentColor;
	-webkit-mask: var(--fx-mask, none) center / contain no-repeat;
	mask: var(--fx-mask, none) center / contain no-repeat;
	animation-delay: var(--t);
	animation-play-state: paused;
	will-change: top, transform;
}

.osky-cue.is-open .osky-cue__fx i {
	animation-play-state: running;
}

/* Snow: soft dots drifting down. */
.osky-cue--fx-snow .osky-cue__fx i {
	--fx-w: 9px;
	--fx-h: 9px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 45%, rgba(255, 255, 255, 0.4) 60%, transparent 70%);
	animation-name: osky-cue-fx-fall, osky-cue-fx-sway;
	animation-duration: var(--d), calc(var(--d) / 3);
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal, alternate;
}

/* Confetti: tumbling paper in five colours. */
.osky-cue--fx-confetti .osky-cue__fx i {
	--fx-w: 8px;
	--fx-h: 13px;
	border-radius: 2px;
	animation-name: osky-cue-fx-fall, osky-cue-fx-tumble;
	animation-duration: calc(var(--d) * 0.8), calc(var(--d) / 4);
	animation-timing-function: linear, linear;
	animation-iteration-count: infinite;
}

.osky-cue--fx-confetti .osky-cue__fx i:nth-child(5n+1) { color: #f43f5e; }
.osky-cue--fx-confetti .osky-cue__fx i:nth-child(5n+2) { color: #fbbf24; }
.osky-cue--fx-confetti .osky-cue__fx i:nth-child(5n+3) { color: #22d3ee; }
.osky-cue--fx-confetti .osky-cue__fx i:nth-child(5n+4) { color: #a78bfa; }
.osky-cue--fx-confetti .osky-cue__fx i:nth-child(5n)   { color: #34d399; }

/* Bats: a flapping flock rising past. */
.osky-cue--fx-bats .osky-cue__fx i {
	--fx-w: 30px;
	--fx-h: 15px;
	--fx-mask: var(--osky-cue-fx-bat);
	color: #0b0612;
	animation-name: osky-cue-fx-rise, osky-cue-fx-flap;
	animation-duration: calc(var(--d) * 0.9), 0.22s;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal, alternate;
}

.osky-cue--fx-bats .osky-cue__fx--screen i {
	--fx-w: 38px;
	--fx-h: 19px;
	filter: drop-shadow(0 0 3px rgba(255, 138, 31, 0.75)) drop-shadow(0 0 10px rgba(255, 138, 31, 0.35));
}

.osky-cue--fx-bats .osky-cue__fx--popup i { color: #ffffff; }
.osky-cue--fx-bats .osky-cue__fx i:nth-child(n+11) { display: none; }

/* Ghosts: a few, slow and wobbly. */
.osky-cue--fx-ghosts .osky-cue__fx i {
	--fx-w: 26px;
	--fx-h: 31px;
	--fx-mask: var(--osky-cue-fx-ghost);
	color: rgba(255, 255, 255, 0.85);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
	animation-name: osky-cue-fx-rise, osky-cue-fx-sway;
	animation-duration: calc(var(--d) * 1.4), calc(var(--d) / 4);
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal, alternate;
}

.osky-cue--fx-ghosts .osky-cue__fx i:nth-child(n+8) { display: none; }

/* Autumn leaves. */
.osky-cue--fx-leaves .osky-cue__fx i {
	--fx-w: 20px;
	--fx-h: 20px;
	--fx-mask: var(--osky-cue-fx-leaf);
	animation-name: osky-cue-fx-fall, osky-cue-fx-sway;
	animation-duration: var(--d), calc(var(--d) / 3);
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal, alternate;
}

.osky-cue--fx-leaves .osky-cue__fx i:nth-child(4n+1) { color: #ea580c; }
.osky-cue--fx-leaves .osky-cue__fx i:nth-child(4n+2) { color: #b91c1c; }
.osky-cue--fx-leaves .osky-cue__fx i:nth-child(4n+3) { color: #d97706; }
.osky-cue--fx-leaves .osky-cue__fx i:nth-child(4n)   { color: #92400e; }
.osky-cue--fx-leaves .osky-cue__fx i:nth-child(n+17) { display: none; }

/* Hearts float up. */
.osky-cue--fx-hearts .osky-cue__fx i {
	--fx-w: 18px;
	--fx-h: 16px;
	--fx-mask: var(--osky-cue-fx-heart);
	animation-name: osky-cue-fx-rise, osky-cue-fx-sway;
	animation-duration: var(--d), calc(var(--d) / 3);
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal, alternate;
}

.osky-cue--fx-hearts .osky-cue__fx i:nth-child(3n+1) { color: #fb7185; }
.osky-cue--fx-hearts .osky-cue__fx i:nth-child(3n+2) { color: #fda4af; }
.osky-cue--fx-hearts .osky-cue__fx i:nth-child(3n)   { color: #ffffff; }
.osky-cue--fx-hearts .osky-cue__fx i:nth-child(n+17) { display: none; }

/* Blossom petals drift down. */
.osky-cue--fx-blossom .osky-cue__fx i {
	--fx-w: 15px;
	--fx-h: 15px;
	--fx-mask: var(--osky-cue-fx-blossom);
	animation-name: osky-cue-fx-fall, osky-cue-fx-sway;
	animation-duration: calc(var(--d) * 1.1), calc(var(--d) / 3);
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal, alternate;
}

.osky-cue--fx-blossom .osky-cue__fx i:nth-child(4n+1) { color: #f9a8d4; }
.osky-cue--fx-blossom .osky-cue__fx i:nth-child(4n+2) { color: #fde68a; }
.osky-cue--fx-blossom .osky-cue__fx i:nth-child(4n+3) { color: #c4b5fd; }
.osky-cue--fx-blossom .osky-cue__fx i:nth-child(4n)   { color: #a7f3d0; }
.osky-cue--fx-blossom .osky-cue__fx i:nth-child(n+19) { display: none; }

/* Sparkles twinkle in place. */
.osky-cue--fx-sparkles .osky-cue__fx i {
	--fx-w: 16px;
	--fx-h: 16px;
	--fx-mask: var(--osky-cue-fx-sparkle);
	top: var(--y);
	color: #fde68a;
	filter: drop-shadow(0 0 4px rgba(253, 230, 138, 0.8));
	animation-name: osky-cue-fx-twinkle;
	animation-duration: calc(var(--d) / 4);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.osky-cue--fx-sparkles .osky-cue__fx i:nth-child(n+19) { display: none; }

@keyframes osky-cue-fx-fall {
	from { top: -14%; }
	to   { top: 108%; }
}

@keyframes osky-cue-fx-rise {
	from { top: 108%; }
	to   { top: -16%; }
}

@keyframes osky-cue-fx-sway {
	from { transform: translateX(calc(var(--w) * -1)) rotate(calc(var(--r) * -0.15)); }
	to   { transform: translateX(var(--w)) rotate(calc(var(--r) * 0.15)); }
}

@keyframes osky-cue-fx-tumble {
	from { transform: rotate3d(1, 0.4, 0.2, 0deg); }
	to   { transform: rotate3d(1, 0.4, 0.2, 720deg); }
}

@keyframes osky-cue-fx-flap {
	from { transform: scaleY(1) rotate(-6deg); }
	to   { transform: scaleY(0.4) rotate(6deg); }
}

@keyframes osky-cue-fx-twinkle {
	0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
	50%      { transform: scale(1) rotate(90deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.osky-cue__fx {
		display: none !important;
	}
}

/* ─── Spin to win ────────────────────────────────────────────────────────── */

.osky-cue-wheel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 1em;
	margin: 1.2em 0 0;
	container-type: inline-size;
}

.osky-cue-wheel__stage {
	width: min(100%, 300px);
	filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.28));
}

.osky-cue-wheel__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.osky-cue-wheel__svg text {
	font-family: var(--osky-cue-heading-font);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.osky-cue-wheel__rim     { fill: var(--osky-cue-heading); }
.osky-cue-wheel__edge    { fill: none; stroke: var(--osky-cue-bg); stroke-width: 2; opacity: 0.5; }
.osky-cue-wheel__hub     { fill: var(--osky-cue-bg); stroke: var(--osky-cue-heading); stroke-width: 3; }
.osky-cue-wheel__star    { fill: var(--osky-cue-accent); }
.osky-cue-wheel__pointer { fill: var(--osky-cue-accent); stroke: var(--osky-cue-bg); stroke-width: 2.5; stroke-linejoin: round; }
.osky-cue-wheel__disc    { transform-origin: 0 0; }

.osky-cue-wheel__lights circle { fill: #fff8d6; }
.osky-cue-wheel__lights .b     { opacity: 0.35; }

.osky-cue.is-open .osky-cue-wheel__lights circle {
	animation: osky-cue-lights 1.4s steps(1) infinite;
}

.osky-cue.is-open .osky-cue-wheel__lights .b {
	animation-delay: 0.7s;
}

.osky-cue-wheel.is-spinning .osky-cue-wheel__lights circle {
	animation-duration: 0.3s;
}

.osky-cue-wheel.is-spinning .osky-cue-wheel__lights .b {
	animation-delay: 0.15s;
}

@keyframes osky-cue-lights {
	0%  { opacity: 1; }
	50% { opacity: 0.3; }
}

.osky-cue-wheel__form {
	display: grid;
	gap: 0.6em;
	width: min(100%, 340px);
	margin: 0;
	text-align: left;
}

.osky-cue-wheel__form .osky-cue-form__submit {
	width: 100%;
}

.osky-cue-wheel__form.is-loading .osky-cue-form__submit {
	opacity: 0.6;
	pointer-events: none;
}

.osky-cue-wheel__result {
	width: min(100%, 360px);
	text-align: center;
	animation: osky-cue-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.osky-cue-wheel__headline {
	margin: 0 0 0.3em;
	color: var(--osky-cue-heading);
	font-family: var(--osky-cue-heading-font);
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.15;
}

.osky-cue-wheel__result .osky-cue-coupon {
	margin-left: auto;
	margin-right: auto;
}

/* Side by side when there's room. */
@container (min-width: 520px) {
	.osky-cue-wheel {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		justify-items: stretch;
		gap: 1.6em;
	}

	.osky-cue-wheel__stage {
		justify-self: center;
	}

	.osky-cue-wheel__form,
	.osky-cue-wheel__result {
		width: 100%;
	}

	.osky-cue-wheel__result {
		text-align: left;
	}

	.osky-cue-wheel__result .osky-cue-coupon {
		margin-left: 0;
	}
}

/* ─── Multi-step ─────────────────────────────────────────────────────────── */

/* Before the script runs (and in admin previews): only the first step. */
.osky-cue-step + .osky-cue-step {
	display: none;
}

.osky-cue__content[data-steps] .osky-cue-step {
	display: none;
}

.osky-cue__content[data-steps] .osky-cue-step.is-active {
	display: block;
	animation: osky-cue-step-in 0.35s ease;
}

.osky-cue-step > :first-child { margin-top: 0; }
.osky-cue-step > :last-child  { margin-bottom: 0; }

@keyframes osky-cue-step-in {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: none; }
}

/* ─── Occasions: more effects ────────────────────────────────────────────── */

:root {
	--osky-cue-fx-lantern: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 30%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M8 0h4v2H8zM5 2h10v2H5zM10 4C3 4 1 9 1 13s2 9 9 9 9-5 9-9-2-9-9-9zM6.2 7.5Q4.6 13 6.2 18.5h.9Q5.8 13 7.1 7.5zM12.9 7.5Q14.2 13 12.9 18.5h.9Q15.4 13 13.8 7.5zM5 22h10v2H5zM9.4 24h1.2v6H9.4z%27/%3E%3C/svg%3E");
	--osky-cue-fx-star: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M10 0l2.9 6.6 7.1.6-5.4 4.7 1.6 7.1L10 15.3 3.8 19l1.6-7.1L0 7.2l7.1-.6z%27/%3E%3C/svg%3E");
	--osky-cue-fx-crescent: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M11 1a9 9 0 1 0 8 13A7.5 7.5 0 1 1 11 1z%27/%3E%3C/svg%3E");
	--osky-cue-fx-flame: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 28%27%3E%3Cpath d=%27M10 0c3 7 9 10 9 17a9 9 0 0 1-18 0C1 11 7 9 10 0z%27/%3E%3C/svg%3E");
	--osky-cue-fx-burst: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 40%27%3E%3Ccircle cx=%2736.00%27 cy=%2720.00%27 r=%272.2%27/%3E%3Ccircle cx=%2728.69%27 cy=%2722.33%27 r=%271.5%27/%3E%3Ccircle cx=%2733.86%27 cy=%2728.00%27 r=%272.2%27/%3E%3Ccircle cx=%2726.36%27 cy=%2726.36%27 r=%271.5%27/%3E%3Ccircle cx=%2728.00%27 cy=%2733.86%27 r=%272.2%27/%3E%3Ccircle cx=%2722.33%27 cy=%2728.69%27 r=%271.5%27/%3E%3Ccircle cx=%2720.00%27 cy=%2736.00%27 r=%272.2%27/%3E%3Ccircle cx=%2717.67%27 cy=%2728.69%27 r=%271.5%27/%3E%3Ccircle cx=%2712.00%27 cy=%2733.86%27 r=%272.2%27/%3E%3Ccircle cx=%2713.64%27 cy=%2726.36%27 r=%271.5%27/%3E%3Ccircle cx=%276.14%27 cy=%2728.00%27 r=%272.2%27/%3E%3Ccircle cx=%2711.31%27 cy=%2722.33%27 r=%271.5%27/%3E%3Ccircle cx=%274.00%27 cy=%2720.00%27 r=%272.2%27/%3E%3Ccircle cx=%2711.31%27 cy=%2717.67%27 r=%271.5%27/%3E%3Ccircle cx=%276.14%27 cy=%2712.00%27 r=%272.2%27/%3E%3Ccircle cx=%2713.64%27 cy=%2713.64%27 r=%271.5%27/%3E%3Ccircle cx=%2712.00%27 cy=%276.14%27 r=%272.2%27/%3E%3Ccircle cx=%2717.67%27 cy=%2711.31%27 r=%271.5%27/%3E%3Ccircle cx=%2720.00%27 cy=%274.00%27 r=%272.2%27/%3E%3Ccircle cx=%2722.33%27 cy=%2711.31%27 r=%271.5%27/%3E%3Ccircle cx=%2728.00%27 cy=%276.14%27 r=%272.2%27/%3E%3Ccircle cx=%2726.36%27 cy=%2713.64%27 r=%271.5%27/%3E%3Ccircle cx=%2733.86%27 cy=%2712.00%27 r=%272.2%27/%3E%3Ccircle cx=%2728.69%27 cy=%2717.67%27 r=%271.5%27/%3E%3Ccircle cx=%2720%27 cy=%2720%27 r=%272%27/%3E%3C/svg%3E");
	--osky-cue-pat-islamic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 46 46%27%3E%3Cg fill=%27none%27 stroke=%27black%27 stroke-width=%271.3%27%3E%3Cpolygon points=%2732.90,32.90 13.10,32.90 13.10,13.10 32.90,13.10%27/%3E%3Cpolygon points=%2737.00,23.00 23.00,37.00 9.00,23.00 23.00,9.00%27/%3E%3Ccircle cx=%2723%27 cy=%2723%27 r=%274.5%27/%3E%3Cpath d=%27M0 0l9 9M46 0l-9 9M0 46l9-9M46 46l-9-9%27/%3E%3C/g%3E%3C/svg%3E");
	--osky-cue-pat-rangoli: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 120 120%27%3E%3Cg fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(0 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(30 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(60 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(90 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(120 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(150 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(180 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(210 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(240 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(270 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(300 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2726%27 rx=%277%27 ry=%2720%27 transform=%27rotate(330 60 60)%27/%3E%3Ccircle cx=%2760%27 cy=%2760%27 r=%2726%27/%3E%3C/g%3E%3Cg fill=%27black%27%3E%3Cellipse cx=%2760%27 cy=%2742%27 rx=%275%27 ry=%2712%27 transform=%27rotate(22.5 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2742%27 rx=%275%27 ry=%2712%27 transform=%27rotate(67.5 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2742%27 rx=%275%27 ry=%2712%27 transform=%27rotate(112.5 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2742%27 rx=%275%27 ry=%2712%27 transform=%27rotate(157.5 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2742%27 rx=%275%27 ry=%2712%27 transform=%27rotate(202.5 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2742%27 rx=%275%27 ry=%2712%27 transform=%27rotate(247.5 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2742%27 rx=%275%27 ry=%2712%27 transform=%27rotate(292.5 60 60)%27/%3E%3Cellipse cx=%2760%27 cy=%2742%27 rx=%275%27 ry=%2712%27 transform=%27rotate(337.5 60 60)%27/%3E%3C/g%3E%3Ccircle cx=%2760%27 cy=%2760%27 r=%277%27 fill=%27black%27/%3E%3Ccircle cx=%27112.00%27 cy=%2760.00%27 r=%272.4%27/%3E%3Ccircle cx=%27110.23%27 cy=%2773.46%27 r=%272.4%27/%3E%3Ccircle cx=%27105.03%27 cy=%2786.00%27 r=%272.4%27/%3E%3Ccircle cx=%2796.77%27 cy=%2796.77%27 r=%272.4%27/%3E%3Ccircle cx=%2786.00%27 cy=%27105.03%27 r=%272.4%27/%3E%3Ccircle cx=%2773.46%27 cy=%27110.23%27 r=%272.4%27/%3E%3Ccircle cx=%2760.00%27 cy=%27112.00%27 r=%272.4%27/%3E%3Ccircle cx=%2746.54%27 cy=%27110.23%27 r=%272.4%27/%3E%3Ccircle cx=%2734.00%27 cy=%27105.03%27 r=%272.4%27/%3E%3Ccircle cx=%2723.23%27 cy=%2796.77%27 r=%272.4%27/%3E%3Ccircle cx=%2714.97%27 cy=%2786.00%27 r=%272.4%27/%3E%3Ccircle cx=%279.77%27 cy=%2773.46%27 r=%272.4%27/%3E%3Ccircle cx=%278.00%27 cy=%2760.00%27 r=%272.4%27/%3E%3Ccircle cx=%279.77%27 cy=%2746.54%27 r=%272.4%27/%3E%3Ccircle cx=%2714.97%27 cy=%2734.00%27 r=%272.4%27/%3E%3Ccircle cx=%2723.23%27 cy=%2723.23%27 r=%272.4%27/%3E%3Ccircle cx=%2734.00%27 cy=%2714.97%27 r=%272.4%27/%3E%3Ccircle cx=%2746.54%27 cy=%279.77%27 r=%272.4%27/%3E%3Ccircle cx=%2760.00%27 cy=%278.00%27 r=%272.4%27/%3E%3Ccircle cx=%2773.46%27 cy=%279.77%27 r=%272.4%27/%3E%3Ccircle cx=%2786.00%27 cy=%2714.97%27 r=%272.4%27/%3E%3Ccircle cx=%2796.77%27 cy=%2723.23%27 r=%272.4%27/%3E%3Ccircle cx=%27105.03%27 cy=%2734.00%27 r=%272.4%27/%3E%3Ccircle cx=%27110.23%27 cy=%2746.54%27 r=%272.4%27/%3E%3C/svg%3E");
	--osky-cue-pat-clouds: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 80 50%27%3E%3Cg fill=%27none%27 stroke=%27black%27 stroke-width=%271.6%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M6 32c0-6 6-9 11-6 1-7 11-8 14-2 4-3 10 0 9 5 5 0 6 7 1 8H9c-3 0-4-3-3-5z%27/%3E%3Cpath d=%27M17 26c3 0 5 2 4 5M31 24c-3 1-3 5 0 6%27/%3E%3Cpath d=%27M46 12c0-4 4-6 7-4 1-5 8-5 9-1 3-2 7 0 6 3 3 0 4 5 1 5H48c-2 0-3-2-2-3z%27/%3E%3C/g%3E%3C/svg%3E");
	--osky-cue-pat-bunting: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 36 30%27%3E%3Cpath d=%27M0 1h36v1.6H0z%27/%3E%3Cpath d=%27M3 2.6h30L18 26z%27/%3E%3C/svg%3E");
	--osky-cue-pat-dots: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 22 22%27%3E%3Ccircle cx=%275.5%27 cy=%275.5%27 r=%272%27/%3E%3Ccircle cx=%2716.5%27 cy=%2716.5%27 r=%272%27/%3E%3C/svg%3E");
}

/* Lanterns drift up, glowing. */
.osky-cue--fx-lanterns .osky-cue__fx i {
	--fx-w: 28px;
	--fx-h: 42px;
	--fx-mask: var(--osky-cue-fx-lantern);
	color: #e8452c;
	filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.85));
	animation-name: osky-cue-fx-rise, osky-cue-fx-sway;
	animation-duration: calc(var(--d) * 1.5), calc(var(--d) / 3);
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal, alternate;
}
.osky-cue--fx-lanterns .osky-cue__fx i:nth-child(3n) { color: #f7b733; }
.osky-cue--fx-lanterns .osky-cue__fx i:nth-child(n+13) { display: none; }

/* Twinkling stars, with the odd crescent. */
.osky-cue--fx-stars .osky-cue__fx i {
	--fx-w: 12px;
	--fx-h: 12px;
	--fx-mask: var(--osky-cue-fx-star);
	top: var(--y);
	color: #ffe8a3;
	filter: drop-shadow(0 0 4px rgba(255, 220, 140, 0.9));
	animation-name: osky-cue-fx-twinkle;
	animation-duration: calc(var(--d) / 3);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
.osky-cue--fx-stars .osky-cue__fx i:nth-child(5n) {
	--fx-w: 22px;
	--fx-h: 22px;
	--fx-mask: var(--osky-cue-fx-crescent);
	color: #f6d77b;
	animation-name: osky-cue-fx-glowpulse;
	animation-duration: calc(var(--d) / 2);
}

/* Holi colour powder: soft clouds that bloom and fade. */
.osky-cue--fx-powder .osky-cue__fx i {
	--fx-w: 110px;
	--fx-h: 110px;
	top: var(--y);
	border-radius: 50%;
	background: radial-gradient(circle, currentColor 0 30%, transparent 68%);
	filter: blur(6px);
	mix-blend-mode: multiply;
	opacity: 0;
	animation-name: osky-cue-fx-puff;
	animation-duration: calc(var(--d) * 0.9);
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}
.osky-cue--fx-powder .osky-cue__fx i:nth-child(6n+1) { color: #ff3d7f; }
.osky-cue--fx-powder .osky-cue__fx i:nth-child(6n+2) { color: #ffcc00; }
.osky-cue--fx-powder .osky-cue__fx i:nth-child(6n+3) { color: #22c1ee; }
.osky-cue--fx-powder .osky-cue__fx i:nth-child(6n+4) { color: #7b2ff7; }
.osky-cue--fx-powder .osky-cue__fx i:nth-child(6n+5) { color: #2ee59d; }
.osky-cue--fx-powder .osky-cue__fx i:nth-child(6n)   { color: #ff7a00; }
.osky-cue--fx-powder .osky-cue__fx i:nth-child(n+15) { display: none; }
.osky-cue--fx-powder .osky-cue__fx--popup i { mix-blend-mode: normal; }

/* Fireworks: bursts that bloom where they are. */
.osky-cue--fx-fireworks .osky-cue__fx i {
	--fx-w: 90px;
	--fx-h: 90px;
	--fx-mask: var(--osky-cue-fx-burst);
	top: calc(var(--y) * 0.7);
	filter: drop-shadow(0 0 6px currentColor);
	opacity: 0;
	animation-name: osky-cue-fx-burst;
	animation-duration: calc(var(--d) / 3.5);
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
	animation-iteration-count: infinite;
}
.osky-cue--fx-fireworks .osky-cue__fx i:nth-child(5n+1) { color: #ffd166; }
.osky-cue--fx-fireworks .osky-cue__fx i:nth-child(5n+2) { color: #ef476f; }
.osky-cue--fx-fireworks .osky-cue__fx i:nth-child(5n+3) { color: #06d6a0; }
.osky-cue--fx-fireworks .osky-cue__fx i:nth-child(5n+4) { color: #8ecae6; }
.osky-cue--fx-fireworks .osky-cue__fx i:nth-child(5n)   { color: #ffffff; }
.osky-cue--fx-fireworks .osky-cue__fx i:nth-child(n+11) { display: none; }

/* Embers: little flames floating up (diyas, bonfires). */
.osky-cue--fx-embers .osky-cue__fx i {
	--fx-w: 9px;
	--fx-h: 13px;
	--fx-mask: var(--osky-cue-fx-flame);
	color: #ffb347;
	filter: drop-shadow(0 0 5px rgba(255, 140, 0, 0.95));
	animation-name: osky-cue-fx-rise, osky-cue-fx-flicker;
	animation-duration: calc(var(--d) * 0.8), 0.35s;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal, alternate;
}
.osky-cue--fx-embers .osky-cue__fx i:nth-child(3n) { color: #ffe066; }

.osky-cue--fx-embers .osky-cue__fx--popup i,
.osky-cue--fx-stars .osky-cue__fx--popup i,
.osky-cue--fx-lanterns .osky-cue__fx--popup i,
.osky-cue--fx-fireworks .osky-cue__fx--popup i {
	opacity: 0.75;
}

@keyframes osky-cue-fx-glowpulse {
	0%, 100% { opacity: 0.35; transform: scale(0.85); }
	50%      { opacity: 1; transform: scale(1); }
}

@keyframes osky-cue-fx-puff {
	0%   { opacity: 0; transform: translateY(20px) scale(0.4); }
	30%  { opacity: 0.55; }
	100% { opacity: 0; transform: translateY(-70px) scale(1.5); }
}

@keyframes osky-cue-fx-burst {
	0%   { opacity: 0; transform: scale(0.1) rotate(0deg); }
	15%  { opacity: 1; }
	70%  { opacity: 0.9; transform: scale(1) rotate(20deg); }
	100% { opacity: 0; transform: scale(1.15) rotate(24deg) translateY(10px); }
}

@keyframes osky-cue-fx-flicker {
	from { transform: scaleY(1) translateX(-1px); }
	to   { transform: scaleY(1.25) translateX(1px); }
}

/* ─── Decoration (pattern or frame behind the words) ─────────────────────── */

.osky-cue__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: none;
	border-radius: inherit;
	color: var(--osky-cue-accent);
	pointer-events: none;
}

.osky-cue__content {
	position: relative;
	z-index: 1;
}

.osky-cue--decor-islamic .osky-cue__decor,
.osky-cue--decor-clouds .osky-cue__decor,
.osky-cue--decor-dots .osky-cue__decor,
.osky-cue--decor-rangoli .osky-cue__decor,
.osky-cue--decor-bunting .osky-cue__decor,
.osky-cue--decor-frame .osky-cue__decor {
	display: block;
}

.osky-cue--decor-islamic .osky-cue__decor {
	background: currentColor;
	-webkit-mask: var(--osky-cue-pat-islamic) 0 0 / 46px 46px repeat;
	mask: var(--osky-cue-pat-islamic) 0 0 / 46px 46px repeat;
	opacity: 0.1;
}

.osky-cue--decor-clouds .osky-cue__decor {
	background: currentColor;
	-webkit-mask: var(--osky-cue-pat-clouds) 0 0 / 80px 50px repeat;
	mask: var(--osky-cue-pat-clouds) 0 0 / 80px 50px repeat;
	opacity: 0.16;
}

.osky-cue--decor-dots .osky-cue__decor {
	background: currentColor;
	-webkit-mask: var(--osky-cue-pat-dots) 0 0 / 22px 22px repeat;
	mask: var(--osky-cue-pat-dots) 0 0 / 22px 22px repeat;
	opacity: 0.12;
}

.osky-cue--decor-rangoli .osky-cue__decor {
	background: currentColor;
	-webkit-mask: var(--osky-cue-pat-rangoli) -50px -50px / 160px 160px no-repeat, var(--osky-cue-pat-rangoli) calc(100% + 50px) calc(100% + 50px) / 160px 160px no-repeat;
	mask: var(--osky-cue-pat-rangoli) -50px -50px / 160px 160px no-repeat, var(--osky-cue-pat-rangoli) calc(100% + 50px) calc(100% + 50px) / 160px 160px no-repeat;
	opacity: 0.32;
}

.osky-cue--decor-bunting .osky-cue__decor {
	inset: 0 0 auto;
	height: 30px;
	border-radius: var(--osky-cue-inner-radius) var(--osky-cue-inner-radius) 0 0;
	background: repeating-linear-gradient(90deg, var(--osky-cue-accent) 0 36px, var(--osky-cue-accent-text) 36px 72px, var(--osky-cue-heading) 72px 108px);
	-webkit-mask: var(--osky-cue-pat-bunting) 0 0 / 36px 30px repeat-x;
	mask: var(--osky-cue-pat-bunting) 0 0 / 36px 30px repeat-x;
}

.osky-cue--decor-bunting .osky-cue__body {
	padding-top: calc(var(--osky-cue-pad) + 14px);
}

.osky-cue--decor-frame .osky-cue__decor {
	inset: 10px;
	border: 1.5px solid currentColor;
	border-radius: max(0px, calc(var(--osky-cue-inner-radius) - 8px));
	outline: 1px solid currentColor;
	outline-offset: -6px;
	opacity: 0.55;
}

/* ─── Heading styles ─────────────────────────────────────────────────────── */

.osky-cue--hfx-glow .osky-cue-prose :is(h1, h2, h3) {
	text-shadow: 0 0 22px color-mix(in srgb, var(--osky-cue-accent) 75%, transparent), 0 0 6px color-mix(in srgb, var(--osky-cue-accent) 55%, transparent);
}

.osky-cue--hfx-rainbow .osky-cue-prose :is(h1, h2) {
	background: linear-gradient(90deg, #ff3d7f, #ff8a00, #ffcc00, #2ee59d, #22c1ee, #7b2ff7);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.osky-cue--hfx-gold .osky-cue-prose :is(h1, h2) {
	background: linear-gradient(180deg, #fff6c9 0%, #f4cf5d 38%, #b8860b 60%, #f8dc7c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 1px 0 rgba(80, 50, 0, 0.35));
}

.osky-cue--hfx-rainbow .osky-cue-prose :is(h1, h2),
.osky-cue--hfx-gold .osky-cue-prose :is(h1, h2) {
	width: fit-content;
	max-width: 100%;
}

.osky-cue--align-center:is(.osky-cue--hfx-rainbow, .osky-cue--hfx-gold) .osky-cue-prose :is(h1, h2) {
	margin-inline: auto;
}

.osky-cue--align-right:is(.osky-cue--hfx-rainbow, .osky-cue--hfx-gold) .osky-cue-prose :is(h1, h2) {
	margin-left: auto;
}

.osky-cue--hfx-shadow .osky-cue-prose :is(h1, h2) {
	text-shadow: 3px 3px 0 color-mix(in srgb, var(--osky-cue-accent) 85%, transparent);
}

/* ─── Keyframes & motion preferences ─────────────────────────────────────── */

@keyframes osky-cue-spin {
	to { transform: rotate(360deg); }
}

@keyframes osky-cue-pop {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: none; }
}

@keyframes osky-cue-tick {
	to { stroke-dashoffset: 0; }
}

@keyframes osky-cue-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
	70%  { box-shadow: 0 0 0 0.55em transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes osky-cue-teaser-in {
	from { opacity: 0; transform: translateY(24px) scale(0.9); }
	to   { opacity: 1; }
}

@keyframes osky-cue-teaser-edge {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.osky-cue,
	.osky-cue-teaser {
		--osky-cue-dur: 1ms;
	}

	.osky-cue *,
	.osky-cue-teaser,
	.osky-cue-teaser::before {
		animation: none !important;
	}
}