/*!
 * Birthday Countdown Wishes - front-end stylesheet (1.1.0)
 *
 * Scope & specificity strategy
 * ----------------------------
 * Every rule is scoped under the plugin wrapper with the root selector
 * ".bcw-app.bcw-app:not(#bcw)" (specificity 1,2,0). The ":not(#bcw)" part
 * always matches (no element has that id) but counts as an ID, so theme and
 * page-builder selectors - even ID-prefixed ones such as "#main .entry-content
 * h3::before" or "#page span" - cannot win against it. Our own element resets
 * (root + "span" = 1,2,1) always lose to our component classes (root + class =
 * 1,3,0), because every rule shares the same root.
 *
 * Only the design tokens use the single ".bcw-app" selector: the wrapper's
 * inline style (colours from the settings page) overrides them.
 *
 * Layout: the wrapper is a full-width band (or a rounded block in "content"
 * mode); the script bleeds it edge to edge (class bcw-app--bled) when the
 * theme column is centred, or marks it bcw-app--edge when the column already
 * spans the viewport. Content lives in .bcw-shell (max 1200px), the
 * container-query container "bcw". Viewport media queries are the fallback
 * for browsers without container queries.
 *
 * Font sizes are px or px-bounded clamp() on purpose: many themes set
 * html { font-size: 62.5% }, which would shrink rem-based text.
 *
 * Continuous animations only animate transform / opacity, run only while the
 * wrapper is on screen (.bcw-is-visible) and are static under
 * prefers-reduced-motion.
 *
 * Contents
 *  1.  Design tokens
 *  2.  Wrapper, backdrop & width modes
 *  3.  Theme-proofing reset
 *  4.  Animated background (gradient, balloons, confetti)
 *  5.  Shell & page layout (hero, result, responsive grid)
 *  6.  Panels
 *  7.  Cake
 *  8.  Party stage (glow, balloons, gifts, sparkles, confetti)
 *  9.  Typography
 *  10. Views & transitions
 *  11. Form
 *  12. Buttons
 *  13. Birthday info & countdown
 *  14. Birthday-today block
 *  15. Share section
 *  16. Actions
 *  17. Tooltip & toast
 *  18. Utilities
 *  19. Focus styles
 *  20. Animation play state
 *  21. Keyframes
 *  22. Reduced motion
 *  23. Forced colours & print
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

.bcw-app {
	/* Brand colours (overridden by the wrapper's inline style). */
	--bcw-primary: #FF5C70;
	--bcw-primary-rgb: 255, 92, 112;
	--bcw-primary-dark: #E84A5F;
	--bcw-secondary: #7C5CFC;
	--bcw-secondary-rgb: 124, 92, 252;
	--bcw-secondary-dark: #694AE5;
	--bcw-text: #172033;
	--bcw-text-rgb: 23, 32, 51;
	--bcw-button-text: #FFFFFF;
	--bcw-button-bg: #FF5C70;
	--bcw-button-bg-hover: #E84A5F;

	/* Accents. */
	--bcw-accent: #FFC75F;
	--bcw-mint: #5CD6C0;
	--bcw-danger: #C62840;
	--bcw-danger-rgb: 198, 40, 64;

	/* Derived tones. */
	--bcw-muted: rgba(var(--bcw-text-rgb), 0.7);
	--bcw-soft: rgba(var(--bcw-text-rgb), 0.64); /* >= 4.5:1 for 13px text on white */
	--bcw-tint-primary: rgba(var(--bcw-primary-rgb), 0.15);
	--bcw-tint-secondary: rgba(var(--bcw-secondary-rgb), 0.15);
	--bcw-line: rgba(var(--bcw-secondary-rgb), 0.16);

	/* Shape. */
	--bcw-radius: 24px;
	--bcw-radius-sm: 16px;
	--bcw-radius-lg: 28px;
	--bcw-radius-xl: 36px;
	--bcw-radius-input: 14px;

	/* Layout. */
	--bcw-content-max: 1200px;
	--bcw-fade: clamp(40px, 6vw, 96px);

	/* Type. */
	--bcw-font-heading: "Fredoka", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--bcw-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bcw-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;

	/* Motion. */
	--bcw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--bcw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Elevation (soft shadows only - no hard borders anywhere). */
	--bcw-shadow-app:
		0 50px 100px -60px rgba(var(--bcw-secondary-rgb), 0.5),
		0 24px 48px -36px rgba(var(--bcw-primary-rgb), 0.35);
	--bcw-shadow-panel:
		0 32px 64px -36px rgba(var(--bcw-secondary-rgb), 0.45),
		0 14px 28px -20px rgba(var(--bcw-primary-rgb), 0.28);
	--bcw-shadow-soft:
		0 24px 48px -34px rgba(var(--bcw-secondary-rgb), 0.4),
		0 8px 18px -14px rgba(var(--bcw-primary-rgb), 0.2);
	--bcw-shadow-tile: 0 10px 24px -16px rgba(var(--bcw-secondary-rgb), 0.55), 0 2px 6px -3px rgba(var(--bcw-text-rgb), 0.12);
	--bcw-shadow-tile-hover: 0 18px 34px -16px rgba(var(--bcw-secondary-rgb), 0.6), 0 4px 10px -6px rgba(var(--bcw-text-rgb), 0.16);
}

/* ==========================================================================
   2. Wrapper, backdrop & width modes
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	padding: 0;
	border: 0;
	border-radius: var(--bcw-radius-xl);
	background: transparent;
	box-shadow: var(--bcw-shadow-app);
	color: var(--bcw-text);
	font-family: var(--bcw-font-body);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: left;
	text-align: start;
	text-transform: none;
	text-shadow: none;
	text-indent: 0;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

@supports (overflow: clip) {
	.bcw-app.bcw-app:not(#bcw) {
		overflow: clip;
	}
}

/* Width modes. "full" before (or without) the script's bleed is simply the
   whole parent width: max-width: none beats a theme's constrained content
   size (e.g. block themes' ".is-layout-constrained > *"), so the band also
   spans a parent that is already full width (the script then adds
   bcw-app--edge instead of an inline bleed).
   "content" keeps whatever width the theme gives its content column. */
.bcw-app.bcw-app:not(#bcw).bcw-app--full {
	width: 100%;
	max-width: none;
}

.bcw-app.bcw-app:not(#bcw).bcw-app--content {
	width: 100%;
}

/* Backdrop: soft pink / purple / gold birthday gradient (never a hard edge). */
.bcw-app.bcw-app:not(#bcw)::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background-color: #FFF7FA;
	background-image:
		radial-gradient(55% 55% at 12% 16%, rgba(var(--bcw-primary-rgb), 0.15) 0%, rgba(var(--bcw-primary-rgb), 0) 72%),
		radial-gradient(55% 60% at 90% 30%, rgba(var(--bcw-secondary-rgb), 0.16) 0%, rgba(var(--bcw-secondary-rgb), 0) 72%),
		radial-gradient(50% 45% at 50% 100%, rgba(255, 199, 95, 0.16) 0%, rgba(255, 199, 95, 0) 70%),
		linear-gradient(160deg, rgba(var(--bcw-primary-rgb), 0.08) 0%, rgba(var(--bcw-secondary-rgb), 0.1) 100%);
	box-shadow: none;
	opacity: 1;
	transform: none;
	pointer-events: none;
}

.bcw-app.bcw-app:not(#bcw)::after {
	content: none;
	display: none;
}

/* Edge-to-edge band (script bleed, a parent that already spans the viewport,
   or a full-width block in full mode): no corners, no outer shadow; the top
   and bottom edges melt into the page. A "content" instance inside an
   .alignfull parent keeps its rounded card. */
.bcw-app.bcw-app:not(#bcw).bcw-app--edge,
.bcw-app.bcw-app:not(#bcw).bcw-app--bled,
.alignfull > .bcw-app--full.bcw-app:not(#bcw) {
	border-radius: 0;
	box-shadow: none;
}

.bcw-app.bcw-app:not(#bcw).bcw-app--edge::before,
.bcw-app.bcw-app:not(#bcw).bcw-app--bled::before,
.bcw-app.bcw-app:not(#bcw).bcw-app--edge > .bcw-bg,
.bcw-app.bcw-app:not(#bcw).bcw-app--bled > .bcw-bg,
.alignfull > .bcw-app--full.bcw-app:not(#bcw)::before,
.alignfull > .bcw-app--full.bcw-app:not(#bcw) > .bcw-bg {
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000000 var(--bcw-fade), #000000 calc(100% - var(--bcw-fade)), rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000000 var(--bcw-fade), #000000 calc(100% - var(--bcw-fade)), rgba(0, 0, 0, 0) 100%);
}

.bcw-app.bcw-app:not(#bcw) ::selection {
	background: rgba(var(--bcw-primary-rgb), 0.24);
	color: var(--bcw-text);
}

/* ==========================================================================
   3. Theme-proofing reset
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) *,
.bcw-app.bcw-app:not(#bcw) *::before,
.bcw-app.bcw-app:not(#bcw) *::after {
	box-sizing: border-box;
}

.bcw-app.bcw-app:not(#bcw) [hidden],
.bcw-app[hidden] {
	display: none !important;
}

.bcw-app.bcw-app:not(#bcw) h2,
.bcw-app.bcw-app:not(#bcw) h3,
.bcw-app.bcw-app:not(#bcw) p,
.bcw-app.bcw-app:not(#bcw) ul,
.bcw-app.bcw-app:not(#bcw) li,
.bcw-app.bcw-app:not(#bcw) form,
.bcw-app.bcw-app:not(#bcw) section,
.bcw-app.bcw-app:not(#bcw) fieldset,
.bcw-app.bcw-app:not(#bcw) legend,
.bcw-app.bcw-app:not(#bcw) label {
	display: block;
	float: none;
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-align: inherit;
	text-decoration: none;
	text-transform: none;
	text-shadow: none;
	text-indent: 0;
	list-style: none;
	opacity: 1;
	clear: none;
	transform: none;
	filter: none;
}

/* Theme pseudo-element decorations (heading bars, "\00A7" marks, list stars,
   underline pseudos, clearfix hacks...) are neutralised on EVERY element:
   position, box, background, border and transform included, not only content.
   Our own pseudo-elements are component rules (one class more) and win. */
.bcw-app.bcw-app:not(#bcw) *::before,
.bcw-app.bcw-app:not(#bcw) *::after {
	content: none;
	display: none;
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	float: none;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	transform: none;
	filter: none;
	animation: none;
	transition: none;
}

.bcw-app.bcw-app:not(#bcw) li::marker {
	content: "";
}

.bcw-app.bcw-app:not(#bcw) fieldset {
	min-width: 0; /* default min-inline-size: min-content causes overflow */
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 0;
	border: 0;
}

.bcw-app.bcw-app:not(#bcw) legend {
	width: 100%;
	max-width: 100%;
	white-space: normal;
}

.bcw-app.bcw-app:not(#bcw) a,
.bcw-app.bcw-app:not(#bcw) a:visited,
.bcw-app.bcw-app:not(#bcw) a:hover,
.bcw-app.bcw-app:not(#bcw) a:focus,
.bcw-app.bcw-app:not(#bcw) a:active {
	text-decoration: none;
	text-shadow: none;
}

.bcw-app.bcw-app:not(#bcw) a {
	color: inherit;
	border: 0;
	background-image: none;
	box-shadow: none;
	outline-offset: 0;
	cursor: pointer;
}

.bcw-app.bcw-app:not(#bcw) button,
.bcw-app.bcw-app:not(#bcw) input,
.bcw-app.bcw-app:not(#bcw) select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	float: none;
	position: static;
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	text-indent: 0;
	filter: none;
	opacity: 1;
	transform: none;
	vertical-align: middle;
}

.bcw-app.bcw-app:not(#bcw) button {
	cursor: pointer;
	overflow: visible;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
}

.bcw-app.bcw-app:not(#bcw) button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.bcw-app.bcw-app:not(#bcw) select::-ms-expand {
	display: none;
}

.bcw-app.bcw-app:not(#bcw) input::-ms-clear {
	display: none;
}

.bcw-app.bcw-app:not(#bcw) svg {
	display: inline-block;
	float: none;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	line-height: 1;
	vertical-align: middle;
	overflow: visible;
}

/* Generic containers and inline elements: theme rules such as
   "span { font-family: Georgia }", ".entry-content * { line-height }" or
   "div { color }" must not reach them. "inherit" is exactly what they get
   without a theme; component classes (one class more) set their own values. */
.bcw-app.bcw-app:not(#bcw) div,
.bcw-app.bcw-app:not(#bcw) span,
.bcw-app.bcw-app:not(#bcw) strong,
.bcw-app.bcw-app:not(#bcw) em,
.bcw-app.bcw-app:not(#bcw) b,
.bcw-app.bcw-app:not(#bcw) i,
.bcw-app.bcw-app:not(#bcw) small,
.bcw-app.bcw-app:not(#bcw) code,
.bcw-app.bcw-app:not(#bcw) time,
.bcw-app.bcw-app:not(#bcw) abbr,
.bcw-app.bcw-app:not(#bcw) sup,
.bcw-app.bcw-app:not(#bcw) sub {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	text-shadow: none;
	text-indent: 0;
}

.bcw-app.bcw-app:not(#bcw) span,
.bcw-app.bcw-app:not(#bcw) strong,
.bcw-app.bcw-app:not(#bcw) em,
.bcw-app.bcw-app:not(#bcw) b,
.bcw-app.bcw-app:not(#bcw) i,
.bcw-app.bcw-app:not(#bcw) small,
.bcw-app.bcw-app:not(#bcw) code,
.bcw-app.bcw-app:not(#bcw) time,
.bcw-app.bcw-app:not(#bcw) abbr,
.bcw-app.bcw-app:not(#bcw) sup,
.bcw-app.bcw-app:not(#bcw) sub {
	display: inline;
	float: none;
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	transform: none;
	vertical-align: baseline;
}

/* ==========================================================================
   4. Animated background
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

/* Slowly shifting gradient: an oversized layer that drifts (transform only). */
.bcw-app.bcw-app:not(#bcw) .bcw-bg::before {
	content: "";
	position: absolute;
	top: -25%;
	left: -25%;
	display: block;
	width: 150%;
	height: 150%;
	background-image:
		radial-gradient(circle at 28% 30%, rgba(var(--bcw-primary-rgb), 0.14) 0%, rgba(var(--bcw-primary-rgb), 0) 22%),
		radial-gradient(circle at 72% 62%, rgba(var(--bcw-secondary-rgb), 0.2) 0%, rgba(var(--bcw-secondary-rgb), 0) 24%),
		radial-gradient(circle at 62% 28%, rgba(255, 199, 95, 0.12) 0%, rgba(255, 199, 95, 0) 16%);
	transform: translate3d(-8%, -6%, 0);
	animation: bcw-bg-shift 22s ease-in-out infinite alternate;
}

.bcw-app.bcw-app:not(#bcw) .bcw-bg__balloons,
.bcw-app.bcw-app:not(#bcw) .bcw-bg__confetti {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
}

/* Balloon lane: full height, the balloon sits at its top. */
.bcw-app.bcw-app:not(#bcw) .bcw-balloon {
	position: absolute;
	top: 0;
	left: var(--bcw-x, 50%);
	display: block;
	width: calc(52px * var(--bcw-scale, 1));
	height: 100%;
	transform: translateY(100%);
	animation-name: bcw-rise;
	animation-duration: var(--bcw-dur, 20s);
	animation-delay: var(--bcw-delay, 0s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-balloon__svg {
	display: block;
	width: 100%;
	height: calc(52px * var(--bcw-scale, 1) * 1.6667);
	opacity: 0.34;
	transform-origin: 50% 100%;
	animation-name: bcw-sway;
	animation-duration: calc(var(--bcw-dur, 20s) / 4);
	animation-delay: var(--bcw-delay, 0s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.bcw-app.bcw-app:not(#bcw) .bcw-balloon__body,
.bcw-app.bcw-app:not(#bcw) .bcw-balloon__knot {
	fill: var(--bcw-balloon-color, var(--bcw-primary));
}

.bcw-app.bcw-app:not(#bcw) .bcw-balloon__string {
	fill: none;
	stroke: rgba(var(--bcw-text-rgb), 0.28);
	stroke-width: 1.3;
	stroke-linecap: round;
}

.bcw-app.bcw-app:not(#bcw) .bcw-balloon__shine,
.bcw-app.bcw-app:not(#bcw) .bcw-balloon__glint {
	fill: #FFFFFF;
	opacity: 0.5;
}

.bcw-app.bcw-app:not(#bcw) .bcw-balloon__shade {
	fill: #000000;
	opacity: 0.1;
}

/* Confetti lane: full height, the visible piece is ::before. */
.bcw-app.bcw-app:not(#bcw) .bcw-confetto {
	position: absolute;
	top: 0;
	left: var(--bcw-x, 50%);
	display: block;
	width: 12px;
	height: 100%;
	transform: translateY(-10%);
	animation-name: bcw-fall;
	animation-duration: var(--bcw-dur, 12s);
	animation-delay: var(--bcw-delay, 0s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-confetto::before {
	content: "";
	display: block;
	width: 7px;
	height: 9px;
	border-radius: 1.5px;
	background: var(--bcw-confetto-color, var(--bcw-primary));
	opacity: 0.42;
	transform: rotate(var(--bcw-rot, 0deg));
	animation-name: bcw-tumble;
	animation-duration: calc(var(--bcw-dur, 12s) / 3);
	animation-delay: var(--bcw-delay, 0s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-confetto:nth-child(3n)::before {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.bcw-app.bcw-app:not(#bcw) .bcw-confetto:nth-child(3n+2)::before {
	width: 9px;
	height: 6px;
	border-radius: 1px;
}

/* Lighter scene on small screens. */
@media (max-width: 599.98px) {
	.bcw-app.bcw-app:not(#bcw) .bcw-balloon:nth-child(2n),
	.bcw-app.bcw-app:not(#bcw) .bcw-confetto:nth-child(even) {
		display: none;
	}
}

/* Background animations disabled in the settings: static soft gradient only. */
.bcw-app.bcw-app:not(#bcw).bcw-app--no-bg-anim .bcw-bg {
	display: none;
}

/* ==========================================================================
   5. Shell & page layout
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-shell {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: var(--bcw-content-max, 1200px);
	margin: 0 auto;
	padding: clamp(28px, 5.5vw, 64px) clamp(16px, 4vw, 48px);
}

.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-shell,
.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-shell,
.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-shell {
	padding-top: calc(var(--bcw-fade) * 0.6 + clamp(16px, 3vw, 48px));
	padding-bottom: calc(var(--bcw-fade) * 0.6 + clamp(16px, 3vw, 48px));
}

@supports (container-type: inline-size) {
	.bcw-app.bcw-app:not(#bcw) .bcw-shell {
		container-type: inline-size;
		container-name: bcw;
	}
}

/* --- Form view: intro (cake + headline) and the form panel ------------- */

.bcw-app.bcw-app:not(#bcw) .bcw-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	align-items: center;
	gap: clamp(20px, 4vw, 32px);
	min-width: 0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 640px;
	min-width: 0;
	text-align: center;
}

.bcw-app.bcw-app:not(#bcw) .bcw-panel--form {
	width: 100%;
	max-width: 580px;
}

/* --- Countdown view: main column and party stage ------------------------ */

.bcw-app.bcw-app:not(#bcw) .bcw-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	align-items: center;
	gap: clamp(16px, 4vw, 36px);
	min-width: 0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-result__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 660px;
	min-width: 0;
	text-align: center;
}

.bcw-app.bcw-app:not(#bcw) .bcw-result__party {
	display: block;
	width: 100%;
	max-width: 440px;
	min-width: 0;
}

/* --- Two-column desktop layout (container >= 880px; viewport fallback) --- */

@container bcw (min-width: 880px) {
	.bcw-app.bcw-app:not(#bcw) .bcw-hero {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		justify-items: stretch;
		gap: clamp(40px, 6cqi, 88px);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro {
		align-items: flex-start;
		gap: 18px;
		max-width: none;
		text-align: left;
		text-align: start;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-title,
	.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-subtitle {
		margin: 0;
		text-align: left;
		text-align: start;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-title {
		font-size: clamp(40px, 4.8cqi, 60px);
		line-height: 1.08;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-subtitle {
		max-width: 30em;
		font-size: clamp(17px, 1.7cqi, 20px);
	}

	/* Left-aligned with the headline: the bottom tier starts 36/240 (15%) into
	   the cake artwork, so the wrap is pulled back by that much and the tier
	   edge lines up with the text (the faint plate overhangs into the gutter). */
	.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-cake-wrap--hero {
		--bcw-hero-cake: clamp(210px, 25cqi, 290px);
		margin: 0 0 6px;
		margin-inline-start: calc(var(--bcw-hero-cake) * -0.15);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-cake-wrap--hero .bcw-cake {
		width: var(--bcw-hero-cake);
	}

	/* The sparkles on the gutter side move inside the artwork box so they
	   never reach the viewport edge. */
	.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-hero__decor .bcw-sparkle--1 {
		left: 8%;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-hero__decor .bcw-sparkle--4 {
		left: 4%;
	}

	[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-hero__decor .bcw-sparkle--1 {
		left: -14%;
	}

	[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-hero__decor .bcw-sparkle--4 {
		left: -8%;
	}

	[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-hero__decor .bcw-sparkle--2 {
		left: 80%;
	}

	[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-hero__intro .bcw-hero__decor .bcw-sparkle--3 {
		left: 88%;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-panel--form {
		justify-self: end;
		max-width: 520px;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-result {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		justify-items: stretch;
		gap: clamp(32px, 5cqi, 72px);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-result__main {
		align-items: flex-start;
		gap: 16px;
		max-width: none;
		text-align: left;
		text-align: start;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-result__main .bcw-title,
	.bcw-app.bcw-app:not(#bcw) .bcw-result__main .bcw-target-date {
		text-align: left;
		text-align: start;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-result__main .bcw-title--countdown {
		font-size: clamp(38px, 4.4cqi, 56px);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-result__main .bcw-birthday-info {
		justify-content: flex-start;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-result__main .bcw-countdown {
		margin-top: 12px;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-result__main .bcw-celebrate {
		align-self: stretch;
	}

	/* Under the full-width birthday card the chips centre with its text. */
	.bcw-app.bcw-app:not(#bcw) .bcw-view--birthday .bcw-result__main .bcw-birthday-info {
		align-self: stretch;
		justify-content: center;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-result__party {
		justify-self: center;
		max-width: 540px;
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 960px) {
		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-hero,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-hero,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-hero {
			grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
			justify-items: stretch;
			gap: 64px;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-hero__intro,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-hero__intro,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-hero__intro {
			align-items: flex-start;
			max-width: none;
			text-align: left;
			text-align: start;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-hero__intro .bcw-title,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-hero__intro .bcw-title,
		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-hero__intro .bcw-subtitle,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-hero__intro .bcw-subtitle,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-hero__intro .bcw-title,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-hero__intro .bcw-subtitle {
			margin: 0;
			text-align: left;
			text-align: start;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-hero__intro .bcw-title,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-hero__intro .bcw-title,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-hero__intro .bcw-title {
			font-size: 52px;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-hero__intro .bcw-cake-wrap--hero,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-hero__intro .bcw-cake-wrap--hero,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-hero__intro .bcw-cake-wrap--hero {
			margin: 0 0 6px;
			margin-inline-start: -39px;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-cake-wrap--hero .bcw-cake,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-cake-wrap--hero .bcw-cake,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-cake-wrap--hero .bcw-cake {
			width: 260px;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-result,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-result,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-result {
			grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
			justify-items: stretch;
			gap: 56px;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-result__main,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-result__main,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-result__main {
			align-items: flex-start;
			max-width: none;
			text-align: left;
			text-align: start;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-result__main .bcw-title,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-result__main .bcw-title,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-result__main .bcw-title {
			font-size: 48px;
			text-align: left;
			text-align: start;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-birthday-info,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-birthday-info,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-birthday-info {
			justify-content: flex-start;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-view--birthday .bcw-birthday-info,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-view--birthday .bcw-birthday-info,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-view--birthday .bcw-birthday-info {
			align-self: stretch;
			justify-content: center;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-view--birthday .bcw-celebrate,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-view--birthday .bcw-celebrate,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-view--birthday .bcw-celebrate {
			align-self: stretch;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-result__party,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-result__party,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-result__party {
			justify-self: center;
			max-width: 520px;
		}
	}
}

/* ==========================================================================
   6. Panels
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-panel {
	position: relative;
	display: block;
	min-width: 0;
	padding: clamp(20px, 4vw, 38px);
	border: 0;
	border-radius: var(--bcw-radius-lg);
	background: rgba(255, 255, 255, 0.88);
	box-shadow: var(--bcw-shadow-panel);
}

/* Frosted glass only where it is cheap: the backdrop animates constantly, so
   small / touch screens keep the opaque panel (no per-frame re-blur). */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
	@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		.bcw-app.bcw-app:not(#bcw) .bcw-panel {
			background: rgba(255, 255, 255, 0.74);
			-webkit-backdrop-filter: blur(18px) saturate(150%);
			backdrop-filter: blur(18px) saturate(150%);
		}
	}
}

/* ==========================================================================
   7. Cake
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-cake-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 0 auto 4px;
	padding-bottom: 6px;
}

/* Soft shadow under the cake that breathes with the bounce. */
.bcw-app.bcw-app:not(#bcw) .bcw-cake-wrap::after {
	content: "";
	position: absolute;
	left: 12%;
	bottom: 0;
	display: block;
	width: 76%;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--bcw-secondary-rgb), 0.3), rgba(var(--bcw-secondary-rgb), 0));
	opacity: 0.6;
	animation: bcw-cake-shadow 3s ease-in-out infinite;
	pointer-events: none;
}

/* Warm halo behind the hero cake (always on) and a stronger one when lit. */
.bcw-app.bcw-app:not(#bcw) .bcw-cake-wrap::before {
	content: "";
	position: absolute;
	top: -18%;
	left: -22%;
	display: block;
	width: 144%;
	height: 120%;
	border-radius: 50%;
	background:
		radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
		radial-gradient(closest-side, rgba(255, 199, 95, 0.28), rgba(255, 199, 95, 0));
	opacity: 0.9;
	pointer-events: none;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 240 / 220;
	overflow: visible;
	transform-origin: 50% 100%;
	animation: bcw-bounce 3s ease-in-out infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--party {
	aspect-ratio: 240 / 252;
	animation-duration: 3.4s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake-wrap--hero .bcw-cake {
	width: clamp(136px, 36vw, 188px);
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__plate {
	fill: rgba(var(--bcw-secondary-rgb), 0.16);
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__plate-rim,
.bcw-app.bcw-app:not(#bcw) .bcw-cake__stand-base {
	fill: rgba(var(--bcw-secondary-rgb), 0.24);
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__stand-stem {
	fill: rgba(var(--bcw-secondary-rgb), 0.16);
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__tier--bottom {
	fill: var(--bcw-secondary);
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__tier--top {
	fill: var(--bcw-primary);
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__frosting--bottom {
	fill: #FFE3E8;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__frosting--top,
.bcw-app.bcw-app:not(#bcw) .bcw-cake__pearls circle {
	fill: #FFFFFF;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__cream circle {
	fill: #FFFFFF;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__cream circle:nth-child(n+5) {
	fill: #FF8FA0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__candle-stick {
	fill: #FFFFFF;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__candle-stripe {
	fill: var(--bcw-accent);
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__wick {
	stroke: #5B4636;
	stroke-linecap: round;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__glow {
	fill: var(--bcw-accent);
	opacity: 0.35;
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__flame {
	fill: #FF9F43;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__flame-inner {
	fill: #FFE08A;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake__flame,
.bcw-app.bcw-app:not(#bcw) .bcw-cake__flame-inner {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

/* Flames are hidden until the candles are lit. The party cake is always lit:
   its flames pop in whenever the countdown view appears. */
.bcw-app.bcw-app:not(#bcw) .bcw-cake__flame-group {
	opacity: 0;
	transform: scale(0);
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__flame-group,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__flame-group {
	opacity: 1;
	transform: scale(1);
	animation: bcw-flame-pop 0.5s var(--bcw-ease-spring) both;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__candle--1 .bcw-cake__flame-group,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__candle--1 .bcw-cake__flame-group {
	animation-delay: 0.25s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__candle--2 .bcw-cake__flame-group,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__candle--2 .bcw-cake__flame-group {
	animation-delay: 0.45s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__candle--3 .bcw-cake__flame-group,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__candle--3 .bcw-cake__flame-group {
	animation-delay: 0.65s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__flame,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__flame {
	animation: bcw-flicker 1.6s ease-in-out infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__flame-inner,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__flame-inner {
	animation: bcw-flicker 1.1s ease-in-out infinite reverse;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__glow,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__glow {
	animation: bcw-glow 2.2s ease-in-out infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__candle--2 .bcw-cake__flame,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__candle--2 .bcw-cake__flame {
	animation-duration: 1.35s;
	animation-delay: -0.4s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__candle--3 .bcw-cake__flame,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__candle--3 .bcw-cake__flame {
	animation-duration: 1.8s;
	animation-delay: -0.9s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__candle--2 .bcw-cake__glow,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__candle--2 .bcw-cake__glow {
	animation-delay: -0.7s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__candle--3 .bcw-cake__glow,
.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__candle--3 .bcw-cake__glow {
	animation-delay: -1.4s;
}

/* Hero decorations: sparkles around the form-view cake. */
.bcw-app.bcw-app:not(#bcw) .bcw-hero__decor {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	pointer-events: none;
}

.bcw-app.bcw-app:not(#bcw) .bcw-hero__decor .bcw-sparkle--1 {
	top: 14%;
	left: -14%;
	width: 15%;
	color: var(--bcw-accent);
	--bcw-dur: 2.8s;
	--bcw-delay: -0.4s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-hero__decor .bcw-sparkle--2 {
	top: 0;
	left: 96%;
	width: 12%;
	color: var(--bcw-secondary);
	--bcw-dur: 3.2s;
	--bcw-delay: -1.6s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-hero__decor .bcw-sparkle--3 {
	top: 56%;
	left: 104%;
	width: 8%;
	color: var(--bcw-primary);
	--bcw-dur: 2.4s;
	--bcw-delay: -0.9s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-hero__decor .bcw-sparkle--4 {
	top: 66%;
	left: -8%;
	width: 7%;
	color: var(--bcw-secondary);
	--bcw-dur: 3s;
	--bcw-delay: -2.1s;
}

/* ==========================================================================
   8. Party stage
   ========================================================================== */

/* All positions are percentages of the stage, so the scene scales as one
   picture from 288px phones to 540px desktop columns. */
.bcw-app.bcw-app:not(#bcw) .bcw-party {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 20 / 19;
	margin: 0 auto;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
}

@supports not (aspect-ratio: 1 / 1) {
	.bcw-app.bcw-app:not(#bcw) .bcw-party {
		height: 0;
		padding-bottom: 95%;
	}
}

.bcw-app.bcw-app:not(#bcw) .bcw-party > span,
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetti > span {
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-party svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Soft glow behind the cake. */
.bcw-app.bcw-app:not(#bcw) .bcw-party__glow {
	top: 6%;
	left: 0;
	width: 100%;
	height: 88%;
	border-radius: 50%;
	background:
		radial-gradient(closest-side, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 34%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(closest-side, rgba(255, 199, 95, 0.4) 0%, rgba(var(--bcw-primary-rgb), 0.2) 48%, rgba(var(--bcw-secondary-rgb), 0.14) 72%, rgba(var(--bcw-secondary-rgb), 0) 100%);
	transform-origin: 50% 55%;
	animation: bcw-party-glow 4.8s ease-in-out infinite alternate;
}

/* Floor shadow the cake and gifts stand on. */
.bcw-app.bcw-app:not(#bcw) .bcw-party__floor {
	left: 4%;
	bottom: 0;
	width: 92%;
	height: 12%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--bcw-secondary-rgb), 0.3), rgba(var(--bcw-secondary-rgb), 0.12) 55%, rgba(var(--bcw-secondary-rgb), 0));
}

/* Confetti gently falling through the stage (lanes, like the background). */
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetti {
	top: 0;
	right: 0;
	bottom: 12%;
	left: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000000 14%, #000000 80%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000000 14%, #000000 80%, rgba(0, 0, 0, 0) 100%);
}

.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto {
	top: 0;
	left: var(--bcw-x, 50%);
	width: 10px;
	height: 100%;
	transform: translateY(-12%);
	animation: bcw-fall var(--bcw-dur, 9s) linear var(--bcw-delay, 0s) infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto::before {
	content: "";
	display: block;
	width: 8px;
	height: 11px;
	border-radius: 2px;
	background: var(--bcw-c, var(--bcw-primary));
	opacity: 0.85;
	transform: rotate(var(--bcw-rot, 0deg));
	animation: bcw-tumble calc(var(--bcw-dur, 9s) / 3) linear var(--bcw-delay, 0s) infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto:nth-child(3n)::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto:nth-child(3n+2)::before {
	width: 11px;
	height: 5px;
	border-radius: 3px;
}

/* --bcw-y: resting position of the piece when motion is reduced. */
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--1 { --bcw-x: 5%; --bcw-dur: 8.5s; --bcw-delay: -1s; --bcw-rot: 20deg; --bcw-c: var(--bcw-primary); --bcw-y: 18%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--2 { --bcw-x: 12%; --bcw-dur: 10s; --bcw-delay: -6s; --bcw-rot: -35deg; --bcw-c: var(--bcw-accent); --bcw-y: 62%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--3 { --bcw-x: 19%; --bcw-dur: 9.2s; --bcw-delay: -3.4s; --bcw-rot: 60deg; --bcw-c: var(--bcw-secondary); --bcw-y: 34%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--4 { --bcw-x: 27%; --bcw-dur: 11s; --bcw-delay: -8s; --bcw-rot: 10deg; --bcw-c: var(--bcw-mint); --bcw-y: 8%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--5 { --bcw-x: 34%; --bcw-dur: 8s; --bcw-delay: -2.2s; --bcw-rot: -60deg; --bcw-c: var(--bcw-primary); --bcw-y: 24%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--6 { --bcw-x: 41%; --bcw-dur: 10.6s; --bcw-delay: -5.1s; --bcw-rot: 45deg; --bcw-c: var(--bcw-accent); --bcw-y: 12%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--7 { --bcw-x: 48%; --bcw-dur: 9.6s; --bcw-delay: -0.4s; --bcw-rot: -15deg; --bcw-c: var(--bcw-secondary); --bcw-y: 4%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--8 { --bcw-x: 55%; --bcw-dur: 8.8s; --bcw-delay: -7.2s; --bcw-rot: 75deg; --bcw-c: var(--bcw-mint); --bcw-y: 20%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--9 { --bcw-x: 62%; --bcw-dur: 11.4s; --bcw-delay: -4s; --bcw-rot: -45deg; --bcw-c: var(--bcw-primary); --bcw-y: 10%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--10 { --bcw-x: 69%; --bcw-dur: 9s; --bcw-delay: -2.8s; --bcw-rot: 30deg; --bcw-c: var(--bcw-accent); --bcw-y: 28%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--11 { --bcw-x: 76%; --bcw-dur: 10.2s; --bcw-delay: -9s; --bcw-rot: -70deg; --bcw-c: var(--bcw-secondary); --bcw-y: 56%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--12 { --bcw-x: 83%; --bcw-dur: 8.2s; --bcw-delay: -5.6s; --bcw-rot: 15deg; --bcw-c: var(--bcw-mint); --bcw-y: 38%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--13 { --bcw-x: 90%; --bcw-dur: 9.8s; --bcw-delay: -1.8s; --bcw-rot: -25deg; --bcw-c: var(--bcw-primary); --bcw-y: 72%; }
.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto--14 { --bcw-x: 96%; --bcw-dur: 10.8s; --bcw-delay: -6.6s; --bcw-rot: 55deg; --bcw-c: var(--bcw-accent); --bcw-y: 30%; }

/* Balloons bobbing on their strings. */
.bcw-app.bcw-app:not(#bcw) .bcw-party__balloon {
	z-index: 1;
	top: var(--bcw-top, 0);
	left: var(--bcw-left, 0);
	width: var(--bcw-w, 14%);
	transform-origin: 50% 100%;
	animation: bcw-party-float var(--bcw-dur, 6s) ease-in-out var(--bcw-delay, 0s) infinite alternate;
}

.bcw-app.bcw-app:not(#bcw) .bcw-party__balloon--1 { --bcw-top: 3%; --bcw-left: 1%; --bcw-w: 15%; --bcw-dur: 6.4s; --bcw-delay: -1.2s; --bcw-balloon-color: var(--bcw-primary); }
.bcw-app.bcw-app:not(#bcw) .bcw-party__balloon--2 { --bcw-top: 16%; --bcw-left: 14%; --bcw-w: 11%; --bcw-dur: 7.2s; --bcw-delay: -3.6s; --bcw-balloon-color: var(--bcw-accent); }
.bcw-app.bcw-app:not(#bcw) .bcw-party__balloon--3 { --bcw-top: 0; --bcw-left: 83%; --bcw-w: 16%; --bcw-dur: 6.8s; --bcw-delay: -2.4s; --bcw-balloon-color: var(--bcw-secondary); }
.bcw-app.bcw-app:not(#bcw) .bcw-party__balloon--4 { --bcw-top: 14%; --bcw-left: 73%; --bcw-w: 11%; --bcw-dur: 7.8s; --bcw-delay: -5s; --bcw-balloon-color: var(--bcw-mint); }

/* The hero of the scene: the big party cake. */
.bcw-app.bcw-app:not(#bcw) .bcw-party__cake {
	z-index: 2;
	left: 20%;
	bottom: 5%;
	width: 60%;
}

/* Gift boxes: a hop every few seconds, the lid lifts a little. */
.bcw-app.bcw-app:not(#bcw) .bcw-gift {
	z-index: 3;
	bottom: var(--bcw-bottom, 4%);
	left: var(--bcw-left, 0);
	width: var(--bcw-w, 20%);
	transform-origin: 50% 100%;
	animation: bcw-gift-hop var(--bcw-dur, 3.4s) ease-in-out var(--bcw-delay, 0s) infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-gift--1 { --bcw-bottom: 3.5%; --bcw-left: 0; --bcw-w: 23%; --bcw-dur: 3.6s; --bcw-delay: -0.6s; --bcw-gift-color: var(--bcw-secondary); --bcw-gift-ribbon: var(--bcw-accent); }
.bcw-app.bcw-app:not(#bcw) .bcw-gift--2 { --bcw-bottom: 3.5%; --bcw-left: 78%; --bcw-w: 19%; --bcw-dur: 4.2s; --bcw-delay: -2.4s; --bcw-gift-color: var(--bcw-mint); --bcw-gift-ribbon: var(--bcw-primary); }
.bcw-app.bcw-app:not(#bcw) .bcw-gift--3 { --bcw-bottom: 0.5%; --bcw-left: 18%; --bcw-w: 13%; --bcw-dur: 3.2s; --bcw-delay: -1.5s; --bcw-gift-color: var(--bcw-accent); --bcw-gift-ribbon: var(--bcw-secondary); z-index: 4; }

.bcw-app.bcw-app:not(#bcw) .bcw-gift__box,
.bcw-app.bcw-app:not(#bcw) .bcw-gift__lid {
	fill: var(--bcw-gift-color, var(--bcw-secondary));
}

.bcw-app.bcw-app:not(#bcw) .bcw-gift__ribbon,
.bcw-app.bcw-app:not(#bcw) .bcw-gift__bow,
.bcw-app.bcw-app:not(#bcw) .bcw-gift__knot {
	fill: var(--bcw-gift-ribbon, var(--bcw-accent));
}

.bcw-app.bcw-app:not(#bcw) .bcw-gift__lid-shine,
.bcw-app.bcw-app:not(#bcw) .bcw-gift__shine {
	fill: #FFFFFF;
}

.bcw-app.bcw-app:not(#bcw) .bcw-gift__lid-shine {
	opacity: 0.2;
}

.bcw-app.bcw-app:not(#bcw) .bcw-gift__shine {
	opacity: 0.28;
}

.bcw-app.bcw-app:not(#bcw) .bcw-gift__shade,
.bcw-app.bcw-app:not(#bcw) .bcw-gift__bow-shade {
	fill: #000000;
}

.bcw-app.bcw-app:not(#bcw) .bcw-gift__top {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: bcw-gift-lid var(--bcw-dur, 3.4s) ease-in-out var(--bcw-delay, 0s) infinite;
}

/* Sparkles twinkling around the scene. */
.bcw-app.bcw-app:not(#bcw) .bcw-sparkle {
	position: absolute;
	z-index: 5;
	display: block;
	width: var(--bcw-w, 5%);
	color: var(--bcw-c, var(--bcw-accent));
	opacity: 0.9;
	animation: bcw-twinkle var(--bcw-dur, 2.6s) ease-in-out var(--bcw-delay, 0s) infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-sparkle svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.bcw-app.bcw-app:not(#bcw) .bcw-sparkle__svg path {
	fill: currentColor;
}

.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--1 { top: 50%; left: 5%; --bcw-w: 5%; --bcw-c: var(--bcw-accent); --bcw-dur: 2.6s; --bcw-delay: -0.3s; }
.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--2 { top: 5%; left: 29%; --bcw-w: 4.5%; --bcw-c: var(--bcw-secondary); --bcw-dur: 3.1s; --bcw-delay: -1.9s; }
.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--3 { top: 1%; left: 47%; --bcw-w: 6.5%; --bcw-c: var(--bcw-accent); --bcw-dur: 2.8s; --bcw-delay: -1.1s; }
.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--4 { top: 8%; left: 64%; --bcw-w: 4.5%; --bcw-c: var(--bcw-primary); --bcw-dur: 3.4s; --bcw-delay: -2.6s; }
.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--5 { top: 50%; left: 91%; --bcw-w: 5%; --bcw-c: var(--bcw-secondary); --bcw-dur: 2.9s; --bcw-delay: -0.8s; }
.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--6 { top: 25%; left: 31%; --bcw-w: 3.5%; --bcw-c: var(--bcw-primary); --bcw-dur: 2.4s; --bcw-delay: -1.4s; }
.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--7 { top: 27%; left: 65%; --bcw-w: 4%; --bcw-c: var(--bcw-accent); --bcw-dur: 3.2s; --bcw-delay: -0.1s; }
.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--8 { top: 60%; left: 17%; --bcw-w: 3%; --bcw-c: var(--bcw-secondary); --bcw-dur: 2.7s; --bcw-delay: -2.2s; }
.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--9 { top: 64%; left: 84%; --bcw-w: 3.5%; --bcw-c: var(--bcw-accent); --bcw-dur: 3s; --bcw-delay: -1.6s; }
.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--10 { top: 16%; left: 53%; --bcw-w: 3%; --bcw-c: var(--bcw-primary); --bcw-dur: 2.5s; --bcw-delay: -0.6s; }

/* Birthday today: the whole stage glows a little brighter. */
.bcw-app.bcw-app:not(#bcw) .bcw-view--birthday .bcw-party__glow {
	background:
		radial-gradient(closest-side, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 34%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(closest-side, rgba(255, 199, 95, 0.6) 0%, rgba(var(--bcw-primary-rgb), 0.3) 48%, rgba(var(--bcw-secondary-rgb), 0.2) 72%, rgba(var(--bcw-secondary-rgb), 0) 100%);
}

/* ==========================================================================
   9. Typography
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-title {
	margin: 0;
	color: var(--bcw-text);
	font-family: var(--bcw-font-heading);
	font-size: clamp(28px, 7vw, 40px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: none;
	overflow-wrap: anywhere;
	word-break: normal;
	-webkit-hyphens: none;
	hyphens: none;
}

@supports (container-type: inline-size) {
	.bcw-app.bcw-app:not(#bcw) .bcw-title {
		font-size: clamp(28px, 7.4cqi, 44px);
	}
}

.bcw-app.bcw-app:not(#bcw) .bcw-subtitle {
	max-width: 34em;
	margin: 0 auto;
	color: var(--bcw-muted);
	font-family: var(--bcw-font-body);
	font-size: clamp(16px, 2.4vw, 18px);
	font-weight: 600;
	line-height: 1.55;
	text-align: center;
}

.bcw-app.bcw-app:not(#bcw) .bcw-section-title {
	position: relative; /* any leaked absolute positioning stays inside the heading */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bcw-text);
	font-family: var(--bcw-font-heading);
	font-size: clamp(21px, 5.2vw, 30px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-align: center;
	text-transform: none;
	overflow-wrap: anywhere;
}

/* Decorative lines. Every box property is set, because themes decorate
   headings with rules like "h3::before { position:absolute; left:0; width:8px }". */
.bcw-app.bcw-app:not(#bcw) .bcw-section-title::before,
.bcw-app.bcw-app:not(#bcw) .bcw-section-title::after {
	content: "";
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: auto;
	display: block;
	float: none;
	flex: 1 1 0;
	width: auto;
	min-width: 18px;
	max-width: 72px;
	height: 3px;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(var(--bcw-primary-rgb), 0), rgba(var(--bcw-primary-rgb), 0.75));
	box-shadow: none;
	color: transparent;
	font-size: 0;
	line-height: 0;
	opacity: 1;
	transform: none;
	filter: none;
	animation: none;
	transition: none;
}

.bcw-app.bcw-app:not(#bcw) .bcw-section-title::after {
	background: linear-gradient(90deg, rgba(var(--bcw-secondary-rgb), 0.75), rgba(var(--bcw-secondary-rgb), 0));
}

/* RTL: ::before sits on the right, so both lines still fade away from the text. */
[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-section-title::before {
	background: linear-gradient(270deg, rgba(var(--bcw-primary-rgb), 0), rgba(var(--bcw-primary-rgb), 0.75));
}

[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-section-title::after {
	background: linear-gradient(270deg, rgba(var(--bcw-secondary-rgb), 0.75), rgba(var(--bcw-secondary-rgb), 0));
}

/* ==========================================================================
   10. Views & transitions
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-view {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-view--countdown {
	gap: clamp(28px, 5vw, 56px);
}

.bcw-app.bcw-app:not(#bcw) .bcw-view--entering {
	animation: bcw-view-in 0.38s var(--bcw-ease-out) both;
}

.bcw-app.bcw-app:not(#bcw) .bcw-view--leaving {
	animation: bcw-view-out 0.22s ease-in both;
	pointer-events: none;
}

/* ==========================================================================
   11. Form
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	text-align: start;
}

.bcw-app.bcw-app:not(#bcw) .bcw-field {
	display: block;
	min-width: 0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	color: var(--bcw-text);
	font-family: var(--bcw-font-body);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

/* Floated legend behaves like a normal block in every engine (margins honoured). */
.bcw-app.bcw-app:not(#bcw) .bcw-fieldset > .bcw-label {
	float: left;
	width: 100%;
}

.bcw-app.bcw-app:not(#bcw) .bcw-fieldset > .bcw-date-grid {
	clear: both;
}

.bcw-app.bcw-app:not(#bcw) .bcw-sublabel {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: var(--bcw-muted);
	font-family: var(--bcw-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
}

/* Same font, size and line box as its label, so "Year (optional)" sits on the
   same baseline as "Month" and "Day". */
.bcw-app.bcw-app:not(#bcw) .bcw-optional {
	display: inline;
	color: var(--bcw-soft);
	font-family: var(--bcw-font-body);
	font-size: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	vertical-align: baseline;
	white-space: nowrap;
}

.bcw-app.bcw-app:not(#bcw) .bcw-input-wrap {
	position: relative;
	display: block;
}

.bcw-app.bcw-app:not(#bcw) .bcw-input,
.bcw-app.bcw-app:not(#bcw) .bcw-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: 100%;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 2px solid rgba(var(--bcw-secondary-rgb), 0.2);
	border-radius: var(--bcw-radius-input);
	background-color: #FFFFFF;
	box-shadow: 0 1px 2px rgba(var(--bcw-text-rgb), 0.05), 0 8px 18px -14px rgba(var(--bcw-secondary-rgb), 0.55);
	color: var(--bcw-text);
	font-family: var(--bcw-font-body);
	font-size: 16px; /* never below 16px: iOS Safari zooms the page on focus */
	font-style: normal;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.bcw-app.bcw-app:not(#bcw) .bcw-input {
	padding-right: 74px; /* room for the character counter */
	cursor: text;
}

[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-input {
	padding-right: 16px;
	padding-left: 74px;
}

.bcw-app.bcw-app:not(#bcw) .bcw-input::placeholder {
	color: rgba(var(--bcw-text-rgb), 0.62); /* >= 4.5:1 on white */
	font-family: var(--bcw-font-body);
	font-style: normal;
	font-weight: 500;
	opacity: 1;
}

.bcw-app.bcw-app:not(#bcw) .bcw-input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 40px #FFFFFF inset;
	-webkit-text-fill-color: var(--bcw-text);
}

.bcw-app.bcw-app:not(#bcw) .bcw-select {
	padding-right: 38px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23172033' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}

[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-select {
	padding-right: 16px;
	padding-left: 38px;
	background-position: left 12px center;
}

.bcw-app.bcw-app:not(#bcw) .bcw-select option {
	background-color: #FFFFFF;
	color: #172033;
	font-weight: 600;
	line-height: 1.3;
}

@media (hover: hover) {
	.bcw-app.bcw-app:not(#bcw) .bcw-input:hover,
	.bcw-app.bcw-app:not(#bcw) .bcw-select:hover {
		border-color: rgba(var(--bcw-secondary-rgb), 0.42);
	}
}

.bcw-app.bcw-app:not(#bcw) .bcw-input:focus,
.bcw-app.bcw-app:not(#bcw) .bcw-select:focus {
	border-color: var(--bcw-secondary);
	box-shadow: 0 0 0 4px rgba(var(--bcw-secondary-rgb), 0.25);
	outline: 2px solid transparent; /* visible in forced-colours mode */
	outline-offset: 2px;
}

.bcw-app.bcw-app:not(#bcw) .bcw-counter {
	position: absolute;
	top: 50%;
	right: 14px;
	display: block;
	transform: translateY(-50%);
	direction: ltr;
	unicode-bidi: isolate;
	color: var(--bcw-soft);
	font-family: var(--bcw-font-body);
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	pointer-events: none;
	transition: color 0.2s ease;
}

[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-counter {
	right: auto;
	left: 14px;
}

.bcw-app.bcw-app:not(#bcw) .bcw-counter.bcw-counter--over {
	color: var(--bcw-danger);
	font-weight: 800;
}

/* Date grid: mobile-first two rows (month full width, then day + year). */
.bcw-app.bcw-app:not(#bcw) .bcw-date-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 10px;
	min-width: 0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-select-wrap {
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: end;
	min-width: 0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-select-wrap:first-child {
	grid-column: 1 / -1;
}

/* Fallback for browsers without container queries. */
@media (min-width: 480px) {
	.bcw-app.bcw-app:not(#bcw) .bcw-date-grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-select-wrap:first-child {
		grid-column: auto;
	}
}

@supports (container-type: inline-size) {
	.bcw-app.bcw-app:not(#bcw) .bcw-form {
		container: bcw-form / inline-size;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-date-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-select-wrap:first-child {
		grid-column: 1 / -1;
	}

	@container bcw-form (min-width: 380px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-date-grid {
			grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
		}

		.bcw-app.bcw-app:not(#bcw) .bcw-select-wrap:first-child {
			grid-column: auto;
		}
	}
}

.bcw-app.bcw-app:not(#bcw) .bcw-hint {
	margin: 10px 0 0;
	color: var(--bcw-muted);
	font-family: var(--bcw-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.bcw-app.bcw-app:not(#bcw) .bcw-error {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 0;
	color: var(--bcw-danger);
	font-family: var(--bcw-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	animation: bcw-error-in 0.28s var(--bcw-ease-out) both;
}

.bcw-app.bcw-app:not(#bcw) .bcw-error::before {
	content: "!";
	position: static;
	flex: none;
	display: block;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bcw-danger);
	color: #FFFFFF;
	font-family: var(--bcw-font-body);
	font-size: 12px;
	font-weight: 900;
	line-height: 18px;
	text-align: center;
}

.bcw-app.bcw-app:not(#bcw) .bcw-field--error .bcw-input,
.bcw-app.bcw-app:not(#bcw) .bcw-input[aria-invalid="true"],
.bcw-app.bcw-app:not(#bcw) .bcw-select[aria-invalid="true"] {
	border-color: var(--bcw-danger);
	background-color: #FFF7F8;
}

.bcw-app.bcw-app:not(#bcw) .bcw-field--error .bcw-input:focus,
.bcw-app.bcw-app:not(#bcw) .bcw-input[aria-invalid="true"]:focus,
.bcw-app.bcw-app:not(#bcw) .bcw-select[aria-invalid="true"]:focus {
	border-color: var(--bcw-danger);
	box-shadow: 0 0 0 4px rgba(var(--bcw-danger-rgb), 0.2);
}

.bcw-app.bcw-app:not(#bcw) .bcw-field--error .bcw-label {
	color: var(--bcw-danger);
}

/* ==========================================================================
   12. Buttons
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	max-width: 100%;
	height: auto;
	min-height: 54px;
	margin: 0;
	padding: 12px clamp(22px, 5vw, 32px);
	border: 0;
	border-radius: 999px;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--bcw-text);
	font: 700 19px/1.2 var(--bcw-font-heading);
	letter-spacing: 0.005em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s var(--bcw-ease-out), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.bcw-app.bcw-app:not(#bcw) .bcw-btn--primary {
	background-color: var(--bcw-button-bg);
	color: var(--bcw-button-text);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
	box-shadow: 0 14px 28px -12px rgba(var(--bcw-primary-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Secondary buttons: ring in the "Button background" setting, filled with the
   button colours on hover/press. The resting label stays in the text colour
   (the button colour as text on white would fail contrast). */
.bcw-app.bcw-app:not(#bcw) .bcw-btn--outline,
.bcw-app.bcw-app:not(#bcw) .bcw-btn--ghost {
	background-color: rgba(255, 255, 255, 0.8);
	color: var(--bcw-text);
	box-shadow: inset 0 0 0 2px var(--bcw-button-bg), 0 10px 22px -16px rgba(var(--bcw-secondary-rgb), 0.5);
}

.bcw-app.bcw-app:not(#bcw) .bcw-btn--block {
	display: flex;
	width: 100%;
}

.bcw-app.bcw-app:not(#bcw) .bcw-btn--lg {
	min-height: 60px;
	padding: 14px clamp(24px, 6vw, 38px);
}

@media (hover: hover) {
	.bcw-app.bcw-app:not(#bcw) .bcw-btn--primary:hover {
		background-color: var(--bcw-button-bg-hover);
		color: var(--bcw-button-text);
		transform: translateY(-2px);
		box-shadow: 0 18px 34px -12px rgba(var(--bcw-primary-rgb), 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-btn--outline:hover,
	.bcw-app.bcw-app:not(#bcw) .bcw-btn--ghost:hover {
		background-color: var(--bcw-button-bg);
		color: var(--bcw-button-text);
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
		transform: translateY(-2px);
		box-shadow: inset 0 0 0 2px var(--bcw-button-bg), 0 14px 26px -14px rgba(var(--bcw-primary-rgb), 0.6);
	}
}

.bcw-app.bcw-app:not(#bcw) .bcw-btn:active,
.bcw-app.bcw-app:not(#bcw) .bcw-btn--primary:active,
.bcw-app.bcw-app:not(#bcw) .bcw-btn--outline:active,
.bcw-app.bcw-app:not(#bcw) .bcw-btn--ghost:active {
	transform: translateY(0);
	transition-duration: 0.06s;
}

.bcw-app.bcw-app:not(#bcw) .bcw-btn--outline:active,
.bcw-app.bcw-app:not(#bcw) .bcw-btn--ghost:active {
	background-color: var(--bcw-button-bg-hover);
	color: var(--bcw-button-text);
	box-shadow: inset 0 0 0 2px var(--bcw-button-bg-hover);
}

.bcw-app.bcw-app:not(#bcw) .bcw-btn--primary:active {
	background-color: var(--bcw-button-bg-hover);
	box-shadow: 0 6px 14px -8px rgba(var(--bcw-primary-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.bcw-app.bcw-app:not(#bcw) .bcw-btn[disabled],
.bcw-app.bcw-app:not(#bcw) .bcw-btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.6;
	transform: none;
}

/* ==========================================================================
   13. Birthday info & countdown
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-birthday-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}

.bcw-app.bcw-app:not(#bcw) .bcw-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 6px 16px 6px 12px;
	padding-inline: 12px 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 10px 22px -16px rgba(var(--bcw-secondary-rgb), 0.7), 0 1px 3px rgba(var(--bcw-text-rgb), 0.06);
	color: var(--bcw-text);
	font-family: var(--bcw-font-body);
	font-size: 15px;
	font-style: normal;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-align: start;
	text-transform: none;
	overflow-wrap: anywhere;
}

.bcw-app.bcw-app:not(#bcw) .bcw-chip::before {
	content: "";
	position: static;
	flex: none;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bcw-primary), var(--bcw-secondary));
	box-shadow: 0 0 0 3px rgba(var(--bcw-primary-rgb), 0.14);
}

.bcw-app.bcw-app:not(#bcw) .bcw-chip--age::before {
	background: var(--bcw-accent);
	box-shadow: 0 0 0 3px rgba(255, 199, 95, 0.25);
}

.bcw-app.bcw-app:not(#bcw) .bcw-chip--note {
	color: var(--bcw-secondary-dark);
	font-weight: 700;
}

.bcw-app.bcw-app:not(#bcw) .bcw-chip--note::before {
	background: var(--bcw-mint);
	box-shadow: 0 0 0 3px rgba(92, 214, 192, 0.22);
}

.bcw-app.bcw-app:not(#bcw) .bcw-chip:empty {
	display: none;
}

.bcw-app.bcw-app:not(#bcw) .bcw-target-date {
	display: block;
	max-width: 100%;
	min-height: 22px;
	margin: 0;
	color: var(--bcw-muted);
	font-family: var(--bcw-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.bcw-app.bcw-app:not(#bcw) .bcw-countdown {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(6px, 2vw, 16px);
	width: 100%;
	max-width: 600px;
	min-width: 0;
	margin: 6px 0 0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.bcw-app.bcw-app:not(#bcw) .bcw-countdown__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1.04;
	padding: 0 2px;
	border: 0;
	border-radius: clamp(14px, 3.4vw, 24px);
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFAFC 100%);
	box-shadow: 0 20px 36px -24px rgba(var(--bcw-secondary-rgb), 0.7), 0 8px 16px -12px rgba(var(--bcw-primary-rgb), 0.35);
}

@supports not (aspect-ratio: 1 / 1) {
	.bcw-app.bcw-app:not(#bcw) .bcw-countdown__card {
		height: clamp(64px, 17vw, 140px);
	}
}

/* Soft primary -> secondary accent tab at the top of each card, plus a
   faint tint behind the number (static). */
.bcw-app.bcw-app:not(#bcw) .bcw-countdown__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24%;
	right: 24%;
	display: block;
	width: auto;
	height: 4px;
	margin: 0;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(90deg, var(--bcw-primary), var(--bcw-secondary));
	opacity: 0.9;
	pointer-events: none;
}

.bcw-app.bcw-app:not(#bcw) .bcw-countdown__card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	width: auto;
	height: 55%;
	margin: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(var(--bcw-primary-rgb), 0.07), rgba(var(--bcw-secondary-rgb), 0));
	pointer-events: none;
}

.bcw-app.bcw-app:not(#bcw) .bcw-countdown__value {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 1.15em;
	direction: ltr; /* each digit is a flex item: never reverse them on RTL sites */
	unicode-bidi: isolate;
	color: var(--bcw-text);
	font: 700 clamp(24px, 8vw, 56px)/1.15 var(--bcw-font-heading);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0;
	white-space: nowrap;
}

/* Unit labels never break inside a word ("MINUTE / S"): they stay on one line
   and scale with the timer's width instead. */
.bcw-app.bcw-app:not(#bcw) .bcw-countdown__label {
	display: block;
	width: -moz-max-content;
	width: max-content;
	max-width: none;
	color: var(--bcw-muted);
	font-family: var(--bcw-font-body);
	font-size: clamp(10px, 2.6vw, 13px);
	font-style: normal;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: keep-all;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Digit slots: fixed width + height so nothing moves when numbers change. */
.bcw-app.bcw-app:not(#bcw) .bcw-digit {
	position: relative;
	display: inline-block;
	width: 0.64em;
	height: 1.15em;
	overflow: hidden;
	color: inherit;
	font-family: var(--bcw-font-heading);
	font-size: inherit;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	vertical-align: top;
}

/* Clip vertically only, so wide glyphs are never cut at the sides. */
@supports (clip-path: inset(0 -1em)) {
	.bcw-app.bcw-app:not(#bcw) .bcw-digit {
		overflow: visible;
		-webkit-clip-path: inset(0 -0.3em);
		clip-path: inset(0 -0.3em);
	}
}

.bcw-app.bcw-app:not(#bcw) .bcw-digit__inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	height: 1.15em;
	color: inherit;
	font-family: var(--bcw-font-heading);
	font-size: inherit;
	font-style: normal;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}

.bcw-app.bcw-app:not(#bcw) .bcw-digit__inner:first-child {
	position: relative;
}

.bcw-app.bcw-app:not(#bcw) .bcw-digit__inner--in {
	animation: bcw-digit-in 0.42s var(--bcw-ease-out) both;
}

.bcw-app.bcw-app:not(#bcw) .bcw-digit__inner--out {
	animation: bcw-digit-out 0.42s var(--bcw-ease-out) both;
}

/* Scale numbers and labels to the timer's own width where supported. */
@supports (container-type: inline-size) {
	.bcw-app.bcw-app:not(#bcw) .bcw-countdown {
		container: bcw-countdown / inline-size;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-countdown__value {
		font-size: clamp(24px, 9.6cqi, 56px);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-countdown__label {
		font-size: clamp(9px, 3.3cqi, 13px);
	}

	/* Narrow timers (phones at 320px): tighter tracking so "MINUTES" fits. */
	@container bcw-countdown (max-width: 319.98px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-countdown__label {
			letter-spacing: 0.03em;
		}
	}
}

/* Same for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 379.98px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-countdown__label {
			font-size: 9.5px;
			letter-spacing: 0.03em;
		}
	}
}

/* Three-digit day counts: with container units the timer font already leaves
   room for three digits (1.92em < a quarter of the timer), so only browsers
   without container queries shrink them. No :has() on the live path: font
   changes driven by :has() on a node whose children change every second are
   invalidated late in some engines. */
@supports not (container-type: inline-size) {
	@supports selector(:has(*)) {
		.bcw-app.bcw-app:not(#bcw) .bcw-countdown__value:has(> .bcw-digit:nth-child(3)) {
			font-size: clamp(20px, 7vw, 52px);
		}
	}
}

/* ==========================================================================
   14. Birthday-today block
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-celebrate {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: clamp(20px, 4vw, 32px) clamp(14px, 3vw, 28px);
	border: 0;
	border-radius: var(--bcw-radius-lg);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(var(--bcw-primary-rgb), 0.14), rgba(var(--bcw-primary-rgb), 0) 70%),
		radial-gradient(120% 90% at 50% 100%, rgba(var(--bcw-secondary-rgb), 0.12), rgba(var(--bcw-secondary-rgb), 0) 70%),
		rgba(255, 255, 255, 0.6);
	box-shadow: var(--bcw-shadow-soft);
	text-align: center;
}

/* Birthday today: the countdown title, timer and date are hidden, so the
   Happy Birthday card leads the column and the chips follow it. */
.bcw-app.bcw-app:not(#bcw) .bcw-view--birthday .bcw-result__main > .bcw-celebrate {
	order: -1;
}

.bcw-app.bcw-app:not(#bcw) .bcw-celebrate__title {
	display: block;
	max-width: 100%;
	margin: 0;
	padding-bottom: 0.06em;
	color: var(--bcw-primary-dark);
	font-family: var(--bcw-font-heading);
	font-size: clamp(30px, 8vw, 52px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-align: center;
	overflow-wrap: anywhere;
	transform-origin: 50% 60%;
	animation: bcw-pulse 2.8s ease-in-out infinite;
}

.bcw-app.bcw-app:not(#bcw) .bcw-celebrate__text {
	max-width: 30em;
	margin: 0 auto;
	color: var(--bcw-muted);
	font-family: var(--bcw-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

/* ==========================================================================
   15. Share section ("Wish your friend on social media")
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-share {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: clamp(22px, 4vw, 40px) clamp(14px, 3.5vw, 40px);
	border: 0;
	border-radius: var(--bcw-radius-lg);
	background: rgba(255, 255, 255, 0.64);
	box-shadow: var(--bcw-shadow-soft);
}

/* Both rows are centred, wrapping flex rows of fixed-basis items, so a row
   with an odd number of visible buttons (a network switched off in the
   settings, SMS or More hidden on desktop) centres its last button instead of
   leaving it alone on the left. */
.bcw-app.bcw-app:not(#bcw) .bcw-share__grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Primary four (WhatsApp, Facebook, X, Copy Link): big tiles on phones, one
   row of four pills on wide screens. */
.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary > .bcw-share-btn {
	flex: 0 0 calc(50% - 6px);
	width: auto;
	max-width: calc(50% - 6px);
}

/* Secondary networks: a smaller, centred row of pills. */
.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--more {
	gap: 10px;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--more > .bcw-share-btn {
	flex: 0 0 calc(50% - 5px);
	width: auto;
	max-width: calc(50% - 5px);
}

@supports selector(:has(*)) {
	.bcw-app.bcw-app:not(#bcw) .bcw-share__grid:not(:has(> :not([hidden]))) {
		display: none;
	}
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn {
	--bcw-share-color: var(--bcw-primary);
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 7px 16px 7px 8px;
	padding-inline: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: var(--bcw-shadow-tile);
	color: var(--bcw-text);
	font-family: var(--bcw-font-body);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: left;
	text-align: start;
	text-decoration: none;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s var(--bcw-ease-out), box-shadow 0.2s ease, background-color 0.2s ease;
}

.bcw-app.bcw-app:not(#bcw) a.bcw-share-btn,
.bcw-app.bcw-app:not(#bcw) a.bcw-share-btn:visited {
	color: var(--bcw-text);
	text-decoration: none;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn__icon {
	position: static;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--bcw-share-color);
	box-shadow: 0 6px 12px -6px rgba(var(--bcw-text-rgb), 0.45);
	color: #FFFFFF;
	line-height: 1;
	transition: transform 0.2s var(--bcw-ease-spring);
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn__icon svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn__label {
	display: block;
	min-width: 0;
	max-width: 100%;
	color: inherit;
	font-family: var(--bcw-font-body);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	overflow-wrap: anywhere;
}

/* Primary buttons: taller tiles (icon above label) by default. */
.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary .bcw-share-btn {
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-height: 88px;
	padding: 14px 10px;
	border-radius: 22px;
	text-align: center;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary .bcw-share-btn__icon {
	width: 42px;
	height: 42px;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary .bcw-share-btn__icon svg {
	width: 22px;
	height: 22px;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary .bcw-share-btn__label {
	font-size: 17px;
	font-weight: 800;
}

/* Network colours. */
.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--whatsapp {
	--bcw-share-color: #25D366;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--facebook {
	--bcw-share-color: #1877F2;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--x {
	--bcw-share-color: #000000;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--messenger {
	--bcw-share-color: #0084FF;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--messenger .bcw-share-btn__icon {
	background: linear-gradient(135deg, #00B2FF 0%, #006AFF 100%);
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--sms {
	--bcw-share-color: #34C759;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--telegram {
	--bcw-share-color: #229ED9;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--instagram {
	--bcw-share-color: #DD2A7B;
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--instagram .bcw-share-btn__icon {
	background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--copy {
	--bcw-share-color: var(--bcw-primary);
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--copy .bcw-share-btn__icon {
	background: linear-gradient(135deg, var(--bcw-primary) 0%, var(--bcw-secondary) 100%);
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn--more {
	--bcw-share-color: var(--bcw-secondary);
}

/* Hover (desktop): lift, a faint wash of the network colour, icon pop. */
@media (hover: hover) {
	.bcw-app.bcw-app:not(#bcw) .bcw-share-btn:hover,
	.bcw-app.bcw-app:not(#bcw) a.bcw-share-btn:hover {
		background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), var(--bcw-share-color);
		box-shadow: var(--bcw-shadow-tile-hover);
		color: var(--bcw-text);
		text-decoration: none;
		transform: translateY(-3px);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-share-btn:hover .bcw-share-btn__icon {
		transform: scale(1.1) rotate(-6deg);
	}
}

.bcw-app.bcw-app:not(#bcw) .bcw-share-btn:active,
.bcw-app.bcw-app:not(#bcw) a.bcw-share-btn:active {
	color: var(--bcw-text);
	transform: translateY(0);
	transition-duration: 0.06s;
}

/* Share links are inert until the script has filled in their real URLs. */
.bcw-app.bcw-app:not(#bcw):not(.bcw-js) .bcw-share-btn {
	opacity: 0.55;
	pointer-events: none;
}

@supports (container-type: inline-size) {
	.bcw-app.bcw-app:not(#bcw) .bcw-share {
		container: bcw-share / inline-size;
	}

	@container bcw-share (max-width: 239.98px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary > .bcw-share-btn {
			flex-basis: 100%;
			max-width: 100%;
		}
	}

	@container bcw-share (max-width: 299.98px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--more > .bcw-share-btn {
			flex-basis: 100%;
			max-width: 100%;
		}
	}

	/* Narrow: the heading may wrap, so a single accent bar sits under it. */
	@container bcw-share (max-width: 639.98px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-section-title {
			flex-direction: column;
			gap: 12px;
		}

		.bcw-app.bcw-app:not(#bcw) .bcw-section-title::before {
			display: none;
		}

		.bcw-app.bcw-app:not(#bcw) .bcw-section-title::after,
		[dir="rtl"] .bcw-app.bcw-app:not(#bcw) .bcw-section-title::after {
			flex: none;
			width: 64px;
			min-width: 64px;
			max-width: 64px;
			height: 4px;
			background: linear-gradient(90deg, var(--bcw-primary), var(--bcw-secondary));
		}
	}

	/* Secondary row: centred pills of one size. */
	@container bcw-share (min-width: 440px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--more > .bcw-share-btn {
			flex: 0 0 178px;
			max-width: 178px;
		}
	}

	/* Enough room: pills with the icon beside the label. */
	@container bcw-share (min-width: 420px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary .bcw-share-btn {
			flex-direction: row;
			gap: 12px;
			min-height: 64px;
			padding: 10px 22px 10px 11px;
			padding-inline: 11px 22px;
			border-radius: 999px;
			text-align: left;
			text-align: start;
		}
	}

	/* Desktop: one row of four. */
	@container bcw-share (min-width: 760px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary {
			flex-wrap: nowrap;
			gap: 16px;
		}

		.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary > .bcw-share-btn {
			flex: 1 1 0;
			max-width: 250px;
		}
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 560px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--more > .bcw-share-btn {
			flex: 0 0 178px;
			max-width: 178px;
		}

		.bcw-app.bcw-app:not(#bcw) .bcw-share__grid--primary .bcw-share-btn {
			flex-direction: row;
			gap: 12px;
			min-height: 64px;
			padding: 10px 22px 10px 11px;
			border-radius: 999px;
			text-align: left;
		}
	}

	@media (min-width: 900px) {
		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-share__grid--primary,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-share__grid--primary,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-share__grid--primary {
			flex-wrap: nowrap;
			gap: 16px;
		}

		.bcw-app.bcw-app:not(#bcw).bcw-app--edge .bcw-share__grid--primary > .bcw-share-btn,
		.bcw-app.bcw-app:not(#bcw).bcw-app--bled .bcw-share__grid--primary > .bcw-share-btn,
		.alignfull > .bcw-app--full.bcw-app:not(#bcw) .bcw-share__grid--primary > .bcw-share-btn {
			flex: 1 1 0;
			max-width: 250px;
		}
	}
}

/* ==========================================================================
   16. Actions
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-actions,
.bcw-app.bcw-app:not(#bcw) .bcw-shared-cta,
.bcw-app.bcw-app:not(#bcw) .bcw-own-actions {
	display: flex;
	justify-content: center;
	min-width: 0;
	text-align: center;
}

.bcw-app.bcw-app:not(#bcw) .bcw-actions {
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Gentle attention ring on the "Create Your Own" button. */
.bcw-app.bcw-app:not(#bcw) .bcw-shared-cta .bcw-btn::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	border: 2px solid rgba(var(--bcw-primary-rgb), 0.55);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	animation: bcw-cta-ring 2.6s ease-out 1s infinite;
}

/* ==========================================================================
   17. Tooltip & toast
   ========================================================================== */

.bcw-app.bcw-app:not(#bcw) .bcw-tooltip {
	position: relative;
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	min-height: 40px;
	margin: 4px auto 0;
	padding: 10px 16px;
	border-radius: 12px;
	background: var(--bcw-text);
	box-shadow: 0 14px 30px -14px rgba(var(--bcw-text-rgb), 0.6);
	color: #FFFFFF;
	font-family: var(--bcw-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	overflow-wrap: anywhere;
	animation: bcw-pop-in 0.3s var(--bcw-ease-spring) both;
}

/* Speech-bubble arrow pointing at the share buttons. */
.bcw-app.bcw-app:not(#bcw) .bcw-tooltip::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 2px;
	background: inherit;
	transform: rotate(45deg);
}

.bcw-app.bcw-app:not(#bcw) .bcw-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 100000;
	display: block;
	width: -moz-max-content;
	width: max-content;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 12px 22px;
	border-radius: 18px;
	background: var(--bcw-text);
	box-shadow: 0 18px 40px -14px rgba(var(--bcw-text-rgb), 0.6);
	color: #FFFFFF;
	font-family: var(--bcw-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	overflow-wrap: anywhere;
	opacity: 0;
	transform: translate(-50%, 20px);
	transition: opacity 0.28s ease, transform 0.28s var(--bcw-ease-out);
	pointer-events: none;
}

.bcw-app.bcw-app:not(#bcw) .bcw-toast.bcw-toast--show {
	opacity: 1;
	transform: translate(-50%, 0);
	animation: bcw-toast-in 0.32s var(--bcw-ease-out) both;
}

/* The script moves the toast into a body-level host (class bcw-app keeps the
   design tokens and the rules above), outside the wrapper's stacking context,
   so positioned page content after the wrapper cannot paint over it. The host
   itself is an empty, unstyled box. */
.bcw-app.bcw-app:not(#bcw).bcw-app--toast-host {
	position: static;
	display: block;
	width: 0;
	min-width: 0;
	max-width: none;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	isolation: auto;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.bcw-app.bcw-app:not(#bcw).bcw-app--toast-host::before {
	content: none;
	display: none;
}

/* ==========================================================================
   18. Utilities
   ========================================================================== */

/* display is forced so a theme rule like "p:empty { display: none }" cannot
   remove the (initially empty) live region from the accessibility tree. */
.bcw-app.bcw-app:not(#bcw) .bcw-sr-only:not([hidden]),
.bcw-app.bcw-app:not(#bcw) p.bcw-sr-only:not([hidden]) {
	position: absolute !important;
	display: block !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.bcw-app.bcw-app:not(#bcw) .bcw-noscript {
	display: block;
	max-width: 640px;
	margin: 24px auto 0;
	padding: 14px 18px;
	border: 0;
	border-radius: var(--bcw-radius-sm);
	background: rgba(var(--bcw-primary-rgb), 0.1);
	box-shadow: var(--bcw-shadow-soft);
	color: var(--bcw-text);
	font-family: var(--bcw-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}

/* ==========================================================================
   19. Focus styles
   ========================================================================== */

/* Fallback for browsers without :focus-visible. */
.bcw-app.bcw-app:not(#bcw) .bcw-btn:focus,
.bcw-app.bcw-app:not(#bcw) .bcw-share-btn:focus,
.bcw-app.bcw-app:not(#bcw) a:focus,
.bcw-app.bcw-app:not(#bcw) button:focus {
	outline: 3px solid var(--bcw-secondary);
	outline-offset: 3px;
}

/* Hide the ring for mouse/touch focus in browsers that support :focus-visible. */
.bcw-app.bcw-app:not(#bcw) .bcw-btn:focus:not(:focus-visible),
.bcw-app.bcw-app:not(#bcw) .bcw-share-btn:focus:not(:focus-visible),
.bcw-app.bcw-app:not(#bcw) a:focus:not(:focus-visible),
.bcw-app.bcw-app:not(#bcw) button:focus:not(:focus-visible) {
	outline: none;
}

.bcw-app.bcw-app:not(#bcw) .bcw-btn:focus-visible,
.bcw-app.bcw-app:not(#bcw) .bcw-share-btn:focus-visible,
.bcw-app.bcw-app:not(#bcw) a:focus-visible,
.bcw-app.bcw-app:not(#bcw) button:focus-visible {
	outline: 3px solid var(--bcw-secondary);
	outline-offset: 3px;
}

/* Programmatically focused headings (tabindex="-1") need no ring. */
.bcw-app.bcw-app:not(#bcw) [tabindex="-1"]:focus {
	outline: none;
}

/* ==========================================================================
   20. Animation play state
   ========================================================================== */

/* Continuous animations run only while the wrapper is on screen (the script
   adds bcw-is-visible). The extra :not() keeps these rules stronger than every
   animation shorthand above. One-shot entrances (flame pop, view transitions)
   are never paused, so a static page still shows the lit party cake. */
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-bg::before,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-balloon,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-balloon__svg,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-confetto,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-confetto::before,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-cake,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-cake-wrap::after,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-cake__flame,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-cake__flame-inner,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-cake__glow,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-party__glow,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-party__confetto,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-party__confetto::before,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-party__balloon,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-gift,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-gift__top,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-sparkle,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-celebrate__title,
.bcw-app.bcw-app:not(#bcw):not(.bcw-is-visible) .bcw-shared-cta .bcw-btn::after {
	animation-play-state: paused;
}

/* ==========================================================================
   Phones (container < 480px): tighter spacing, lighter party scene.
   ========================================================================== */

@container bcw (max-width: 479.98px) {
	.bcw-app.bcw-app:not(#bcw) .bcw-panel {
		padding: 20px 18px 22px;
		border-radius: var(--bcw-radius);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-share {
		padding: 22px 14px;
		border-radius: var(--bcw-radius);
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--6,
	.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--8,
	.bcw-app.bcw-app:not(#bcw) .bcw-party .bcw-sparkle--10,
	.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto:nth-child(even) {
		display: none;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 511.98px) {
		.bcw-app.bcw-app:not(#bcw) .bcw-panel {
			padding: 20px 18px 22px;
			border-radius: var(--bcw-radius);
		}

		.bcw-app.bcw-app:not(#bcw) .bcw-share {
			padding: 22px 14px;
			border-radius: var(--bcw-radius);
		}
	}
}

/* ==========================================================================
   21. Keyframes
   ========================================================================== */

@keyframes bcw-bg-shift {
	0% {
		transform: translate3d(-8%, -6%, 0) scale(1);
	}

	100% {
		transform: translate3d(8%, 6%, 0) scale(1.06);
	}
}

@keyframes bcw-rise {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(-180px);
	}
}

@keyframes bcw-sway {
	0% {
		transform: rotate(-4deg);
	}

	100% {
		transform: rotate(4deg);
	}
}

@keyframes bcw-fall {
	0% {
		transform: translateY(-10%);
	}

	100% {
		transform: translateY(100%);
	}
}

@keyframes bcw-tumble {
	0% {
		transform: translateX(0) rotate(var(--bcw-rot, 0deg)) rotateX(0deg);
	}

	50% {
		transform: translateX(8px) rotate(calc(var(--bcw-rot, 0deg) + 180deg)) rotateX(180deg);
	}

	100% {
		transform: translateX(0) rotate(calc(var(--bcw-rot, 0deg) + 360deg)) rotateX(360deg);
	}
}

@keyframes bcw-bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

@keyframes bcw-cake-shadow {
	0%,
	100% {
		opacity: 0.6;
		transform: scaleX(1);
	}

	50% {
		opacity: 0.36;
		transform: scaleX(0.86);
	}
}

@keyframes bcw-flame-pop {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	60% {
		opacity: 1;
		transform: scale(1.25);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes bcw-flicker {
	0%,
	100% {
		transform: scale(1, 1) rotate(-2deg);
	}

	25% {
		transform: scale(0.94, 1.07) rotate(2deg);
	}

	50% {
		transform: scale(1.04, 0.95) rotate(-1deg);
	}

	75% {
		transform: scale(0.97, 1.04) rotate(1.5deg);
	}
}

@keyframes bcw-glow {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(1);
	}

	50% {
		opacity: 0.6;
		transform: scale(1.18);
	}
}

@keyframes bcw-party-glow {
	0% {
		opacity: 0.78;
		transform: scale(0.96);
	}

	100% {
		opacity: 1;
		transform: scale(1.04);
	}
}

@keyframes bcw-party-float {
	0% {
		transform: translate3d(0, 0, 0) rotate(-3deg);
	}

	100% {
		transform: translate3d(0, -8%, 0) rotate(3deg);
	}
}

@keyframes bcw-gift-hop {
	0%,
	62%,
	100% {
		transform: translateY(0) scale(1, 1);
	}

	70% {
		transform: translateY(0) scale(1.05, 0.93);
	}

	80% {
		transform: translateY(-12%) scale(0.97, 1.04);
	}

	90% {
		transform: translateY(0) scale(1.03, 0.97);
	}
}

@keyframes bcw-gift-lid {
	0%,
	72%,
	100% {
		transform: translateY(0) rotate(0);
	}

	82% {
		transform: translateY(-14%) rotate(-5deg);
	}

	92% {
		transform: translateY(0) rotate(0);
	}
}

@keyframes bcw-twinkle {
	0%,
	100% {
		opacity: 0.2;
		transform: scale(0.5) rotate(0deg);
	}

	50% {
		opacity: 1;
		transform: scale(1) rotate(45deg);
	}
}

@keyframes bcw-digit-in {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bcw-digit-out {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}

@keyframes bcw-view-in {
	0% {
		opacity: 0;
		transform: translateY(16px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bcw-view-out {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@keyframes bcw-pulse {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.03);
	}
}

@keyframes bcw-cta-ring {
	0% {
		opacity: 0.7;
		transform: scale(1, 1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(1.05, 1.22);
	}
}

@keyframes bcw-toast-in {
	0% {
		opacity: 0;
		transform: translate(-50%, 20px) scale(0.96);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, 0) scale(1);
	}
}

@keyframes bcw-pop-in {
	0% {
		opacity: 0;
		transform: translateY(-6px) scale(0.96);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes bcw-error-in {
	0% {
		opacity: 0;
		transform: translateY(-4px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   22. Reduced motion: a calm, static celebration scene
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bcw-app.bcw-app:not(#bcw) *,
	.bcw-app.bcw-app:not(#bcw) *::before,
	.bcw-app.bcw-app:not(#bcw) *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-bg__balloons,
	.bcw-app.bcw-app:not(#bcw) .bcw-bg__confetti {
		display: none !important;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-bg::before,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake-wrap::after,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake__flame-group,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__flame-group,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__flame-group,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake__flame,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__flame,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__flame,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake__flame-inner,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__flame-inner,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__flame-inner,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake__glow,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__glow,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__glow,
	.bcw-app.bcw-app:not(#bcw) .bcw-party__glow,
	.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto,
	.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto::before,
	.bcw-app.bcw-app:not(#bcw) .bcw-party__balloon,
	.bcw-app.bcw-app:not(#bcw) .bcw-gift,
	.bcw-app.bcw-app:not(#bcw) .bcw-gift__top,
	.bcw-app.bcw-app:not(#bcw) .bcw-sparkle,
	.bcw-app.bcw-app:not(#bcw) .bcw-celebrate__title,
	.bcw-app.bcw-app:not(#bcw) .bcw-shared-cta .bcw-btn::after,
	.bcw-app.bcw-app:not(#bcw) .bcw-digit__inner,
	.bcw-app.bcw-app:not(#bcw) .bcw-digit__inner--in,
	.bcw-app.bcw-app:not(#bcw) .bcw-digit__inner--out,
	.bcw-app.bcw-app:not(#bcw) .bcw-view--entering,
	.bcw-app.bcw-app:not(#bcw) .bcw-view--leaving,
	.bcw-app.bcw-app:not(#bcw) .bcw-toast.bcw-toast--show,
	.bcw-app.bcw-app:not(#bcw) .bcw-tooltip,
	.bcw-app.bcw-app:not(#bcw) .bcw-error {
		animation: none !important;
	}

	/* Lit flames are shown statically. */
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--lit .bcw-cake__flame-group,
	.bcw-app.bcw-app:not(#bcw) .bcw-cake--party .bcw-cake__flame-group {
		opacity: 1;
		transform: none;
	}

	/* Frozen scene: confetti at rest, sparkles fully visible. */
	.bcw-app.bcw-app:not(#bcw) .bcw-party__confetto {
		transform: translateY(var(--bcw-y, 30%));
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-sparkle {
		opacity: 0.9;
		transform: none;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-shared-cta .bcw-btn::after {
		display: none;
	}

	/* Digits change instantly: never show two digits in one slot. */
	.bcw-app.bcw-app:not(#bcw) .bcw-digit__inner--out {
		display: none !important;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-digit__inner--in {
		position: relative;
		opacity: 1;
		transform: none;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-btn,
	.bcw-app.bcw-app:not(#bcw) .bcw-btn:hover,
	.bcw-app.bcw-app:not(#bcw) .bcw-share-btn,
	.bcw-app.bcw-app:not(#bcw) .bcw-share-btn:hover,
	.bcw-app.bcw-app:not(#bcw) .bcw-share-btn:hover .bcw-share-btn__icon {
		transform: none !important;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-toast,
	.bcw-app.bcw-app:not(#bcw) .bcw-toast.bcw-toast--show {
		transform: translate(-50%, 0);
	}
}

/* ==========================================================================
   23. Forced colours & print
   ========================================================================== */

@media (forced-colors: active) {
	.bcw-app.bcw-app:not(#bcw) .bcw-panel,
	.bcw-app.bcw-app:not(#bcw) .bcw-share,
	.bcw-app.bcw-app:not(#bcw) .bcw-chip,
	.bcw-app.bcw-app:not(#bcw) .bcw-share-btn,
	.bcw-app.bcw-app:not(#bcw) .bcw-countdown__card {
		border: 1px solid CanvasText;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-countdown__card {
		background: Canvas;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-toast,
	.bcw-app.bcw-app:not(#bcw) .bcw-tooltip {
		border: 1px solid CanvasText;
	}

	/* The data-URI chevron keeps its dark stroke on a forced (possibly dark)
	   Field background: use the native, system-coloured arrow instead. */
	.bcw-app.bcw-app:not(#bcw) .bcw-select {
		-webkit-appearance: auto;
		-moz-appearance: auto;
		appearance: auto;
		background-image: none;
		padding-right: 16px;
		padding-inline-end: 16px;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-btn {
		border: 2px solid ButtonText;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-input:focus,
	.bcw-app.bcw-app:not(#bcw) .bcw-select:focus {
		outline: 2px solid Highlight;
	}
}

@media print {
	.bcw-app.bcw-app:not(#bcw) {
		box-shadow: none;
	}

	/* The script drops the inline bleed before printing; the band itself
	   prints as a plain square block within the page margins. */
	.bcw-app.bcw-app:not(#bcw).bcw-app--bled,
	.bcw-app.bcw-app:not(#bcw).bcw-app--edge {
		border-radius: 0;
	}

	.bcw-app.bcw-app:not(#bcw)::before {
		background: none;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-bg,
	.bcw-app.bcw-app:not(#bcw) .bcw-party__confetti,
	.bcw-app.bcw-app:not(#bcw) .bcw-share,
	.bcw-app.bcw-app:not(#bcw) .bcw-actions,
	.bcw-app.bcw-app:not(#bcw) .bcw-toast {
		display: none !important;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-panel {
		background: #FFFFFF;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.bcw-app.bcw-app:not(#bcw) .bcw-cake,
	.bcw-app.bcw-app:not(#bcw) .bcw-celebrate__title {
		animation: none;
	}
}