/* HC-EMAIL-REMOVE-20261019-01 — Remove email-panel styles only; retain all theater and Messages sizing. */
/* HC-PURCHASER-RETURN-20261017-01 — Purchaser completion/return room; existing 83% Messages paper retained. */
/* HC-FIRST-REVIEW-20261016-01 — Center the message paper at 83cqw; retain canonical text layout. */
/* HC-THEME-GALLERY-20261013-01 — Three paired Theme columns, category-only labels. */
/* HC-STRIPE-SANDBOX-20261002-01 — Hosted test checkout controls inside Purchase only. */
:root { --hc-cleanup-revision: "HC-EMAIL-REMOVE-20261019-01"; }

		html,
		body {
			margin: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			overflow: clip;
			background: var(--hero-background-base-color, #05070b);
		}

		/*
			bodyWrapper:
			The full-browser shell behind the centered stage.
			The gradient colors stay constant. Motion comes from slow background-size
			and background-position changes in the keyframes below.
		*/
		#bodyWrapper {
			position: relative;
			width: 100%;
			height: 100vh;
			height: 100dvh;
			display: flex;
			justify-content: center;
			align-items: stretch;
			overflow: hidden;
			overflow: clip;
			background: var(
				--hero-body-background,
				radial-gradient(circle at 48% 26%, rgba(86, 132, 190, 0.38), transparent 38%),
				radial-gradient(circle at 54% 78%, rgba(102, 58, 142, 0.30), transparent 44%),
				radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.035), transparent 62%),
				#05070b
			);
			background-size:
				110% 106%,
				106% 112%,
				100% 100%,
				100% 100%;
			background-position:
				48% 26%,
				54% 78%,
				50% 52%,
				50% 50%;
			animation: bodyWrapperGradientBreath var(--hero-background-breath-duration, 12s) var(--hero-background-breath-easing, ease-in-out) infinite alternate;
		}

		/*
			stageWrapper:
			The centered physical Hero theater and max-width authority.
			The sovereign #stage now fills this box and owns every Page Stage,
			permanent background, and permanent top-control territory.
		*/
		.stage {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			overflow: clip;
			isolation: isolate;
			container-type: size;
			background: transparent;
		}

		#stageWrapper {
			max-width: var(--hero-stage-max-width, 640px);
			flex: 0 1 var(--hero-stage-max-width, 640px);
			overflow: hidden;
			overflow: clip;
			/* Shared fallback: the overlay inherits this same Stage artwork, not a copy. */
            --hc-stage-background-fallback:
                radial-gradient(circle at 50% 28%, rgba(95, 138, 196, 0.22), transparent 42%),
                radial-gradient(circle at 50% 76%, rgba(102, 58, 142, 0.24), transparent 46%),
                rgba(5, 7, 11, 0.56);
            background: var(--hero-stage-background, var(--hc-stage-background-fallback));
		}

		/*
			stage_background:
			The permanent background theater layer.
			It exists because the celebration always needs an emotional world behind it.
		*/
		.backgroundStage {
			position: absolute;
			inset: 0;
			z-index: 0;
			overflow: hidden;
			pointer-events: none;
			container-type: size;
			background: transparent;
		}

		/*
			stageStarfieldWrapper:
			The generated starfield wrapper.
			JavaScript creates it inside stage_background on page load, fills it with
			lightweight HTML/CSS stars, and keeps it because removeAtEnd is false.
		*/
		.stageStarfieldWrapper {
			position: absolute;
			inset: 0;
			z-index: 0;
			overflow: hidden;
			pointer-events: none;
			container-type: size;
		}


		/*
			Starfield animation variables:
			These five values are the official breathing controls.
			They are registered so WAAPI can smoothly animate the star's
			element breath and each radial-gradient layer's alpha.
		*/
		@property --star-scale {
			syntax: "<number>";
			inherits: false;
			initial-value: 1;
		}

		@property --star-opacity {
			syntax: "<number>";
			inherits: false;
			initial-value: 1;
		}

		@property --star-core-alpha {
			syntax: "<number>";
			inherits: false;
			initial-value: 1;
		}

		@property --star-glow-alpha {
			syntax: "<number>";
			inherits: false;
			initial-value: 0.26;
		}

		@property --star-veil-alpha {
			syntax: "<number>";
			inherits: false;
			initial-value: 0.06;
		}

		/*
			stageStarfieldStar:
			One lightweight permanent star.
			The parent remains the original three-radial-gradient living halo and
			the exact WAAPI target. A softer four-point SVG jewel sits inside it.
			This preserves the registered core/glow/veil animation on the same element.
		*/
		.stageStarfieldStar {
			position: absolute;
			left: var(--star-x);
			top: var(--star-y);

			/*
				The star element is a single soft light field.
				There is no box-shadow, no visible border, no oval sizing,
				no movement, no rotation, and no blur animation.
				All visible light is painted by three radial-gradient layers:
				core, glow, and veil.
			*/
			width: var(--star-light-size);
			height: var(--star-light-size);
			border: 0;
			border-radius: 999px;
			box-sizing: border-box;
			opacity: var(--star-opacity);
			transform: translate(-50%, -50%) scale(var(--star-scale));
			transform-origin: center;
			filter: blur(var(--star-blur)) saturate(var(--star-saturation)) brightness(var(--star-brightness));
			mix-blend-mode: screen;
			pointer-events: none;
			isolation: isolate;
			background-repeat: no-repeat;
			background:
				/*
					Layer 1: core.
					The bright inner life of the star.
					The soft stop is derived from --star-core-alpha, so one alpha
					variable controls this entire gradient layer.
				*/
				radial-gradient(circle at var(--star-core-x) var(--star-core-y),
					rgba(var(--star-core-rgb), var(--star-core-alpha)) 0%,
					rgba(var(--star-core-rgb), calc(var(--star-core-alpha) * 0.38)) var(--star-core-soft-stop),
					rgba(var(--star-core-rgb), 0) var(--star-core-end-stop)
				),

				/*
					Layer 2: glow.
					The emotional body around the core.
					This layer breathes through --star-glow-alpha.
				*/
				radial-gradient(circle at var(--star-glow-x) var(--star-glow-y),
					rgba(var(--star-glow-rgb), var(--star-glow-alpha)) 0%,
					rgba(var(--star-glow-rgb), calc(var(--star-glow-alpha) * 0.24)) var(--star-glow-soft-stop),
					rgba(var(--star-glow-rgb), 0) var(--star-glow-end-stop)
				),

				/*
					Layer 3: veil.
					The widest and faintest sky-embrace.
					This layer breathes through --star-veil-alpha.
				*/
				radial-gradient(circle at var(--star-veil-x) var(--star-veil-y),
					rgba(var(--star-veil-rgb), var(--star-veil-alpha)) 0%,
					rgba(var(--star-veil-rgb), calc(var(--star-veil-alpha) * 0.16)) var(--star-veil-soft-stop),
					rgba(var(--star-veil-rgb), 0) var(--star-veil-end-stop)
				);
			will-change: opacity, transform;
		}


		/*
			stageStarfieldStarFourPoint:
			The crisp-but-soft jewel inside the permanent radial-gradient halo.
			It does not own a separate animation. The parent star's existing scale,
			opacity, and three-layer breath carry the complete object together.
		*/
		.stageStarfieldStarFourPoint {
			position: absolute;
			inset: 0;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: var(--star-jewel-opacity);
			transform: rotate(var(--star-jewel-rotation));
			transform-origin: center;
			pointer-events: none;
			filter:
				drop-shadow(
					0 0 var(--star-jewel-aura-blur)
					rgba(var(--star-core-rgb), var(--star-jewel-aura-alpha))
				);
		}

		.stageStarfieldStarFourPoint svg {
			display: block;
			width: var(--star-jewel-size);
			height: var(--star-jewel-size);
			overflow: visible;
			fill: currentColor;
			stroke: none;
		}

		/*
			stageParticleBurstWrapper:
			Temporary full-stage particle wrapper.
			JavaScript creates it, fills it, appends it to #stage_celebration,
			and removes it when removeAtEnd is true.
		*/
		.stageParticleBurstWrapper,
		.stageParticleEffectWrapper {
			position: absolute;
			inset: 0;
			z-index: 13;
			overflow: hidden;
			pointer-events: none;
			container-type: size;
		}

		/*
			stageParticleSparkleSharedCanvas:
			One full-stage Disney sparkle surface shared by all eligible Burst particles.
			The Canvas is created only while jobs are active and never intercepts input.
		*/
		.stageParticleSparkleSharedCanvas {
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
			pointer-events: none;
			mix-blend-mode: screen;
		}

		/*
			stageFourPointStarEffect:
			The outer span owns only stage position. WAAPI animates the nested artwork.
		*/
		.stageFourPointStarEffect {
			position: absolute;
			display: block;
			transform: translate(-50%, -50%);
			transform-origin: center;
			pointer-events: none;
			mix-blend-mode: screen;
		}

		.stageFourPointStarArtwork {
			display: block;
			width: 100%;
			height: 100%;
			opacity: 0;
			transform-origin: center;
			will-change: opacity, transform;
		}

		.stageFourPointStarArtwork svg {
			display: block;
			width: 100%;
			height: 100%;
			overflow: visible;
		}

		/*
			stageParticleBurstParticle:
			One visible particle element.
			The particle itself is authored artwork: SVG, PNG, a text symbol,
			a CSS radial-gradient light, or a fused SVG + radial-gradient star.
		*/
		.stageParticleBurstParticle,
		.stageParticleEffectParticle {
			position: absolute;
			display: block;
			width: 1em;
			height: 1em;
			/* Publishes the complete scale envelope so JavaScript can reserve a
			   responsive safe perimeter without duplicating hidden CSS numbers. */
			--stage-particle-start-scale: 0.20;
			--stage-particle-peak-scale: 1.25;
			--stage-particle-end-scale: 0.42;
			transform: translate(-50%, -50%) scale(var(--stage-particle-start-scale));
			transform-origin: center;
			color: rgba(250, 254, 255, 0.98);
			font-size: clamp(18px, 5.0cqw, 34px);
			line-height: 1;
			opacity: 0;
			mix-blend-mode: screen;
			--stage-particle-shadow-blur: 4px;
			--stage-particle-shadow-alpha: 0.38;
			--stage-particle-boundary-opacity: 1;
			filter:
				drop-shadow(
					0 0 var(--stage-particle-shadow-blur)
					rgba(255, 255, 255, var(--stage-particle-shadow-alpha))
				);
			will-change: opacity, transform;
			animation-name: stageParticleBurstPop;
			animation-fill-mode: forwards;
			animation-timing-function: ease-out;
		}

		.stageParticleBurstParticle svg,
		.stageParticleEffectParticle svg,
		.stageParticleElementImage,
		.stageParticleElementTextSymbol,
		.stageParticleElementCssLight,
		.stageParticleElementSvgLight {
			display: block;
			width: 1em;
			height: 1em;
			overflow: visible;
		}

		.stageParticleBurstParticle svg,
		.stageParticleEffectParticle svg {
			fill: none;
			stroke: currentColor;
			stroke-linecap: round;
			vector-effect: non-scaling-stroke;
		}

		.stageParticleElementImage {
			object-fit: contain;
		}

		/*
			stageParticleElementTextSymbol:
			Centers a Unicode symbol inside the same one-em artwork box used by
			SVG, PNG, and CSS-light particle elements.
		*/
		.stageParticleElementTextSymbol {
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "Arial Unicode MS", sans-serif;
			font-size: 1em;
			font-style: normal;
			font-weight: 400;
			line-height: 1;
			text-align: center;
			white-space: nowrap;
		}

		.stageParticleElementCssLight {
			border-radius: 999px;
			background:
				radial-gradient(circle at 50% 50%, rgba(var(--particle-light-core-rgb), 0.95) 0%, rgba(var(--particle-light-core-rgb), 0.36) 18%, rgba(var(--particle-light-core-rgb), 0) 34%),
				radial-gradient(circle at 50% 50%, rgba(var(--particle-light-glow-rgb), 0.42) 0%, rgba(var(--particle-light-glow-rgb), 0.16) 42%, rgba(var(--particle-light-glow-rgb), 0) 68%),
				radial-gradient(circle at 50% 50%, rgba(var(--particle-light-veil-rgb), 0.20) 0%, rgba(var(--particle-light-veil-rgb), 0.07) 58%, rgba(var(--particle-light-veil-rgb), 0) 82%);
		}

		/*
			stageParticleElementSvgLight:
			Fuses a soft three-gradient halo with a crisp authored SVG star.
			The halo remains naturally round while the SVG provides the readable
			four-point twinkle silhouette.
		*/
		.stageParticleElementSvgLight {
			position: relative;
			isolation: isolate;
		}

		.stageParticleElementSvgLightHalo,
		.stageParticleElementSvgLightStar {
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}

		.stageParticleElementSvgLightHalo {
			z-index: 0;
			border-radius: 999px;
			background:
				radial-gradient(circle at 50% 50%, rgba(var(--particle-light-core-rgb), 0.98) 0%, rgba(var(--particle-light-core-rgb), 0.38) 18%, rgba(var(--particle-light-core-rgb), 0) 34%),
				radial-gradient(circle at 50% 50%, rgba(var(--particle-light-glow-rgb), 0.46) 0%, rgba(var(--particle-light-glow-rgb), 0.18) 42%, rgba(var(--particle-light-glow-rgb), 0) 68%),
				radial-gradient(circle at 50% 50%, rgba(var(--particle-light-veil-rgb), 0.22) 0%, rgba(var(--particle-light-veil-rgb), 0.08) 58%, rgba(var(--particle-light-veil-rgb), 0) 82%);
		}

		.stageParticleElementSvgLightStar {
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.stageParticleElementSvgLightStar svg {
			display: block;
			width: 72%;
			height: 72%;
			overflow: visible;
			fill: currentColor;
			stroke: none;
		}


		/*
			stage_topControlBar:
			The permanent guest-interface lane above the celebration artwork.
			The HC Logo owns the upper-left brand/home territory.
			All guest action buttons live together in the upper-right control holder.
			Both sides inherit the exact same full-height bar and therefore the same Y centerline.
			The right holder can later grow leftward with Hero Extra and Hamburger controls
			without moving the Logo or invading the Celebration's center territory.
		*/
		#stage_topControlBar {
			position: absolute;
			left: 0;
			top: 0;
			/* The stationary header is above every navigable Stage and transition shield. */
			z-index: 200;
			width: 100%;
			height: calc(var(--hero-top-control-bar-height, clamp(104px, 8.5cqh, 116px)) + env(safe-area-inset-top, 0px));
			padding-top: env(safe-area-inset-top, 0px);
			display: grid;
			grid-template-columns: var(--hero-top-control-logo-slot-width, clamp(112px, 21cqw, 135px)) minmax(0, 1fr) var(--hero-top-control-right-slot-width, clamp(112px, 21cqw, 135px));
			align-items: stretch;
			pointer-events: none;
			overflow: visible;
			background: linear-gradient(to bottom, rgba(5, 7, 17, .64), rgba(7, 10, 23, .28) 56%, transparent);
			box-sizing: border-box;
		}

		/*
			topControlLeftSlot:
			Permanent brand/home territory only.
			It no longer owns Celebration controls.
		*/
		#topControlLeftSlot {
			position: relative;
			z-index: 1;	/*same brand plane in every room; the header owns stacking*/
			flex: 0 0 var(--hero-top-control-logo-slot-width, clamp(112px, 21cqw, 135px));
			width: var(--hero-top-control-logo-slot-width, clamp(112px, 21cqw, 135px));
			height: 100%;
			display: flex;
			align-items: stretch;
			overflow: visible;
			pointer-events: none;
		}

		/* The Logo stays on the same plane before, during, and after every transition. */

		/*
			topControlRightSlot:
			One permanent holder for guest action buttons.
			Pause / Play / Replay live here now; future Hero Extra and Hamburger controls
			can join this same family without changing the Logo's geography.
		*/
		#topControlRightSlot {
			position: relative;
			z-index: 200;	/*Play/Pause/Replay remain sovereign above every Celebration performer*/
			flex: 0 0 var(--hero-top-control-right-slot-width, clamp(112px, 21cqw, 135px));
			width: var(--hero-top-control-right-slot-width, clamp(112px, 21cqw, 135px));
			height: 100%;
			display: flex;
			align-items: stretch;
			justify-content: center;
			gap: var(--hero-top-control-gap, clamp(4px, 0.9cqw, 6px));
			overflow: visible;
			pointer-events: none;
		}

		#topControlLogoSlot,
		#topControlCelebrationSlot {
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: visible;
			pointer-events: none;
		}

		#topControlLogoSlot {
			flex: 1 1 100%;
			width: 100%;
		}

		#topControlCelebrationSlot {
			flex: 0 0 var(--hero-top-control-celebration-slot-width, 100%);
			width: var(--hero-top-control-celebration-slot-width, 100%);
		}

		/*
			heroCelebrationsLogoButton:
			The Logo permanently owns the first top-left seat. Its scale:2 artwork is centered
			on the same Y axis as Pause / Play / Replay and stays fully inside the theater.
			The HC artwork never leaves. Before Start and after the finale it is a navigation
			doorway; during the live Celebration the same visible brand is simply disabled.
		*/
		#heroCelebrationsLogoButton {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			border: 0;
			margin: 0;
			background: transparent;
			box-shadow: none;
			appearance: none;
			-webkit-appearance: none;
			-webkit-tap-highlight-color: transparent;
			touch-action: manipulation;
			cursor: pointer;
			opacity: 1;
			overflow: visible;
			pointer-events: auto;
			transform: translate(-50%, -50%);
			transform-origin: center;
			transition: none;
		}

		/*
			Mobile Safari can clip a filtered element at its compositing surface when the same
			element is also scaled. Split those responsibilities: outer wrapper scales, inner
			padded wrapper owns the glow, and the PNG itself stays visually neutral.
		*/
		.heroCelebrationsLogoScaleWrapper {
			display: block;
			overflow: visible;
			pointer-events: none;
			transform: scale(var(--hero-top-control-logo-scale, 1.75));
			transform-origin: center;
		}

		.heroCelebrationsLogoGlowWrapper {
			display: block;
			padding: 12px;
			margin: -12px;
			overflow: visible;
			pointer-events: none;
			filter:
				drop-shadow(0 0 4px rgba(247, 241, 255, 0.86))
				drop-shadow(0 0 12px rgba(154, 130, 255, 0.48));
		}

		#heroCelebrationsLogoButton img {
			display: block;
			width: auto;
			height: var(--hero-top-control-logo-height, 39px);
			object-fit: contain;
			overflow: visible;
			pointer-events: none;
			transform: none;
			filter: none;
		}
		/*
			topControlCenterSlot:
			The immutable bullseye for the major Create CTA. Player may change only this seat's
			measured WIDTH; left:50% and translate(-50%) remain sacred on every device.
		*/
		#topControlCenterSlot {
			position: relative;
			min-width: 0;
			width: auto;
			height: 100%;
			display: grid;
			place-items: center;
			padding: 0 8px;
			box-sizing: border-box;
			pointer-events: none;
		}
		#topControlCenterSlot > * { grid-area: 1 / 1; min-width: 0; }

		/*
			Major CTA:
			The button remains native HTML for semantics/focus/hit territory. Its visible language
			is a measured art composition: two clean luminous invitation lines, never a pill.
		*/
		#createHeroCelebrationButton {
			--hero-cta-visual-lift: -14px;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8px 4px;
			border: 0;
			margin: 0;
			background: transparent;
			appearance: none;
			-webkit-appearance: none;
			-webkit-tap-highlight-color: transparent;
			touch-action: manipulation;
			font-family: var(--hero-base-font-family, "Trebuchet MS", Arial, sans-serif);
			text-align: center;
			opacity: 0;
			pointer-events: none;
			cursor: default;
			filter: blur(3px) brightness(0.94);
			transform: translateY(5px) scale(0.985);
			transition:
				opacity 1600ms ease-out,
				filter 1600ms ease-out,
				transform 1600ms cubic-bezier(0.16, 1, 0.30, 1);
		}

		.createHeroCelebrationCtaComposition {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: clamp(2px, 0.45cqh, 5px);
			width: 100%;
			max-width: 100%;
			pointer-events: none;
			opacity: 0.75;	/*present but gracious after the guest has already paid for this Celebration*/
			filter: blur(0.15px);	/*barely perceptible optical softness; never a fuzzy sales treatment*/
			transform: translateY(var(--hero-cta-visual-lift)) scale(1);
			transform-origin: center;
			transition: transform 360ms cubic-bezier(0.16, 1, 0.30, 1);
		}

		.createHeroCelebrationCtaLine {
			display: block;
			max-width: 100%;
			white-space: nowrap;
			pointer-events: none;
		}

		.createHeroCelebrationCtaLine--prelude {
			color: rgba(248, 247, 255, 0.98);
			font-size: clamp(13px, 2.45cqw, 16px);
			font-weight: 800;
			line-height: 1;
			letter-spacing: 0.115em;
			text-shadow:
				0 0 5px rgba(255, 255, 255, 0.90),
				0 0 11px rgba(220, 240, 255, 0.32);
		}

		.createHeroCelebrationCtaLine--destination {
			font-size: clamp(18px, 3.75cqw, 24px);
			font-weight: 900;
			line-height: 0.98;
			letter-spacing: 0.055em;
			color: rgba(248, 247, 255, 0.98);
			-webkit-text-fill-color: currentColor;
			background: none;
			filter: none;
			text-shadow:
				0 0 5px rgba(255, 255, 255, 0.92),
				0 0 12px rgba(220, 240, 255, 0.38);
			transition: text-shadow 420ms ease-out;
		}

		#createHeroCelebrationButton.is-visible {
			opacity: 1;
			pointer-events: auto;
			cursor: pointer;
			filter: blur(0) brightness(1);
			transform: translateY(0) scale(1);
		}

		#createHeroCelebrationButton:focus {
			outline: none;
		}

		#createHeroCelebrationButton:focus-visible .createHeroCelebrationCtaComposition,
		#createHeroCelebrationButton.is-visible:hover .createHeroCelebrationCtaComposition {
			transform: translateY(var(--hero-cta-visual-lift)) scale(1.025);
		}

		#createHeroCelebrationButton:focus-visible .createHeroCelebrationCtaLine--destination,
		#createHeroCelebrationButton.is-visible:hover .createHeroCelebrationCtaLine--destination {
			text-shadow:
				0 0 6px rgba(255, 255, 255, 0.98),
				0 0 16px rgba(220, 240, 255, 0.52);
		}

		#createHeroCelebrationButton.is-visible:active .createHeroCelebrationCtaComposition {
			transform: translateY(var(--hero-cta-visual-lift)) scale(0.97);
			transition-duration: 120ms;
		}

		@media (min-width: 641px) {
			#createHeroCelebrationButton {
				--hero-cta-visual-lift: -9px;
			}
		}

		@media (min-width: 1024px) {
			#createHeroCelebrationButton {
				--hero-cta-visual-lift: -6px;
			}
		}

		/*
			Mobile still reserves generous mirrored edge seats. The CTA engine—not browser wrapping—
			chooses the richest composition that fits the remaining exact center territory.
		*/


		#heroCelebrationsLogoButton:disabled {
			cursor: default;
			pointer-events: auto;
		}

		#heroCelebrationsLogoButton:focus {
			outline: none;
		}

		#heroCelebrationsLogoButton:focus-visible .heroCelebrationsLogoGlowWrapper {
			filter:
				drop-shadow(0 0 5px rgba(247, 241, 255, 0.98))
				drop-shadow(0 0 16px rgba(154, 130, 255, 0.68));
		}



		/*
			stage:
			The ONE sovereign Hero Celebrations theater.
			Every navigable Page Stage is an absolute sibling inside this container.
			Permanent scenery and the top-control bar remain outside Page Stage visibility.
		*/
		#stage {
            /* One bottom boundary for every Stage; the existing cqw/cqh containers stay full size.
               The footer consumes 22px plus only the device's actual bottom safe area. */
            --hc-footer-control-height: 22px;
            --hc-footer-safe-bottom: env(safe-area-inset-bottom, 0px);
            --hc-footer-keyboard-lift: 0px;
            --hc-footer-reserve: calc(var(--hc-footer-control-height) + var(--hc-footer-safe-bottom) + var(--hc-footer-keyboard-lift));
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			isolation: isolate;
			container-type: size;
			background: transparent;
		}

		/*
			pageStage:
			All navigable site rooms begin completely absent from layout/accessibility.
			stageDirectorObj prepares the requested Stage at opacity 1 underneath the
			current Stage, then fades only the outgoing Stage away to reveal it.
		*/
		.pageStage {
			position: absolute;
			inset: 0;
			z-index: 10;
			display: none;
			visibility: hidden;
			opacity: 0;
			overflow: hidden;
			pointer-events: none;
			container-type: size;
			background: transparent;
		}

		.pageStage.is-page-stage-visible {
			display: block;
			visibility: visible;
		}

		/*
			Browser visibility thermal curtain:
			Player pauses WAAPI and the frame tickers pause Canvas/rAF. This final CSS law
			freezes every CSS keyframe too, including the background breath and active Burst particles.
		*/
		html.is-hero-visibility-sleeping #bodyWrapper,
		html.is-hero-visibility-sleeping #stage *,
		html.is-hero-visibility-sleeping #stage *::before,
		html.is-hero-visibility-sleeping #stage *::after {
			animation-play-state: paused !important;
		}

		.pageStage.is-page-stage-current {
			opacity: 1;
			/* The full transparent Page Stage paints the theater but never becomes an invisible click shield. */
			pointer-events: none;
		}

		/*
			Only genuine controls inside the current Page Stage re-enter hit testing.
			This lets lower architectural seats such as the HC Logo remain clickable through
			transparent stage territory while preserving native interaction for real controls.
		*/
		.pageStage.is-page-stage-current :is(
			a[href],
			button,
			input,
			select,
			textarea,
			[role="button"],
			[tabindex]
		) {
			pointer-events: auto;
		}

		/*
			stage_celebration:
			The former #stage Celebration runtime migrated intact into its own Page Stage.
			Its size is still exactly the complete Hero theater, preserving every cqw/cqh calculation.
		*/
		#stage_celebration {
			--hero-stage-protected-top-zone: var(--hero-protected-top-zone-height, clamp(104px, 8.5cqh, 116px));
		}

		/*
			Starter button:
			This is the one required guest gesture that unlocks AudioContext playback.
			With the experimental headshot retired, the invitation words again own the
			mathematical center of the opening theater.
			After the celebration has completed, the player adds .is-replay-position
			so the button returns above the Happy Birthday line instead of covering
			the final card.
		*/
		#showStarterButton {
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 90;

			/*
				The HTML button remains the generous invisible hit target.
				There is deliberately no visible shell, border, fill, radius,
				box shadow, inset light, or pseudo-element halo.
			*/
			display: block;
			padding: 20px 32px;
			border: 0;
			border-radius: 0;
			margin: 0;
			background: transparent;
			box-shadow: none;
			appearance: none;
			-webkit-appearance: none;
			-webkit-tap-highlight-color: transparent;
			touch-action: manipulation;

			color: var(--hero-starter-color, #f8fdff);
			font-family: var(--hero-starter-font-family, "Trebuchet MS", Arial, sans-serif);
			font-size: var(--hero-starter-font-size, clamp(19px, 5.25cqw, 30px));
			font-weight: var(--hero-starter-font-weight, 800);
			line-height: 1.08;
			letter-spacing: 0;
			text-transform: none;
			white-space: nowrap;
			cursor: pointer;
			opacity: 1;
			filter: blur(0) saturate(1) brightness(1);
			transform: translate(-50%, -50%) scale(1);
			transform-origin: center;
			isolation: isolate;

			transition:
				opacity var(--starterButtonTransitionMs, 900ms) var(--starterButtonTransitionEasing, ease-in-out),
				filter var(--starterButtonTransitionMs, 900ms) var(--starterButtonTransitionEasing, ease-in-out),
				transform var(--starterButtonTransitionMs, 900ms) var(--starterButtonTransitionEasing, ease-in-out);
		}

		/*
			starterButtonLabel:
			The complete opening invitation remains one visible clickable performer.
			Inside it, JavaScript gives the child's name a protected semantic line block
			so browser word wrapping can never splice the name into neighboring copy.
			The resting text-shadow values exactly match the accepted prior treatment.
		*/
		.starterButtonLabel {
			position: relative;
			z-index: 1;
			display: block;
			letter-spacing: 0.035em;
			text-shadow:
				0 0 8px rgba(230, 250, 255, 0.92),
				0 0 20px rgba(120, 210, 255, 0.62),
				0 0 5px rgba(242, 252, 255, 0.48),
				0 0 14px rgba(126, 211, 255, 0.28),
				0 0 24px rgba(202, 178, 255, 0.12);
			filter: brightness(1) saturate(1);
			transform: translateY(0);
			transform-origin: center;
			will-change: text-shadow;

			/*
				The base return has no delay. Only deliberate fine-pointer hover
				receives the generous entrance delay defined below.
			*/
			transition:
				filter 1800ms cubic-bezier(0.37, 0, 0.63, 1) 0ms,
				letter-spacing 1800ms cubic-bezier(0.37, 0, 0.63, 1) 0ms;
		}


		/*
			starterButtonComposition:
			One reusable child composition serves both the opening invitation and
			the finale replay control. The outer button remains the invisible hit target.
		*/
		.starterButtonComposition {
			position: relative;
			z-index: 1;
			display: block;
		}

		/*
			starterButtonOccasionLabel:
			The occasion headline replaces the retired headshot in the upper invitation
			territory. It stays crystal-clear on the dark theater and shares the same
			purple/blue light language as selected opening-story accents.
		*/
		.starterButtonOccasionLabel {
			position: absolute;
			left: 50%;
			bottom: calc(100% + clamp(28px, 4.8cqh, 54px));
			z-index: 2;
			display: block;
			width: min(88cqw, 560px);
			max-width: 88cqw;
			margin: 0;
			color: var(--hero-accent-gradient-center, #BE68FF);
			font-family: var(--hero-starter-font-family, "Trebuchet MS", Arial, sans-serif);
			font-size: var(--hero-starter-occasion-font-size, clamp(22px, 5.6cqw, 36px));
			font-weight: var(--hero-starter-occasion-font-weight, 900);
			line-height: 1;
			letter-spacing: var(--hero-starter-occasion-letter-spacing, 0.12em);
			text-align: center;
			text-transform: uppercase;
			white-space: nowrap;
			pointer-events: none;
			transform: translateX(-50%);
			text-shadow:
				0 0 4px rgba(255, 255, 255, 0.94),
				0 0 10px rgba(190, 104, 255, 0.66),
				0 0 20px rgba(86, 181, 255, 0.40);
		}

		/*
			Opening invitation line styling:
			The occasion and protected child-name line each receive their own branded
			purple-violet-blue radial jewel. Prelude and coda stay crystal white so
			the page keeps a readable white/gradient hierarchy rather than becoming confetti.
		*/
		.starterButtonInvitationPrelude {
			color: #f8fdff;
			font-weight: 800;
			letter-spacing: 0.025em;
		}

		.starterButtonInvitationRecipientLine {
			color: var(--hero-accent-gradient-center, #BE68FF);
			font-weight: 900;
			letter-spacing: 0.018em;
			text-shadow:
				0 0 5px rgba(240, 252, 255, 0.88),
				0 0 12px rgba(190, 104, 255, 0.52),
				0 0 18px rgba(86, 181, 255, 0.30);
		}

		.starterButtonInvitationCoda {
			color: #f8fdff;
			font-style: italic;
			font-weight: 800;
			letter-spacing: 0.018em;
		}

		@supports ((-webkit-background-clip: text) or (background-clip: text)) {
			.starterButtonOccasionLabel,
			.starterButtonInvitationRecipientLine {
				background-image: radial-gradient(
					ellipse at 50% 50%,
					var(--hero-accent-gradient-center, #BE68FF) 0%,
					var(--hero-accent-gradient-middle, #9A82FF) 52%,
					var(--hero-accent-gradient-edge, #56B5FF) 100%
				);
				background-repeat: no-repeat;
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.starterButtonReplayIcon {
			display: none;
		}

		/*
			Opening invitation composition:
			Prelude, recipient identity, and coda are authored lines inside ONE button
			performer. The recipient block prefers one line and permits exactly one
			intelligent break when a long name would otherwise become unattractively small.
		*/
		#showStarterButton:not(.is-replay-position) {
			font-size: var(--hero-starter-opening-font-size, clamp(24px, 6.4cqw, 38px));
		}

		#showStarterButton:not(.is-replay-position) .starterButtonLabel {
			width: min(86cqw, 540px);
			max-width: 86cqw;
			min-width: 0;
			margin: 0 auto;
			white-space: normal;
			line-height: 1.16;
			text-align: center;
		}

		.starterButtonInvitationLine,
		.starterButtonInvitationRecipientLine {
			display: block;
			white-space: nowrap;
		}

		.starterButtonInvitationRecipient {
			display: block;
			width: fit-content;
			max-width: 100%;
			margin: 0.04em auto;
			line-height: 1.08;
		}

		.starterButtonInvitationRecipientLine + .starterButtonInvitationRecipientLine {
			margin-top: 0.02em;
		}

		/*
			Finale replay control:
			Replay returns to the clean upper-center ceremonial lane. Its responsive
			icon size protects short landscape stages from touching the birthday title.
		*/
		#showStarterButton.is-replay-position {
			left: 50%;
			top: var(--hero-replay-top, clamp(8px, 1.4cqh, 16px));
			right: auto;
			bottom: auto;
			width: var(--hero-replay-hit-width, clamp(76px, 15cqw, 98px));
			height: var(--hero-replay-hit-height, clamp(76px, 15cqw, 98px));
			min-width: 0;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: transparent;
			box-shadow: none;
			font-size: 0;
			transform: translate(-50%, 0) scale(1);
		}

		#showStarterButton.is-replay-position .starterButtonComposition {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			justify-content: center;
		}

		#showStarterButton.is-replay-position .starterButtonLabel,
		#showStarterButton.is-replay-position .starterButtonOccasionLabel {
			display: none;
		}

		#showStarterButton.is-replay-position .starterButtonReplayIcon {
			display: block;
			width: var(--hero-replay-icon-size, clamp(48px, min(11.5cqw, 9cqh), 72px));
			height: var(--hero-replay-icon-size, clamp(48px, min(11.5cqw, 9cqh), 72px));
			transform: scale(1);
			transform-origin: center;
		}

		/*
			Shared control artwork:
			Pause and resume share one airy broken halo. Replay keeps the same palette
			but receives its own circular-return arrow so it cannot read as ordinary play.
		*/
		.heroControlBrandedIcon {
			display: block;
			width: 100%;
			height: 100%;
			overflow: visible;
			filter: var(
				--hero-control-rest-filter,
				drop-shadow(0 0 3px rgba(247, 241, 255, 0.94))
				drop-shadow(0 0 10px rgba(190, 104, 255, 0.72))
				drop-shadow(0 0 21px rgba(86, 181, 255, 0.42))
			);
			transform: scale(1);
			transform-origin: center;
			will-change: filter, transform;
			transition:
				filter 950ms cubic-bezier(0.22, 1, 0.36, 1),
				transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
		}

		.heroControlHaloDisc,
		.heroControlFramePath,
		.heroControlFrameArrowHead,
		.heroControlCenterSymbol {
			pointer-events: none;
		}

		.heroControlHaloDisc {
			opacity: 0.96;
		}

		.heroControlFramePath {
			opacity: 0.92;
		}

		.heroControlAuraPath {
			opacity: var(--hero-control-aura-rest-opacity, 0.28);
			pointer-events: none;
			transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
		}


		/*
			is-positioning:
			A temporary class used while the hidden invitation moves between its
			first-load center and its smaller replay position.
		*/
		#showStarterButton.is-positioning {
			transition: none;
		}

		/*
			Desktop/laptop rollover only:
			After a generous 900ms hover, the words become merely a breath richer.
			Touch devices receive no hover choreography.
		*/
		@media (hover: hover) and (pointer: fine) {
			#showStarterButton:not(:disabled):hover .starterButtonLabel {
				filter: brightness(1.035) saturate(1.025);
				letter-spacing: 0.041em;
				transition-delay: 900ms;
			}

			#showStarterButton.is-replay-position:not(:disabled):hover .heroControlBrandedIcon,
			#pauseResumeButton:not(:disabled):hover .heroControlBrandedIcon {
				filter: var(
					--hero-control-hover-filter,
					drop-shadow(0 0 5px rgba(252, 248, 255, 0.98))
					drop-shadow(0 0 15px rgba(190, 104, 255, 0.86))
					drop-shadow(0 0 30px rgba(86, 181, 255, 0.58))
				);
				transform: scale(1.035);
			}

			#showStarterButton.is-replay-position:not(:disabled):hover .heroControlAuraPath,
			#pauseResumeButton:not(:disabled):hover .heroControlAuraPath {
				opacity: var(--hero-control-aura-hover-opacity, 0.30);
			}
		}

		/*
			Keyboard accessibility remains visible without resurrecting a container.
		*/
		#showStarterButton:focus {
			outline: none;
		}

		#showStarterButton:not(.is-replay-position):focus-visible .starterButtonLabel {
			filter: brightness(1.05) saturate(1.035);
		}

		#showStarterButton.is-replay-position:focus-visible .heroControlBrandedIcon,
		#pauseResumeButton:focus-visible .heroControlBrandedIcon {
			filter: var(
				--hero-control-hover-filter,
				drop-shadow(0 0 5px rgba(252, 248, 255, 0.98))
				drop-shadow(0 0 15px rgba(190, 104, 255, 0.86))
				drop-shadow(0 0 30px rgba(86, 181, 255, 0.58))
			);
			transform: scale(1.035);
		}

		#showStarterButton.is-replay-position:focus-visible .heroControlAuraPath,
		#pauseResumeButton:focus-visible .heroControlAuraPath {
			opacity: var(--hero-control-aura-hover-opacity, 0.30);
		}

		#showStarterButton.is-hidden {
			opacity: 0;
			pointer-events: none;
			filter: blur(3px) saturate(0.94) brightness(0.92);
		}

		#showStarterButton:disabled {
			cursor: default;
			pointer-events: none;
		}

		#showStarterButton:not(.is-replay-position).is-hidden {
			transform: translate(-50%, -50%) scale(0.985);
		}

		#showStarterButton.is-replay-position.is-hidden {
			transform: translate(-50%, 0) scale(0.985);
		}

		.celebrationPerformer {
			position: absolute;
			left: 50cqw;
			top: 50cqh;
			transform: translate(-50%, -50%);
			pointer-events: none;
			will-change: opacity, transform;
			box-sizing: border-box;
			text-align: center;
			overflow: visible;
		}

		/*
			Pass 2D performer foundation:
			The performer parent owns identity, footprint, layer, and replay fade.
			Dedicated wrappers own X, Y, scale, and rotation; four sibling branches own Wings, original, Canvas, and Smile opacity. Wings now contains one neutral internal stage for temporary attached-behind actors.
		*/
		.performerScaffoldWrapper {
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			overflow: visible;
			pointer-events: none;
			transform-origin: center;
		}


		/*
			One-property compositor hints:
			Each wrapper receives only the property named by its role.
			The parent remains visually neutral during the normal performance.
		*/
		.performerWrapper[data-performer-property-ownership="pass2D"] {
			left: 0;
			top: 0;
			opacity: 1;
			transform: none;
		}

		.performerWrapper[data-performer-property-ownership="pass2D"] .xWrapper,
		.performerWrapper[data-performer-property-ownership="pass2D"] .yWrapper,
		.performerWrapper[data-performer-property-ownership="pass2D"] .scaleWrapper,
		.performerWrapper[data-performer-property-ownership="pass2D"] .rotationWrapper {
			will-change: transform;
		}

		.performerWrapper[data-performer-property-ownership="pass2D"] .opacityWrapper {
			will-change: opacity;
		}

		/*
			Pass 2D independent effect branches:
			Wings, original, Canvas, and Smile inherit performer motion, scale, and rotation.
			Their opacity and internal effects remain isolated from one another.
		*/
		.performerWrapper[data-performer-property-ownership="pass2D"] .rotationWrapper {

			isolation: isolate;
		}

		.wingsWrapper,
		.canvasWrapper,
		.smileWrapper {
			position: absolute;
			inset: 0;
		}

		.wingsWrapper {
			z-index: 0;
		}

		/*
			wingsStageWrapper:
			One permanent neutral stage inside the Wings room. Temporary attached-behind
			effects are born here so they never compete with the architectural wrapper itself.
		*/
		.wingsStageWrapper {
			position: absolute;
			inset: 0;
			overflow: visible;
			pointer-events: none;
			transform-origin: center;
		}

		/*
			Lightweight Hero Ray Wings:
			Two copies of the same PNG sit at fixed authored angles. One shared outer curtain
			fades the complete Wings family, while each ray field owns an independent compositor
			scale layer and the existing opacity layer keeps its own separate crossfade.
		*/
		.wingsEffectWrapper,
		.wingsEffectOpacityLayer,
		.wingsEffectScaleLayer {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			overflow: visible;
			pointer-events: none;
			transform-origin: center;
		}

		.wingsEffectOpacityLayer {
			will-change: opacity;
		}

		.wingsEffectScaleLayer {
			will-change: transform;
		}

		.wingsEffectArtwork {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 100%;
			height: 100%;
			display: block;
			object-fit: contain;
			transform: translate(-50%, -50%) rotate(var(--hero-wings-static-rotation, 0deg));
			transform-origin: center;
			pointer-events: none;
			user-select: none;
		}

		.opacityWrapper {
			position: relative;
			z-index: 1;
		}

		.canvasWrapper {
			z-index: 2;
		}

		.smileWrapper {
			z-index: 3;
		}

		.dropShadowWrapper,
		.visualWrapper {
			position: relative;
			z-index: 1;
		}

		.dropShadowWrapper {
			will-change: filter;
		}

		.wingsWrapper,
		.opacityWrapper,
		.canvasWrapper,
		.smileWrapper {
			will-change: opacity;
		}

		.celebrationText {
			width: 82cqw;
			color: var(--hero-base-text-color, #f5fcff);
			font-family: var(--hero-base-font-family, "Trebuchet MS", Arial, sans-serif);
			font-weight: var(--hero-base-font-weight, 700);
			line-height: var(--hero-base-line-height, 1.08);
			letter-spacing: 0;
			text-wrap: balance;
			overflow: visible;
			text-shadow: var(
				--hero-base-text-shadow,
				0 0 10px rgba(180, 235, 255, 0.82),
				0 0 22px rgba(102, 204, 255, 0.46)
			);
		}

		.celebrationPhrase {
			font-size: var(--hero-opening-phrase-font-size, clamp(26px, 8.4cqw, 54px));
		}

		/*
			Title typography:
			Trebuchet MS stays as the platform's clean celebration voice.
			The more premium feeling comes from uppercase spacing, weight,
			and a layered glow rather than from an uncommon font.
		*/
		.celebrationTitle {
			font-family: var(--hero-title-font-family, "Trebuchet MS", Arial, sans-serif);
			font-size: var(--hero-title-font-size, clamp(31px, 9.1cqw, 64px));
			font-weight: var(--hero-title-font-weight, 800);
			line-height: var(--hero-title-line-height, 0.98);
			letter-spacing: var(--hero-title-letter-spacing, 0.075em);
			text-transform: uppercase;
			color: var(--hero-title-color, #f8fdff);
			text-shadow: var(--hero-title-text-shadow, 0 0 8px rgba(255, 255, 255, 0.96), 0 0 18px rgba(190, 238, 255, 0.82), 0 0 38px rgba(95, 190, 255, 0.48), 0 0 66px rgba(255, 215, 142, 0.22));
		}

		/*
			Mobile title lift:
			The final title receives a modest size increase only when the rendered
			stage itself is phone-width. Desktop and tablet retain the authored size.
		*/
		@container (max-width: 520px) {
			.celebrationTitle {
				font-size: var(--hero-title-mobile-font-size, var(--hero-title-font-size));
			}
		}

		.celebrationMessage {
			width: 76cqw;
			font-size: var(--hero-message-font-size, clamp(18px, 4.8cqw, 31px));
			font-weight: var(--hero-message-font-weight, 600);
			line-height: var(--hero-message-line-height, 1.18);
		}

		/*
			Final-card script glow policy:
			The lower signature phrases now use the same cool white / blue glow family
			as the top birthday title. The former warm gold shadow was removed so all
			final-card text belongs to one luminous celebration system.
		*/

		/*
			Script final-card typography:
			This uses a browser-safe script stack. Windows guests should often
			see Segoe Script / Segoe Print, Apple guests should often see
			Snell Roundhand / Apple Chancery, and everyone else falls back
			to Trebuchet MS or a generic cursive font.
		*/
		.celebrationScriptMessage {
			width: 82cqw;
			color: var(--hero-script-color, #f8fdff);
			font-family: var(--hero-script-font-family, "Trebuchet MS", "Segoe Script", "Segoe Print", "Snell Roundhand", "Apple Chancery", "Lucida Handwriting", "Brush Script MT", cursive);
			font-size: var(--hero-script-font-size, clamp(21px, 5.25cqw, 40px));
			font-weight: var(--hero-script-font-weight, 600);
			line-height: var(--hero-script-line-height, 1.10);
			letter-spacing: var(--hero-script-letter-spacing, 0.01em);
			overflow: visible;
			text-shadow: var(
				--hero-script-text-shadow,
				0 0 8px rgba(255, 255, 255, 0.96),
				0 0 18px rgba(190, 238, 255, 0.82),
				0 0 38px rgba(95, 190, 255, 0.48),
				0 0 66px rgba(180, 235, 255, 0.22)
			);
		}

		.celebrationScriptSignature {			
			overflow: visible;
			font-family: var(--hero-script-font-family, "Trebuchet MS", "Segoe Script", "Segoe Print", "Snell Roundhand", "Apple Chancery", "Lucida Handwriting", "Brush Script MT", cursive);
			font-size: var(--hero-signature-font-size, clamp(25px, 6.1cqw, 47px));
			line-height: var(--hero-signature-line-height, 1.06);
		}

		.celebrationScriptBlessing {
			overflow: visible;
			font-size: var(--hero-blessing-font-size, clamp(21px, 5.05cqw, 38px));
			line-height: var(--hero-blessing-line-height, 1.10);
		}

		.celebrationImageWrap {
			width: 34cqw;
		}

		/*
			The legacy hero silhouette shadow belongs only to the original visual branch.
			Future Wings, Canvas, and Smile artwork never inherit this filter.
		*/
		.celebrationImageWrap .dropShadowWrapper {
			filter: var(--hero-image-filter, drop-shadow(0 0 18px rgba(180, 235, 255, 0.45)));
		}

		.celebrationImageWrap img {
			display: block;
			width: 100%;
			height: auto;
			max-height: 58cqh;
			object-fit: contain;
			margin: 0 auto;
		}

		/*
			Silhouette entry glow:
			This is the universal phrase/PNG entry punctuation.
			It follows the rendered alpha of text and transparent images through
			filter: drop-shadow(), so it does not create a rectangle, oval, or
			separate circular burst behind the performer.
		*/
		.dropShadowWrapper.is-entry-glow-pulse {
			animation: performerEntryGlowPulse 1800ms ease-out;
		}

		/*
			Pause/resume silhouette overlay:
			A temporary transparent Canvas is appended directly to #stage_celebration as a sibling
			of the visible performer. JavaScript maps the silhouette into the hero's live
			stage rectangle, so the Canvas never inherits the hero transform hierarchy.
		*/
		.celebrationPauseResumeSilhouetteOverlay {
			position: absolute;
			inset: 0 auto auto 0;
			display: block;
			pointer-events: none;
		}

		/*
			Cinematic stage pulses:
			These are not brightness/contrast/hue tricks.
			They are short white radial overlays behind the performers, used like
			a symphonic hit when the hero scale reaches its finale.
		*/
		.celebrationStagePulse {
			position: absolute;
			inset: 0;
			z-index: 8;
			pointer-events: none;
			opacity: 0;
			transform: scale(0.98);
			background:
				radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.82) 0%, rgba(220, 242, 255, 0.46) 16%, rgba(110, 178, 255, 0.16) 34%, transparent 66%);
		}

		.celebrationStagePulse--strong {
			animation: cinematicStagePulseStrong 760ms ease-out forwards;
		}

		.celebrationStagePulse--soft {
			background:
				radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.46) 0%, rgba(224, 244, 255, 0.26) 20%, rgba(122, 185, 255, 0.10) 42%, transparent 72%);
			animation: cinematicStagePulseSoft 1900ms ease-in-out forwards;
		}

		/*
			CSS stage-effect vocabulary:
			These are one-off punctuation effects.
			They avoid gold and avoid large new radial-center bloom variants.
			The player can trigger them with type: "stageEffect".
		*/
		.celebrationStageEffect {
			position: absolute;
			inset: 0;
			z-index: 12;
			pointer-events: none;
			opacity: 0;
		}

		.celebrationStageEffect--whiteFlash {
			background: rgba(238, 250, 255, 0.92);
			mix-blend-mode: screen;
			animation: stageWhiteFlash 620ms ease-out forwards;
		}


		.celebrationImageWrap.is-hero-glow-pulse {
			animation: heroGlowPulse 1800ms ease-in-out both;
		}

		.celebrationTitle {
			position: relative;
		}

		.celebrationTitle:not(.celebrationCanvasTextPerformer) {
			overflow: visible;
		}

		/*
			Canvas text performer:
			Final-card glow text can be rendered into a transparent Canvas bitmap
			while keeping the same DOM position, width, font rules, and entry
			drop-shadow pulse. The Canvas itself is allowed to extend past the
			measured text box so glow and future outline-point effects are not
			clipped by a DOM text rectangle or line box.
		*/
		.celebrationCanvasTextPerformer {
			overflow: visible;
		}

		.celebrationCanvasText {
			position: absolute;
			left: 50%;
			top: 50%;
			display: block;
			max-width: none;
			pointer-events: none;
			transform: translate(-50%, -50%);
		}

		/*
			Unified final-message composition:
			One bottom-anchored performer owns two identically sized Canvas layers.
			The complete fixed internal footprint exists from the first lower-message frame,
			so browser font metrics can never push one independently positioned block
			into the other on a different laptop or viewport.
		*/
		.celebrationFinalMessageStack {
			top: auto;
			overflow: visible;
			transform: translateX(-50%);
		}

		.celebrationFinalMessageStackCanvas {
			position: absolute;
			left: 50%;
			top: 50%;
			display: block;
			max-width: none;
			pointer-events: none;
			transform: translate(-50%, -50%);
			will-change: opacity;
		}

		.celebrationFinalMessageStackCanvas--lower {
			z-index: 1;
		}

		.celebrationFinalMessageStackCanvas--upper {
			z-index: 2;
		}

		.celebrationTitle.is-title-shimmer-sweep::after {
			content: "";
			position: absolute;
			top: -24%;
			bottom: -24%;
			left: -48%;
			width: 34%;
			pointer-events: none;
			background:
				linear-gradient(102deg,
					transparent 0%,
					rgba(255, 255, 255, 0.04) 28%,
					rgba(240, 252, 255, 0.62) 48%,
					rgba(150, 224, 255, 0.22) 58%,
					transparent 100%);
			transform: skewX(-16deg) translateX(0);
			animation: titleShimmerSweep 1500ms ease-out forwards;
		}


		#mobileDebugConsole {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			max-height: 42vh;
			overflow: auto;
			z-index: 999999;
			background: rgba(0, 0, 0, 0.88);
			color: #00ff99;
			font: 12px/1.35 monospace;
			padding: 8px;
			white-space: pre-wrap;
			-webkit-overflow-scrolling: touch;
		}




		/*
			The per-particle white shadow is assigned once by JavaScript.
			The keyframes animate only opacity and transform.
		*/
		@keyframes stageParticleBurstPop {
			0% {
				opacity: 0;
				transform: translate(-50%, -50%) scale(var(--stage-particle-start-scale));
			}

			30% {
				opacity: var(--stage-particle-boundary-opacity);
				transform: translate(-50%, -50%) scale(var(--stage-particle-peak-scale));
			}

			100% {
				opacity: 0;
				transform: translate(-50%, -50%) scale(var(--stage-particle-end-scale));
			}
		}


		@keyframes bodyWrapperGradientBreath {
			0% {
				background-size: 110% 106%, 106% 112%, 100% 100%, 100% 100%;
				background-position: 48% 26%, 54% 78%, 50% 52%, 50% 50%;
			}
			50% {
				background-size: 148% 132%, 136% 156%, 118% 118%, 100% 100%;
				background-position: 42% 18%, 60% 92%, 50% 47%, 50% 50%;
			}
			100% {
				background-size: 126% 164%, 164% 126%, 112% 128%, 100% 100%;
				background-position: 58% 44%, 44% 66%, 50% 58%, 50% 50%;
			}
		}

		@keyframes performerEntryGlowPulse {

			0% {
				filter: drop-shadow(0 0 0 rgba(180, 235, 255, 0));
			}
			20% {
				filter:
					drop-shadow(0 0 24px rgba(245, 253, 255, 0.82))
					drop-shadow(0 0 52px rgba(130, 218, 255, 0.62))
					drop-shadow(0 0 86px rgba(78, 166, 255, 0.32));
			}
			55% {
				filter:
					drop-shadow(0 0 20px rgba(225, 248, 255, 0.66))
					drop-shadow(0 0 38px rgba(120, 210, 255, 0.42));
			}
			100% {
				filter: drop-shadow(0 0 0 rgba(180, 235, 255, 0));
			}
		}

		@keyframes stageWhiteFlash {
			0% {
				opacity: 0;
			}
			8% {
				opacity: 0.52;
			}
			28% {
				opacity: 0.22;
			}
			100% {
				opacity: 0;
			}
		}

		@keyframes heroGlowPulse {
			0% {
				filter: var(--hero-image-filter, drop-shadow(0 0 18px rgba(180, 235, 255, 0.45)));
			}
			24% {
				filter:
					drop-shadow(0 0 24px rgba(245, 253, 255, 0.82))
					drop-shadow(0 0 52px rgba(130, 218, 255, 0.62))
					drop-shadow(0 0 86px rgba(78, 166, 255, 0.32));
			}
			62% {
				filter:
					drop-shadow(0 0 20px rgba(225, 248, 255, 0.66))
					drop-shadow(0 0 38px rgba(120, 210, 255, 0.42));
			}
			100% {
				filter: var(--hero-image-filter, drop-shadow(0 0 18px rgba(180, 235, 255, 0.45)));
			}
		}

		@keyframes titleShimmerSweep {
			0% {
				opacity: 0;
				transform: skewX(-16deg) translateX(0);
			}
			16% {
				opacity: 0.88;
			}
			72% {
				opacity: 0.70;
			}
			100% {
				opacity: 0;
				transform: skewX(-16deg) translateX(430%);
			}
		}


		@keyframes cinematicStagePulseStrong {
			0% {
				opacity: 0;
				transform: scale(0.97);
			}
			18% {
				opacity: 0.86;
				transform: scale(1.018);
			}
			100% {
				opacity: 0;
				transform: scale(1.08);
			}
		}

		@keyframes cinematicStagePulseSoft {
			0% {
				opacity: 0;
				transform: scale(0.99);
			}
			34% {
				opacity: 0.42;
				transform: scale(1.025);
			}
			100% {
				opacity: 0;
				transform: scale(1.10);
			}
		}


/* HC-SELL-CREATOR-20260909-01 — native HTML rooms in the existing 640px theater. */
#stage_sell, #stage_creator { padding: 0; box-sizing: border-box; }
#stage_sell.is-page-stage-visible, #stage_creator.is-page-stage-visible { display: block; }
.hcJourneyStage {
 --hc-pearl: #f5f3ff;
 --hc-secondary: #d0d7f0;
 --hc-border: rgba(171, 149, 255, .36);
 color: var(--hc-pearl);
 font-family: var(--hero-base-font-family, "Trebuchet MS", Arial, sans-serif);
 font-weight: 500;
 text-shadow: none;
}
.hcJourneyStage *, .hcTextNavigation { box-sizing: border-box; }
.hcJourneyViewport {
 position: absolute;
 inset: calc(var(--hero-top-control-bar-height, clamp(104px, 8.5cqh, 116px)) + env(safe-area-inset-top, 0px) + var(--hc-creation-nav-reserve, 0px)) 0 var(--hc-footer-reserve, 0px);
 padding: 8px clamp(20px, 5.5cqw, 38px); /* Safe area belongs to the footer, never counted twice. */
 overflow: hidden; overflow: clip; overscroll-behavior: none;
}

.hcJourneyStage.is-page-stage-current .hcJourneyViewport { pointer-events: auto; }
.hcJourneyStage[inert] .hcJourneyViewport { pointer-events: none; }
/* Home hierarchy: the approved headline leads, the Hero owns the middle,
   and the two-line promise supports rather than competing with either. */
.hcSellLayout { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: clamp(6px, .8cqh, 9px); text-align: center; }
[data-hc-journey-root="stage_sell"] { --hc-home-display-size: clamp(32px, 7.4cqw, 48px); --hc-home-support-size: clamp(20px, 4.9cqw, 30px); }
[data-hc-journey-root="stage_sell"] > .hcJourneyViewport { padding-left: clamp(18px, 4.5cqw, 30px); padding-right: clamp(18px, 4.5cqw, 30px); }
.hcSellLayout .hcJourneyHeading h1 { font-size: var(--hc-home-display-size); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.hcSellLayout .hcJourneyHeading h1 .hcRadialText { display: inline-block; max-width: 100%; }
.hcJourneyHeading { position: relative; z-index: 2; flex: 0 0 auto; text-align: center; }
.hcEyebrow { margin: 0 0 10px; font-size: clamp(11px, 2.6cqw, 14px); font-weight: 700; line-height: 1.5; letter-spacing: .17em; text-transform: uppercase; color: #c4b5ef; }
.hcJourneyHeading h1 { margin: 0; color: #faf8ff; font-size: clamp(29px, 6.2cqw, 40px); line-height: 1.13; font-weight: 800; letter-spacing: -.025em; text-shadow: 0 0 18px rgba(139, 156, 238, .3); }
.hcJourneyHeading h1:focus { outline: none; }
.hcRadialText { color: #cda3ff; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
 .hcRadialText {
  background: radial-gradient(ellipse at 45% 45%, var(--hero-accent-gradient-center, #be68ff) 0%, var(--hero-accent-gradient-middle, #9a82ff) 52%, var(--hero-accent-gradient-edge, #56b5ff) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
 }
}
.hcJourneySubtitle { margin: 13px 0 0; color: var(--hc-secondary); font-size: clamp(16px, 3.5cqw, 20px); line-height: 1.45; font-weight: 400; }
.hcSellHeroFrame { position: relative; flex: 1 1 0; min-height: clamp(190px, 30cqh, 320px); max-height: none; isolation: isolate; overflow: hidden; }
.hcPortraitHalo { position: absolute; inset: 2% -6% -6%; z-index: 0; background: radial-gradient(ellipse at 50% 47%, rgba(106, 128, 222, .20), rgba(114, 74, 168, .10) 42%, transparent 70%); border-radius: 50%; }
.hcSellHeroImage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; max-width: none; max-height: none; z-index: 2; filter: drop-shadow(0 0 13px rgba(192, 199, 255, .24)); }
.hcWelcomeRays { position: absolute; inset: -7% -12%; background: url("https://herocelebrations.com/jirni/animation/animations/imagery/auras/star_sparkle_yellow.png") center / contain no-repeat; opacity: 0; pointer-events: none; z-index: 1; }
.hcWelcomeRays--two { rotate: 67deg; }
.hcPortraitGlint { position: absolute; z-index: 3; color: #fff1ca; opacity: 0; text-shadow: 0 0 12px #a991ff; pointer-events: none; }
.hcPortraitGlint--one { top: 32%; left: 14%; font-size: 24px; }
.hcPortraitGlint--two { top: 62%; right: 12%; font-size: 18px; color: #e5d4ff; }
.hcPortraitGlint--three { top: 13%; right: 28%; font-size: 12px; }
.hcSellInvitation { position: relative; z-index: 4; flex: 0 0 auto; }
.hcSellPromise { margin: 0 0 clamp(14px, 1.8cqh, 18px); font-size: var(--hc-home-support-size, 24px); line-height: 1.2; font-weight: 700; color: #fff; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 3px rgba(5, 7, 16, .92); }
.hcSellPromise span { display: block; font-weight: inherit; color: inherit; }
.hcSellPromise span + span { margin-top: .18em; }
.hcJourneyActions { display: grid; gap: 12px; }
.hcButton {
 position: relative; width: 100%; min-height: 56px; padding: 14px 16px;
 display: flex; align-items: center; justify-content: center; gap: 10px;
 margin: 0; border: 1px solid var(--hc-border); border-radius: 18px;
 font: 700 clamp(16px, 3.5cqw, 21px)/1.2 var(--hero-base-font-family, "Trebuchet MS", Arial, sans-serif);
 color: #fff; text-shadow: none; text-decoration: none;
 cursor: pointer; appearance: none; -webkit-appearance: none; touch-action: manipulation;
 -webkit-tap-highlight-color: transparent; transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.hcButton span { min-width: 0; }
/* One authored action size, never enlarged to fill a percentage of the button.
   Narrow seats may fit down or wrap; short labels never become oversized. */
.hcButton.hcLargeAction { min-height: clamp(60px, 8cqh, 80px); padding: 12px 5%; font-size: clamp(23px, 6.2cqw, 40px); font-weight: 800; line-height: 1.13; color: #fff; border-radius: clamp(17px, 3.8cqw, 23px); }
.hcButton.hcLargeAction > span { display: block; flex: 0 1 auto; max-width: 100%; text-align: center; text-wrap: balance; overflow-wrap: normal; }
.hcButton.hcLargeAction--next { --hc-action-max-font-size: 32; min-height: 58px; }

.hcButton svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hcButton--primary {
 background: radial-gradient(ellipse at 36% 0%, #b56df6 0%, #8c3fe2 35%, #682abb 74%, #5344b9 100%);
 border-color: #c596ff;
 box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 8px rgba(40,17,81,.32), 0 0 18px rgba(150, 72, 255, .30), 0 6px 18px rgba(0,0,0,.22);
}
.hcButton--secondary { min-height: 50px; background: linear-gradient(125deg, rgba(39, 53, 94, .90), rgba(19, 24, 47, .86)); color: #e4eaff; border-color: #7e9bcc; font-weight: 600; font-size: clamp(15px, 3.4cqw, 20px); }
.hcButton .hcPlayMark { flex-basis: 25px; width: 25px; height: 25px; color: #b0cbff; stroke-width: 1.4; }
.hcPlayMark path { fill: currentColor; stroke: none; }
.hcGentleNote { margin: 12px 0 0; font-size: clamp(12px, 2.8cqw, 15px); line-height: 1.4; color: #bfc3db; text-align: center; }
.hcButton:active { transform: scale(.985); }
.hcButton:focus-visible, .hcChoiceButton:focus-visible, .hcTextNavigation:focus-visible, #heroCelebrationsLogoButton:focus-visible { outline: 2px solid #e8ddff; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
 .hcButton:hover { border-color: #e8d2ff; box-shadow: 0 0 25px rgba(165, 89, 255, .42), inset 0 1px 0 rgba(255,255,255,.30); transform: translateY(-1px); }
 .hcTextNavigation:hover { color: #fff; border-color: rgba(193,170,255,.65); background: rgba(75,58,111,.35); }
}
/* Creator: title, five centered choice surfaces, one clear action. */
.hcCreatorLayout { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.6cqh, 18px); padding-bottom: 2px; }
.hcCreatorLayout > * { flex-shrink: 0; }
.hcCreatorLayout .hcJourneyHeading h1, .hcPagedHeading .hcCreatorTitle { margin: 0; font-size: clamp(30px, 7.8cqw, 48px); line-height: 1.08; font-weight: 900; letter-spacing: -.025em; color: #faf8ff; text-transform: uppercase; text-wrap: balance; }
.hcCreatorTagline { margin: .22em 0 0; font-size: clamp(25px, 6.4cqw, 39px); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; color: #f5f3ff; text-wrap: balance; }
.hcChoiceList { display: grid; grid-auto-rows: minmax(min-content, 1fr); flex: 1 0 auto; gap: clamp(16px, 2.3cqh, 24px); }
.hcChoiceButton {
 display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: clamp(80px, 10.3cqh, 112px);
 margin: 0; padding: 11px 16px; text-align: center; border: 1px solid rgba(166, 142, 238, .55); border-radius: clamp(17px, 3.5cqw, 22px);
 background: linear-gradient(115deg, rgba(42, 45, 81, .97), rgba(23, 29, 54, .97));
 box-shadow: inset 0 1px 0 rgba(223,206,255,.11), 0 3px 9px rgba(0,0,0,.16);
 font: inherit; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: var(--hc-pearl); cursor: pointer; opacity: 1;
}
.hcChoiceCopy { flex: 1; min-width: 0; max-width: 100%; text-align: center; }
.hcChoiceTitle { display: block; font-size: clamp(17px, 4.35cqw, 25px); font-weight: 600; line-height: 1.12; color: #d9d5ef; }
.hcChoiceValue { display: block; margin-top: 4px; color: #fff; font-size: clamp(24px, 6.25cqw, 37px); font-weight: 800; line-height: 1.12; overflow-wrap: anywhere; text-wrap: balance; }
.hcChoiceButton[data-hc-placeholder="messages"] .hcChoiceValue,
.hcChoiceButton[data-hc-placeholder="photo"] .hcChoiceValue { font-size: clamp(20px, 4.9cqw, 29px); }
/* Center copy within the entire card; mirrored artwork clearance keeps both text lines on its true center. */
.hcChoiceButton[data-hc-placeholder="theme"], .hcChoiceButton[data-hc-placeholder="photo"] { position: relative; }
.hcChoiceButton[data-hc-placeholder="theme"], .hcChoiceButton[data-hc-placeholder="photo"] { z-index: 1; overflow: visible; grid-column: 1 / -1; }
.hcChoiceThumbFrame {
 position: absolute; right: clamp(10px,2cqw,14px); top: 50%; transform: translateY(-50%);
 display: block; box-sizing: border-box; pointer-events: none; user-select: none;
}
.hcChoiceThumbFrame[hidden] { display: none !important; }
.hcChoiceThumbFrame .hcChoiceThumb {
 position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none;
 margin: 0; border: 0; background: none; pointer-events: none; user-select: none;
}
/* The transparent character may extend above/below its card; its box never catches a click. */
.hcChoiceThumbFrame.hcThemeChoiceArtwork {
 width: clamp(68px,16cqw,108px); max-width: 24%; height: calc(100% + clamp(42px,8cqh,72px));
 max-height: 184px; border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; z-index: 2;
}
.hcThemeChoiceArtwork .hcChoiceThumb {
 object-fit: contain; object-position: center; filter: drop-shadow(0 2px 7px rgba(218,185,255,.22));
}
/* A larger framed photo extends above/below its card, but only the thumbnail is cropped.
   Its width stays bounded on narrow phones; all source-photo proportions remain undistorted. */
.hcChoiceThumbFrame.hcPhotoChoiceFrame {
 height: calc(100% + clamp(28px,4.5cqh,44px)); max-height: 160px;
 width: var(--hc-choice-photo-width); max-width: none;
 border: 1px solid rgba(225,207,252,.76); border-radius: 10px; overflow: hidden;
 background: rgba(25,29,52,.88); box-shadow: 0 2px 12px rgba(171,132,228,.22); z-index: 2;
}
.hcPhotoChoiceFrame .hcChoiceThumb { object-fit: cover; object-position: 50% 50%; }
/* Equal left/right space is essential: the words must center on the BUTTON, not the leftover lane.
   These selectors also cover the same card nodes when short screens move them to a continuation. */
#stage .hcChoiceButton[data-hc-placeholder] { padding-inline: 12px; }
#stage .hcChoiceButton[data-hc-placeholder] .hcChoiceCopy { margin-inline: 0; text-align: center; }
#stage .hcChoiceButton[data-hc-placeholder="theme"] .hcChoiceCopy { padding-inline: clamp(70px,18cqw,118px); }
#stage .hcChoiceButton[data-hc-placeholder="photo"] { --hc-choice-photo-width: clamp(48px,calc(40cqw - 90px),104px); }
#stage .hcChoiceButton[data-hc-placeholder="photo"] .hcChoiceCopy { padding-inline: calc(var(--hc-choice-photo-width) + 6px); }
@container (max-width: 360px) {
 #stage .hcChoiceButton[data-hc-placeholder="theme"] .hcChoiceValue { font-size: clamp(18.5px,5.6cqw,20px); }
}
@container (max-width: 340px) {
 #stage .hcJourneyStage .hcChoiceButton[data-hc-placeholder="photo"] .hcChoiceValue { font-size: 17px; }
}
@container (max-height: 640px) {
 .hcChoiceThumbFrame.hcThemeChoiceArtwork { height: calc(100% + 36px); max-height: 138px; }
}
/* Short desktop continuations still leave the next action unobstructed. */
@container (max-height: 410px) {
 .hcChoiceThumbFrame.hcPhotoChoiceFrame { height: calc(100% + 12px); }
}
.hcCreatorFooter { margin-top: auto; }
.hcTextNavigation {
 display: flex; align-items: center; justify-content: center; gap: 2px;
 padding: 10px 8px; margin: 0; min-height: 44px;
 border: 1px solid rgba(159,142,214,.30); border-radius: 12px; background: rgba(25,26,46,.78);
 font: 600 clamp(12px, 2.7cqw, 16px)/1.25 var(--hero-base-font-family, "Trebuchet MS", Arial, sans-serif);
 color: #dfd7fa; cursor: pointer; pointer-events: auto; touch-action: manipulation; text-shadow: none;
}
.hcTextNavigation svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hcTextNavigation[hidden] { display: none !important; }
/*Room navigation clears the transparent page layer. Celebration geometry stays untouched.*/
#stage:not([data-current-page-stage="stage_celebration"]) #topControlCelebrationSlot { visibility: hidden !important; pointer-events: none !important; }
#stage.is-page-stage-transitioning .hcJourneyViewport { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
 .hcButton { transition: none; }
 .hcButton:active, .hcButton:hover { transform: none; }
}
@media (forced-colors: active) {
 .hcRadialText { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
 .hcButton, .hcChoiceButton, .hcTextNavigation { border-color: ButtonText; }
}

/*Quiet pockets keep the living stars behind readable HTML copy.*/
.hcJourneyHeading { background: radial-gradient(ellipse at center, rgba(12, 15, 28, .68), rgba(12, 15, 28, .36) 50%, transparent 76%); }

/* Stationary shell: no fixed-to-viewport elements, no sideways Stage movement. */
#bodyWrapper { overscroll-behavior: none; }
.pageStage { overflow: hidden; overflow: clip; }
.hcTheaterNavigation { width: 100%; max-width: 230px; min-height: 44px; gap: 5px; padding: 9px 5px; }
.hcTheaterNavigation span { min-width: 0; overflow-wrap: normal; }
.hcTheaterNavigation svg { flex-basis: 15px; width: 15px; }
.hcJourneyStage [hidden] { display: none !important; }
/* Compact layouts spend less padding, never return to tiny type. */
.hcJourneyStage[data-fit="compact"] .hcCreatorLayout { gap: 8px; }
.hcJourneyStage[data-fit="compact"] .hcChoiceList { gap: 14px; }
.hcJourneyStage[data-fit="compact"] .hcChoiceButton { min-height: 72px; padding: 8px 12px; }
.hcJourneyStage[data-fit="compact"] .hcButton.hcLargeAction { min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
.hcJourneyStage[data-fit="compact"] .hcSellLayout { gap: 8px; }
.hcJourneyStage[data-fit="compact"] .hcSellPromise { margin-bottom: 10px; }
.hcJourneyStage[data-fit="compact"] .hcJourneyActions { gap: 8px; }
.hcJourneyStage[data-fit="compact"] .hcSellHeroFrame { min-height: clamp(170px, 27cqh, 280px); }
/* Short/wide rooms may use two columns. Their controls and labels remain readable. */
@container (min-width: 500px) and (max-height: 660px) {
 .hcSellLayout { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); grid-template-rows: auto minmax(0,1fr); column-gap: 18px; }
 .hcSellLayout > .hcJourneyHeading { grid-column: 2; grid-row: 1; }
 .hcSellLayout > .hcSellHeroFrame { grid-column: 1; grid-row: 1 / span 2; min-height: 110px; }
 .hcSellLayout > .hcSellInvitation { grid-column: 2; grid-row: 2; align-self: center; }
 [data-hc-journey-root="stage_sell"] { --hc-home-display-size: 28px; --hc-home-support-size: 20px; }
 .hcSellLayout .hcSellPromise { margin-bottom: 12px; }
 .hcSellLayout .hcJourneyActions { gap: 8px; }
 .hcSellLayout .hcButton.hcLargeAction { min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
 .hcCreatorLayout .hcChoiceList, [data-hc-journey-root="stage_creator"] .hcPagedChoices { grid-template-columns: repeat(2,minmax(0,1fr)); }
 [data-hc-journey-root="stage_creator"] .hcChoiceButton { min-height: 78px; padding: 9px 10px; }
 [data-hc-journey-root="stage_creator"] .hcChoiceTitle { font-size: 18px; }
 [data-hc-journey-root="stage_creator"] .hcChoiceValue { font-size: 25px; }
 [data-hc-journey-root="stage_creator"] .hcChoiceButton[data-hc-placeholder="messages"] .hcChoiceValue,
 [data-hc-journey-root="stage_creator"] .hcChoiceButton[data-hc-placeholder="photo"] .hcChoiceValue { font-size: 20px; }
 .hcCreatorLayout .hcJourneyHeading h1, .hcPagedHeading .hcCreatorTitle { font-size: 32px; }
 .hcCreatorTagline { font-size: 26px; }
}
/* Continuations re-use the SAME controls and approved outgoing Stage reveal. */
.hcPagedLayout { height: 100%; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.hcPagedLayout > * { flex-shrink: 0; }
.hcPagedHeading { text-align: center; }
.hcPagedHeading .hcCreatorTitle:focus { outline: none; }
.hcPagedFooter { margin-top: auto; }
.hcPagedFooter .hcButton.hcLargeAction { min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
.hcPagedChoices > .hcChoiceButton:only-child { grid-column: 1 / -1; }
.hcPagedChoices { display: grid; grid-auto-rows: minmax(min-content, 1fr); gap: clamp(14px, 2.3cqh, 22px); }
.hcPagedChoices .hcChoiceButton { min-height: 78px; padding: 10px 14px; }
.hcSellLayout[data-split="intro"] { display: flex; }
.hcSellLayout[data-split="intro"] > .hcJourneyHeading { flex-shrink: 0; }
.hcSellLayout[data-split="intro"] > .hcSellHeroFrame { min-height: 80px; }
.hcSellNext { flex-shrink: 0; }
.hcSellInvitationStage .hcPagedLayout { justify-content: center; }
.hcSellInvitationStage .hcSellInvitation { flex-shrink: 0; }
.hcSellInvitationStage .hcSellPromise { margin-bottom: 18px; }
/* On very short screens keep the actual page title; only its secondary line rests. */
@container (max-height: 410px) {
 .hcButton.hcLargeAction { --hc-action-max-font-size: 34; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
 .hcButton.hcLargeAction--next { --hc-action-max-font-size: 32; }
 .hcSellLayout[data-split="intro"] > .hcSellHeroFrame { min-height: 60px; }
 .hcSellLayout[data-split="intro"] { gap: 6px; }
 .hcPagedHeading .hcCreatorTagline { display: none; }
 .hcPagedHeading .hcCreatorTitle { font-size: 26px; }
 .hcPagedLayout { gap: 8px; }
 .hcPagedFooter .hcButton.hcLargeAction { min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
 [data-hc-journey-root="stage_sell"] { --hc-home-display-size: 26px; --hc-home-support-size: 20px; }
 .hcSellInvitationStage .hcSellPromise { margin-bottom: 10px; }
 .hcSellInvitationStage .hcButton.hcLargeAction, .hcJourneyStage[data-fit="compact"] .hcButton.hcLargeAction { min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
}
.hcJourneyStage[data-fit="micro"] .hcButton.hcLargeAction { --hc-action-max-font-size: 34; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
 .hcButton.hcLargeAction--next { --hc-action-max-font-size: 32; }
 .hcSellLayout[data-split="intro"] > .hcSellHeroFrame { min-height: 60px; }
 .hcSellLayout[data-split="intro"] { gap: 6px; }
 .hcPagedHeading .hcCreatorTagline { display: none; }
.hcJourneyStage[data-fit="micro"] .hcPagedHeading .hcCreatorTitle { font-size: 24px; }
@container (max-height: 330px) {
 .hcJourneyViewport { padding-top: 4px; padding-bottom: 8px; }
}

/* SHOWCASE GIFT-FIRST: spend the Stage on the invitation and the picture.
   The old Welcome heading and bottom gift block are replaced by ONE large top block.
   The shared footer supplies the bottom boundary; do not reserve another blank footer.
   Only the purple label receives pointer clicks; the original button owns keyboard Play. */
#showStarterButton.is-example-invitation:not(.is-replay-position) {
 top: var(--hc-showcase-top, calc(var(--hero-top-control-bar-height,104px) + env(safe-area-inset-top,0px) + .6cqh));
 bottom: calc(var(--hc-footer-reserve, 0px) + 6px); left: 3cqw; right: 3cqw;
 width: auto; max-width: none; height: auto; min-width: 0; min-height: 0; padding: 0;
 box-sizing: border-box; white-space: normal; text-align: center;
 transform: none; filter: none; pointer-events: none; cursor: default;
 transition: opacity var(--starterButtonTransitionMs,900ms) ease-in-out;
}
#showStarterButton.is-example-invitation:not(.is-replay-position).is-hidden { transform: none; filter: none; }
#showStarterButton.is-example-invitation .hcShowcaseSplashComposition {
 --hc-showcase-art-target-width: 92cqw;
 position: relative; display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0;
 grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr);
 gap: clamp(7px,1.6cqw,11px); align-content: start; pointer-events: none;
}
#showStarterButton.is-example-invitation .starterButtonOccasionLabel,
#showStarterButton.is-example-invitation .starterButtonReplayIcon { display: none; }
.hcShowcaseGift, .hcShowcaseArtFrame, .hcShowcaseArtViewport { box-sizing: border-box; min-width: 0; min-height: 0; }
.hcShowcaseGift {
 grid-column: 1; grid-row: 1; display: grid; gap: clamp(2px,.45cqw,3px); margin: 0;
 color: #faf8ff; font-family: var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 line-height: 1.12; font-weight: 800; letter-spacing: -.025em;
 text-shadow: 0 1px 3px rgba(5,7,16,.9); text-wrap: balance;
}
.hcShowcaseGiftLine { display: block; font-size: clamp(26px,6.8cqw,43px); }
.hcShowcaseAudience { display: block; font-size: clamp(24px,6cqw,38px); color: #f5edff; }
.hcShowcaseGivers {
 display: block; font-size: clamp(22px,5.3cqw,32px); line-height: 1.15;
 font-weight: 700; color: #e9dbff;
}
/* No 17px/18px compact caption. If space is scarce, reduce gaps, not readable type. */
#showStarterButton.is-example-invitation .starterButtonLabel {
 grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 1.8cqw;
 width: 100%; max-width: 100%; min-width: 0; min-height: clamp(58px,10cqw,68px); margin: 0;
 box-sizing: border-box; padding: clamp(11px,2cqw,14px) 3cqw;
 border: 1px solid #d0a3ff; border-radius: clamp(16px,3.6cqw,23px);
 background: radial-gradient(ellipse at 32% 0%,#b76af5 0%,#8a36e1 38%,#6426bc 76%,#4e40b1 100%);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.38),0 0 16px rgba(161,82,255,.32);
 font: 800 clamp(24px,6cqw,38px)/1.12 var(--hero-starter-font-family,"Trebuchet MS",Arial,sans-serif);
 color: #fff; letter-spacing: -.025em; white-space: normal; text-shadow: 0 1px 2px rgba(27,13,61,.45);
 filter: none; transform: none; will-change: auto; cursor: pointer;
 transition: border-color 180ms ease,box-shadow 180ms ease;
}
.hcShowcaseStartText { min-width: 0; max-width: 100%; text-wrap: balance; }
.hcShowcaseArrow { flex: 0 0 auto; font-size: 1.25em; line-height: .8; font-weight: 500; }
#showStarterButton.is-example-invitation:not(:disabled):not(.is-hidden) .starterButtonLabel { pointer-events: auto; }
#showStarterButton.is-example-invitation:disabled .starterButtonLabel,
#showStarterButton.is-example-invitation.is-hidden .starterButtonLabel { pointer-events: none; cursor: default; }
#showStarterButton.is-example-invitation:not(:disabled):hover .starterButtonLabel { letter-spacing: -.025em; filter: none; border-color: #f2ddff; box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 0 23px rgba(160,115,255,.4); }
#showStarterButton.is-example-invitation:focus-visible .starterButtonLabel { outline: 2px solid #f1e5ff; outline-offset: 3px; }
.hcShowcaseArtFrame { grid-column: 1; grid-row: 3; display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.hcShowcaseArtViewport {
 position: absolute; left: 50%; top: 0; display: block; width: 100%; height: 100%;
 transform: translateX(-50%); overflow: hidden; pointer-events: none;
}
.hcShowcaseArt {
 position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none;
 object-fit: contain; object-position: center; margin: 0; padding: 0; border: 0;
 user-select: none; pointer-events: none;
}
.hcShowcaseArtFallback {
 position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
 padding: 4cqw; color: #f7f1ff; font-size: clamp(24px,6cqw,38px); line-height: 1.2;
 background: radial-gradient(ellipse,rgba(127,74,188,.2),transparent 70%);
}
.hcShowcaseArtFallback[hidden] { display: none; }
.hcShowcaseArtFrame[data-artwork-state="unavailable"] .hcShowcaseArt { visibility: hidden; }
.hcShowcaseMeasure {
 position: absolute; inset: 0 auto auto 0; display: block;
 width: var(--hc-showcase-art-target-width); height: 0; visibility: hidden; pointer-events: none;
}
/* Short desktop theaters use phone-readable proportions to protect the image row.
   These authored sizes retain the SAME 26/24/22/24px minimums, never a tiny fit-to-height scale. */
@container (min-width: 500px) and (max-height: 740px) {
 .hcShowcaseGiftLine { font-size: clamp(26px,5cqw,32px); }
 .hcShowcaseAudience { font-size: clamp(24px,4.5cqw,28px); }
 .hcShowcaseGivers { font-size: clamp(22px,4cqw,25px); }
 #showStarterButton.is-example-invitation .starterButtonLabel { font-size: clamp(24px,4.8cqw,30px); }
}
/* Very short rooms spend only spacing. This never changes header icons or text sizes. */
#showStarterButton.is-example-invitation[data-showcase-density="compact"] .hcShowcaseSplashComposition { gap: 4px; }
#hcSellHeroImage[data-hc-entrance-pending="true"] { opacity: 0; }
@media (forced-colors: active) {
 #showStarterButton.is-example-invitation .starterButtonLabel { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
 .hcShowcaseGift, .hcShowcaseAudience, .hcShowcaseGivers { color: CanvasText; text-shadow: none; }
}

/* HC-NAME-20260910-01 — five read-only rooms, no inputs, scroll surfaces, or new animation loops. */
.hcChoiceButton[data-hc-placeholder] { cursor: pointer; }
.hcChoiceButton[data-hc-placeholder]:hover { border-color: rgba(204, 177, 255, .8); background: linear-gradient(115deg, rgba(53, 46, 94, .96), rgba(30, 32, 66, .96)); }
.hcPlaceholderLayout { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; gap: clamp(8px, 2cqh, 20px); text-align: center; }
.hcPlaceholderLayout .hcJourneyHeading h1 { font-size: clamp(24px, 5.8cqw, 38px); }
.hcPlaceholderContent { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 0; gap: clamp(10px, 2cqh, 24px); }
.hcPlaceholderJewel { display: block; font-size: clamp(34px, 10cqh, 76px); line-height: 1; color: #dcc8ff; text-shadow: 0 0 18px rgba(133,160,250,.35); }
.hcPlaceholderValue { margin: 0; max-width: 100%; font-size: clamp(28px, 8cqw, 52px); line-height: 1.12; font-weight: 800; overflow-wrap: anywhere; text-wrap: balance; }
.hcPlaceholderPortrait { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-height: 42cqh; }
.hcPlaceholderPortrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(157,156,241,.22)); }
.hcPlaceholderNote { flex: 0 0 auto; margin: 0; font-size: clamp(14px, 3.5cqw, 18px); line-height: 1.35; color: #d1cce5; text-wrap: balance; }
.hcPlaceholderMessages { width: 100%; display: grid; gap: clamp(12px, 2.4cqh, 26px); }
.hcPlaceholderMessages p { margin: 0; font-size: clamp(18px, 5cqw, 30px); font-weight: 700; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 3px #0a0916; }
.hcPlaceholderMessages .hcRadialText { text-shadow: none; filter: drop-shadow(0 2px 2px #0a0916); }
@container (max-height: 600px) {
 .hcPlaceholderLayout { gap: 8px; }
 .hcPlaceholderLayout .hcEyebrow { margin-bottom: 4px; font-size: 10px; }
 .hcPlaceholderLayout .hcJourneyHeading h1 { font-size: clamp(22px, 4.4cqw, 28px); }
 .hcPlaceholderContent { gap: 8px; }
 .hcPlaceholderJewel { font-size: 30px; }
 .hcPlaceholderMessages { gap: 8px; }
 .hcPlaceholderMessages p { font-size: clamp(16px, 3.8cqw, 21px); line-height: 1.15; }
 .hcPlaceholderNote { font-size: 13px; }
 .hcPlaceholderValue { font-size: clamp(24px, 5.5cqw, 36px); }
}
@container (max-height: 420px) {
 .hcPlaceholderLayout .hcEyebrow, .hcPlaceholderJewel, .hcPlaceholderNote { display: none; }
 .hcPlaceholderMessages { gap: 6px; }
 .hcPlaceholderMessages p { font-size: 16px; line-height: 1.15; }
 .hcPlaceholderPortrait { max-height: 25cqh; }
}

/* Text-only Creator breadcrumbs retain their existing button geometry. */

.hcTopNavigationButton {
 display: flex; align-items: center; justify-content: center; flex: 1 1 0; max-width: 148px; min-width: 0;
 min-height: 46px; padding: 10px 6px; margin: 0; box-sizing: border-box;
 border: 1px solid #8d89b5; border-radius: clamp(12px, 2.8cqw, 17px);
 background: linear-gradient(145deg, #262d4b, #171b30); color: #f9f6ff; -webkit-text-fill-color: currentColor;
 font: 700 clamp(16px, 4.45cqw, 23px)/1.12 var(--hero-base-font-family, "Trebuchet MS", Arial, sans-serif);
 letter-spacing: -.025em; text-align: center; white-space: nowrap; text-shadow: 0 1px 2px #080910;
 box-shadow: inset 0 1px 0 rgba(255,255,255,.14); opacity: 1;
 appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
 pointer-events: auto; touch-action: manipulation; cursor: pointer;
 transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.hcTopNavigationButton.is-current-destination {
 background: linear-gradient(140deg, #8540d9, #51259a); border-color: #dfbeff;
 box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 12px rgba(165,114,243,.28);
}
.hcTopNavigationButton:disabled { opacity: 1; color: #f9f6ff; -webkit-text-fill-color: currentColor; filter: none; cursor: default; }
.hcTopNavigationButton:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hcMainStageLabel { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.08; }
.hcMainStageLabel > span { display: block; white-space: nowrap; }
/* ICON NAVIGATION — original native buttons, now transparent artwork seats.
   Two fixed slots retain the guest's first-visit chronology; neither icon is a new navigation system. */
#stage_topControlBar {
 grid-template-columns: var(--hero-top-control-logo-slot-width, clamp(112px, 21cqw, 135px)) minmax(0,1fr) calc(var(--hero-playback-icon-size, clamp(40px, min(9cqw, 4.8cqh), 48px)) * var(--hero-playback-icon-scale, 2) + 8px);
}
#topControlRightSlot { width: 100%; min-width: 0; }
#topControlCelebrationSlot { width: 100%; flex: 1 1 100%; min-width: 0; }
#topControlCenterSlot { padding: 0 clamp(4px, 1.4cqw, 9px); }
#heroJourneyNavigation {
 display: grid; grid-template-columns: repeat(2, minmax(0, 88px));
 align-items: center; justify-content: start; gap: clamp(6px, 1.8cqw, 12px);
 width: 100%; min-width: 0; pointer-events: none;
}
#heroJourneyNavigation > [hidden] { display: none !important; }
#heroJourneyNavigation > .hcTopNavigationButton {
 position: relative; display: flex; align-items: center; justify-content: center;
 width: 100%; min-width: 44px; height: 88px; padding: 6px 2px 10px; margin: 0; box-sizing: border-box;
 border: 0; border-radius: 18px; background: transparent; box-shadow: none;
 color: #f9f6ff; -webkit-text-fill-color: currentColor; opacity: 1;
 appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
 pointer-events: auto; touch-action: manipulation; cursor: pointer;
}
/* These state changes finish once. The active icon then stays lit without a running animation. */
.hcNavigationIconFrame {
 position: relative; display: block; width: 100%; max-width: 76px; height: 70px;
 overflow: visible; pointer-events: none;
}
.hcNavigationIcon {
 display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
 filter: drop-shadow(0 0 4px rgba(235,247,255,0)) drop-shadow(0 0 24px rgba(171,187,255,0));
 transition: filter 650ms ease-in-out;
}
/* Keep the palette's fitted artwork unchanged, including on narrow screens. */
#heroCreatorNavigationButton .hcNavigationIconFrame { max-width: 70px; height: auto; aspect-ratio: 1; }
.hcNavigationIconFrame--hero .hcNavigationIcon { position: absolute; inset: 0; max-width: none; }
/* A close pearl edge plus a wider blue-violet halo distinguishes selection from the palette's baked-in glow.
   Both shadows follow the PNG alpha, fade only on state change, then remain steady. */
#heroJourneyNavigation > .hcTopNavigationButton.is-current-destination .hcNavigationIcon {
 filter: drop-shadow(0 0 4px rgba(235,247,255,.95)) drop-shadow(0 0 24px rgba(171,187,255,1));
}
#heroJourneyNavigation > .hcTopNavigationButton:disabled { opacity: 1; filter: none; cursor: default; }
#heroJourneyNavigation > .hcTopNavigationButton:focus-visible { outline: 2px solid #f6e6ff; outline-offset: -2px; }
.hcNavigationFallback { font: 800 13px/1.15 var(--hero-base-font-family, "Trebuchet MS", Arial, sans-serif); text-align: center; }
.hcNavigationFallback[hidden] { display: none !important; }
#heroJourneyNavigation > .hcTopNavigationButton.is-icon-unavailable .hcNavigationIconFrame { display: none; }
#heroCelebrationsLogoButton.is-current-destination .heroCelebrationsLogoGlowWrapper {
 filter: drop-shadow(0 0 4px rgba(247,241,255,.95)) drop-shadow(0 0 14px rgba(171,140,255,.7));
}
/* Hover keeps the location glow honest; pointer and keyboard-focus cues remain native. */
@container (max-width: 350px) {
 #stage_topControlBar { grid-template-columns: 92px minmax(0,1fr) calc(var(--hero-playback-icon-size, 40px) * var(--hero-playback-icon-scale, 2) + 8px); }
 #topControlLeftSlot { width: 92px; flex-basis: 92px; }
 .heroCelebrationsLogoScaleWrapper { transform: scale(1.4); }
 #topControlCenterSlot { padding-left: 2px; padding-right: 2px; }
 #heroJourneyNavigation { gap: 4px; }
 .hcNavigationIconFrame { height: 64px; }
}
@media (forced-colors: active) {
 #heroJourneyNavigation > .hcTopNavigationButton { border: 1px solid ButtonText; }
 #heroJourneyNavigation > .hcTopNavigationButton.is-current-destination { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* The background wrapper itself must not trap its live Burst plane beneath frozen page shields.
   Starfield keeps its existing own z=0 size-container; the live plane remains a child of the background. */
#stage_background { z-index: auto; container-type: normal; }
.hcBackgroundBurstLayer {
 position: absolute; inset: 0; z-index: 70; container-type: size; isolation: isolate;
 overflow: hidden; pointer-events: none;
}
.hcBackgroundBurstLayer * { pointer-events: none !important; }
html.is-hero-visibility-sleeping.is-hc-background-burst-visible #stage_background_bursts * {
 animation-play-state: running !important;
}
/* The permanent top bar owns all backward navigation; no second navigation row is rendered below it. */
/* Continuation actions share one row, retaining short-screen content clearance. */
.hcPagedFooter { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); align-items: stretch; gap: 8px; }
.hcPagedFooter > :only-child { grid-column: 1 / -1; }

/* Open writing surfaces: labels and native text float directly in the existing starfield. */
.hcEditField {
 position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch;
 min-width: 0; gap: 6px; padding: 8px 0;
 border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.hcEditLabel {
 display: block; margin: 0; color: #dcd7f2; text-align: center; cursor: text;
 font: 700 clamp(15px,3.45cqw,21px)/1.15 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 letter-spacing: .035em; transition: color 180ms ease, text-shadow 180ms ease;
}
.hcEditField:focus-within .hcEditLabel { color: #fff5ff; text-shadow: 0 0 12px rgba(194,169,255,.45); }
.hcTextInput {
 display: block; width: 100%; min-width: 0; min-height: 46px; margin: 0; padding: 8px 4px;
 border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box;
 background: transparent; color: #fff; -webkit-text-fill-color: #fff;
 font: 700 clamp(18px,4.5cqw,28px)/1.2 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 text-align: center; letter-spacing: -.015em; caret-color: #d8c2ff;
 appearance: none; -webkit-appearance: none; touch-action: manipulation;
}
.hcTextInput::placeholder {
 color: rgba(211,185,255,.40); -webkit-text-fill-color: rgba(211,185,255,.40); opacity: 1;
 font-style: italic; font-weight: 500; text-overflow: ellipsis;
}
.hcTextInput:focus { outline: none; background: transparent; }
.hcNameField { grid-column: 1 / -1; gap: 6px; }
.hcNameField .hcEditLabel { letter-spacing: 0; font-size: clamp(17px,4.35cqw,25px); }
.hcNameInput { font-size: clamp(24px,6cqw,37px); text-align: center; }
.hcInputStageLayout {
 height: 100%; min-height: 0; min-width: 0; display: flex; flex-direction: column;
 gap: clamp(12px,2cqh,22px); text-align: center;
}
.hcInputStageLayout > header { flex: 0 0 auto; }
.hcInputItems { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; flex: 1 0 auto; }
.hcOccasionChoices { grid-auto-rows: minmax(48px,1fr); gap: clamp(9px,1.6cqh,16px); }
.hcChoiceButton.hcOccasionButton {
 position: relative; isolation: isolate;
 min-height: 48px; padding: 8px 12px; border-radius: 16px;
 font-size: clamp(19px,5.25cqw,32px); font-weight: 750; line-height: 1.12;
 white-space: nowrap; letter-spacing: -.02em;
}
/* A real decorative layer lets the existing selected gradient fade without dimming its words. */
.hcOccasionSelectionSurface {
 position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0;
 background: radial-gradient(ellipse at 35% 0%, #a65bea, #7431c2 66%, #4d3b98);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.hcOccasionLabel { position: relative; z-index: 1; pointer-events: none; }
.hcOccasionButton.is-selected-occasion > .hcOccasionSelectionSurface { opacity: 1; }
.hcOccasionButton.is-selected-occasion {
 border-color: #cdaaff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 12px rgba(138,73,232,.25);
 color: #fff;
}
.hcOccasionButton:focus-visible { outline: 2px solid #f1e8ff; outline-offset: 2px; }
.hcMessageFields { grid-auto-rows: minmax(46px,auto); gap: clamp(4px,.8cqh,8px); }
.hcMessagesLayout { justify-content: flex-start; gap: 0; padding: 0; }
.hcMessagesLayout .hcMessageFields { flex: 0 0 auto; margin-top: clamp(26px,4cqh,42px); margin-bottom: 0; }
.hcMessageField { min-height: 46px; padding: 0; gap: 0; }
.hcMessageField .hcTextInput { font-size: clamp(18px,4.5cqw,28px); }
.hcInputFooter { flex: 0 0 auto; margin-top: auto; }
.hcInputContinue.hcButton.hcLargeAction { --hc-action-max-font-size: 28; min-height: 48px; padding: 8px 12px; font-size: 25px; }
.hcInputStage[data-input-density="compact"] .hcInputStageLayout { gap: 10px; padding-top: 0; padding-bottom: 0; }
.hcInputStage[data-input-density="compact"] .hcOccasionChoices { gap: 8px; grid-auto-rows: minmax(44px,1fr); }
.hcInputStage[data-input-density="compact"] .hcOccasionButton { min-height: 44px; padding: 7px 12px; font-size: clamp(18px,4.8cqw,28px); }
.hcInputStage[data-input-density="compact"] .hcMessageFields { gap: 4px; grid-auto-rows: minmax(44px,auto); margin-top: 10px; }
.hcInputStage[data-input-density="compact"] .hcMessageField { min-height: 44px; padding: 0; gap: 0; }
.hcInputStage[data-input-density="compact"] .hcTextInput { min-height: 44px; padding: 7px 4px; }
.hcArtStageLayout {
 display: flex; flex-direction: column; align-items: center; height: 100%; min-height: 0;
 gap: clamp(12px,2cqh,22px); padding: 0;
}
.hcArtStageLayout > .hcCreatorStageHeading { width: 100%; }
.hcCreatorPortraitFrame { position: relative; flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden; }
.hcCreatorPortraitFrame img {
 position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain;
 max-width: none; max-height: none; filter: drop-shadow(0 0 14px rgba(157,156,241,.22));
}
/* When keyboard space is tight, lift the SAME focused field below the existing bar.
   Nothing is detached, the caret is retained, and dismissal restores the whole room. */
.hcFocusedEditor .hcJourneyViewport { height: var(--hc-editor-visible-height); bottom: auto; }
.hcFocusedEditor .hcJourneyHeading, .hcFocusedEditor .hcPagedHeading,
.hcFocusedEditor .hcCreatorFooter, .hcFocusedEditor .hcInputFooter, .hcFocusedEditor .hcPagedFooter,
.hcFocusedEditor .hcChoiceButton:not(.is-focused-field), .hcFocusedEditor .hcEditField:not(.is-focused-field) { visibility: hidden; }
.hcFocusedEditor .hcEditField.is-focused-field {
 position: absolute; top: 16px; left: clamp(20px,5.5cqw,38px); right: clamp(20px,5.5cqw,38px);
 width: auto; min-height: 86px; max-height: calc(100% - 32px); padding: 12px; z-index: 6; visibility: visible;
}
@container (max-height: 480px) {
 .hcNameField { min-height: 88px; }
}
@media (forced-colors: active) {
 .hcTextInput { color: CanvasText; -webkit-text-fill-color: CanvasText; }
 .hcTextInput::placeholder { color: GrayText; -webkit-text-fill-color: GrayText; }
 .hcEditLabel { color: CanvasText; }
 .hcTextInput:focus, .hcOccasionButton.is-selected-occasion { outline: 2px solid Highlight; }
}
/* Very short continuation: preserve a full editable name and the Continue action without clipping. */
.hcJourneyStage[data-fit="micro"] .hcNameField { min-height: 80px; padding: 8px 12px; }
.hcJourneyStage[data-fit="micro"] .hcNameField .hcEditLabel { font-size: 18px; }
.hcJourneyStage[data-fit="micro"] .hcNameInput { min-height: 40px; font-size: 24px; padding: 6px 10px; }

/* Fit the full Creator menu first. An editable name must never force every other row to its own height. */
#stage_creator .hcChoiceList { grid-auto-rows: auto; flex: 0 0 auto; gap: clamp(10px,1.7cqh,16px); }
#stage_creator .hcChoiceButton { min-height: clamp(64px,8.7cqh,92px); padding: 8px 12px; }
#stage_creator .hcNameField { padding: 10px 12px; gap: 5px; }
#stage_creator .hcNameInput { min-height: 42px; padding: 6px 10px; font-size: clamp(24px,5.7cqw,34px); }
#stage_creator[data-fit="compact"] .hcNameField { padding: 8px 12px; gap: 4px; }
#stage_creator[data-fit="compact"] .hcChoiceButton { min-height: 62px; padding: 7px 12px; }
#stage_creator[data-fit="compact"] .hcChoiceList { gap: 10px; }
/* A bounded short-screen fit precedes continuation; it reduces bulk, not the guest's access to Photo. */
#stage_creator[data-fit="balanced"] .hcCreatorLayout { gap: 6px; }
#stage_creator[data-fit="balanced"] .hcJourneyHeading h1 { font-size: clamp(26px,6.8cqw,40px); }
#stage_creator[data-fit="balanced"] .hcCreatorTagline { font-size: clamp(20px,5cqw,28px); }
#stage_creator[data-fit="balanced"] .hcChoiceList { gap: 7px; }
#stage_creator[data-fit="balanced"] .hcChoiceButton { min-height: 54px; padding: 6px 10px; }
#stage_creator[data-fit="balanced"] .hcChoiceTitle,
#stage_creator[data-fit="balanced"] .hcNameField .hcEditLabel { font-size: 16px; }
#stage_creator[data-fit="balanced"] .hcChoiceValue { font-size: clamp(22px,5.5cqw,28px); margin-top: 3px; }
#stage_creator[data-fit="balanced"] .hcChoiceButton[data-hc-placeholder="messages"] .hcChoiceValue,
#stage_creator[data-fit="balanced"] .hcChoiceButton[data-hc-placeholder="photo"] .hcChoiceValue { font-size: clamp(20px,4.5cqw,24px); }
#stage_creator[data-fit="balanced"] .hcNameField { padding: 6px 10px; gap: 3px; }
#stage_creator[data-fit="balanced"] .hcNameInput { min-height: 38px; padding: 4px 10px; font-size: 24px; }
#stage_creator[data-fit="balanced"] .hcLargeAction { min-height: 48px; padding: 8px 4%; font-size: clamp(22px,5.7cqw,32px); }
/* On short portrait screens the secondary tagline yields before any Creator choice does. */
@container (max-height: 640px) {
 #stage_creator[data-fit="balanced"] .hcCreatorTagline { display: none; }
}

/* The five Creator rooms share one title position and scale beneath the unchanged top bar. */
#stage .hcCreatorStageHeading { flex: 0 0 auto; margin: 0; padding: 0; text-align: center; background: none; }
#stage .hcCreatorStageHeading :is(h1,h2) {
 margin: 0; font-family: var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 font-size: clamp(23px,6cqw,38px); line-height: 1.12; font-weight: 800;
 letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance;
}
#stage .hcCreatorStageHeading :is(h1,h2):focus { outline: none; }
#stage .hcCreatorStageHeading .hcRadialText { color: #cda3ff; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
 #stage .hcCreatorStageHeading .hcRadialText { color: transparent; }
}
/* No card class on Name, including when its actual input moves to a short-screen continuation. */
#stage_creator .hcNameField, [data-hc-journey-root="stage_creator"] .hcNameField { padding-left: 0; padding-right: 0; }
@media (forced-colors: active) {
 #stage .hcCreatorStageHeading .hcRadialText { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* One reusable child-stage return symbol; the centered title keeps its own seat. */
.hcSvgLibrary { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
#stage .hcStageReturnHeading { width: 100%; }
.hcStageTitleRow {
 --hc-return-size: clamp(44px,10cqw,64px);
 display: grid; grid-template-columns: var(--hc-return-size) minmax(0,max-content) var(--hc-return-size);
 align-items: center; justify-content: center; column-gap: clamp(5px,1.4cqw,9px); width: 100%; min-width: 0;
}
#stage .hcStageTitleRow > :is(h1,h2) { grid-column: 2; min-width: 0; }
.hcStageReturnButton {
 grid-column: 1; display: flex; align-items: center; justify-content: center;
 width: var(--hc-return-size); height: max(44px,calc(var(--hc-return-size) * .79));
 padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
 color: #fff; -webkit-text-fill-color: #fff; opacity: 1;
 appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
 cursor: pointer; touch-action: manipulation;
}
.hcStageReturnButton svg { display: block; width: 100%; height: 100%; fill: currentColor; pointer-events: none; }
.hcStageReturnButton:hover:not(:disabled) svg { filter: drop-shadow(0 0 5px rgba(229,215,255,.55)); }
.hcStageReturnButton:focus { outline: none; }
.hcStageReturnButton:focus-visible { outline: 2px solid #e3d1ff; outline-offset: 3px; }
.hcStageReturnButton:disabled { opacity: 1; cursor: default; }
/* A phone keyboard must not hide the only step-back arrow or place its input over the title. */
.hcFocusedEditor .hcStageReturnHeading { visibility: visible; }
.hcFocusedEditor[data-hc-parent-stage] .hcEditField.is-focused-field {
 top: calc(var(--hc-return-heading-height,44px) + 16px);
 max-height: calc(100% - var(--hc-return-heading-height,44px) - 24px); padding: 6px 0;
}
@media (forced-colors: active) {
 .hcStageReturnButton { color: ButtonText; -webkit-text-fill-color: ButtonText; }
 .hcStageReturnButton:focus-visible { outline-color: Highlight; }
}

/* One small identity mark, before the words; the top-bar palette remains the navigation control. */
#stage .hcCreatorStageHeading .hcCreatorTitle {
 display: inline-flex; align-items: center; justify-content: center; gap: .28em;
 max-width: 100%; vertical-align: middle;
}
.hcCreatorTitlePalette {
 display: block; flex: 0 0 .88em; width: .88em; height: .88em;
 object-fit: contain; pointer-events: none; user-select: none;
}
.hcCreatorTitleWords { min-width: 0; }

/* Long task titles remain one line; the arrow and words form a compact, centered pair. */
#stage .hcLongTitleHeading .hcStageTitleRow { grid-template-columns: var(--hc-return-size) minmax(0,max-content); }
#stage .hcLongTitleHeading :is(h1,h2) { font-size: clamp(12px,4.2cqw,28px); white-space: nowrap; text-wrap: nowrap; }
/* Long titles use the SAME return artwork size as all other task headings. */
.hcCreatorEditInstruction {
 grid-column: 2; margin: 7px 0 0; color: #dcd7f2; font-size: clamp(16px,3.7cqw,23px);
 line-height: 1.2; font-weight: 600; letter-spacing: 0; text-align: center;
}
/* The message instruction belongs to the whole group, not the title's arrow column. */
#stage .hcMessagesHeading .hcStageTitleRow {
 grid-template-columns: var(--hc-return-size) minmax(0,max-content); column-gap: clamp(10px,2.6cqw,17px);
}
#stage .hcMessagesHeading :is(h1,h2) {
 font-size: clamp(17px,4.4cqw,30px); text-transform: none; white-space: normal; text-wrap: balance;
}
#stage .hcMessagesHeading .hcCreatorEditInstruction {
 margin: clamp(26px,4cqh,42px) 0 0; width: 100%; color: #f5efff;
 font-size: clamp(22px,5.4cqw,34px); line-height: 1.18; font-weight: 800;
 text-align: center; text-shadow: 0 0 14px rgba(174,144,227,.16);
}
.hcInputStage[data-input-density="compact"] .hcMessagesLayout { gap: 0; }
.hcInputStage[data-input-density="compact"] .hcMessagesHeading .hcCreatorEditInstruction { margin-top: 16px; }
/* The real shared footer replaces the old 28–62px empty Creator reserve. */
#stage_creator > .hcJourneyViewport, [data-hc-journey-root="stage_creator"] > .hcJourneyViewport {
 padding-bottom: 8px;
}
@media (forced-colors: active) {
 #stage .hcMessagesHeading .hcCreatorEditInstruction { color: CanvasText; text-shadow: none; }
}

/* Six choices keep the Occasion vocabulary without stretching each row to fill spare sky. */
.hcThemeChoices { flex: 0 0 auto; grid-auto-rows: minmax(48px,auto); }
.hcChoiceButton.hcThemeButton { min-height: clamp(48px,7.4cqh,64px); }
#stage_choice_messages .hcStageReturnButton { width: calc(var(--hc-return-size) * 1.12); height: calc(max(44px,calc(var(--hc-return-size) * .79)) * 1.12); }
/* Theme has one bounded room; long instructions never widen the arrow/title row. */
#stage_choice_theme .hcThemeStageLayout {
 display: grid; grid-template-rows: max-content max-content minmax(0,1fr);
 height: 100%; min-height: 0; gap: clamp(12px,2cqh,20px); padding: 0;
}
#stage_choice_theme .hcStageTitleRow {
 display: inline-flex; align-items: center; justify-content: center;
 width: max-content; max-width: 100%; gap: clamp(8px,1.5cqw,10px);
}
#stage_choice_theme .hcStageReturnButton { flex: 0 0 var(--hc-return-size); }
#stage #stage_choice_theme .hcCreatorStageHeading h1 {
 font-size: clamp(25px,6cqw,38px); white-space: nowrap; text-wrap: nowrap;
}
.hcThemeBrowseInstruction {
 margin: clamp(4px,.8cqh,8px) 0; padding: 0; color: #dcd7f2;
 font-size: clamp(16px,3.8cqw,24px); line-height: 1.25; font-weight: 600; text-align: center;
}
#stage_choice_theme .hcThemeChoices { display: flex; min-height: 0; height: 100%; }
#stage_choice_theme.is-page-stage-current .hcJourneyViewport { cursor: pointer; }
.hcThemeGallery {
 display: grid; grid-template-rows: max-content minmax(0,1fr); gap: clamp(10px,1.6cqh,18px);
 width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0;
 padding: 0 0 clamp(10px,2cqh,22px); border: 0; border-radius: 0; background: transparent; box-shadow: none;
 font: inherit; color: inherit; text-align: center; cursor: pointer; touch-action: manipulation;
 -webkit-tap-highlight-color: transparent;
}
.hcThemeGallery:focus { outline: none; }
.hcThemeGallery:focus-visible { outline: 2px solid #e8ddff; outline-offset: -2px; border-radius: 16px; }
.hcThemeGalleryTitle {
 display: block; margin: 0; color: #faf8ff; font-size: clamp(28px,7.2cqw,44px);
 line-height: 1.08; font-weight: 800; letter-spacing: -.025em;
}
.hcThemeGalleryFrame {
 position: relative; display: block; width: 100%; height: 100%; min-height: 0;
 overflow: visible; pointer-events: none;
}
.hcThemeGalleryImage {
 position: absolute; inset: 0; margin: auto; display: block;
 width: min(86%,480px); height: 100%; max-width: 100%; max-height: 620px;
 object-fit: contain; object-position: center; user-select: none; pointer-events: none;
 filter: drop-shadow(0 0 12px rgba(255,255,255,.10));
}
/* A very short desktop window gives space back to the picture without clipping or shrinking the return arrow. */
@container (max-height: 500px) {
 #stage_choice_theme .hcThemeStageLayout { gap: 6px; }
 .hcThemeBrowseInstruction { margin: 2px 0; font-size: 17px; }
 .hcThemeGallery { gap: 6px; padding-bottom: 8px; }
 .hcThemeGalleryTitle { font-size: 28px; }
}
@media (forced-colors: active) {
 .hcThemeBrowseInstruction, .hcThemeGalleryTitle { color: CanvasText; }
}
/* The real native file input covers one styled label; touch, keyboard, and browser chooser remain native. */
.hcPhotoStageLayout { display: flex; flex-direction: column; height: 100%; min-height: 0; text-align: center; }
.hcPhotoChooser { flex: 0 0 auto; width: 100%; min-width: 0; margin-top: clamp(18px,3cqh,30px); }
.hcPhotoChooseControl {
 position: relative; display: inline-flex; align-items: center; justify-content: center;
 width: min(100%,340px); min-height: 54px; padding: 12px 24px; box-sizing: border-box;
 font-size: clamp(22px,5.5cqw,30px); line-height: 1.15; font-weight: 750; cursor: pointer;
}
.hcPhotoChooseControl > span { pointer-events: none; }
.hcPhotoFileInput {
 position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0;
 opacity: 0; font-size: 16px; cursor: pointer; touch-action: manipulation;
}
.hcPhotoChooseControl:focus-within { outline: 2px solid #f1e8ff; outline-offset: 4px; }
.hcPhotoSelection { margin: 14px auto 0; max-width: min(100%,440px); color: #dcd7f2; font-size: 16px; line-height: 1.35; }
.hcPhotoSelection > span { display: block; }
#hcHeroPhotoName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #faf8ff; margin-top: 3px; }
.hcPhotoPreviewSpace { flex: 1 1 auto; min-height: 0; pointer-events: none; }
@media (forced-colors: active) {
 .hcPhotoChooseControl:focus-within { outline-color: Highlight; }
 .hcCreatorEditInstruction, .hcPhotoSelection, #hcHeroPhotoName { color: CanvasText; }
}

/* Native inputs keep invisible boxes. Only the measured line below the current words is visible. */
.hcEditField { position: relative; }
.hcTextMeasure {
 position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none;
 width: max-content; max-width: none; white-space: pre; padding: 0; border: 0; margin: 0;
}
.hcTextUnderline {
 position: absolute; height: 1px; width: 0; background: rgba(220,207,241,.65);
 transform: translateX(-50%); pointer-events: none;
}
.hcTextUnderline.is-example-underline { background: rgba(211,185,255,.42); }
.hcEditField:focus-within > .hcTextUnderline { background: rgba(230,217,255,.9); }
.hcPhotoHelp { margin: 12px 0 0; color: #c9c2df; font-size: 14px; line-height: 1.3; }
.hcPhotoSelection { overflow-wrap: anywhere; font-size: 14px; margin-top: 9px; }
.hcPhotoSelection.is-photo-error { color: #ffd1df; }
.hcPhotoIntro {
 box-sizing: border-box; margin: clamp(20px,3.6cqh,28px) auto 0; max-width: min(100%,560px);
 color: #f5f1ff; font-size: clamp(20px,4.8cqw,28px); line-height: 1.28; font-weight: 500;
}
.hcPhotoFeedback {
 box-sizing: border-box; width: min(100%,560px); margin: 16px auto 0; padding: 16px 18px 18px;
 border: 1px solid rgba(186,158,241,.44); border-radius: 18px; background: rgba(31,34,74,.72);
 box-shadow: 0 0 18px rgba(61,35,109,.16); text-align: left;
}
.hcPhotoFeedbackTitle { margin: 0 0 10px; color: #faf8ff; font-size: clamp(20px,4.2cqw,26px); line-height: 1.15; font-weight: 760; }
.hcPhotoFeedbackList { margin: 0; padding-left: 20px; color: #e2dbf5; font-size: 15px; line-height: 1.42; display: grid; gap: 8px; }
.hcPhotoFeedback[data-mode="error"] { border-color: rgba(255,138,179,.72); background: rgba(72,20,47,.58); }
.hcPhotoFeedback[data-mode="warning"] { border-color: rgba(255,213,137,.68); background: rgba(74,49,18,.52); }
.hcPhotoFeedback[data-mode="success"] { border-color: rgba(112,230,176,.58); background: rgba(18,62,49,.56); }
.hcPhotoFeedback[data-mode="info"] { border-color: rgba(186,158,241,.44); background: rgba(31,34,74,.72); }
.hcPhotoPreviewSpace {
 box-sizing: border-box; padding-top: clamp(24px,4.2cqh,34px); padding-bottom: 28px;
 display: flex; justify-content: center; align-items: flex-start; overflow: hidden;
}
.hcPreparedPhoto {
 display: block; box-sizing: border-box; flex: none; object-fit: contain;
 border: 1px solid rgba(214,195,250,.75); border-radius: 12px;
 box-shadow: 0 0 16px rgba(165,124,237,.14); background: #fff;
}
/* A sibling inside the SAME theater; device rotation is not photo EXIF orientation. */
.hcPortraitGuard {
 position: absolute; inset: 0; z-index: 1000; box-sizing: border-box;
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 gap: 18px; padding: max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
 text-align: center; color: #faf8ff; background: radial-gradient(ellipse at 50% 40%,#242e49,#100d1e 80%);
 font-family: var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif); outline: none;
}
.hcPortraitGuard[hidden] { display: none; }
.hcPortraitGuard h2 { margin: 0; font-size: clamp(22px,4vw,32px); line-height: 1.15; }
.hcPortraitGuard p { margin: 0; font-size: clamp(16px,2.8vw,23px); line-height: 1.4; color: #d7cfec; }
html.hc-portrait-blocked #stage { width: var(--hc-held-portrait-width,100%); height: var(--hc-held-portrait-height,100%); }
html.hc-portrait-blocked #stage, html.hc-portrait-blocked #stage * { visibility: hidden !important; pointer-events: none !important; }
@media (forced-colors: active) {
 .hcTextUnderline, .hcTextUnderline.is-example-underline, .hcEditField:focus-within > .hcTextUnderline { background: CanvasText; }
 .hcPreparedPhoto, .hcChoiceThumbFrame { border-color: CanvasText; }
 .hcPortraitGuard { background: Canvas; color: CanvasText; }
 .hcPortraitGuard p, .hcPhotoHelp, .hcPhotoSelection.is-photo-error, .hcPhotoIntro, .hcPhotoFeedbackTitle, .hcPhotoFeedbackList { color: CanvasText; }
}

/* HC-CREATOR-PREVIEW-20260917-01 — only these two rooms change; existing theater/header/effects are sovereign. */
/* Five rows: fixed-purpose controls first, elastic brief feedback, and protected remaining photo space.
   Relative stage units own spacing; small px floors protect legibility and native touch targets. */
#stage_choice_photo .hcJourneyViewport { padding-inline: 5cqw; padding-top: .8cqh; padding-bottom: 8px; }
#stage_choice_photo .hcPhotoStageLayout {
 display: grid; grid-template-rows: minmax(44px,7cqh) auto auto auto minmax(0,1fr);
 height: 100%; min-height: 0; gap: 1.3cqh; align-content: stretch;
}
#stage_choice_photo .hcPhotoChooser { margin: 0; min-width: 0; }
#stage_choice_photo .hcPhotoChooseControl {
 width: min(76cqw,100%); min-height: 44px; padding: 1.25cqh 3cqw;
 font-size: clamp(22px,5.5cqw,32px); border-radius: 3cqw;
}
#stage_choice_photo .hcPhotoHelp { margin: 1cqh 0 0; font-size: clamp(12px,3.1cqw,16px); }
#stage_choice_photo .hcPhotoSelection { margin: 0; }
#stage_choice_photo .hcPhotoIntro {
 width: 100%; max-width: none; margin: .4cqh auto 0;
 font-size: clamp(17px,4.6cqw,28px); line-height: 1.2;
}
#stage_choice_photo .hcPhotoFeedback {
 width: 100%; margin: 0; padding: 1.2cqh 2.6cqw;
 border-radius: 2.8cqw; align-self: start; flex-shrink: 0;
}
#stage_choice_photo .hcPhotoFeedbackTitle {
 margin: 0; font-size: clamp(18px,4.5cqw,27px); line-height: 1.12;
}
#stage_choice_photo .hcPhotoFeedback[data-mode="success"] { text-align: center; }
#stage_choice_photo .hcPhotoFeedback[data-mode="info"] { text-align: center; }
#stage_choice_photo .hcPhotoFeedbackBody[hidden], #hcHeroPhotoFeedbackBody[hidden] { display: none; }
#stage_choice_photo .hcPhotoFeedbackList {
 margin: .7cqh 0 0; padding: 0; list-style: none; display: grid; gap: .6cqh;
 font-size: clamp(14px,3.55cqw,21px); line-height: 1.22;
}
#stage_choice_photo .hcPhotoPreviewSpace {
 min-width: 0; min-height: 0; padding: 1cqh 0 0;
 display: flex; align-items: flex-start; justify-content: center;
}
#stage_choice_photo .hcPreparedPhoto { max-width: 100%; max-height: 100%; border-radius: 2cqw; }
@container (max-height: 520px) {
 #stage_choice_photo .hcPhotoStageLayout { gap: .55cqh; }
 #stage_choice_photo .hcPhotoIntro { font-size: 16px; line-height: 1.08; }
 #stage_choice_photo .hcPhotoFeedback { padding-block: .65cqh; }
 #stage_choice_photo .hcPhotoFeedbackList { font-size: 13px; line-height: 1.12; }
 #stage_choice_photo .hcPhotoHelp { font-size: 12px; margin-top: .5cqh; }
}

/* An independent finale composition; no Player CSS classes, performers, or soundtrack controls. */
#stage_creator_preview .hcJourneyViewport {
 padding-inline: 4cqw; padding-top: .5cqh;
 padding-bottom: 8px;
}
.hcPersonalPreviewLayout {
 height: 100%; min-height: 0; display: grid;
 grid-template-rows: minmax(44px,7%) minmax(0,13%) minmax(0,1fr) minmax(0,11%) minmax(0,19%) minmax(18px,4%);
 gap: .5cqh; text-align: center; isolation: isolate;
}
#stage .hcPreviewHeading { margin: 0; z-index: 2; align-self: center; }
#stage .hcPreviewHeading h1 { font-size: clamp(15px,4cqw,25px); white-space: nowrap; letter-spacing: .01em; margin: 0; }
#stage .hcPreviewHeading .hcStageTitleRow { grid-template-columns: var(--hc-return-size) minmax(0,max-content) var(--hc-return-size); }
.hcPreviewIdentity { display: grid; grid-template-rows: 44% 56%; min-height: 0; z-index: 1; }
.hcPreviewOccasionSlot, .hcPreviewNameSlot, .hcPreviewBlessingSlot, .hcPreviewMessageSlot {
 min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center;
}
.hcPreviewFittedText {
 box-sizing: border-box; margin: 0; padding: 0; width: 100%; max-width: 100%;
 line-height: 1.1; overflow-wrap: anywhere; white-space: pre-wrap; text-wrap: balance;
}
.hcPreviewOccasion, .hcPreviewBlessing {
 background: radial-gradient(ellipse at 50% 45%,#bf69ff 0%,#a482ff 50%,#729aff 100%);
 -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hcPreviewOccasion { font-size: clamp(21px,6cqw,40px); text-transform: uppercase; letter-spacing: .075em; font-weight: 800; }
.hcPreviewName { font-size: clamp(27px,8cqw,53px); text-transform: uppercase; font-weight: 800; letter-spacing: .04em; color: #fbfdff; text-shadow: 0 0 .7cqw #b4e4ff,0 0 2cqw rgba(193,235,255,.65); }
.hcPreviewHeroArea { position: relative; min-width: 0; min-height: 0; isolation: isolate; overflow: hidden; }
.hcPreviewAura { position: absolute; inset: -5% -2%; background: radial-gradient(ellipse at 50% 53%,rgba(218,225,149,.28),rgba(194,186,82,.12) 32%,transparent 66%); pointer-events: none; }
.hcPreviewRays {
 position: absolute; left: 50%; top: 50%; width: 113%; height: 130%; object-fit: contain;
 transform: translate(-50%,-50%); opacity: .58; pointer-events: none; visibility: hidden;
}
.hcPreviewRays--second { transform: translate(-50%,-50%) rotate(67deg); opacity: .36; }
.hcPreviewOutline {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
 filter: drop-shadow(0 0 .6cqw rgba(240,245,225,.55)); pointer-events: none; visibility: hidden;
}
.hcPreviewRays.is-ready, .hcPreviewOutline.is-ready { visibility: visible; }
.hcPreviewPlaceholderCopy {
 position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
 width: 82%; pointer-events: none; color: #fff;
 text-shadow: 0 1px 3px #20222b,0 0 12px rgba(10,13,23,.6);
}
.hcPreviewPlaceholderCopy p { margin: 0; font-size: clamp(22px,6.3cqw,42px); line-height: 1.16; font-style: italic; font-weight: 750; }
.hcPreviewPlaceholderCopy small { display: block; margin-top: 1cqh; font-size: clamp(12px,3.1cqw,18px); font-weight: 600; }
.hcPreviewBlessingSlot { z-index: 1; }
.hcPreviewBlessing { font-size: clamp(18px,5cqw,33px); font-weight: 800; }
.hcPreviewSignature { min-height: 0; display: grid; grid-template-rows: repeat(3,minmax(0,1fr)); z-index: 1; }
.hcPreviewMessage { font-size: clamp(22px,6.1cqw,41px); font-weight: 800; color: #fafcff; text-shadow: 0 0 .6cqw #bddcff,0 0 1.3cqw rgba(174,220,255,.65); }
.hcPreviewFootnote { align-self: center; margin: 0; min-width: 0; font-size: clamp(11px,2.9cqw,16px); line-height: 1.15; color: #d5cce8; }
.hcPreviewFittedText[data-preview-overlong] { color: #ffe0ee; -webkit-text-fill-color: #ffe0ee; background: none; letter-spacing: 0; text-transform: none; text-shadow: none; }
@container (max-height: 520px) {
 .hcPersonalPreviewLayout { grid-template-rows: 44px 13% minmax(0,1fr) 11% 19% 18px; gap: .25cqh; }
 .hcPreviewPlaceholderCopy p { font-size: 20px; }
 .hcPreviewPlaceholderCopy small { font-size: 11px; margin-top: .4cqh; }
}
@media (forced-colors: active) {
 .hcPreviewOccasion, .hcPreviewBlessing { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; }
 .hcPreviewName, .hcPreviewMessage, .hcPreviewFootnote { color: CanvasText; text-shadow: none; }
 .hcPreviewAura, .hcPreviewRays { display: none; }
 #stage_choice_photo .hcPhotoFeedback { background: Canvas; border-color: CanvasText; }
}

/* HC-TOPBAR-PHASE1-20260918-01 — one permanent navigation lane; all geometry is stage-relative.
   Header height is unchanged: existing stage safe-area calculations remain authoritative. */
#stage_topControlBar.hcFixedTopBar {
 /* The existing outer 23/57/20 split and height are unchanged: Logo and Back never move.
    Middle artwork retains the old visual-seat dimensions, independent of the new hit seats.
    Original center = 98cqw * .57 = 55.86cqw; old tracks = 5/9 and 4/9, less 1.2cqw padding. */
 --hc-topbar-showcase-art-width: 29.833333cqw;
 --hc-topbar-creation-art-width: 23.626667cqw;
 --hc-topbar-purchase-seat-width: clamp(44px,12cqw,76px);
 grid-template-columns: 23% minmax(0,57%) 20%;
 padding-left: 1cqw; padding-right: 1cqw;
}
#stage_topControlBar.hcFixedTopBar #topControlLeftSlot,
#stage_topControlBar.hcFixedTopBar #topControlRightSlot { width: 100%; min-width: 0; flex-basis: auto; }
#stage_topControlBar.hcFixedTopBar #topControlCenterSlot { padding: 0; min-width: 0; }
.hcFixedTopBar #heroJourneyNavigation {
 /* Purchase and Forward retain their tracks even while invisible. The outer Logo/Back seats are unchanged. */
 height: 100%; display: grid;
 grid-template-columns: minmax(0,1.55fr) minmax(0,1fr) clamp(30px,8cqw,52px) clamp(40px,12cqw,76px);
 gap: 0; align-items: stretch; justify-content: stretch;
}
.hcFixedTopBar #heroCelebrationsLogoButton,
.hcFixedTopBar #heroJourneyNavigation > .hcTopNavigationButton,
.hcFixedTopBar #heroJourneyBackButton {
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 width: 100%; height: 100%; max-width: none; min-width: 0; min-height: 44px;
 box-sizing: border-box; gap: clamp(1px,.2cqh,2px); padding: clamp(2px,.5cqh,4px) .6cqw clamp(3px,.8cqh,6px);
 background: transparent; border: 0; box-shadow: none; border-radius: 1.4cqw;
 appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
 font: inherit; color: #f7f2ff; -webkit-text-fill-color: currentColor;
 pointer-events: auto; touch-action: manipulation; cursor: pointer;
}
.hcFixedTopBar .hcTopIconSeat {
 position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
 width: 100%; height: clamp(44px,14.5cqw,76px); min-width: 0; pointer-events: none;
}

/* Keep both approved icon groups at their former sizes while moving their middle seats once.
   The transparent visual boxes can exceed their hit seats; their children never intercept clicks. */
.hcFixedTopBar #heroSampleNavigationButton > .hcTopIconSeat { width: var(--hc-topbar-showcase-art-width); }
.hcFixedTopBar #heroCreatorNavigationButton > .hcTopIconSeat { width: var(--hc-topbar-creation-art-width); }
/* Purchase stays in the Phase 4 fixed grid seat. Availability changes only paint and interaction. */
#stage_topControlBar.hcFixedTopBar #heroPurchaseNavigationButton {
 display: flex; min-width: 0; visibility: hidden; pointer-events: none; cursor: default;
}
.hcFixedTopBar .hcPurchaseGlyph {
 display: block; color: #cbb4ff;
 font: 800 clamp(34px,10.5cqw,56px)/1 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 letter-spacing: 0; text-shadow: 0 0 10px rgba(147,125,245,.26);
 pointer-events: none; user-select: none;
}
@media (forced-colors: active) {
 .hcFixedTopBar .hcPurchaseGlyph { color: ButtonText; text-shadow: none; }
}

.hcFixedTopBar .heroCelebrationsLogoScaleWrapper { transform: none; width: 94%; }
.hcFixedTopBar .heroCelebrationsLogoGlowWrapper {
 padding: 0; margin: 0;
 filter: drop-shadow(0 0 4px rgba(247,241,255,0)) drop-shadow(0 0 14px rgba(171,140,255,0));
 transition: filter 650ms ease-in-out;
}
.hcFixedTopBar #heroCelebrationsLogoButton img { width: 100%; height: clamp(44px,14.5cqw,76px); object-fit: contain; }
.hcFixedTopBar #heroCelebrationsLogoButton.is-current-destination .heroCelebrationsLogoGlowWrapper {
 filter: drop-shadow(0 0 4px rgba(247,241,255,.95)) drop-shadow(0 0 14px rgba(171,140,255,.7));
}
.hcFixedTopBar .hcNavigationIconFrame { position: relative; width: 100%; max-width: none; height: 100%; }
.hcFixedTopBar #heroCreatorNavigationButton .hcNavigationIconFrame { width: 92%; height: 100%; max-width: none; aspect-ratio: auto; }
/* Keep the pair centered as one fixed footprint; the playback ring overlaps in FRONT of the Hero.
   Percentages refer to their unchanged mutual seat, not the viewport or the image's load state. */
.hcFixedTopBar #heroSampleNavigationButton .hcShowcaseArtworkSeat {
 display: block; isolation: isolate;
 --hc-showcase-portrait-width: 37%;
 --hc-showcase-play-width: min(47%,clamp(44px,14.5cqw,76px));
 --hc-showcase-overlap: 16%;
 --hc-showcase-pair-left: calc((100% - var(--hc-showcase-portrait-width) - var(--hc-showcase-play-width) + var(--hc-showcase-overlap)) / 2);
}
/* Permanent independent seats: neither late PNG decoding nor SVG factory replacement can reflow the pair. */
.hcFixedTopBar #heroSampleNavigationButton .hcNavigationIconFrame--hero {
 position: absolute; left: var(--hc-showcase-pair-left); top: 0; width: var(--hc-showcase-portrait-width); height: 100%; min-width: 0; z-index: 1;
}
#hcSampleNavigationImage[data-hc-nav-art-ready="false"] { visibility: hidden; }
.hcFixedTopBar .hcShowcasePlaybackBadge {
 position: absolute; left: calc(var(--hc-showcase-pair-left) + var(--hc-showcase-portrait-width) - var(--hc-showcase-overlap));
 top: 50%; width: var(--hc-showcase-play-width); height: auto; aspect-ratio: 1;
 margin: 0; pointer-events: none; z-index: 2;
 /* Only the fixed horizontal overlap changed; the glyph retains its size and vertical center. */
 transform: translateY(-50%);
}
.hcFixedTopBar .hcShowcasePlaybackBadge > svg {
 position: absolute; inset: 0; display: block; width: 100%; height: 100%;
 opacity: 1; transform: none; filter: none; transition: opacity 260ms ease-in-out;
}
.hcFixedTopBar .hcShowcasePlaybackBadge > svg[data-hc-playback-glyph] { opacity: 0; }
.hcFixedTopBar button[data-playback-kind="play"] .hcShowcasePlaybackBadge > svg[data-hc-playback-glyph="play"],
.hcFixedTopBar button[data-playback-kind="pause"] .hcShowcasePlaybackBadge > svg[data-hc-playback-glyph="pause"],
.hcFixedTopBar button[data-playback-kind="replay"] .hcShowcasePlaybackBadge > svg[data-hc-playback-glyph="replay"] { opacity: 1; }
.hcFixedTopBar .hcShowcasePlaybackBadge .heroControlAuraPath { opacity: 0; }
.hcFixedTopBar #heroJourneyBackButton .hcTopIconSeat svg { width: min(86%,64px); height: 100%; fill: #fff; }
.hcFixedTopBar #heroJourneyBackButton[hidden] { display: flex !important; visibility: hidden; opacity: 0; }
.hcFixedTopBar #heroJourneyBackButton[aria-hidden="true"] { pointer-events: none; }
.hcFixedTopBar #heroCelebrationsLogoButton:disabled,
.hcFixedTopBar #heroJourneyNavigation > .hcTopNavigationButton:disabled,
.hcFixedTopBar #heroJourneyBackButton:disabled { opacity: 1; cursor: default; }
.hcFixedTopBar button:focus { outline: none; }
.hcFixedTopBar button:focus-visible { outline: 2px solid #f1e4ff; outline-offset: -3px; }
/* The old native Player surface still owns its authored exit timer, not a second visible button. */
#stage .hcFixedTopBar #topControlCelebrationSlot {
 position: absolute; left: 0; top: 0; width: 0; height: 0; min-width: 0;
 overflow: hidden; visibility: hidden !important; pointer-events: none !important;
}
/* No inner-title return arrows in this phase, including generated short-screen stages. */
.hcJourneyStage [data-hc-stage-return] { display: none !important; }
@media (forced-colors: active) {
 .hcFixedTopBar #heroJourneyNavigation > .hcTopNavigationButton { border: 0; }
 .hcFixedTopBar .is-current-destination { outline: 2px solid Highlight; outline-offset: -3px; }
 .hcFixedTopBar #heroJourneyBackButton svg { fill: ButtonText; }
 .hcFixedTopBar .hcShowcasePlaybackBadge .heroControlFramePath { stroke: ButtonText; }
 .hcFixedTopBar .hcShowcasePlaybackBadge .heroControlCenterSymbol { fill: ButtonText; }
}


/* A very short desktop window uses the existing readable floors, not a smaller type fallback. */
@container (min-width:500px) and (max-height:440px) {
 .hcShowcaseGiftLine { font-size:26px; }
 .hcShowcaseAudience { font-size:24px; }
 .hcShowcaseGivers { font-size:22px; }
 #showStarterButton.is-example-invitation .starterButtonLabel { min-height:58px; font-size:24px; padding-block:11px; }
}
/* HC-FOOTER-20260921-01 — minimal, quiet permanent chrome, outside every Stage transition.
   Future Creator stages inherit .hcJourneyViewport; do not add a second bottom reserve. */
#stage[data-hc-keyboard-open="true"] { --hc-footer-safe-bottom: 0px; }
#stage_footerBar {
 position: absolute; z-index: 200; left: 0; right: 0; bottom: var(--hc-footer-keyboard-lift,0px);
 height: calc(var(--hc-footer-control-height,22px) + var(--hc-footer-safe-bottom,0px));
 box-sizing: border-box; padding: 0 max(6px,env(safe-area-inset-right,0px)) var(--hc-footer-safe-bottom,0px) max(6px,env(safe-area-inset-left,0px));
 display: flex; align-items: flex-start; justify-content: center; isolation: isolate;
 background: linear-gradient(to bottom,rgba(8,9,20,.74),rgba(8,9,20,.92));
 pointer-events: none; /* Only the three links are hit targets; transparent footer space never catches actions. */
}
.hcFooterNavigation {
 display: flex; align-items: center; justify-content: center; gap: clamp(2px,.8cqw,6px);
 height: var(--hc-footer-control-height,22px); max-width: 100%; min-width: 0;
}
#stage_footerBar .hcFooterLink {
 pointer-events: auto;
 display: inline-flex; align-items: center; justify-content: center;
 min-height: var(--hc-footer-control-height,22px); min-width: 44px; margin: 0; padding: 0 clamp(9px,2.2cqw,14px);
 box-sizing: border-box; border: 0; border-radius: 5px; background: transparent; box-shadow: none;
 font: 600 clamp(14px,2.5cqw,16px)/1.1 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 color: #eee6ff; -webkit-text-fill-color: currentColor; text-shadow: none; white-space: nowrap;
 appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
 touch-action: manipulation; cursor: pointer; opacity: 1; transition: color 180ms ease-in-out;
}
#stage_footerBar .hcFooterLink:disabled { color: #eee6ff; opacity: 1; cursor: default; }
#stage_footerBar .hcFooterLink.is-current-destination { color: #cfa6ff; font-weight: 700; }
#stage_footerBar .hcFooterLink:focus-visible { outline: 2px solid #e3d0ff; outline-offset: -3px; }
.hcFooterSeparator { color: #cfbfdc; font-size: 14px; line-height: 1; pointer-events: none; }
#stage.is-page-stage-transitioning #stage_footerBar .hcFooterLink { pointer-events: none; }
@media (hover:hover) and (pointer:fine) {
 #stage_footerBar .hcFooterLink:not(:disabled):hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
}
.hcUtilityLayout {
 height: 100%; min-height: 0; min-width: 0;
 display: grid; grid-template-rows: auto minmax(0,1fr); gap: 2cqw; text-align: center;
}
.hcUtilityLayout .hcJourneyHeading h1 { font-size: clamp(30px,7cqw,44px); }
.hcUtilityPlaceholder {
 align-self: center; justify-self: center; max-width: 24ch; margin: 0; padding: 0;
 font-size: clamp(22px,5.4cqw,30px); line-height: 1.3; font-weight: 600; color: #e8dcfa;
 text-wrap: balance;
}
@media (forced-colors:active) {
 #stage_footerBar { background: Canvas; }
 #stage_footerBar .hcFooterLink, .hcFooterSeparator, .hcUtilityPlaceholder { color: CanvasText; }
 #stage_footerBar .hcFooterLink.is-current-destination { outline: 1px solid Highlight; outline-offset: -4px; }
}

/* Phase 2A: footer softness changes its letters only, never the native hit target. */
#stage_footerBar .hcFooterText, #stage_footerBar .hcFooterSeparator { opacity: .20; }
#stage_footerBar[hidden], #stage[data-current-page-stage="stage_celebration"] #stage_footerBar { display: none; }
/* Per-room override: hidden neighboring rooms still reserve their own footer during the shared fade. */
#stage_celebration { --hc-footer-reserve: 0px; }

/* The Studio uses the full-size theater as its cqw/cqh reference, not a new nested query container. */
#stage_creator.hcCreatorStudioStage > .hcJourneyViewport { padding: 6px 4cqw 8px; }
.hcStudioLayout { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; gap: clamp(5px,.8cqh,9px); text-align: center; isolation: isolate; }
.hcStudioHeading { flex: 0 0 auto; position: relative; z-index: 2; margin: 0; }
.hcStudioHeading h1 { margin: 0; font-size: clamp(26px,6cqw,38px); line-height: 1.08; font-weight: 800; color: #faf8ff; letter-spacing: -.035em; text-wrap: balance; }
.hcStudioHeading h1:focus { outline: none; }
.hcStudioHint { margin: .35em 0 0; color: #e3d7f3; font-size: clamp(18px,4.5cqw,22px); line-height: 1.15; font-weight: 500; }
.hcStudioComposition { flex: 1 1 0; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(100px,1fr) auto; gap: clamp(4px,.6cqh,7px); min-height: 0; min-width: 0; }
.hcStudioIdentity { grid-row: 1; min-width: 0; display: grid; grid-template-rows: auto auto; }
.hcStudioEdit { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 4px 5px; border: 0; border-radius: 9px; appearance: none; -webkit-appearance: none; background: transparent; color: #faf8ff; font: inherit; line-height: 1.12; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; text-shadow: 0 1px 3px rgba(6,8,21,.8); }
.hcStudioEdit > span { display: block; min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: balance; }
.hcStudioEdit::after { content: ""; position: absolute; bottom: 1px; left: 40%; right: 40%; height: 1px; background: rgba(211,182,255,.38); pointer-events: none; }
.hcStudioOccasion { font-size: clamp(24px,6.1cqw,38px); font-weight: 800; color: #bf9dff; text-transform: uppercase; letter-spacing: .025em; }
.hcStudioName { min-height: 48px; font-size: clamp(32px,8.3cqw,53px); font-weight: 800; color: #fff; letter-spacing: .025em; text-shadow: 0 0 1.2cqw rgba(164,191,255,.4); }
.hcStudioMessages { grid-row: 3; display: grid; min-width: 0; grid-auto-rows: auto; }
.hcStudioMessage { font-size: clamp(22px,5.8cqw,35px); font-weight: 750; }
.hcStudioMessageFirst { color: #cba8ff; }
.hcStudioEdit[data-studio-empty="true"] { color: #d8c7ee; font-style: italic; font-weight: 600; }
.hcStudioEdit[data-studio-overlong="true"] { color: #e8d5ff; font-style: italic; }
.hcStudioHero { grid-row: 2; display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 100px; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 16px; background: transparent; color: #fbf8ff; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hcStudioHeroArt { flex: 1 1 0; position: relative; display: block; width: 100%; min-height: 60px; isolation: isolate; }
.hcStudioAura { position: absolute; inset: -3% 5%; background: radial-gradient(ellipse at 50% 48%,rgba(166,138,240,.24),rgba(95,113,205,.09) 42%,transparent 71%); pointer-events: none; }
#hcStudioOutline { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; visibility: hidden; filter: drop-shadow(0 0 6px rgba(196,192,255,.5)); pointer-events: none; }
#hcStudioOutline.is-ready { visibility: visible; }
.hcStudioHeroCopy { position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); font-size: clamp(22px,5.5cqw,33px); font-weight: 750; color: #fff; line-height: 1.16; text-shadow: 0 2px 4px #070c21,0 0 16px #070c21; pointer-events: none; }
.hcStudioHeroDetails { display: block; flex: 0 0 auto; margin-top: 3px; font-size: clamp(18px,4.4cqw,24px); line-height: 1.14; color: #e6d7ff; }
.hcStudioStandinNote { display: block; flex: 0 0 auto; margin-top: 3px; font-size: 18px; line-height: 1.15; color: #d8cde7; }
.hcStudioPhotoThumb { position: absolute; right: 4%; bottom: 4%; width: min(25cqw,155px,28%); height: auto; aspect-ratio: 4 / 5; max-height: 92%; border: 1px solid rgba(214,195,255,.8); border-radius: 8px; overflow: hidden; box-shadow: 0 0 10px rgba(166,120,233,.22); background: #111727; }
.hcStudioPhotoThumb img { width: 100%; height: 100%; display: block; object-fit: contain; }
.hcStudioPhotoThumb[hidden] { display: none; }
.hcStudioMessagesShortcut { display: none; }
.hcStudioEdit:focus-visible, .hcStudioHero:focus-visible { outline: 2px solid #dfcaff; outline-offset: -2px; background: rgba(117,81,166,.12); }
@media (hover:hover) and (pointer:fine) {
 .hcStudioEdit:hover, .hcStudioHero:hover { background: radial-gradient(ellipse,rgba(130,94,200,.13),transparent 75%); }
 .hcStudioEdit:hover::after { background: rgba(224,204,255,.8); }
}
/* Rearrange before shrinking: two columns keep the artwork and every edit target accessible. */
.hcCreatorStudioStage[data-studio-layout="wide"] .hcStudioComposition { grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); grid-template-rows: auto minmax(0,1fr); column-gap: 2cqw; }
.hcCreatorStudioStage[data-studio-layout="wide"] .hcStudioIdentity { grid-column: 2; grid-row: 1; }
.hcCreatorStudioStage[data-studio-layout="wide"] .hcStudioHero { grid-column: 1; grid-row: 1 / -1; }
.hcCreatorStudioStage[data-studio-layout="wide"] .hcStudioMessages { grid-column: 2; grid-row: 2; align-self: center; }
.hcCreatorStudioStage[data-studio-layout="wide"] .hcStudioOccasion { font-size: 24px; }
.hcCreatorStudioStage[data-studio-layout="wide"] .hcStudioName { font-size: 32px; }
.hcCreatorStudioStage[data-studio-layout="wide"] .hcStudioMessage { font-size: 22px; }
.hcCreatorStudioStage[data-studio-layout="wide"] .hcStudioHeroDetails { font-size: 18px; }
.hcCreatorStudioStage[data-studio-layout="wide"] .hcStudioHeroCopy { font-size: 22px; }
/* A tiny desktop window keeps the four inputs one click away instead of hiding type below the footer. */
.hcCreatorStudioStage[data-studio-layout="short"] .hcStudioComposition { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); grid-template-rows: auto minmax(0,1fr); gap: 4px 2cqw; }
.hcCreatorStudioStage[data-studio-layout="short"] .hcStudioHero { grid-column: 1; grid-row: 1 / -1; }
.hcCreatorStudioStage[data-studio-layout="short"] .hcStudioIdentity { grid-column: 2; grid-row: 1; }
.hcCreatorStudioStage[data-studio-layout="short"] .hcStudioMessages { display: none; }
.hcCreatorStudioStage[data-studio-layout="short"] .hcStudioMessagesShortcut { display: flex; grid-column: 2; grid-row: 2; align-self: center; min-height: 52px; padding: 8px; font-size: 22px; }
.hcCreatorStudioStage[data-studio-layout="short"] .hcStudioOccasion { font-size: 24px; }
.hcCreatorStudioStage[data-studio-layout="short"] .hcStudioName { font-size: 32px; }
.hcCreatorStudioStage[data-studio-layout="short"] .hcStudioHeroCopy { font-size: 22px; }
.hcCreatorStudioStage[data-studio-layout="short"] .hcStudioHeroDetails { font-size: 18px; }
/* Phase 2B: a generous centered native field, with a stable caret and truthful local-save feedback. */
.hcStudioNameLayout { align-items: center; }
.hcStudioNameLayout > .hcJourneyHeading { width: 100%; }
.hcStudioNameLayout .hcNameField { flex: 0 0 auto; width: 100%; margin-top: clamp(20px,5cqh,48px); padding: 0; }
.hcStudioNameLayout .hcNameField .hcEditLabel { font-size: clamp(24px,5.5cqw,32px); line-height: 1.15; }
.hcStudioNameLayout .hcNameInput { font-size: clamp(32px,8cqw,50px); min-height: 64px; padding: 10px 6px; }
.hcNameEditorHelp, .hcNameEditorStatus {
 flex: 0 0 auto; max-width: 100%; margin: 0; text-align: center;
 font: 500 clamp(20px,4.6cqw,25px)/1.2 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 color: #e6dafa; text-wrap: balance;
}
.hcNameEditorStatus { margin-top: .25em; }
#stage_choice_name.hcFocusedEditor :is(.hcNameEditorHelp,.hcNameEditorStatus) { visibility: hidden; }
#stage_choice_name.hcFocusedEditor .hcNameField.is-focused-field { margin-top: 0; }
#stage_choice_name.hcNameKeyboardTight .hcNameField.is-focused-field { top: 8px; padding: 6px; min-height: 64px; max-height: calc(100% - 16px); }
#stage_choice_name.hcNameKeyboardTight .hcEditLabel { display: none; }
@container (max-height: 480px) {
 .hcStudioNameLayout { gap: 8px; }
 .hcStudioNameLayout .hcNameField { margin-top: 8px; }
 .hcStudioNameLayout .hcNameInput { min-height: 56px; }
 .hcNameEditorHelp, .hcNameEditorStatus { font-size: 20px; }
}

.hcMessageField.is-studio-target { background: radial-gradient(ellipse,rgba(139,102,211,.16),transparent 74%); }
@media (forced-colors:active) {
 #stage_footerBar .hcFooterText, #stage_footerBar .hcFooterSeparator { opacity: 1; }
 .hcStudioEdit, .hcStudioHero, .hcStudioHint, .hcStudioHeroDetails, .hcStudioStandinNote { color: ButtonText; text-shadow: none; }
 .hcStudioEdit::after { background: ButtonText; }
 .hcStudioAura { display: none; }
}

/* HC-CREATION-GUIDE-20260922-01 — Creation-only subnavigation, not a second global header.
   Six legible chapters use two rows on phones. The sovereign cqw/cqh basis is unchanged. */
#stage { --hc-creation-nav-height: 88px; }
.hcCreationRoom { --hc-creation-nav-reserve: var(--hc-creation-nav-height,88px); }
#stage_creationNavigation {
 position: absolute; z-index: 150; left: 2cqw; right: 2cqw;
 top: calc(var(--hero-top-control-bar-height,104px) + env(safe-area-inset-top,0px));
 height: var(--hc-creation-nav-height,88px); display: grid;
 grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(44px,1fr));
 box-sizing: border-box; gap: 0; border-radius: 12px; padding: 0;
 background: linear-gradient(115deg,rgba(17,22,43,.95),rgba(25,18,47,.96));
 box-shadow: inset 0 1px 0 rgba(200,168,255,.17),inset 0 -1px 0 rgba(150,151,233,.15);
 font-family: var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
}
#stage_creationNavigation[hidden] { display: none !important; }
#stage_creationNavigation button {
 display: flex; justify-content: center; align-items: center; gap: 5px;
 min-width: 0; min-height: 44px; padding: 4px 2px; box-sizing: border-box;
 border: 1px solid transparent; border-radius: 10px; background: transparent;
 color: #eee6ff; font: 600 clamp(18px,3.15cqw,20px)/1.1 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 appearance: none; -webkit-appearance: none; cursor: pointer; touch-action: manipulation;
 pointer-events: auto; -webkit-tap-highlight-color: transparent; opacity: 1;
}
#stage_creationNavigation button:disabled { opacity: 1; cursor: default; }
/* Only the highlight/confirmation fades. Every chapter keeps its exact seat and legible label. */
#stage_creationNavigation button { position: relative; isolation: isolate; }
#stage_creationNavigation button::before {
 content: ""; position: absolute; inset: -1px; z-index: -1; border: 1px solid rgba(189,139,255,.72);
 border-radius: inherit; opacity: 0; pointer-events: none;
 background: radial-gradient(ellipse at 40% 0%,rgba(147,65,223,.60),rgba(63,43,109,.70));
 box-shadow: inset 0 1px 0 rgba(233,204,255,.22),0 0 9px rgba(154,84,241,.14);
 transition: opacity 320ms ease-in-out;
}
#stage_creationNavigation button.is-current-creation { color: #fff; }
#stage_creationNavigation button.is-current-creation::before { opacity: 1; }
.hcCreationStepNumber {
 display: flex; align-items: center; justify-content: center; flex: 0 0 22px;
 width: 22px; height: 22px; box-sizing: border-box; border: 1px solid #a09ac8; border-radius: 50%;
 font-size: 16px; line-height: 1; color: #e6d8ff;
}
.hcCreationStepNumber { position: relative; }
.hcCreationStepOrdinal, .hcCreationStepCheck { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 240ms ease-in-out; }
.hcCreationStepCheck { opacity: 0; font-weight: 800; }
#stage_creationNavigation .is-confirmed-creation .hcCreationStepOrdinal { opacity: 0; }
#stage_creationNavigation .is-confirmed-creation .hcCreationStepCheck { opacity: 1; }
#stage_creationNavigation .is-confirmed-creation .hcCreationStepNumber { border-color: #c5a3fc; background: rgba(146,80,215,.32); }
#stage_creationNavigation .is-current-creation .hcCreationStepNumber { border-color: #e8cfff; color: #fff; }
@container (max-width: 350px) {
 #stage_creationNavigation button { flex-direction: column; gap: 1px; padding: 1px 2px; }
 #stage_creationNavigation .hcCreationStepNumber { flex-basis: 18px; width: 18px; height: 18px; font-size: 14px; }
}
#stage_creationNavigation button:focus-visible { outline: 2px solid #eee2ff; outline-offset: -4px; }
#stage.is-page-stage-transitioning #stage_creationNavigation { pointer-events: none; }
#stage.is-page-stage-transitioning #stage_creationNavigation button { pointer-events: none; }

#stage .hcCreationRoom > .hcJourneyViewport { padding-top: 10px; padding-bottom: 8px; }
#stage .hcCreationQuestionLayout {
 display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100%;
 min-width: 0; min-height: 0; gap: 8px; padding: 0; margin: 0; text-align: center;
 font-family: var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
}
.hcCreationQuestionHeading { position: relative; flex: 0 0 auto; min-width: 0; margin: 0; text-align: center; }
.hcCreationQuestionHeading h1 {
 margin: 0; color: #faf7ff; font-size: clamp(27px,6.4cqw,38px); line-height: 1.09;
 letter-spacing: -.025em; font-weight: 800; text-wrap: balance; text-shadow: 0 1px 3px rgba(5,7,16,.7);
}
.hcCreationQuestionHeading h1:focus { outline: none; }
.hcCreationQuestionHeading p { margin: 5px 0 0; font-size: clamp(20px,4.6cqw,25px); line-height: 1.15; color: #e7d9f5; }
.hcCreationQuestionHeading .hcCreationEyebrow { margin: 0 0 5px; color: #c2a3ed; font-size: clamp(18px,3.8cqw,22px); line-height: 1.1; font-weight: 600; }
#stage .hcCreationQuestionLayout .hcCreationChoices {
 flex: 1 1 0; display: grid; min-width: 0; min-height: 0; height: auto; width: 100%;
 grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr));
 gap: 8px; margin: 0; padding: 3px;
}
.hcCreationChoices > [hidden], .hcCreationQuestionLayout > [hidden] { display: none !important; }
.hcCreationThemeCard {
 position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0;
 margin: 0; padding: 6px 4px; box-sizing: border-box; overflow: hidden;
 color: #fff; border: 1px solid #8176ab; border-radius: clamp(14px,3.5cqw,21px);
 background: radial-gradient(ellipse at 50% 42%,rgba(90,91,156,.32),rgba(20,22,47,.94));
 font: 700 clamp(22px,4.8cqw,29px)/1.1 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 appearance: none; -webkit-appearance: none; touch-action: manipulation; cursor: pointer;
 box-shadow: inset 0 1px 0 rgba(225,209,255,.13); -webkit-tap-highlight-color: transparent;
}
.hcCreationThemeArt { position: relative; display: block; flex: 1 1 0; width: 100%; min-height: 0; pointer-events: none; }
.hcCreationThemeArt img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; pointer-events: none; }
.hcCreationThemeArt.is-art-unavailable::before { content: "✦"; color: #cdb2ff; position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; }
.hcCreationThemeLabel { flex: 0 0 auto; display: block; max-width: 100%; padding: 5px 0 0; text-wrap: balance; }
.hcCreationThemeCard.is-selected-occasion { border-color: #e2baff; background: radial-gradient(ellipse at 45% 30%,rgba(142,80,220,.45),rgba(46,29,77,.95)); box-shadow: inset 0 0 0 1px rgba(211,163,255,.55),0 0 12px rgba(161,85,238,.25); }
.hcCreationCheck { display: none; position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: #d5b6ff; color: #321554; font-size: 21px; font-weight: 800; }
.hcCreationThemeCard.is-selected-occasion .hcCreationCheck { display: flex; }
.hcCreationThemeCard:focus-visible { outline: 2px solid #f2e2ff; outline-offset: -4px; }
#stage .hcCreationOccasionGrid .hcOccasionButton {
 min-height: 0; height: 100%; min-width: 0; padding: 8px 12px; width: 100%;
 font-size: clamp(22px,4.4cqw,28px); line-height: 1.1; position: relative;
 border-radius: 14px; justify-content: center; overflow: hidden;
}
/* Occasion choices use their existing purple highlight and aria-pressed state, without an extra checkmark. */
#stage .hcCreationQuestionLayout .hcCreationNext {
 flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 10px;
 width: 100%; min-height: 54px; margin: 0; padding: 10px 9px; border-radius: 17px;
 font-size: clamp(24px,5.2cqw,33px); line-height: 1.12; font-weight: 800;
}
.hcCreationNextLabel { min-width: 0; text-wrap: balance; }
#stage .hcCreationPager {
 flex: 0 0 44px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.4fr);
 align-items: center; width: 100%; min-width: 0; height: 44px; gap: 6px;
 font-size: 18px; line-height: 1; color: #ded2f7;
}
#stage .hcCreationPager[hidden] { display: none !important; }
.hcCreationPager button {
 min-width: 0; height: 44px; min-height: 44px; padding: 5px; margin: 0; border: 1px solid #9282b9; border-radius: 9px;
 background: rgba(32,28,56,.85); color: #f1e6ff; font: 600 18px/1.1 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 appearance: none; -webkit-appearance: none; cursor: pointer; touch-action: manipulation;
}
.hcCreationPager button:disabled { opacity: 1; border-color: transparent; background: transparent; cursor: default; }
.hcCreationPager button:focus-visible { outline: 2px solid #f1e2ff; outline-offset: -3px; }
.hcCreationQuestionTight .hcCreationQuestionHeading p { display: none; }

/* Native Name input keeps its existing ID/caret/draft bindings. No wrapping form or submit. */
#stage_choice_name.hcCreationRoom > .hcJourneyViewport { height: auto; bottom: var(--hc-footer-reserve,0px); }
#stage .hcCreationNameLayout .hcNameField,
#stage_choice_name.hcCreationRoom.hcFocusedEditor .hcNameField.is-focused-field {
 position: relative; flex: 0 0 auto; top: auto; left: auto; right: auto;
 width: 100%; min-height: 0; height: auto; max-height: none; margin: 2px 0 0; padding: 0;
 visibility: visible; box-sizing: border-box;
}
#stage .hcCreationNameLayout .hcEditLabel { font-size: clamp(22px,5.2cqw,30px); line-height: 1.12; margin: 0 0 7px; }
#stage .hcCreationNameLayout .hcNameInput { width: 100%; min-height: 64px; font-size: clamp(36px,9cqw,56px); padding: 8px 6px; border-radius: 12px; background: rgba(77,44,117,.15); }
#stage .hcCreationNameLayout .hcNameEditorHelp { font-size: clamp(20px,4.6cqw,25px); }
#stage .hcCreationNameLayout .hcNameEditorStatus { font-size: 18px; min-height: 22px; line-height: 1.15; margin: 0; flex: 0 0 auto; }
.hcCreationNameArt { flex: 1 1 0; display: flex; flex-direction: column; position: relative; min-height: 0; width: 100%; margin: 0; padding: 0; }
.hcCreationNameArt img { position: absolute; inset: 0 0 26px; width: 100%; height: calc(100% - 26px); object-fit: contain; max-width: none; max-height: none; pointer-events: none; }
.hcCreationNameArt figcaption { position: absolute; bottom: 0; left: 0; right: 0; color: #d5c7e9; font-size: 18px; line-height: 1.15; }
.hcCreationError { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.15; color: #f4c0dd; flex: 0 0 auto; }
#stage_choice_name.hcCreationNameCompact .hcCreationNameArt { display: none; }
#stage_choice_name.hcCreationNameCompact .hcCreationNameLayout > .hcCreationNext { margin-top: auto; }
#stage_choice_name.hcCreationNameCompact .hcNameEditorHelp { display: none; }
#stage_choice_name.hcCreationNameTight .hcCreationQuestionHeading,
#stage_choice_name.hcCreationNameTight .hcNameEditorStatus,
#stage_choice_name.hcCreationNameTight .hcEditLabel { display: none; }
#stage_choice_name.hcCreationNameTight .hcCreationNameLayout { gap: 5px; }
#stage_choice_name.hcCreationNameTight .hcNameInput { min-height: 54px; }

/* Very short desktop windows trade columns/ornament, never shrink all the words. */
@container (min-width: 600px) and (max-height: 620px) {
 #stage { --hc-creation-nav-height: 44px; }
 #stage_creationNavigation { grid-template-columns: repeat(6,minmax(0,1fr)); grid-template-rows: 44px; }
 #stage_creationNavigation .hcCreationStepNumber { display: none; }
}
@container (min-width: 500px) and (max-height: 450px) {
 #stage .hcCreationQuestionLayout:not(.hcCreationNameLayout) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 5px; }
 .hcCreationQuestionLayout:not(.hcCreationNameLayout) .hcCreationQuestionHeading { grid-column: 1 / -1; grid-row: 1; }
 #stage .hcCreationQuestionLayout .hcCreationChoices { grid-column: 1 / -1; grid-row: 2; }
 #stage .hcCreationQuestionLayout:not(.hcCreationNameLayout) .hcCreationPager { grid-column: 1; grid-row: 3; }
 #stage .hcCreationQuestionLayout:not(.hcCreationNameLayout) .hcCreationNext { grid-column: 2; grid-row: 3; min-height: 48px; font-size: 24px; }
 .hcCreationThemeArt { display: none; }
 .hcCreationThemeCard { justify-content: center; }
}
@media (forced-colors: active) {
 #stage_creationNavigation, .hcCreationThemeCard { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
 #stage_creationNavigation button { color: ButtonText; }
 #stage_creationNavigation button::before { display: none; }
 #stage_creationNavigation button.is-current-creation, .hcCreationThemeCard.is-selected-occasion { outline: 2px solid Highlight; outline-offset: -3px; }
 .hcCreationCheck { background: Highlight; color: HighlightText; }
 .hcCreationQuestionHeading h1, .hcCreationQuestionHeading p, .hcCreationNameArt figcaption, .hcCreationError { color: CanvasText; text-shadow: none; }
}
/* Tight seats spend the decorative eyebrow and generous spacing, not input legibility. */
#stage .hcCreationNameCompact .hcCreationQuestionHeading .hcCreationEyebrow { display: none; }
#stage .hcCreationNameCompact .hcCreationQuestionHeading h1 { font-size: clamp(27px,5.3cqw,32px); }
#stage .hcCreationNameCompact .hcNameField .hcEditLabel { font-size: 22px; }
#stage .hcCreationNameCompact .hcNameInput { font-size: 36px; min-height: 64px; padding: 8px 6px; }
@container (min-width:500px) and (max-height:450px) {
 .hcCreatorStudioStage.hcCreationRoom .hcStudioHeading h1 { font-size: 26px; }
 .hcCreatorStudioStage.hcCreationRoom .hcStudioHint { display: none; }
 .hcCreationRoom[data-hc-placeholder-key="messages"] .hcMessagesHeading h1 { font-size: 26px; line-height: 1.1; }
 .hcCreationRoom[data-hc-placeholder-key="messages"] .hcCreatorEditInstruction { font-size: 20px; margin-top: 4px; }
}
@container (min-width:500px) and (max-height:450px) {
 #stage .hcCreationRoom[data-hc-placeholder-key="messages"] .hcMessagesHeading h1 { font-size: 26px; line-height: 1.1; }
 #stage .hcCreationRoom[data-hc-placeholder-key="messages"] .hcCreatorEditInstruction { font-size: 20px; margin-top: 4px; }
}

/* HC-CREATION-MESSAGES-20260922-01 — scoped to four focused message rooms only.
   The permanent header, Creation section navigation, footer and theater units stay unchanged. */
#stage .hcMessageStage > .hcJourneyViewport { padding: 6px 4cqw 8px; }
#stage .hcMessageQuestionLayout { display: flex; flex-direction: column; gap: 7px; }
.hcMessageHeading { flex: 0 0 auto; min-width: 0; margin: 0; }
.hcMessageHeading h1 { margin: 6px 0 0; color: #faf7ff; font-size: clamp(26px,6.1cqw,36px); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 1px 3px rgba(5,7,16,.8); }
.hcMessageHeading h1:focus { outline: none; }
.hcMessageSteps { display: flex; justify-content: center; gap: 12px; height: 44px; }
.hcMessageSteps button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; min-width: 44px; min-height: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid #9986c4; border-radius: 50%; background: rgba(36,27,68,.65); color: #e9ddff; font: 700 22px/1 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif); cursor: pointer; appearance: none; touch-action: manipulation; }
.hcMessageSteps button[aria-current="step"] { border-color: #edd7ff; background: linear-gradient(135deg,#9543dc,#503995); color: #fff; box-shadow: 0 0 12px rgba(163,96,241,.3); cursor: default; opacity: 1; }
.hcMessageSteps .is-message-confirmed:not([aria-current]) { border-color: #d3aaff; background: rgba(109,60,167,.45); }
#stage .hcMessageStage .hcMessageEditor,
#stage .hcMessageStage.hcFocusedEditor .hcMessageEditor.is-focused-field {
 display: block; flex: 0 0 auto; position: relative; inset: auto; width: 100%; min-width: 0; min-height: 0;
 height: auto; max-height: none; padding: 0; margin: 0; visibility: visible; box-sizing: border-box;
}
#stage .hcMessageEditor .hcEditLabel { display: block; margin: 0 0 5px; font-size: clamp(20px,4.6cqw,25px); line-height: 1.13; letter-spacing: 0; color: #e8dbff; font-weight: 600; }
#stage .hcMessageEditor .hcMessageInput { min-height: 56px; width: 100%; padding: 10px 12px; margin: 0; border: 1px solid #b195de; border-radius: 13px; font-size: clamp(24px,5.7cqw,34px); line-height: 1.18; font-weight: 700; background: radial-gradient(ellipse at 45% 0%,rgba(123,53,179,.27),rgba(33,22,68,.5)); color: #fff; -webkit-text-fill-color: #fff; }
#stage .hcMessageEditor .hcMessageInput:focus { border-color: #f0d5ff; outline: 2px solid rgba(198,144,255,.75); outline-offset: 1px; background: rgba(72,35,118,.48); }
#stage .hcMessageEditor .hcMessageInput::placeholder { color: #bdacd5; -webkit-text-fill-color: #bdacd5; opacity: 1; font-size: 22px; font-style: italic; }
#stage .hcMessageEditor .hcTextUnderline { display: none; } /* The editor has its own clear border, not a duplicate underline. */
.hcMessageStatus { margin: 5px 0 0; min-height: 21px; color: #d9caed; font-size: 18px; line-height: 1.16; font-weight: 500; }
.hcMessageSuggestions { flex: 1 1 0; display: grid; width: 100%; min-width: 0; min-height: 0; gap: 7px; padding: 2px; box-sizing: border-box; }
.hcMessageSuggestion { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 56px; padding: 8px 30px 8px 12px; margin: 0; border: 1px solid #9284b7; border-radius: 13px; background: linear-gradient(110deg,rgba(33,44,79,.94),rgba(25,24,51,.94)); color: #fff; font: 650 clamp(22px,4.8cqw,29px)/1.12 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif); text-shadow: 0 1px 2px rgba(0,0,0,.6); cursor: pointer; appearance: none; -webkit-appearance: none; touch-action: manipulation; }
.hcMessageSuggestionText { display: block; width: 100%; min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.hcMessageSuggestionCheck { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 20px; opacity: 0; pointer-events: none; }
.hcMessageSuggestion[aria-pressed="true"] { border-color: #e2baff; background: linear-gradient(120deg,#7236ae,#49337a); box-shadow: inset 0 0 0 1px rgba(217,169,255,.35),0 0 10px rgba(161,85,238,.18); }
.hcMessageSuggestion[aria-pressed="true"] .hcMessageSuggestionCheck { opacity: 1; }
.hcMessageStage [hidden] { display: none !important; }
.hcMessagePager { flex: 0 0 44px; display: flex; align-items: center; justify-content: space-between; min-width: 0; width: 100%; height: 44px; gap: 10px; padding-inline: 3px; box-sizing: border-box; }
.hcMessagePageStatus { color: #dbcdee; font-size: 18px; line-height: 1.12; }
.hcMessageMore { min-height: 44px; padding: 5px 16px; margin: 0; border: 1px solid #a18abc; border-radius: 10px; background: rgba(55,33,82,.82); color: #f4eaff; font: 650 20px/1.15 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif); cursor: pointer; appearance: none; touch-action: manipulation; }
.hcMessageMore:focus-visible,.hcMessageSuggestion:focus-visible,.hcMessageSteps button:focus-visible { outline: 2px solid #f1e2ff; outline-offset: -4px; }
#stage .hcMessageQuestionLayout > .hcCreationNext { flex: 0 0 auto; grid-column: auto; grid-row: auto; min-height: 54px; font-size: clamp(24px,5.2cqw,33px); }
#stage .hcMessageStage[data-message-layout="wide"] .hcMessageQuestionLayout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 7px 12px; }
.hcMessageStage[data-message-layout="wide"] .hcMessageHeading { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 10px; }
.hcMessageStage[data-message-layout="wide"] .hcMessageHeading h1 { margin: 0; flex: 1; text-align: left; font-size: 26px; }
.hcMessageStage[data-message-layout="wide"] .hcMessageSteps { gap: 5px; flex: 0 0 auto; }
.hcMessageStage[data-message-layout="wide"] .hcMessageSteps button { flex-basis: 44px; }
#stage .hcMessageStage[data-message-layout="wide"] .hcMessageEditor { grid-column: 1; grid-row: 2; align-self: center; }
.hcMessageStage[data-message-layout="wide"] .hcMessageSuggestions { grid-column: 2; grid-row: 2; height: 100%; }
.hcMessageStage[data-message-layout="wide"] .hcMessagePager { grid-column: 1; grid-row: 3; gap: 6px; padding: 0; }
.hcMessageStage[data-message-layout="wide"] .hcMessageMore { padding-inline: 8px; }
#stage .hcMessageStage[data-message-layout="wide"] .hcCreationNext { grid-column: 2; grid-row: 3; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageQuestionLayout { gap: 5px; }
.hcMessageStage[data-message-density="compact"] .hcMessageHeading h1 { font-size: 26px; }
.hcMessageStage[data-message-density="compact"] .hcMessageStatus { display: none; }
/* When the native keyboard leaves too little room for choices, retain the SAME input and Next.
   Dismiss the keyboard to restore the choices; never reduce the type or detach the field. */
#stage .hcMessageStage.hcFocusedEditor > .hcJourneyViewport { height: auto; bottom: var(--hc-footer-reserve,0px); }
.hcMessageKeyboardEditingOnly .hcMessageSuggestions,.hcMessageKeyboardEditingOnly .hcMessagePager,.hcMessageKeyboardEditingOnly .hcMessageSteps { display: none; }
#stage .hcMessageKeyboardEditingOnly .hcCreationNext { margin-top: auto; }
@media (hover:hover) and (pointer:fine) {
 .hcMessageSuggestion:hover { border-color: #e3c4ff; }
 .hcMessageMore:hover { border-color: #e3c4ff; background: rgba(96,53,141,.8); }
}
@media (forced-colors:active) {
 .hcMessageSuggestion,.hcMessageMore,.hcMessageSteps button,#stage .hcMessageEditor .hcMessageInput { color: ButtonText; -webkit-text-fill-color: ButtonText; background: Canvas; border-color: ButtonText; box-shadow: none; }
 .hcMessageSuggestion[aria-pressed="true"],.hcMessageSteps button[aria-current="step"] { outline: 2px solid Highlight; outline-offset: -3px; }
 .hcMessageHeading h1,.hcMessageStatus,.hcMessagePageStatus,#stage .hcMessageEditor .hcEditLabel { color: CanvasText; text-shadow: none; }
}
/* Full readable message when resting; the SAME native single-line input edits on focus.
   The visual mirror never receives clicks and is hidden from assistive technology. */
.hcMessageInputShell { position: relative; display: grid; grid-template-columns: minmax(0,1fr); width: 100%; min-width: 0; }
#stage .hcMessageInputShell .hcMessageInput { grid-area: 1 / 1; height: 100%; }
.hcMessageValue { grid-area: 1 / 1; align-self: center; box-sizing: border-box; min-width: 0; width: 100%; margin: 0; padding: 10px 13px; font: 700 clamp(24px,5.7cqw,34px)/1.18 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif); color: #fff; letter-spacing: -.015em; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hcMessageInputShell:not(.has-message-value) .hcMessageValue { visibility: hidden; }
#stage .hcMessageInputShell.has-message-value .hcMessageInput:not(:focus) { color: transparent; -webkit-text-fill-color: transparent; }
.hcMessageInput:focus + .hcMessageValue { visibility: hidden; }
@media (forced-colors: active) { .hcMessageValue { color: CanvasText; } }
/* Short phones keep the numbered message selector and descriptive field label;
   drop the duplicate headline before reducing choices or any readable type. */
.hcMessageStage[data-message-density="compact"][data-message-layout="portrait"] .hcMessageHeading h1 { display: none; }
.hcMessageStage[data-message-density="compact"] .hcMessageValue { -webkit-line-clamp: 2; font-size: 24px; line-height: 1.16; padding-block: 8px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageQuestionLayout { gap: 3px; }
.hcMessageStage[data-message-density="compact"] .hcMessageSuggestion { padding-block: 4px; }

/* HC-CREATION-PHOTO-20260922-01 — full-size native photo step, one current-photo gate, no new art.
   Preserve Stage/container coordinates, press guard, and the existing header/footer seat dimensions. */
#stage_topControlBar.hcFixedTopBar #heroPurchaseNavigationButton { opacity: 0; transition: opacity 650ms ease-in-out; }
#stage_topControlBar.hcFixedTopBar #heroPurchaseNavigationButton[data-hc-purchase-state="available"] { opacity: 1; }
#stage_topControlBar.hcFixedTopBar #heroPurchaseNavigationButton:not(:disabled) { cursor: pointer; }
#stage_topControlBar #heroPurchaseNavigationButton.is-current-destination .hcPurchaseGlyph { color: #f3e7ff; text-shadow: 0 0 12px rgba(190,140,255,.65); }
#stage #stage_choice_photo.hcGuidedPhotoStage > .hcJourneyViewport { padding: 7px 4cqw 8px; }
#stage #stage_choice_photo .hcGuidedPhotoLayout {
 display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(88px,1fr) auto auto;
 height: 100%; min-height: 0; min-width: 0; gap: 8px; margin: 0; padding: 0; text-align: center;
}
#stage_choice_photo .hcGuidedPhotoHeading { grid-column: 1; grid-row: 1; }
#stage_choice_photo .hcGuidedPhotoHeading h1 { font-size: clamp(28px,6.4cqw,38px); }
#stage_choice_photo .hcGuidedPhotoHeading p { font-size: clamp(20px,4.5cqw,25px); }
#stage_choice_photo .hcPhotoChooser { grid-column: 1; grid-row: 2; }
/* A single full-width native chooser, centered in empty/checking/accepted/rejected states. */
#stage_choice_photo .hcPhotoChooseRow { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; align-items: stretch; }
#stage #stage_choice_photo .hcPhotoChooseControl {
 width: 100%; min-width: 0; min-height: 54px; margin: 0; padding: 10px 12px; gap: 9px;
 font-size: clamp(24px,5.3cqw,32px); line-height: 1.1; font-weight: 750; border-radius: 16px;
}
#stage_choice_photo .hcPhotoChooseControl svg { width: 24px; height: 24px; flex: 0 0 24px; stroke: currentColor; fill: none; pointer-events: none; }
#stage_choice_photo .hcPhotoChooseControl:focus-within { outline: 2px solid #f1e0ff; outline-offset: -4px; }
#stage #stage_choice_photo .hcPhotoHelp { margin: 6px 0 0; font-size: 18px; line-height: 1.15; color: #dbceec; }
#stage #stage_choice_photo .hcPhotoSelection { font-size: 20px; line-height: 1.15; margin: 0; }
#stage_choice_photo .hcPhotoWorkspace {
 grid-column: 1; grid-row: 3; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; padding: 0; gap: 5px;
}
#stage #stage_choice_photo .hcPhotoPreviewSpace {
 position: relative; flex: 1 1 0; min-width: 0; min-height: 0; width: 100%; margin: 0; padding: 5px 0;
 display: flex; align-items: center; justify-content: center; overflow: hidden;
 background: radial-gradient(ellipse at 50% 45%,rgba(133,84,209,.16),transparent 70%);
}
#stage_choice_photo .hcPhotoPreviewFallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; color: #d8bdf6; font-size: 24px; line-height: 1.2; }
#stage_choice_photo .hcPhotoPreviewFallback[hidden], #stage_choice_photo .hcPreparedPhoto[hidden] { display: none; }
#stage #stage_choice_photo .hcPreparedPhoto { max-width: 100%; max-height: 100%; object-fit: contain; border: 2px solid #c5a2fb; border-radius: 14px; box-shadow: 0 0 14px rgba(147,100,224,.24); }
#stage_choice_photo .hcPhotoPreviewCaption { flex: 0 0 auto; min-width: 0; font-size: 20px; line-height: 1.15; color: #e2cff7; text-wrap: balance; }
#stage #stage_choice_photo .hcPhotoFeedback { grid-column: 1; grid-row: 4; width: 100%; margin: 0; padding: 9px 12px; border-radius: 14px; text-align: center; }
#stage #stage_choice_photo .hcPhotoFeedbackTitle { margin: 0; font-size: clamp(24px,5cqw,30px); line-height: 1.13; }
#stage #stage_choice_photo .hcPhotoFeedbackList { margin: 6px 0 0; padding: 0; list-style: none; gap: 4px; font-size: 20px; line-height: 1.18; }
#stage #stage_choice_photo .hcPhotoFeedback[data-mode="warning"] { background: rgba(49,33,88,.7); border-color: #b58bf2; }
#stage #stage_choice_photo .hcPhotoFeedback[data-mode="success"] { background: rgba(20,57,55,.75); border-color: #91dbc7; }
#stage #stage_choice_photo .hcPhotoFeedback[data-mode="info"] { background: rgba(33,28,67,.65); }
#stage #stage_choice_photo .hcCreationPhotoNext { grid-column: 1; grid-row: 5; min-height: 54px; width: 100%; font-size: clamp(24px,5.2cqw,33px); line-height: 1.12; padding: 10px 12px; margin: 0; }
#stage_choice_photo .hcCreationPhotoNext:disabled { cursor: default; opacity: 1; background: linear-gradient(120deg,#47316b,#34305c); color: #eadcfb; border-color: #8e79ad; box-shadow: none; }
#stage #stage_choice_photo[data-photo-density="compact"] .hcGuidedPhotoLayout { gap: 5px; }
#stage_choice_photo[data-photo-density="compact"] .hcGuidedPhotoHeading p,
#stage #stage_choice_photo[data-photo-density="compact"] .hcPhotoHelp { display: none; }
#stage #stage_choice_photo[data-photo-density="compact"] .hcPhotoChooseControl { min-height: 50px; font-size: 24px; padding: 8px; }
#stage #stage_choice_photo[data-photo-density="compact"] .hcPhotoFeedback { padding: 6px 9px; }
#stage #stage_choice_photo[data-photo-density="compact"] .hcPhotoFeedbackTitle { font-size: 24px; }
#stage #stage_choice_photo[data-photo-layout="wide"] .hcGuidedPhotoLayout {
 grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); grid-template-rows: auto auto minmax(0,1fr) auto; gap: 7px 12px;
}
#stage_choice_photo[data-photo-layout="wide"] .hcGuidedPhotoHeading { grid-column: 1 / -1; grid-row: 1; }
#stage_choice_photo[data-photo-layout="wide"] .hcPhotoWorkspace { grid-column: 1; grid-row: 2 / 5; }
#stage_choice_photo[data-photo-layout="wide"] .hcPhotoChooser { grid-column: 2; grid-row: 2; }
#stage #stage_choice_photo[data-photo-layout="wide"] .hcPhotoFeedback { grid-column: 2; grid-row: 3; align-self: center; }
#stage #stage_choice_photo[data-photo-layout="wide"] .hcCreationPhotoNext { grid-column: 2; grid-row: 4; font-size: 24px; }
#stage_choice_photo[data-photo-layout="wide"] .hcPhotoChooseControl svg { display: none; }
.hcPurchaseLayout { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 12px; text-align: center; }
.hcPurchaseLayout .hcJourneyHeading h1 { font-size: clamp(28px,6.4cqw,40px); }
/* Existing flexible viewport + compact summary. Literal text remains selectable; no nested scrolling. */
.hcOrderSummary { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(5px,1.1cqh,12px); }
.hcOrderSummary p, .hcOrderSummary h2 { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.hcOrderSeal { width: clamp(30px,7cqw,44px); height: clamp(30px,7cqw,44px); flex: 0 0 auto; color: #d4adff; filter: drop-shadow(0 0 8px #8d54ca); }
.hcOrderSummary h2 { font-size: clamp(21px,4.4cqw,29px); color: #f5edff; line-height: 1.15; }
.hcOrderOccasion { font-size: clamp(16px,3.5cqw,23px); color: #e7d5f9; line-height: 1.12; }
.hcOrderRecipient { font-size: clamp(24px,5.8cqw,38px); color: #fff; line-height: 1.1; }
.hcOrderThemeLine { font-size: clamp(14px,2.8cqw,18px); line-height: 1.15; color: #dcc0f7; }
#hcOrderTheme { text-transform: capitalize; }
.hcOrderMessage { white-space: pre-wrap; font-size: clamp(16px,3.5cqw,23px); line-height: 1.2; color: #f4e8ff; }
.hcOrderRecord { font-size: clamp(13px,2.6cqw,16px); line-height: 1.2; color: #d9bcef; }
#hcOrderId { font-family: ui-monospace,monospace; user-select: all; }
.hcOrderTestNote { font-size: clamp(14px,2.9cqw,18px); line-height: 1.15; color: #e7d5f9; }
#stage .hcPurchaseLayout > .hcCreationNext { flex: 0 0 auto; min-height: 48px; font-size: clamp(22px,4.8cqw,30px); }
.hcOrderNotice { position: absolute; z-index: 1000; left: 5%; right: 5%; bottom: calc(var(--hcFooterHeight, 38px) + 8px); margin: 0; padding: 10px 14px; border: 1px solid #bd89ef; border-radius: 12px; background: #211236; color: #fff3ff; text-align: center; font-size: 18px; line-height: 1.25; pointer-events: none; }
.hcOrderNotice[hidden] { display: none; }
@container (max-height: 600px) {
 .hcOrderSeal { display: none; }
 .hcOrderSummary { gap: 5px; }
 .hcOrderMessage { font-size: clamp(15px,3.2cqw,20px); }
 .hcOrderRecipient { font-size: clamp(22px,5cqw,30px); }
 .hcPurchaseLayout { gap: 6px; }
}
@media (forced-colors:active) {
 #stage #stage_choice_photo .hcCreationPhotoNext:disabled { color: ButtonText; background: Canvas; border-color: ButtonText; }
 #stage #stage_choice_photo .hcPhotoFeedback, #stage #stage_choice_photo .hcPreparedPhoto { background: Canvas; border-color: CanvasText; }
 .hcPhotoPreviewCaption, .hcPhotoPreviewFallback, .hcOrderSummary p, .hcOrderSummary h2 { color: CanvasText; text-shadow: none; }
}

/* Compact photos retain the same single centered chooser. */
#stage_choice_photo[data-photo-density="compact"] .hcPhotoChooseControl svg { display: none; }

/* On the smallest phones, feedback already identifies a selected photo. Spend its duplicate
   caption, not the photo, type size, controls, or the explicit Example label on the empty state. */
#stage #stage_choice_photo[data-photo-tiny="true"]:not([data-photo-state="empty"]) .hcGuidedPhotoLayout { grid-template-rows: auto auto minmax(60px,1fr) auto auto; }
#stage_choice_photo[data-photo-tiny="true"]:not([data-photo-state="empty"]) .hcPhotoPreviewCaption { display: none; }

/* HC-CREATION-REVIEW-POLISH-20260922-01 — Review has no visible title/help row.
   Keep its accessible name/focus anchor; the reclaimed height goes to its real content. */
#stage_creator .hcReviewAccessibleTitle {
 position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0;
 border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none;
}
/* Accepted photo stays on the right. Give it its own space, not a mask over the edit label.
   All sizing uses the original Stage/container; no new query container or stretched photo. */
#stage_creator[data-studio-photo="ready"] #hcStudioOutline { left: 2%; right: 34%; width: 64%; }
#stage_creator[data-studio-photo="ready"] .hcStudioHeroCopy { left: 2%; right: 34%; }
#stage_creator[data-studio-photo="ready"] .hcStudioAura { right: 30%; }
#stage_creator:is([data-studio-layout="wide"],[data-studio-layout="short"])[data-studio-photo="ready"] .hcStudioPhotoThumb {
 right: 2%; width: min(27cqw,155px,44%); height: auto; max-height: 92%;
}
#stage_creator:is([data-studio-layout="wide"],[data-studio-layout="short"])[data-studio-photo="ready"] #hcStudioOutline { width: 52%; right: 46%; }
#stage_creator:is([data-studio-layout="wide"],[data-studio-layout="short"])[data-studio-photo="ready"] .hcStudioHeroCopy { right: 46%; }
/* On the narrowest split layout the label sits above BOTH pictures, never over the photo. */
@container (max-width: 380px) {
 #stage_creator:is([data-studio-layout="wide"],[data-studio-layout="short"])[data-studio-photo="ready"] .hcStudioHeroCopy { left: 0; right: 0; top: 0; transform: none; }
 #stage_creator:is([data-studio-layout="wide"],[data-studio-layout="short"])[data-studio-photo="ready"] #hcStudioOutline { top: 58px; height: calc(100% - 58px); }
 #stage_creator:is([data-studio-layout="wide"],[data-studio-layout="short"])[data-studio-photo="ready"] .hcStudioPhotoThumb { max-height: calc(96% - 58px); }
}
/* Only suggestions are locked while they fade. Next, Back, input and section navigation stay usable. */
.hcMessageSuggestions[aria-busy="true"] { pointer-events: none; }
.hcMessageStage [data-hc-message-more][aria-disabled="true"] { cursor: default; }

/* Phase 8: exact mirrored Back artwork, independent fixed Forward track; no layout animation. */
#stage_topControlBar.hcFixedTopBar #heroJourneyForwardButton { visibility: hidden; pointer-events: none; }
.hcFixedTopBar #heroJourneyForwardButton .hcTopIconSeat { width: 18.4cqw; }
.hcFixedTopBar #heroJourneyForwardButton .hcTopIconSeat svg { width: min(86%,64px); height: 100%; fill: #fff; }
.hcFixedTopBar #heroJourneyForwardButton[aria-hidden="true"] { pointer-events: none; }
#stage[data-hc-history-pending="true"] .pageStage :is(button,input,select,textarea,[role="button"]),
#stage[data-hc-history-pending="true"] #stage_creationNavigation button,
#stage[data-hc-history-pending="true"] #stage_footerBar button { pointer-events: none; }
@media (forced-colors:active) {
 .hcFixedTopBar #heroJourneyForwardButton svg { fill: ButtonText; }
}

/* HC-CREATION-CLARITY-20260923-01 — UI only. Original Stage query-container and all fixed chrome seats remain unchanged. */
.hcClarityAccessible {
 position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
 padding: 0 !important; margin: 0 !important; border: 0 !important; clip-path: inset(50%);
 overflow: hidden !important; white-space: nowrap !important; pointer-events: none;
}
#stage .hcCreationNext[hidden], #stage .hcPhotoFeedback[hidden] { display: none !important; }
/* Label-only Creation navigation. A completed chapter gains a small check in a fixed corner, never a number or layout shift. */
#stage_creationNavigation button { flex-direction: row; gap: 0; padding: 4px 5px; }
.hcCreationChapterMark { position: absolute; right: 5px; top: 4px; color: #d8b8ff; font-size: 13px; line-height: 1; opacity: 0; pointer-events: none; transition: opacity 240ms ease-in-out; }
#stage_creationNavigation .is-confirmed-creation .hcCreationChapterMark { opacity: 1; }
/* The name is an unmistakable native field, not an underline or a purple selection card. */
#stage .hcNameEntry {
 display: grid; grid-template-columns: minmax(0,1fr) 46px; align-items: stretch; position: relative;
 width: min(100%, 520px); min-width: 0; margin: 0 auto; border: 1px solid rgba(194,168,240,.65);
 border-radius: 16px; background: linear-gradient(130deg,rgba(18,29,52,.88),rgba(35,25,58,.82));
 box-shadow: inset 0 1px 0 rgba(217,198,253,.15),0 0 14px rgba(121,82,195,.14);
}
#stage .hcNameEntry:focus-within { border-color: #e0c5ff; box-shadow: 0 0 0 1px rgba(214,177,255,.35),0 0 18px rgba(151,102,227,.24); }
#stage .hcNameEntry .hcNameInput {
 grid-column: 1; width: 100%; min-width: 0; min-height: 64px; margin: 0; padding: 9px 8px;
 font: 800 clamp(32px,8.6cqw,54px)/1.13 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 color: #faf6ff; -webkit-text-fill-color: #faf6ff; text-align: center; letter-spacing: .01em;
 border: 0; border-radius: 15px 0 0 15px; outline: none; background: transparent; box-shadow: none;
}
#stage .hcNameEntry .hcNameInput::placeholder { color: #c2afd8; -webkit-text-fill-color: #c2afd8; opacity: .66; font-style: italic; }
#stage .hcNameConfirm {
 grid-column: 2; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; margin: 5px 3px 5px 0;
 border: 0; border-radius: 11px; color: #dac2ff; background: rgba(126,70,195,.14);
 font: 700 34px/1 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif); appearance: none; cursor: pointer; touch-action: manipulation;
}
#stage .hcNameConfirm:focus-visible { outline: 2px solid #e4caff; outline-offset: -2px; }
.hcNameConfirmGlyph { display: block; pointer-events: none; }
#stage .hcNameConfirm[data-name-feedback="saved"] { color: #8de6b4; }
#stage .hcNameConfirm[data-name-feedback="saved"] .hcNameConfirmGlyph { font-size: 25px; }
#stage .hcNameField .hcTextUnderline, #stage .hcReviewNameField .hcTextUnderline { display: none; }
#stage .hcReviewNameField { position: relative; width: 100%; min-width: 0; margin: 2px 0; padding: 0; }
#stage_creator .hcReviewNameField .hcNameEntry { width: min(100%, 430px); background: rgba(35,28,58,.42); }
#stage_creator .hcReviewNameInput { min-height: 58px; }
#stage_creator:is([data-studio-layout="wide"],[data-studio-layout="short"]) .hcNameEntry { grid-template-columns: minmax(0,1fr) 44px; }
#stage_creator:is([data-studio-layout="wide"],[data-studio-layout="short"]) .hcReviewNameInput { font-size: 30px; min-height: 52px; }
#stage_creator.hcReviewNameEditingOnly .hcStudioHero,
#stage_creator.hcReviewNameEditingOnly .hcStudioOccasion,
#stage_creator.hcReviewNameEditingOnly .hcStudioMessages,
#stage_creator.hcReviewNameEditingOnly .hcStudioMessagesShortcut { display: none !important; }
#stage_creator.hcReviewNameEditingOnly .hcStudioComposition { display: flex; align-items: flex-start; padding-top: 8px; }
#stage_creator.hcReviewNameEditingOnly .hcStudioIdentity { display: block; width: 100%; }
#stage_creator.hcReviewNameEditingOnly .hcReviewNameField { position: relative; inset: auto; visibility: visible; width: 100%; }
/* Four message purposes, rather than ambiguous numbered circles. */
#stage .hcMessageQuestionLayout { gap: 7px; }
.hcMessageHeading { flex: 0 0 auto; }
#stage .hcMessageSteps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; width: 100%; gap: 5px; }
#stage .hcMessageSteps button { flex: none; width: 100%; min-width: 0; min-height: 44px; height: 44px; border-radius: 13px; padding: 4px 2px; font-size: 19px; font-weight: 650; }
#stage .hcMessageEditor .hcEditLabel { text-align: left; padding-left: 4px; font-size: 18px; font-weight: 500; color: #d7c3ee; margin-bottom: 4px; }
#stage .hcMessageEditor .hcMessageInput { min-height: 52px; padding: 9px 12px; background: rgba(9,17,35,.86); border: 1px solid #7f769a; color: #fff; -webkit-text-fill-color: #fff; font-size: clamp(22px,4.4cqw,27px); font-weight: 600; border-radius: 13px; }
#stage .hcMessageEditor .hcMessageInput:focus { background: rgba(15,22,45,.97); border-color: #d2b9f4; outline: 1px solid #d2b9f4; outline-offset: 0; }
#stage .hcMessageEditor .hcMessageInput::placeholder { font-size: 20px; color: #b8afc8; -webkit-text-fill-color: #b8afc8; }
#stage .hcMessageValue { padding: 9px 13px; font-size: clamp(22px,4.4cqw,27px); font-weight: 600; line-height: 1.18; -webkit-line-clamp: 2; }
#stage .hcMessageStatus { display: none; } /* The literal draft still saves; do not repeat visual instructions between choices. */
#stage .hcMessageSuggestions { flex: 1 1 0; min-height: 0; align-content: start; gap: 5px; padding: 2px; }
#stage .hcMessageSuggestion { min-height: 44px; height: auto; align-self: stretch; padding: 5px 24px 5px 8px; border-radius: 12px; font-size: clamp(20px,4.2cqw,26px); line-height: 1.12; font-weight: 650; }
#stage .hcMessageSuggestion[aria-pressed="true"] { background: linear-gradient(115deg,#7936b9,#4d337e); border-color: #dcbbff; }
#stage .hcMessageSuggestionCheck { right: 6px; font-size: 18px; }
#stage .hcMessageSets { flex: 0 0 44px; display: flex; height: 44px; justify-content: center; margin: 0; padding: 0; }
.hcMessageSetButtons { display: flex; justify-content: center; gap: 4px; width: 100%; min-width: 0; }
#stage .hcMessageSet { min-width: 0; width: 44px; height: 44px; padding: 0; border: 1px solid #9c88b8; border-radius: 50%; background: transparent; color: #d9c9f0; font: 600 18px/1 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif); cursor: pointer; touch-action: manipulation; }
#stage .hcMessageSet[aria-pressed="true"] { background: rgba(137,78,201,.35); border-color: #d3acf9; color: #fff; cursor: default; }
#stage .hcMessageSet:focus-visible { outline: 2px solid #edddff; outline-offset: -3px; }
#stage .hcMessageKeyboardEditingOnly .hcMessageSteps { display: none; }
/* The photo is a labelled teaching illustration made of the exact hosted photo + live readable callouts. */
#stage #stage_choice_photo .hcGuidedPhotoLayout { display: flex; flex-direction: column; gap: 8px; }
#stage_choice_photo .hcPhotoChooser { flex: 0 0 auto; }
#stage_choice_photo .hcPhotoWorkspace { flex: 1 1 0; min-height: 60px; }
#stage #stage_choice_photo .hcPhotoFeedback { flex: 0 0 auto; border: 0; padding: 2px 4px; box-shadow: none; background: transparent; border-radius: 0; }
#stage #stage_choice_photo .hcPhotoFeedback[data-mode] { background: transparent; }
#stage #stage_choice_photo .hcPhotoFeedbackTitle { font-size: 23px; }
#stage #stage_choice_photo .hcPhotoFeedback[data-mode="success"] .hcPhotoFeedbackTitle { color: #9de6c8; }
#stage #stage_choice_photo .hcCreationPhotoNext { flex: 0 0 auto; }
#stage #stage_choice_photo .hcPhotoHelp { display: block; font-size: 18px; }
/* HC-PHOTO-GUIDE-20260930-01: one three-column teaching layout, never outside #stage.
   The outer image grid and inset callout grid share track geometry. The uploader measures
   the center track; private photographs keep their existing full-frame fitting path. */
#stage #stage_choice_photo .hcPhotoPreviewSpace.hcPhotoExampleGuide {
 --hc-photo-guide-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
 --hc-photo-guide-gap: calc(1.6 * var(--hc-creation-unit));
 display: grid; grid-template-columns: var(--hc-photo-guide-columns); grid-template-rows: minmax(0, 1fr);
 align-items: center; justify-items: center; column-gap: var(--hc-photo-guide-gap); row-gap: 0;
 padding: calc(1.2 * var(--hc-creation-unit)) 0; overflow: visible; isolation: isolate;
}
#stage #stage_choice_photo .hcPhotoExampleGuide .hcPreparedPhoto {
 grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; z-index: 1;
 box-shadow: 0 0 16px rgba(176,125,255,.3); border-color: #c7a4ff;
}
#stage #stage_choice_photo .hcPhotoGuide {
 grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2;
 display: grid; grid-template-columns: var(--hc-photo-guide-columns); grid-template-rows: repeat(3,minmax(0,1fr));
 column-gap: var(--hc-photo-guide-gap); row-gap: calc(2.3 * var(--hc-creation-unit));
 align-self: center; align-items: stretch; width: 100%; min-width: 0; min-height: 0;
 height: min(100%, calc(96 * var(--hc-creation-unit))); margin: 0; padding: 0;
 color: #2b1053; text-align: center; pointer-events: none;
}
#stage #stage_choice_photo .hcPhotoGuide[hidden] { display: none; }
#stage #stage_choice_photo .hcPhotoTip {
 --hc-photo-icon-paper: #e8dbff;
 position: relative; min-width: 0; min-height: 0; margin: 0;
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 gap: calc(1 * var(--hc-creation-unit)); padding: calc(1.2 * var(--hc-creation-unit)) calc(.6 * var(--hc-creation-unit));
 border: 1.5px solid #c09aff; border-radius: calc(2.7 * var(--hc-creation-unit));
 background: linear-gradient(145deg, #fffaff, #f0e9ff);
 box-shadow: 0 0 12px rgba(147,85,222,.22), inset 0 0 0 1px rgba(255,255,255,.9);
 color: #2b1053; text-shadow: none;
}
#stage_choice_photo .hcPhotoTipLight { grid-area: 1 / 1; }
#stage_choice_photo .hcPhotoTipHead { grid-area: 1 / 3; }
#stage_choice_photo .hcPhotoTipEyes { grid-area: 2 / 1; }
#stage_choice_photo .hcPhotoTipFrame { grid-area: 2 / 3; }
#stage_choice_photo .hcPhotoTipPerson { grid-area: 3 / 1; }
#stage_choice_photo .hcPhotoTipShoulders { grid-area: 3 / 3; }
/* Short inward tails live in the column gaps; no painted arrows cover eyes or hair. */
#stage_choice_photo .hcPhotoTip::after {
 content: ""; position: absolute; top: calc(50% - 1.2 * var(--hc-creation-unit));
 width: calc(2.2 * var(--hc-creation-unit)); height: calc(2.4 * var(--hc-creation-unit));
 background: #f4edff; pointer-events: none;
}
#stage_choice_photo :is(.hcPhotoTipLight,.hcPhotoTipEyes,.hcPhotoTipPerson)::after {
 left: calc(100% - 1px); clip-path: polygon(0 0,100% 85%,0 100%);
}
#stage_choice_photo :is(.hcPhotoTipHead,.hcPhotoTipFrame,.hcPhotoTipShoulders)::after {
 right: calc(100% - 1px); clip-path: polygon(100% 0,0 85%,100% 100%);
}
#stage #stage_choice_photo .hcPhotoTipIcon {
 display: grid; place-items: center; flex: 0 0 auto;
 width: calc(9 * var(--hc-creation-unit)); height: calc(9 * var(--hc-creation-unit));
 aspect-ratio: 1; border-radius: 50%; background: var(--hc-photo-icon-paper); color: #4c1889;
}
#stage_choice_photo .hcPhotoTipIcon svg { display: block; width: 70%; height: 70%; }
#stage #stage_choice_photo .hcPhotoTipText {
 margin: 0; padding: 0; max-width: 100%; color: #2b1053;
 font: 750 calc(3.8 * var(--hc-creation-unit))/1.13 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 letter-spacing: -.02em; text-align: center; text-shadow: none;
}
#stage_choice_photo .hcPhotoTipText em { font: inherit; }
/* Short windows retain every instruction; only internal card spacing changes. */
#stage #stage_choice_photo[data-photo-density="compact"] .hcPhotoTip {
 padding: calc(.4 * var(--hc-creation-unit)) calc(.5 * var(--hc-creation-unit)); gap: calc(.5 * var(--hc-creation-unit));
}
#stage #stage_choice_photo[data-photo-density="compact"] .hcPhotoTipIcon {
 width: calc(6 * var(--hc-creation-unit)); height: calc(6 * var(--hc-creation-unit));
}
#stage #stage_choice_photo[data-photo-density="compact"] .hcPhotoTipText { font-size: calc(3.6 * var(--hc-creation-unit)); }
/* Keep Example photo directly below its own portrait, not detached at the footer.
   This rule applies ONLY while the example guide is present; guest captions stay in flow. */
#stage_choice_photo .hcPhotoWorkspace:has(.hcPhotoExampleGuide) { position: relative; }
#stage #stage_choice_photo .hcPhotoWorkspace:has(.hcPhotoExampleGuide) .hcPhotoPreviewCaption {
 position: absolute; left: 50%; top: calc(50% + var(--hc-guide-photo-height, 0px) / 2 + 1.2 * var(--hc-creation-unit));
 transform: translateX(-50%); width: var(--hc-guide-photo-width, 44%); max-width: 48%;
 font-size: calc(3.8 * var(--hc-creation-unit)); line-height: 1.15; margin: 0; text-align: center;
}

#stage #stage_choice_photo .hcPhotoExampleGuide .hcPhotoPreviewFallback {
 grid-column: 2; grid-row: 1; position: relative; inset: auto; width: 100%; min-width: 0;
 padding: calc(2 * var(--hc-creation-unit)); font-size: calc(4.1 * var(--hc-creation-unit)); text-align: center;
}
#stage_choice_photo[data-photo-tiny="true"] .hcPhotoHelp { font-size: 16px; }
@media (forced-colors:active) {
 #stage #stage_choice_photo .hcPhotoTip { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
 #stage #stage_choice_photo .hcPhotoTipText { color: CanvasText; }
 #stage #stage_choice_photo .hcPhotoTipIcon { color: CanvasText; background: Canvas; --hc-photo-icon-paper: Canvas; }
 #stage_choice_photo .hcPhotoTip::after { background: CanvasText; }
}
@media (forced-colors:active) {
 #stage .hcNameEntry, #stage .hcNameConfirm, #stage .hcMessageSet { color: ButtonText; background: Canvas; border-color: ButtonText; }
 #stage .hcNameEntry .hcNameInput { color: CanvasText; -webkit-text-fill-color: CanvasText; }
 #stage .hcNameConfirm[data-name-feedback="saved"] { color: LinkText; }
}

/* Compact screens spend space on choices; measurement stays off-canvas without changing measured widths. */
.hcTextMeasure { left: auto; right: 100%; }
#stage .hcMessageSetButtons { gap: 3px; }
#stage .hcMessageSet { flex: 0 1 36px; width: 36px; height: 36px; min-width: 0; }
#stage .hcMessageSets { flex-basis: 36px; height: 36px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageQuestionLayout { gap: 4px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageValue { font-size: 22px; padding: 7px 10px; line-height: 1.12; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSuggestion { padding: 5px 19px 5px 7px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSuggestionText { text-wrap: initial; }
#stage .hcMessageStage[data-message-density="compact"] .hcCreationNext { min-height: 50px; padding-block: 8px; font-size: 24px; }

/* HC-FIELD-CONFIRM-20260923-01 — One branded confirmation seat for every writable Creation field.
   The message's neutral shell remains distinct from a purple selected suggestion. */
#stage .hcMessageInputShell.hcFieldEntry {
 grid-template-columns: minmax(0,1fr) 46px; align-items: stretch; box-sizing: border-box;
 min-height: 56px; border: 1px solid rgba(194,168,240,.65); border-radius: 16px;
 background: linear-gradient(130deg,rgba(18,29,52,.88),rgba(35,25,58,.82));
 box-shadow: inset 0 1px 0 rgba(217,198,253,.15),0 0 14px rgba(121,82,195,.14);
}
#stage .hcMessageInputShell.hcFieldEntry:focus-within {
 border-color: #e0c5ff; box-shadow: 0 0 0 1px rgba(214,177,255,.35),0 0 18px rgba(151,102,227,.24);
}
#stage .hcMessageInputShell.hcFieldEntry .hcMessageInput,
#stage .hcMessageInputShell.hcFieldEntry .hcMessageInput:focus {
 grid-area: 1 / 1; min-height: 52px; padding: 8px 12px; box-sizing: border-box;
 border: 0; border-radius: 15px 0 0 15px; outline: none; background: transparent; box-shadow: none;
}
#stage .hcMessageInputShell.hcFieldEntry .hcMessageValue { grid-area: 1 / 1; padding: 8px 12px; }
#stage .hcMessageInputShell.hcFieldEntry .hcMessageConfirm { grid-area: 1 / 2; z-index: 1; }
/* These existing live regions remain available to assistive technology without adding visible copy. */
#stage .hcMessageStatus.hcFieldStatus {
 display: block; position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px;
 padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0,0,0,0); clip-path: inset(50%);
}
@media (forced-colors:active) {
 #stage .hcMessageInputShell.hcFieldEntry { color: CanvasText; background: Canvas; border-color: ButtonText; box-shadow: none; }
 #stage .hcMessageInputShell.hcFieldEntry:focus-within { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* HC-MESSAGES-GUIDANCE-20260923-01 — ONLY the four .hcMessageStage rooms.
   Navigation, writing and suggestion actions have different visual grammars.
   No global chrome, Photo/Name/Review, routing or musical styles are altered. */
#stage .hcMessageStage .hcMessageQuestionLayout {
 display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0;
}
#stage .hcMessageStage .hcMessageHeading {
 display: block; flex: 0 0 auto; margin: 0; padding: 3px 0 5px;
 border-top: 1px solid rgba(185,147,239,.45); border-bottom: 1px solid rgba(185,147,239,.45);
}
#stage .hcMessageStage .hcMessageNavPrompt {
 margin: 0 0 5px; color: #dbcaee; font: 600 18px/1.15 var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
 text-align: center;
}
#stage .hcMessageStage .hcMessageSteps {
 display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); height: 44px; gap: 0;
 padding: 0; margin: 0; border: 1px solid rgba(171,139,214,.5); border-radius: 10px;
 box-sizing: border-box; background: rgba(9,13,30,.5);
}
#stage .hcMessageStage .hcMessageSteps button {
 min-height: 42px; height: 42px; min-width: 0; padding: 3px 2px; margin: 0; border: 0;
 border-right: 1px solid rgba(171,139,214,.45); border-radius: 0; background: transparent;
 color: #e4d8f5; font-size: clamp(18px,3.7cqw,22px); font-weight: 650; box-shadow: none;
}
#stage .hcMessageStage .hcMessageSteps button:first-child { border-radius: 9px 0 0 9px; }
#stage .hcMessageStage .hcMessageSteps button:last-child { border-right: 0; border-radius: 0 9px 9px 0; }
#stage .hcMessageStage .hcMessageSteps button[aria-current="step"] {
 background: linear-gradient(130deg,#853aca,#513789); color: #fff; box-shadow: inset 0 0 0 1px rgba(222,186,255,.7);
}
#stage .hcMessageStage .hcMessageEditor,
#stage .hcMessageStage.hcFocusedEditor .hcMessageEditor.is-focused-field {
 padding: 0; margin: 0; flex: 0 0 auto; text-align: center;
}
#stage .hcMessageStage .hcMessageEditor .hcEditLabel {
 display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; box-sizing: border-box; text-align: left; padding: 0 2px; margin: 0 0 5px;
 font-size: clamp(21px,4.3cqw,26px); font-weight: 800; line-height: 1.12; color: #faf3ff;
}
/* This is the ONE saved text value. The pale surface cannot be mistaken for an idea row. */
#stage .hcMessageStage .hcMessageInputShell.hcFieldEntry {
 grid-template-columns: minmax(0,1fr) 48px; min-height: 64px; border: 1px solid #e6cfff;
 border-radius: 16px; background: linear-gradient(130deg,#f5efff,#e7dbf7);
 box-shadow: 0 0 17px rgba(192,143,246,.2),inset 0 1px 0 rgba(255,255,255,.8);
}
#stage .hcMessageStage .hcMessageInputShell.hcFieldEntry:focus-within {
 border-color: #fff; box-shadow: 0 0 0 2px rgba(207,157,255,.55),0 0 20px rgba(188,126,246,.26);
}
#stage .hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageInput,
#stage .hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageInput:focus {
 min-height: 62px; min-width: 0; padding: 9px 12px; font-size: clamp(24px,5cqw,30px);
 line-height: 1.2; font-weight: 750; color: #29193f; -webkit-text-fill-color: #29193f; caret-color: #542578;
 text-shadow: none; letter-spacing: -.015em; background: transparent; border: 0; outline: none; box-shadow: none;
}
#stage .hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageInput::placeholder {
 font-size: 21px; font-style: normal; font-weight: 500; color: #6e5d83; -webkit-text-fill-color: #6e5d83; opacity: 1;
}
#stage .hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageValue {
 padding: 9px 12px; color: #29193f; font-size: clamp(24px,5cqw,30px); font-weight: 750;
 line-height: 1.2; text-shadow: none; -webkit-line-clamp: 3;
}
#stage .hcMessageStage .hcMessageInputShell.has-message-value .hcMessageInput:not(:focus) {
 color: transparent; -webkit-text-fill-color: transparent;
}
#stage .hcMessageStage .hcMessageInputShell .hcMessageConfirm {
 margin: 5px 4px 5px 0; min-width: 44px; min-height: 44px; border-radius: 11px;
 background: #432566; color: #f2e6ff; box-shadow: none;
}
#stage .hcMessageStage .hcMessageInputShell .hcMessageConfirm[data-name-feedback="saved"] { color: #8de6b4; }
#stage .hcMessageStage .hcMessageEditorHelp {
 margin: 5px 0 0; padding: 0; color: #decff0; font-size: 18px; font-weight: 500; line-height: 1.18;
}
#stage .hcMessageStage .hcMessageReceipt {
 position: absolute; inset: 0; box-sizing: border-box; border-radius: inherit; border: 2px solid #dfaeff;
 box-shadow: 0 0 15px rgba(221,164,255,.5); opacity: 0; pointer-events: none;
}
/* A labelled suggestions region. Each entire row is a Use command, not a second editable field. */
#stage .hcMessageStage .hcMessageIdeasPanel {
 display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; width: 100%;
 margin: 0; padding: 8px 0 0; gap: 6px; border: 0; border-top: 1px solid rgba(185,147,239,.5);
 box-sizing: border-box; background: none;
}
#stage .hcMessageStage .hcMessageIdeasHeader { flex: 0 0 auto; margin: 0; padding: 0 2px; text-align: left; }
#stage .hcMessageStage .hcMessageIdeasHeader h2 {
 margin: 0; font-size: clamp(21px,4.3cqw,26px); font-weight: 800; line-height: 1.12; color: #dfc0ff;
}
#stage .hcMessageStage .hcMessageIdeasHeader p { margin: 3px 0 0; font-size: 18px; font-weight: 500; line-height: 1.18; color: #e5d8f4; }
#stage .hcMessageStage .hcMessageSuggestions {
 display: grid; flex: 1 1 0; min-height: 0; min-width: 0; gap: 3px 10px; padding: 0;
 align-content: start; border: 0; background: none;
}
#stage .hcMessageStage .hcMessageSuggestion,
#stage .hcMessageStage .hcMessageSuggestion[aria-pressed="true"] {
 display: flex; align-items: center; justify-content: space-between; gap: 9px;
 min-height: 44px; height: auto; min-width: 0; width: 100%; box-sizing: border-box;
 padding: 5px 6px 5px 9px; margin: 0; border: 0; border-bottom: 1px solid rgba(150,128,187,.4);
 border-radius: 0; background: rgba(12,17,37,.27); color: #f4edff; box-shadow: none;
 font-size: clamp(21px,4.1cqw,26px); line-height: 1.18; font-weight: 600; text-align: left; text-shadow: none;
}
#stage .hcMessageStage .hcMessageSuggestionText { flex: 1 1 0; min-width: 0; width: auto; text-wrap: initial; overflow-wrap: anywhere; }
#stage .hcMessageStage .hcMessageSuggestionUse {
 flex: 0 0 auto; min-width: 32px; padding: 2px 0; color: #d7b1fb; font-size: 18px;
 font-weight: 650; line-height: 1.15; text-align: right; pointer-events: none;
}
#stage .hcMessageStage .hcMessageSuggestionCheck { display: none !important; }
#stage .hcMessageStage .hcMessageSuggestion:focus-visible { outline: 2px solid #e3c2ff; outline-offset: -2px; }
#stage .hcMessageStage .hcMessageSuggestions[aria-busy="true"] { pointer-events: none; }
#stage .hcMessageStage .hcMessageSets { flex: 0 0 40px; height: 40px; min-width: 0; margin: 0; }
#stage .hcMessageStage .hcMessageSet { height: 40px; width: 40px; flex: 0 1 40px; }
#stage .hcMessageStage .hcCreationNext { margin-top: 0; }
/* Short windows keep the words and hit targets large. Fitting changes suggestion sets, not the draft. */
#stage .hcMessageStage[data-message-density="compact"] .hcMessageQuestionLayout { gap: 6px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageHeading { padding: 3px 0 5px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageInputShell.hcFieldEntry { min-height: 56px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageInputShell.hcFieldEntry .hcMessageInput { min-height: 54px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageInputShell.hcFieldEntry .hcMessageValue { padding: 7px 9px; font-size: 24px; -webkit-line-clamp: 2; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasPanel { padding-top: 5px; gap: 4px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSuggestion { padding: 5px 5px 5px 8px; }
#stage .hcMessageStage[data-message-layout="wide"] .hcMessageQuestionLayout {
 display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 7px 16px;
}
#stage .hcMessageStage[data-message-layout="wide"] .hcMessageHeading { grid-area: 1 / 1 / 2 / 3; display: block; }
#stage .hcMessageStage[data-message-layout="wide"] .hcMessageEditor { grid-area: 2 / 1; align-self: start; }
#stage .hcMessageStage[data-message-layout="wide"] .hcMessageIdeasPanel { grid-area: 2 / 2 / 4 / 3; height: 100%; padding-top: 0; border-top: 0; }
#stage .hcMessageStage[data-message-layout="wide"] .hcMessageSuggestions { height: auto; }
#stage .hcMessageStage[data-message-layout="wide"] .hcMessagePager { height: 40px; }
#stage .hcMessageStage[data-message-layout="wide"] .hcCreationNext { grid-area: 3 / 1; margin: 0; font-size: 24px; min-height: 50px; }
#stage .hcMessageStage.hcMessageKeyboardEditingOnly .hcMessageHeading,
#stage .hcMessageStage.hcMessageKeyboardEditingOnly .hcMessageIdeasPanel { display: none; }
#stage .hcMessageStage.hcMessageKeyboardEditingOnly .hcMessageQuestionLayout { display: flex; }
#stage .hcMessageStage.hcMessageKeyboardEditingOnly .hcCreationNext { margin-top: auto; }
@media (hover:hover) and (pointer:fine) {
 #stage .hcMessageStage .hcMessageSuggestion:hover { background: rgba(90,57,133,.22); border-bottom-color: #c49ce6; }
}
@media (forced-colors:active) {
 #stage .hcMessageStage .hcMessageHeading, #stage .hcMessageStage .hcMessageSteps,
 #stage .hcMessageStage .hcMessageIdeasPanel { border-color: ButtonText; background: Canvas; }
 #stage .hcMessageStage .hcMessageInputShell.hcFieldEntry { background: Canvas; border-color: ButtonText; box-shadow: none; }
 #stage .hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageInput,
 #stage .hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageInput:focus,
 #stage .hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageValue { color: CanvasText; -webkit-text-fill-color: CanvasText; }
 #stage .hcMessageStage .hcMessageInputShell.has-message-value .hcMessageInput:not(:focus) { color: transparent; -webkit-text-fill-color: transparent; }
 #stage .hcMessageStage .hcMessageInputShell .hcMessageConfirm { background: ButtonFace; color: ButtonText; }
 #stage .hcMessageStage .hcMessageInputShell .hcMessageConfirm[data-name-feedback="saved"] { color: LinkText; }
 #stage .hcMessageStage .hcMessageSuggestion { background: Canvas; color: ButtonText; border-color: ButtonText; }
 #stage .hcMessageStage .hcMessageSuggestionUse { color: LinkText; }
 #stage .hcMessageStage .hcMessageNavPrompt, #stage .hcMessageStage .hcEditLabel,
 #stage .hcMessageStage .hcMessageEditorHelp, #stage .hcMessageStage .hcMessageIdeasHeader h2,
 #stage .hcMessageStage .hcMessageIdeasHeader p { color: CanvasText; }
 #stage .hcMessageStage .hcMessageReceipt { display: none; }
}

#stage .hcMessageStage .hcMessageEditCue { color: #e4d2f7; font-size: 18px; font-weight: 500; white-space: nowrap; }
@media (forced-colors:active) { #stage .hcMessageStage .hcMessageEditCue { color: CanvasText; } }

#stage .hcMessageStage .hcMessageShortInstruction { display: none; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageNavPrompt,
#stage .hcMessageStage[data-message-density="compact"] .hcMessageEditorHelp,
#stage .hcMessageStage[data-message-density="compact"] .hcMessageFullInstruction { display: none; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageShortInstruction { display: inline; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasHeader { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasHeader p { margin: 0; white-space: nowrap; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSets { flex-basis: 36px; height: 36px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSet { height: 36px; width: 36px; flex-basis: 36px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageQuestionLayout { gap: 4px; }

#stage .hcMessageStage[data-message-density="compact"] .hcMessageHeading { padding-top: 2px; padding-bottom: 3px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageInputShell.hcFieldEntry .hcMessageInput,
#stage .hcMessageStage[data-message-density="compact"] .hcMessageInputShell.hcFieldEntry .hcMessageValue { font-size: 22px; line-height: 1.12; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSuggestion { padding-block: 3px; }

#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasHeader h2,
#stage .hcMessageStage[data-message-density="compact"] .hcMessageEditor .hcEditLabel { font-size: 21px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSuggestion { font-size: 21px; }
/* On exceptionally shallow desktop windows Next shares the navigation row; no text/input is removed. */
#stage .hcMessageStage[data-message-short="true"] .hcMessageQuestionLayout { grid-template-rows: auto minmax(0,1fr); }
#stage .hcMessageStage[data-message-short="true"] .hcMessageHeading { grid-area: 1 / 1; }
#stage .hcMessageStage[data-message-short="true"] .hcMessageIdeasPanel { grid-area: 2 / 2; gap: 3px; }
#stage .hcMessageStage[data-message-short="true"] .hcMessageEditor { grid-area: 2 / 1; }
#stage .hcMessageStage[data-message-short="true"] .hcCreationNext { grid-area: 1 / 2; align-self: center; font-size: 22px; min-height: 44px; padding-block: 6px; }
#stage .hcMessageStage[data-message-short="true"] .hcMessageSets { flex-basis: 34px; height: 34px; }
#stage .hcMessageStage[data-message-short="true"] .hcMessageSet { height: 34px; width: 34px; flex-basis: 34px; }
#stage .hcMessageStage[data-message-short="true"] .hcMessageSuggestion { padding-block: 2px; }


/* HC-TOPBAR-REVEAL-20260923-01 — initial paint only; keep every existing header coordinate.
   The INNER visual seat owns entrance opacity. The Director/Player keep button state and playback glyphs. */
#stage_topControlBar.hcFixedTopBar [data-hc-topbar-entrance]:not([data-hc-topbar-entrance="ready"]) {
 pointer-events: none !important;
}
#stage_topControlBar.hcFixedTopBar [data-hc-topbar-entrance]:not([data-hc-topbar-entrance="ready"]) > .hcTopIconSeat {
 opacity: 0;
}
/* A failed/stalled PNG yields a labelled control in the same seat. A late response may not pop in afterward. */
#stage_topControlBar.hcFixedTopBar [data-hc-topbar-asset="fallback"] img { visibility: hidden !important; }
#stage_topControlBar.hcFixedTopBar [data-hc-topbar-asset="fallback"] .hcNavigationFallback {
 display: grid !important; place-items: center; position: absolute; inset: 0;
 color: #f4eaff; font-size: clamp(14px,3.1cqw,20px); line-height: 1.12; overflow-wrap: anywhere;
}
#stage_topControlBar.hcFixedTopBar #heroSampleNavigationButton[data-hc-topbar-asset="fallback"] .hcNavigationFallback {
 left: 8%; right: 55%; font-size: clamp(11px,2.4cqw,15px);
}
/* Message directions align with the reading edge. Names/guest wording and navigation tabs keep their own alignment. */
#stage .hcMessageStage { --hc-message-direction-size: clamp(21px,4.3cqw,26px); }
#stage .hcMessageStage .hcMessageNavPrompt,
#stage .hcMessageStage .hcMessageEditor .hcEditLabel {
 font-size: var(--hc-message-direction-size); font-weight: 800; line-height: 1.15;
 text-align: left;
}
#stage .hcMessageStage .hcMessageNavPrompt {
 display: block; margin: 0 0 6px; padding: 0 2px; color: #faf3ff;
 text-wrap: initial;
}
#stage .hcMessageStage .hcMessageEditor .hcEditLabel {
 justify-content: flex-start; gap: 12px; flex-wrap: wrap;
}
#stage .hcMessageStage .hcMessageEditCue { text-align: left; }
#stage .hcMessageStage .hcMessageIdeasHeader,
#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasHeader {
 display: block; text-align: left;
}
#stage .hcMessageStage .hcMessageIdeasHeader p,
#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasHeader p {
 margin: 3px 0 0; text-align: left; white-space: normal;
}
/* Short screens preserve the new instruction and use the existing readable suggestion-set fitting. */
#stage .hcMessageStage[data-message-density="compact"] .hcMessageNavPrompt { display: block; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageEditor .hcEditLabel {
 font-size: var(--hc-message-direction-size);
}
@media (forced-colors:active) {
 #stage .hcMessageStage .hcMessageNavPrompt { color: CanvasText; }
 #stage_topControlBar.hcFixedTopBar [data-hc-topbar-asset="fallback"] .hcNavigationFallback { color: ButtonText; }
}

/* Only very short phone-sized message rooms share the bottom row between suggestion sets and Next.
   Next keeps its full accessible name. No control overlays a suggestion or the footer. */
.hcMessageNextCompact { display: none; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasHeader {
 display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 3px 8px;
}
#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasHeader p { margin: 0; }
#stage .hcMessageStage[data-message-phone-tight="true"] > .hcJourneyViewport { padding-top: 3px; padding-bottom: 4px; }
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageQuestionLayout { position: relative; gap: 3px; }
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageHeading { padding: 0 0 2px; }
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageNavPrompt { margin-bottom: 4px; }
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageIdeasPanel { padding-top: 3px; gap: 3px; }
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessagePager { flex-basis: 44px; height: 44px; }
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageQuestionLayout:has(> .hcCreationNext:not([hidden])) .hcMessagePager {
 padding-right: 93px; box-sizing: border-box;
}
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageSetButtons { justify-content: flex-start; gap: 2px; }
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageSet { flex: 0 1 36px; min-width: 20px; padding: 0; font-size: 16px; }
#stage .hcMessageStage[data-message-phone-tight="true"] .hcCreationNext {
 position: absolute; bottom: 0; right: 0; width: 86px; min-height: 44px; height: 44px;
 padding: 4px; margin: 0; gap: 4px; font-size: 21px;
}
#stage .hcMessageStage[data-message-phone-tight="true"] .hcCreationNextLabel {
 position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
 clip-path: inset(50%); white-space: nowrap;
}
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageNextCompact { display: inline; }
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageInputShell.hcFieldEntry .hcMessageValue {
 padding-block: 4px; font-size: 22px; line-height: 1.12;
}
/* Keyboard-only mode has no suggestion pager; reserve its Next row explicitly. */
#stage .hcMessageStage[data-message-phone-tight="true"].hcMessageKeyboardEditingOnly .hcMessageQuestionLayout { padding-bottom: 48px; box-sizing: border-box; }


/* HC-CREATION-HARMONY-20260924-01 — centered Message language shared by all four rooms.
   Keep the distinctive lavender writing surface and purple navigation; strip duplicate instructions.
   Selection/completion state remains accessible in attributes, without persistent check decorations. */
#stage_creationNavigation .hcCreationChapterMark,
#stage_creationNavigation .hcCreationStepCheck,
#stage_choice_theme .hcCreationCheck { display: none !important; }
#stage .hcMessageStage .hcMessageHeading { border: 0; padding: 0 0 5px; }
#stage .hcMessageStage .hcMessageSeparator {
 display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0;
 box-sizing: border-box; margin: 0; padding: 0; pointer-events: none;
}
#stage .hcMessageStage .hcMessageSeparator::after {
 content: ""; display: block; width: 88%; height: 1px;
 background: linear-gradient(90deg,transparent,rgba(255,255,255,.72) 25%,rgba(255,255,255,.72) 75%,transparent);
}
#stage .hcMessageStage .hcMessageSeparator--navigation { height: 28px; margin-bottom: 3px; }
#stage .hcMessageStage .hcMessageSeparator--writing { height: 18px; }
#stage .hcMessageStage .hcMessageSeparator--writing::after { width: 68%; opacity: .65; }
#stage .hcMessageStage .hcMessageLabelSpace { position: relative; width: 100%; height: 16px; }
#stage .hcMessageStage .hcMessageEditor,
#stage .hcMessageStage .hcMessageIdeasHeader,
#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasHeader {
 text-align: center; justify-content: center;
}
#stage .hcMessageStage .hcMessageIdeasPanel { border-top: 0; padding-top: 2px; }
#stage .hcMessageStage .hcMessageIdeasHeader,
#stage .hcMessageStage[data-message-density="compact"] .hcMessageIdeasHeader { display: block; padding: 0; }
#stage .hcMessageStage .hcMessageIdeasHeader h2 { text-align: center; width: 100%; }
#stage .hcMessageStage .hcMessageSuggestion,
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSuggestion,
#stage .hcMessageStage .hcMessageSuggestion[aria-pressed="true"] {
 justify-content: center; text-align: center; padding: 6px 12px; gap: 0;
}
#stage .hcMessageStage .hcMessageSuggestionText { width: 100%; text-align: center; text-wrap: balance; }
#stage .hcMessageStage .hcMessageSuggestionUse { display: none !important; }
#stage .hcMessageStage .hcMessageInputShell .hcMessageInput,
#stage .hcMessageStage .hcMessageInputShell .hcMessageValue { text-align: center; }
#stage .hcMessageStage .hcMessageSets,
#stage .hcMessageStage[data-message-phone-tight="true"] .hcMessageSetButtons { justify-content: center; }
/* Smaller viewports spend whitespace, never shrink the words to unreadable labels. */
#stage .hcMessageStage[data-message-density="compact"] .hcMessageHeading { padding: 0 0 3px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSeparator--navigation { height: 22px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageLabelSpace { height: 8px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSeparator--writing { height: 12px; }
#stage .hcMessageStage[data-message-density="compact"] .hcMessageSuggestion { padding-block: 4px; }
/* The status replaces file-format text instead of duplicating it beneath the photo. */
#stage_choice_photo .hcPhotoResultLine { min-height: 30px; margin-top: 6px; width: 100%; text-align: center; }
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoHelp { margin: 0; }
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedback { margin: 0; padding: 0; border: 0; background: transparent; }
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedbackTitle { font-size: clamp(22px,4.9cqw,28px); line-height: 1.15; }
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedback[data-mode="success"] .hcPhotoFeedbackTitle,
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedback[data-mode="warning"] .hcPhotoFeedbackTitle { color: #9de6c8; }
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedbackList { font-size: 18px; margin-top: 4px; }
#stage #stage_choice_photo .hcPhotoHelp[hidden] { display: none !important; }
/* Full-frame presentation in both rooms. No CSS zoom/crop; the uploader owns a separate whole-photo display. */
#stage #stage_choice_photo .hcPreparedPhoto,
#stage_creator .hcStudioPhotoThumb img { object-fit: contain; object-position: center; }
/* One finite JS fade owns both directions of purchase availability. Its grid seat never collapses. */
#stage_topControlBar.hcFixedTopBar #heroPurchaseNavigationButton { transition: none; }
@media (forced-colors:active) {
 #stage .hcMessageStage .hcMessageSeparator::after { background: CanvasText; }
 #stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedbackTitle { color: CanvasText; }
}



/* HC-CREATION-ONE-STAGE-20260924-01 — ONE approved composition, no responsive repagination.
   #stage and every .pageStage still fill the original theater. A single content unit fits
   width AND the available non-keyboard height without changing columns, order or visibility.
   A short desktop leaves starfield at the sides instead of inventing another page.
   The global Top Bar, Celebration, full-screen scenery and 22px footer are not rescaled. */
#stage {
 --hc-creation-unit: min(1cqw, calc((100cqh - var(--hero-top-control-bar-height, 104px) - env(safe-area-inset-top, 0px) - var(--hc-footer-control-height, 22px) - var(--hc-footer-safe-bottom, 0px)) / 112));
 --hc-creation-nav-height: calc(16 * var(--hc-creation-unit));
}
#stage #stage_creationNavigation.hcUnifiedCreationNavigation {
 left: calc(50% - 47 * var(--hc-creation-unit)); right: auto; width: calc(94 * var(--hc-creation-unit));
 height: var(--hc-creation-nav-height); grid-template-columns: repeat(3,minmax(0,1fr));
 grid-template-rows: repeat(2,minmax(0,1fr)); border-radius: calc(2 * var(--hc-creation-unit));
}
#stage #stage_creationNavigation.hcUnifiedCreationNavigation button {
 min-height: 0; min-width: 0; flex-direction: row; gap: 0; padding: calc(.5 * var(--hc-creation-unit));
 border-radius: calc(1.7 * var(--hc-creation-unit));
 font-size: calc(4.7 * var(--hc-creation-unit)); line-height: 1.12;
}
#stage .hcUnifiedCreation.hcCreationRoom > .hcJourneyViewport {
 left: calc(50% - 50 * var(--hc-creation-unit)); right: auto; width: calc(100 * var(--hc-creation-unit));
 padding: calc(1.5 * var(--hc-creation-unit)) calc(3 * var(--hc-creation-unit));
 height: auto; bottom: var(--hc-footer-reserve,0px);
}
/* These are absent from the new markup as well. This guard cannot hide actual choices. */
#stage .hcUnifiedCreation :is([data-hc-creation-next],.hcCreationPager,.hcMessagePager) { display: none !important; }
#stage .hcUnifiedCreation .hcCreationQuestionLayout {
 display: flex; flex-direction: column; align-items: stretch; grid-template: none;
 width: 100%; height: 100%; min-height: 0; min-width: 0; gap: calc(1.5 * var(--hc-creation-unit));
 padding: 0; margin: 0; text-align: center;
}
#stage .hcUnifiedCreation .hcCreationQuestionHeading { flex: 0 0 auto; grid-area: auto; padding: 0; margin: 0; }
#stage .hcUnifiedCreation .hcCreationQuestionHeading h1 {
 font-size: calc(6.2 * var(--hc-creation-unit)); line-height: 1.12; margin: 0; text-wrap: balance;
}
#stage .hcUnifiedCreation .hcCreationQuestionHeading p:not(.hcClarityAccessible) {
 font-size: calc(4.7 * var(--hc-creation-unit)); line-height: 1.15;
 margin: calc(.7 * var(--hc-creation-unit)) 0 0;
}
#stage .hcUnifiedCreation .hcCreationQuestionLayout .hcCreationChoices {
 display: grid; grid-area: auto; flex: 1 1 0; min-height: 0; height: auto;
 gap: calc(1.25 * var(--hc-creation-unit)); padding: calc(.4 * var(--hc-creation-unit)); margin: 0;
}
#stage .hcUnifiedCreation #hcCreationThemeChoices { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); }
#stage .hcUnifiedCreation .hcCreationOccasionGrid { grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(8,minmax(0,1fr)); }
#stage .hcUnifiedCreation .hcCreationThemeCard {
 padding: calc(.9 * var(--hc-creation-unit)) calc(.45 * var(--hc-creation-unit));
 border-radius: calc(2.4 * var(--hc-creation-unit)); font-size: calc(4.6 * var(--hc-creation-unit)); line-height: 1.12;
}
#stage .hcUnifiedCreation .hcCreationThemeArt { display: block; flex: 1 1 0; min-height: 0; width: 100%; }
#stage .hcUnifiedCreation .hcCreationThemeLabel { font-size: inherit; padding-top: calc(.8 * var(--hc-creation-unit)); white-space: nowrap; text-wrap: initial; }
#stage .hcUnifiedCreation .hcCreationOccasionGrid .hcOccasionButton {
 padding: calc(1.2 * var(--hc-creation-unit)); border-radius: calc(2.3 * var(--hc-creation-unit));
 font-size: calc(4.8 * var(--hc-creation-unit)); line-height: 1.13;
}
#stage .hcUnifiedCreation .hcCreationOccasionGrid .hcOccasionLabel { padding: 0; }
/* Native input behavior and the finite caret/check acknowledgement remain the same. */
#stage .hcUnifiedCreation .hcNameEntry {
 width: 100%; grid-template-columns: minmax(0,1fr) calc(9 * var(--hc-creation-unit));
 border-radius: calc(2.4 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation .hcNameEntry .hcNameInput {
 min-height: calc(11 * var(--hc-creation-unit)); padding: calc(1.2 * var(--hc-creation-unit));
 font-size: max(16px,calc(8.5 * var(--hc-creation-unit))); line-height: 1.12;
}
#stage .hcUnifiedCreation .hcNameConfirm {
 min-width: 0; min-height: 0; padding: 0;
 margin: calc(.8 * var(--hc-creation-unit)) calc(.5 * var(--hc-creation-unit)) calc(.8 * var(--hc-creation-unit)) 0;
 border-radius: calc(1.8 * var(--hc-creation-unit)); font-size: calc(6 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation .hcNameConfirm[data-name-feedback="saved"] .hcNameConfirmGlyph { font-size: calc(5 * var(--hc-creation-unit)); }
#stage .hcUnifiedCreation .hcCreationNameLayout .hcNameField { flex: 0 0 auto; margin: calc(1.5 * var(--hc-creation-unit)) 0 0; padding: 0; }
#stage .hcUnifiedCreation .hcCreationNameLayout .hcEditLabel {
 margin: 0 0 calc(1.2 * var(--hc-creation-unit)); padding: 0;
 font-size: calc(4.8 * var(--hc-creation-unit)); line-height: 1.15;
}
#stage .hcUnifiedCreation .hcCreationNameArt { display: flex; width: 100%; min-height: 0; flex: 1 1 0; }
#stage .hcUnifiedCreation .hcCreationNameArt img { inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* All four Message Stages: tabs, the single writing field, Suggestions, eight centered rows.
   This block supersedes all old density/wide/phone-tight rules; JS no longer selects them. */
#stage .hcUnifiedCreation.hcMessageStage .hcMessageQuestionLayout {
 display: flex; flex-direction: column; grid-template: none; gap: calc(.8 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageHeading { display: block; flex: 0 0 auto; grid-area: auto; padding: 0; }
#stage .hcUnifiedCreation.hcMessageStage .hcMessageSeparator--navigation { height: calc(1.5 * var(--hc-creation-unit)); margin: 0; }
#stage .hcUnifiedCreation.hcMessageStage .hcMessageSeparator--writing { height: calc(1.5 * var(--hc-creation-unit)); margin: 0; }
#stage .hcUnifiedCreation.hcMessageStage .hcMessageLabelSpace { height: calc(.7 * var(--hc-creation-unit)); }
#stage .hcUnifiedCreation.hcMessageStage .hcMessageSteps {
 display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; height: calc(8 * var(--hc-creation-unit));
 gap: 0; border-radius: calc(1.7 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageSteps button {
 height: 100%; min-height: 0; min-width: 0; padding: calc(.5 * var(--hc-creation-unit));
 border-radius: 0; font-size: calc(4.8 * var(--hc-creation-unit)); line-height: 1.1;
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageEditor { display: block; grid-area: auto; flex: 0 0 auto; min-height: 0; width: 100%; margin: 0; padding: 0; }
#stage .hcUnifiedCreation.hcMessageStage .hcMessageInputShell.hcFieldEntry {
 min-height: calc(10.5 * var(--hc-creation-unit)); grid-template-columns: minmax(0,1fr) calc(9 * var(--hc-creation-unit));
 border-radius: calc(2.4 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageInput,
#stage .hcUnifiedCreation.hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageValue {
 padding: calc(1 * var(--hc-creation-unit)) calc(1.2 * var(--hc-creation-unit));
 min-height: 0; font-size: max(16px,calc(5.1 * var(--hc-creation-unit))); line-height: 1.15;
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageInput::placeholder { font-size: inherit; }
#stage .hcUnifiedCreation.hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageValue { align-self: center; -webkit-line-clamp: 2; }
#stage .hcUnifiedCreation.hcMessageStage .hcMessageIdeasPanel {
 display: flex; flex-direction: column; grid-area: auto; flex: 1 1 0; min-height: 0; min-width: 0;
 padding: 0; margin: 0; border: 0; gap: calc(.7 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageIdeasHeader { display: block; flex: 0 0 auto; padding: 0; margin: 0; text-align: center; }
#stage .hcUnifiedCreation.hcMessageStage .hcMessageIdeasHeader h2 { font-size: calc(5 * var(--hc-creation-unit)); line-height: 1.15; margin: 0; text-align: center; }
#stage .hcUnifiedCreation.hcMessageStage .hcMessageSuggestions {
 display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(8,minmax(min-content,1fr));
 flex: 1 1 0; min-height: 0; height: auto; width: 100%; padding: 0; margin: 0; gap: 0;
 align-content: start; align-items: stretch;
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageSuggestion {
 min-width: 0; min-height: calc(6.6 * var(--hc-creation-unit)); height: auto; width: 100%;
 padding: calc(.55 * var(--hc-creation-unit)) calc(.8 * var(--hc-creation-unit));
 font-size: calc(5 * var(--hc-creation-unit)); line-height: 1.12; font-weight: 650;
 justify-content: center; text-align: center; border-radius: 0;
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageSuggestionText { width: 100%; text-align: center; text-wrap: balance; }
/* A native keyboard is a temporary editing surface, not a new page. Dismiss it to reveal
   the SAME eight rows. The original input, value, focus, caret and confirm control stay attached. */
#stage .hcUnifiedCreation.hcMessageStage.hcMessageKeyboardEditingOnly .hcMessageIdeasPanel,
#stage .hcUnifiedCreation.hcMessageStage.hcMessageKeyboardEditingOnly .hcMessageHeading { display: none; }
#stage .hcUnifiedCreation.hcCreationKeyboard .hcCreationNameArt { display: none; }
/* Photo: no small file-format sentence between the chooser and portrait. The actual
   rejection/acceptance message stays visible and the file requirements stay accessible. */
#stage #stage_choice_photo.hcUnifiedCreation .hcGuidedPhotoLayout { gap: calc(1.5 * var(--hc-creation-unit)); }
#stage #stage_choice_photo.hcUnifiedCreation .hcPhotoChooseControl {
 font-size: calc(5.5 * var(--hc-creation-unit)); min-height: calc(10 * var(--hc-creation-unit));
 padding: calc(1.3 * var(--hc-creation-unit)); border-radius: calc(2.5 * var(--hc-creation-unit));
}
#stage #stage_choice_photo.hcUnifiedCreation .hcPhotoResultLine { min-height: 0; margin-top: calc(1 * var(--hc-creation-unit)); }
#stage #stage_choice_photo.hcUnifiedCreation .hcPhotoResultLine:has(.hcPhotoFeedback[hidden]) { margin: 0; }
#stage #stage_choice_photo.hcUnifiedCreation .hcPhotoFeedbackTitle { font-size: calc(5 * var(--hc-creation-unit)); }
#stage #stage_choice_photo.hcUnifiedCreation .hcPhotoFeedbackList { font-size: calc(4.7 * var(--hc-creation-unit)); line-height: 1.15; margin-top: calc(.6 * var(--hc-creation-unit)); }
#stage #stage_choice_photo.hcUnifiedCreation .hcPhotoPreviewCaption { font-size: calc(4.5 * var(--hc-creation-unit)); line-height: 1.15; }
#stage #stage_choice_photo.hcUnifiedCreation .hcPhotoWorkspace { min-height: 0; gap: calc(.8 * var(--hc-creation-unit)); }
/* Review keeps all four messages below its artwork on every normal viewport. */
#stage_creator.hcUnifiedCreation .hcStudioLayout { gap: calc(.8 * var(--hc-creation-unit)); }
#stage_creator.hcUnifiedCreation .hcStudioComposition {
 display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto;
 gap: calc(.8 * var(--hc-creation-unit));
}
#stage_creator.hcUnifiedCreation .hcStudioIdentity { grid-area: 1 / 1; }
#stage_creator.hcUnifiedCreation .hcStudioHero { grid-area: 2 / 1; min-height: 0; }
#stage_creator.hcUnifiedCreation .hcStudioHeroArt { min-height: calc(12 * var(--hc-creation-unit)); }
#stage_creator.hcUnifiedCreation .hcStudioMessages { display: grid; grid-area: 3 / 1; align-self: stretch; }
#stage_creator.hcUnifiedCreation .hcStudioMessagesShortcut { display: none; }
#stage_creator.hcUnifiedCreation .hcStudioEdit { min-height: calc(7 * var(--hc-creation-unit)); padding: calc(.6 * var(--hc-creation-unit)); }
#stage_creator.hcUnifiedCreation .hcStudioOccasion { font-size: calc(6.1 * var(--hc-creation-unit)); }
#stage_creator.hcUnifiedCreation .hcStudioMessage { font-size: calc(5.5 * var(--hc-creation-unit)); }
#stage_creator.hcUnifiedCreation .hcStudioHeroCopy { font-size: calc(5.2 * var(--hc-creation-unit)); }
#stage_creator.hcUnifiedCreation .hcStudioHeroDetails { font-size: calc(4.5 * var(--hc-creation-unit)); }
#stage_creator.hcUnifiedCreation .hcStudioStandinNote { font-size: calc(4.2 * var(--hc-creation-unit)); }
#stage_creator.hcUnifiedCreation .hcReviewNameField .hcNameEntry { width: 100%; }
#stage_creator.hcUnifiedCreation.hcReviewNameEditingOnly :is(.hcStudioHero,.hcStudioMessages,.hcStudioOccasion) { display: none !important; }
#stage_creator.hcUnifiedCreation.hcReviewNameEditingOnly .hcStudioComposition { display: flex; }
/* Remain honest in forced-color modes without replacing the selected-state cues with glyphs. */
@media (forced-colors:active) {
 #stage .hcUnifiedCreation .hcCreationThemeCard.is-selected-occasion,
 #stage .hcUnifiedCreation .hcOccasionButton.is-selected-occasion { outline: 2px solid Highlight; outline-offset: -3px; }
}
/* The old message-specific 44px minimum must not outgrow its proportional right-hand seat. */
#stage .hcUnifiedCreation.hcMessageStage .hcMessageInputShell.hcFieldEntry .hcMessageConfirm {
 min-width: 0; min-height: 0; width: auto; height: auto; align-self: stretch;
 margin: calc(.8 * var(--hc-creation-unit)) calc(.5 * var(--hc-creation-unit)) calc(.8 * var(--hc-creation-unit)) 0;
 padding: 0; font-size: calc(6 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation .hcCreationThemeCard { font-size: calc(4.8 * var(--hc-creation-unit)); }
/* HC-MESSAGES-PARENT-20260924-01 — Written choices form ONE centered vertical column.
   Theme keeps its approved six-character gallery. The six-section navigation is unchanged.
   New Messages parent reads the same four fields as Review, not a second editable draft. */
#stage .hcUnifiedCreation .hcCreationOccasionGrid .hcOccasionButton {
 padding: calc(.65 * var(--hc-creation-unit)) calc(1.6 * var(--hc-creation-unit));
 border-radius: calc(2 * var(--hc-creation-unit)); font-size: calc(5 * var(--hc-creation-unit));
 line-height: 1.13;
}
#stage_messages .hcMessagesOverviewLayout {
 display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100%;
 min-width: 0; min-height: 0; margin: 0; padding: 0;
 gap: calc(2 * var(--hc-creation-unit)); text-align: center;
 font-family: var(--hero-base-font-family,"Trebuchet MS",Arial,sans-serif);
}
#stage_messages .hcMessagesOverviewHeading { flex: 0 0 auto; margin: 0; padding: calc(1.4 * var(--hc-creation-unit)) 0 0; }
#stage_messages .hcMessagesOverviewHeading h1 {
 margin: 0; color: #faf6ff; font-size: calc(6.2 * var(--hc-creation-unit)); line-height: 1.15;
 font-weight: 800; text-wrap: balance; text-shadow: 0 1px 3px rgba(5,7,16,.7);
}
#stage_messages .hcMessagesOverviewHeading h1:focus { outline: none; }
#stage_messages .hcMessagesOverviewList {
 display: flex; flex-direction: column; justify-content: center; align-items: stretch;
 flex: 1 1 0; min-height: 0; min-width: 0; width: 100%; margin: 0;
 /* A little lower breathing room lifts the entire group; spacing BETWEEN the four lines is unchanged. */
 box-sizing: border-box; padding: 0 0 calc(10 * var(--hc-creation-unit));
 gap: calc(1.4 * var(--hc-creation-unit));
}
#stage_messages .hcMessageOverviewLine {
 position: relative; display: block; width: 100%; min-width: 0; flex: 0 0 auto;
 min-height: calc(11 * var(--hc-creation-unit)); margin: 0;
 padding: calc(2 * var(--hc-creation-unit)) calc(1 * var(--hc-creation-unit));
 border: 0; border-radius: calc(1.7 * var(--hc-creation-unit)); background: transparent;
 color: #faf6ff; font-size: var(--hc-overview-message-size,calc(6.1 * var(--hc-creation-unit)));
 font-family: inherit; font-weight: 750; line-height: 1.18; text-align: center;
 text-shadow: 0 1px 3px rgba(5,7,16,.65); cursor: pointer; appearance: none;
 -webkit-appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* All four parent messages share white; Review keeps its separate lavender first line. */
#stage_messages #hcMessageOverview1 { color: #faf6ff; }
#stage_messages .hcMessageOverviewLine > span {
 display: block; width: 100%; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: balance;
}
#stage_messages .hcMessageOverviewLine::after {
 content: ""; position: absolute; bottom: 0; left: 32%; width: 36%; height: 1px;
 background: linear-gradient(90deg,transparent,rgba(219,198,255,.6),transparent); pointer-events: none;
}
#stage_messages .hcMessageOverviewLine[data-message-empty="true"] { font-style: italic; color: #c9b8dc; }
#stage_messages .hcMessageOverviewLine:focus-visible {
 outline: 2px solid #dfcaff; outline-offset: -3px; background: rgba(117,81,166,.12);
}
@media (hover:hover) and (pointer:fine) {
 #stage_messages .hcMessageOverviewLine:hover { background: radial-gradient(ellipse,rgba(130,94,200,.13),transparent 75%); }
}
@media (forced-colors: active) {
 #stage_messages .hcMessagesOverviewHeading h1, #stage_messages .hcMessageOverviewLine,
 #stage_messages #hcMessageOverview1, #stage_messages .hcMessageOverviewLine[data-message-empty="true"] {
  color: CanvasText; text-shadow: none;
 }
 #stage_messages .hcMessageOverviewLine::after { background: CanvasText; }
 #stage_messages .hcMessageOverviewLine:focus-visible { outline-color: Highlight; }
}


/* HC-CREATION-FLOW-20260924-01 — Keep the same composition/geometry on every device.
   The stronger selected ring is inset, so choosing a Theme cannot resize or move any card. */
#stage_choice_theme.hcUnifiedCreation .hcCreationThemeCard.is-selected-occasion {
 border-color: #eddbff;
 background: radial-gradient(ellipse at 50% 24%,rgba(151,64,219,.94),rgba(95,43,154,.97) 67%,rgba(63,29,111,.98));
 box-shadow: inset 0 0 0 max(1px,calc(.28 * var(--hc-creation-unit))) rgba(232,207,255,.92),
  0 0 calc(1.5 * var(--hc-creation-unit)) rgba(174,106,247,.38);
}
#stage_messages .hcMessagesOverviewHeading h1 {
 font-size: calc(5.8 * var(--hc-creation-unit)); line-height: 1.15; text-wrap: initial;
}
#stage_messages .hcMessagesTitleLine { display: block; white-space: nowrap; }
@media (forced-colors: active) {
 #stage_choice_theme.hcUnifiedCreation .hcCreationThemeCard.is-selected-occasion {
  color: ButtonText; background: Canvas; border-color: Highlight;
  outline: 2px solid Highlight; outline-offset: -3px; box-shadow: none;
 }
}

/* One three-line invitation replaces the old order guide; this divider is decorative, never clickable. */
#stage_messages .hcMessagesTitleLine strong { font-weight: 900; }
#stage_messages .hcMessagesTitleLine em { font-style: italic; }
#stage_messages .hcMessagesHeadingDivider {
 height: 1px; width: 86%; margin: calc(1.8 * var(--hc-creation-unit)) auto 0;
 background: linear-gradient(90deg,transparent,rgba(244,233,255,.68),transparent);
 pointer-events: none;
}
/* Reduce only Review's name field. The dedicated Name editor keeps its approved size. */
#stage_creator.hcUnifiedCreation .hcReviewNameField .hcNameEntry .hcNameInput {
 min-height: calc(8.4 * var(--hc-creation-unit));
 padding: calc(.55 * var(--hc-creation-unit)) calc(1.2 * var(--hc-creation-unit));
 font-size: max(16px,calc(6.7 * var(--hc-creation-unit))); line-height: 1.08;
}
#stage_creator.hcUnifiedCreation #hcStudioHeroButton {
 position: relative; box-sizing: border-box;
 padding-top: calc(1.5 * var(--hc-creation-unit)); padding-bottom: calc(1.5 * var(--hc-creation-unit));
}
#stage_creator.hcUnifiedCreation #hcStudioHeroButton::before,
#stage_creator.hcUnifiedCreation #hcStudioHeroButton::after {
 content: ""; position: absolute; left: 7%; right: 7%; height: 1px;
 background: linear-gradient(90deg,transparent,rgba(244,233,255,.68),transparent);
 pointer-events: none;
}
#stage_creator.hcUnifiedCreation #hcStudioHeroButton::before { top: 0; }
#stage_creator.hcUnifiedCreation #hcStudioHeroButton::after { bottom: 0; }
/* This independent paint layer cannot change the active tab's size, label, or click area. */
#stage_creationNavigation .hcCreationArrivalHalo {
 display: block; position: absolute; inset: 1px; border-radius: inherit;
 border: 1px solid #f4e7ff; opacity: 0; pointer-events: none;
 box-shadow: inset 0 0 calc(1.8 * var(--hc-creation-unit)) rgba(211,158,255,.35),
  0 0 calc(2.2 * var(--hc-creation-unit)) rgba(191,131,255,.5);
}
@media (forced-colors:active) {
 #stage_messages .hcMessagesHeadingDivider,
 #stage_creator.hcUnifiedCreation #hcStudioHeroButton::before,
 #stage_creator.hcUnifiedCreation #hcStudioHeroButton::after { background: CanvasText; }
 #stage_creationNavigation .hcCreationArrivalHalo { border-color: Highlight; box-shadow: none; }
}

/* ASSET CONTRACT: external CSS imagery is inventoried by pageLoadAssetsObj. New pixels need a new URL/version.
   Theme imagery (not cards/labels) fades independently after each decode; no shared readiness barrier. */
#hcCreationThemeChoices .hcCreationThemeArt[data-hc-theme-reveal="waiting"] { opacity: 0; }
#hcCreationThemeChoices .hcCreationThemeArt[data-hc-theme-reveal="ready"] { opacity: 1; }


/* HC-CREATION-ORIENTATION-20260925-01 — Small static SVG Occasion cues never participate in label centering. */
#stage .hcUnifiedCreation .hcOccasionButton .hcOccasionLabel {
 position: relative; z-index: 2; width: 100%; text-align: center;
}
#stage .hcUnifiedCreation .hcOccasionButton .hcOccasionIcon {
 position: absolute; z-index: 2; right: calc(2.1 * var(--hc-creation-unit)); top: 50%;
 width: calc(4.2 * var(--hc-creation-unit)); height: calc(4.2 * var(--hc-creation-unit));
 transform: translateY(-50%); color: rgba(213,190,255,.82); pointer-events: none;
}
#stage .hcUnifiedCreation .hcOccasionButton.is-selected-occasion .hcOccasionIcon { color: #fff6ff; }

/* Messages parent: title and line orientation use one purple language; the guest's actual words stay white. */
#stage_messages .hcMessagesOverviewHeading h1 { color: #c5a0ff; }
#stage_messages .hcMessagesOverviewHeading .hcMessagesHeadingDivider { display: none !important; }
#stage_messages .hcMessageOverviewLine {
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 gap: calc(.7 * var(--hc-creation-unit));
}
#stage_messages .hcMessageOverviewLabel {
 display: flex; align-items: center; justify-content: center; gap: calc(1.2 * var(--hc-creation-unit));
 width: 88%; color: #c5a0ff; font-size: calc(3.7 * var(--hc-creation-unit));
 line-height: 1.05; font-weight: 750; letter-spacing: .015em; white-space: nowrap; pointer-events: none;
}
#stage_messages .hcMessageOverviewLabel::before,
#stage_messages .hcMessageOverviewLabel::after {
 content: ""; flex: 1 1 0; height: 1px;
 background: linear-gradient(90deg,transparent,rgba(197,160,255,.62));
}
#stage_messages .hcMessageOverviewLabel::after { transform: rotate(180deg); }
#stage_messages .hcMessageOverviewLine > [data-hc-message-overview-value] { color: #faf6ff; }

/* Message editors identify the exact line above the textfield and keep the same purple orientation cue. */
#stage .hcUnifiedCreation.hcMessageStage .hcMessageLabelSpace {
 display: flex; align-items: center; justify-content: center; height: auto;
 min-height: calc(4.2 * var(--hc-creation-unit)); margin: calc(1 * var(--hc-creation-unit)) 0 calc(.5 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageEditorLineLabel {
 color: #c5a0ff; font-size: calc(4 * var(--hc-creation-unit)); line-height: 1.08;
 font-weight: 750; letter-spacing: .015em; white-space: nowrap;
}

/* Five suggestions are enough to orient without overwhelming; preserve row scale and move the block down as one unit. */
#stage .hcUnifiedCreation.hcMessageStage .hcMessageIdeasPanel {
 flex: 0 0 auto; margin-top: calc(4 * var(--hc-creation-unit)); gap: calc(.9 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageIdeasHeader h2 {
 color: #c5a0ff; font-size: calc(4.7 * var(--hc-creation-unit));
}
#stage .hcUnifiedCreation.hcMessageStage .hcMessageSuggestions {
 flex: 0 0 auto; grid-template-rows: repeat(5,minmax(calc(6.6 * var(--hc-creation-unit)),auto));
}
@media (forced-colors: active) {
 #stage .hcUnifiedCreation .hcOccasionButton .hcOccasionIcon,
 #stage_messages .hcMessagesOverviewHeading h1,
 #stage_messages .hcMessageOverviewLabel,
 #stage .hcUnifiedCreation.hcMessageStage .hcMessageEditorLineLabel,
 #stage .hcUnifiedCreation.hcMessageStage .hcMessageIdeasHeader h2 { color: CanvasText; }
 #stage_messages .hcMessageOverviewLabel::before,
 #stage_messages .hcMessageOverviewLabel::after { background: CanvasText; }
}


/* HC-MESSAGE-CHOICES-20260928-01 — Four complete messages inside ONE steady writing Stage.
   More room goes to the centered native field, not instructions/modals. The paper never fades.
   Typography keeps the existing canonical line layout; shallow windows fit one composition, not a carousel of Stages. */
#stage #stage_messages.hcOneMessageStage > .hcJourneyViewport {
 left:2cqw; right:2cqw; width:auto; padding:1.4cqw 0;
}
#stage_messages.hcOneMessageStage .hcOneMessageLayout {
 --hc-message-unit:min(1cqw,calc(var(--hc-message-available-height,800px) / 100));
 display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
 width:calc(96 * var(--hc-message-unit)); max-width:100%; height:100%; min-width:0; min-height:0;
 margin-inline:auto; gap:calc(2 * var(--hc-message-unit)); text-align:center;
 font-family:var(--hero-base-font-family,Arial,sans-serif);
}
#stage_messages .hcOneMessageHeading { flex:0 0 auto; margin:0; padding:calc(1 * var(--hc-message-unit)) 0; }
#stage_messages .hcOneMessageHeading h1 { margin:0; color:#cfacff; font-size:calc(6 * var(--hc-message-unit)); line-height:1.18; font-weight:750; }
#stage_messages .hcOneMessageEditor { flex:0 0 auto; min-width:0; width:83cqw; max-width:100%; align-self:center; margin-inline:auto; }
#stage_messages .hcMessagePaper {
 position:relative; width:100%; min-width:0; border-radius:calc(3.2 * var(--hc-message-unit));
 background:linear-gradient(150deg,#f3eaff,#e6d4fb); box-shadow:inset 0 0 0 1px #bd9be5,0 5px 24px rgba(135,83,193,.22);
}
#stage_messages .hcMessagePaper:focus-within { box-shadow:inset 0 0 0 1px #eddcff,0 0 0 2px #ad73ec,0 5px 24px rgba(135,83,193,.27); }
#stage_messages #hcMessageTextarea {
 position:absolute; top:0; left:0; display:block; margin:0; box-sizing:border-box; transform-origin:top left;
 padding:18px; border:1px solid transparent; border-radius:16px; outline:none; resize:none;
 background:transparent; color:#30203f; -webkit-text-fill-color:#30203f;
 font:600 24px/1.36 Arial,sans-serif; font-style:normal; font-kerning:none; font-variant-ligatures:none;
 letter-spacing:0; text-transform:none; white-space:pre-wrap; overflow-wrap:break-word; word-break:normal;
 text-align:center; tab-size:4; overflow:hidden; caret-color:#623491; text-shadow:none; box-shadow:none; touch-action:auto;
}
#stage_messages #hcMessageTextarea::placeholder { color:#725b86; -webkit-text-fill-color:#725b86; opacity:.8; font-weight:400; }
#stage_messages #hcMessageTextarea[aria-invalid="true"] { border-color:#ce597e; }
#stage_messages .hcMessageOptions {
 flex:0 0 auto; display:grid; grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);
 align-items:center; gap:calc(2 * var(--hc-message-unit)); min-width:0; width:100%; padding:0; margin:0;
}
#stage_messages .hcMessageOptionArrow {
 display:grid; place-items:center; justify-self:center; width:max(48px,calc(14 * var(--hc-message-unit)));
 min-height:48px; height:calc(12 * var(--hc-message-unit)); margin:0; padding:8px;
 background:transparent; border:1px solid transparent; border-radius:calc(3 * var(--hc-message-unit));
 color:#f6edff; cursor:pointer; opacity:1; touch-action:manipulation;
}
#stage_messages .hcMessageOptionArrow svg { width:100%; max-height:100%; pointer-events:none; overflow:visible; }
#stage_messages .hcMessageOptionArrow[aria-disabled="true"] { cursor:default; } /* Busy is never gray or dim. */
/* The arrows flank the selection heading; the live option number stays on its own row below. */
#stage_messages #hcMessageCurrentChoice { margin:0; color:#e1c7ff; font:650 max(18px,calc(4.9 * var(--hc-message-unit)))/1.25 Arial,sans-serif; white-space:nowrap; }
#stage_messages #hcMessageOptionLabel { flex:0 0 auto; margin:0; color:#e1c7ff; font:650 max(18px,calc(4.5 * var(--hc-message-unit)))/1.25 Arial,sans-serif; white-space:nowrap; }
#stage_messages .hcMessageDetails { flex:0 0 auto; display:block; color:#eadcf9; font:600 max(16px,calc(3.8 * var(--hc-message-unit)))/1.3 Arial,sans-serif; }
#stage_messages #hcMessageCount { display:block; text-align:center; }
#stage_messages #hcMessageCount > span { display:block; }
#stage_messages .hcMessageNoticeSeat { min-height:2.7em; margin-top:calc(1.2 * var(--hc-message-unit)); }
#stage_messages #hcMessageNotice { margin:0; color:#f5cee0; font:inherit; text-align:center; white-space:pre-line; }
#stage_messages #hcMessageNotice[hidden] { display:none; }
#stage_messages .hcMessageOptionArrow:focus-visible { outline:2px solid #e5cdff; outline-offset:2px; }
#stage_messages.hcMessageKeyboardOpen .hcOneMessageHeading { display:none; }
@media (hover:hover) and (pointer:fine) {
 #stage_messages .hcMessageOptionArrow:not([aria-disabled="true"]):hover { background:rgba(119,70,170, .2); border-color:rgba(200,158,243,.55); }
}
#stage .hcUnifiedMessageText { display:block; width:100%; box-sizing:border-box; margin:0; padding:0; font-family:Arial,sans-serif; font-weight:600; font-style:normal; line-height:1.36; letter-spacing:0; font-kerning:none; font-variant-ligatures:none; text-transform:none; text-align:center; }
#stage .hcUnifiedMessageText .hcUnifiedMessageLine { display:block; white-space:pre; text-wrap:nowrap; min-height:1.36em; line-height:1.36; }
#stage #stage_creator .hcStudioUnifiedMessage { display:block; flex:0 0 auto; padding:calc(1.6 * var(--hc-message-unit, var(--hc-creation-unit))) 0; width:100%; min-height:0; }
#stage #stage_creator #hcStudioMessageButton { display:block; width:100%; min-height:0; padding:0; margin:0; color:#f7efff; background:transparent; border:0; text-shadow:0 1px 3px rgba(5,7,16,.7); }
#stage #stage_creator #hcStudioMessageButton::after { display:none; }
#stage .hcPreviewUnifiedMessage { width:100%; min-width:0; margin:0; padding:0; flex:0 0 auto; color:#f7efff; }
#stage .hcUnifiedMessageCanvas { font:600 24px/1.36 Arial,sans-serif; }
@media (hover:hover) and (pointer:fine) {
 #stage #stage_creator #hcStudioMessageButton:hover { color:#dec4ff; }
}
@media (forced-colors:active) {
 #stage_messages #hcMessageTextarea { background:transparent; color:CanvasText; -webkit-text-fill-color:CanvasText; border-color:ButtonText; box-shadow:none; }
 #stage_messages :is(h1,h2,p,label,.hcMessageDetails), #stage .hcUnifiedMessageText { color:CanvasText; }
 #stage_messages .hcMessagePaper { background:Canvas; box-shadow:inset 0 0 0 1px ButtonText; }
 #stage_messages button { background:ButtonFace; color:ButtonText; border-color:ButtonText; }
}

/* The retained Preview now has ONE message band, not the old blessing plus signature grid. */
#stage_creator_preview .hcPersonalPreviewLayout {
 grid-template-rows:auto auto minmax(0,1fr) auto auto;
 gap:calc(1.2 * var(--hc-message-unit, var(--hc-creation-unit)));
}
#stage_creator_preview .hcPreviewUnifiedMessage { z-index:1; }


/* HC-YOUR-CHOICES — the tour replaces only the content plane, never the fixed Top Bar.
   All personal substitutions are owned by one read-only layer; the original performance stays untouched. */
#stage_celebration[data-hc-choices-active="true"] > :not(.hcChoicesPreview) {
    visibility: hidden !important; pointer-events: none !important;
}
#hcChoicesPreview[hidden] { display: none !important; }
.hcChoicesPreview, .hcChoicesPreview * { box-sizing: border-box; }
.hcChoicesPreview {
    position: absolute; inset: 0; z-index: 180; margin: 0;
    padding: calc(var(--hero-top-control-bar-height, 104px) + env(safe-area-inset-top, 0px) + .5cqh) 3.5cqw max(8px, 1cqh);
    display: flex; flex-direction: column; gap: .55cqh; overflow: hidden;
    color: #faf6ff; text-align: center; font-family: Arial, sans-serif;
    background: radial-gradient(ellipse at 50% 50%, rgba(88, 58, 134, .12), transparent 70%);
}
.hcChoicesHeading { flex: 0 0 auto; margin: 0; padding: 0; }
#hcChoicesHeading { margin: 0; font-size: clamp(20px, 4.9cqw, 30px); font-weight: 750; line-height: 1.12; color: #e8d8ff; }
#hcChoicesHint { margin: .4cqh 0 0; font-size: clamp(12px, 3.1cqw, 18px); line-height: 1.22; color: #e1d7f1; }
#hcChoicesProgress { margin: .65cqh 0 .1cqh; font-size: clamp(15px, 3.75cqw, 22px); font-weight: 700; line-height: 1.15; color: #c8a7ff; }
.hcChoicesScene {
    flex: 1 1 0; min-height: 0; width: 100%;
    display: grid; grid-template-rows: minmax(32px, .9fr) minmax(36px, 1fr) minmax(36px, 4.5fr) minmax(var(--hc-choice-message-min, 118px), 2.6fr); gap: .2cqh;
}
.hcChoicesField {
    position: relative; min-width: 0; min-height: 0; width: 100%; padding: .2cqh 1cqw;
    border: 1px solid transparent; border-radius: 2cqw;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.hcChoicesFieldLabel {
    display: block; flex: 0 0 auto; font-size: clamp(11px, 2.7cqw, 16px); line-height: 1.08;
    color: #d5b8ff; font-weight: 600; visibility: hidden;
}
#hcChoicesPreview[data-choice-key="occasionLabel"] [data-choice-slot="occasionLabel"],
#hcChoicesPreview[data-choice-key="recipientName"] [data-choice-slot="recipientName"],
#hcChoicesPreview[data-choice-key="messageText"] [data-choice-slot="messageText"] {
    background: radial-gradient(ellipse at center, rgba(140, 91, 211, .22), rgba(84, 55, 127, .06));
    border-color: rgba(192, 152, 255, .46);
}
#hcChoicesPreview[data-choice-key="occasionLabel"] [data-choice-slot="occasionLabel"] .hcChoicesFieldLabel,
#hcChoicesPreview[data-choice-key="recipientName"] [data-choice-slot="recipientName"] .hcChoicesFieldLabel,
#hcChoicesPreview[data-choice-key="messageText"] [data-choice-slot="messageText"] .hcChoicesFieldLabel { visibility: visible; }
.hcChoicesOccasion, .hcChoicesName {
    display: block; flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden;
    align-content: center; margin: 0; line-height: 1.04; font-weight: 750; overflow-wrap: anywhere;
}
.hcChoicesOccasion { font-size: 6cqw; color: #b897ff; text-transform: uppercase; letter-spacing: .025em; }
.hcChoicesName { font-size: 7cqw; color: #f5fcff; text-shadow: 0 0 12px rgba(160, 221, 255, .65); }
.hcChoicesHeroArea { position: relative; min-height: 0; display: flex; justify-content: center; align-items: center; }
.hcChoicesArtwork { display: block; height: 100%; width: 90%; object-fit: contain; pointer-events: none; }
.hcChoicesHeroHalo { position: absolute; inset: 0 8%; z-index: -1; background: radial-gradient(ellipse, rgba(169, 125, 227, .20), transparent 65%); pointer-events: none; }
.hcChoicesSampleMark {
    position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
    display: block; white-space: nowrap; padding: .27em .72em; border-radius: 1em;
    font-size: clamp(11px, 2.8cqw, 16px); font-weight: 700; letter-spacing: .08em; line-height: 1.3;
    color: #f9f3ff; background: rgba(25, 15, 46, .86); border: 1px solid rgba(209, 178, 255, .45);
}
.hcChoicesTheme {
    position: absolute; left: 4%; right: 4%; bottom: .1cqh; padding: .25em .4em;
    font-size: clamp(16px, 4cqw, 25px); font-weight: 700; line-height: 1.2; color: #e6d6fc;
}
#hcChoicesPreview[data-choice-key="themeKey"] .hcChoicesTheme {
    background: rgba(54, 32, 87, .95); border: 1px solid #af85e6; border-radius: 2cqw; color: #fff;
}
.hcChoicesArtworkFallback { position: absolute; max-width: 90%; font-size: clamp(18px, 4.5cqw, 28px); }
.hcChoicesField--message { padding: .25cqh 1cqw; }
#hcChoicesMessage { margin: 0; flex: 1 1 0; min-height: 0; align-content: center; width: 100%; font: 600 24px/1.36 Arial, sans-serif; color: #fff; }
#hcChoicesMessage .hcUnifiedMessageLine { display: block; white-space: pre; line-height: 1.36; }
.hcChoicesControls { flex: 0 0 auto; width: 100%; }
#hcChoicesNote { max-width: 96%; margin: .3cqh auto .65cqh; font-size: clamp(14px, 3.5cqw, 19px); line-height: 1.2; color: #ded2ee; }
.hcChoicesStepButtons { display: grid; grid-template-columns: .85fr 1.55fr; gap: 2cqw; }
.hcChoicesControls button {
    min-height: 44px; border-radius: 2cqw; border: 1px solid #a87bdb; padding: .35em .65em;
    font: 650 clamp(15px, 3.9cqw, 24px)/1.2 Arial, sans-serif; color: #fff; background: rgba(59, 38, 93, .82);
    cursor: pointer; touch-action: manipulation;
}
#hcChoicesNext { background: linear-gradient(135deg, #7844b4, #52367f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.hcChoicesControls button:disabled { opacity: 1; color: #ddc8f5; background: rgba(50, 35, 72, .75); cursor: default; }
.hcChoicesControls button:focus-visible, #hcChoicesHeading:focus-visible { outline: 3px solid #e4c4ff; outline-offset: 2px; }
#hcChoicesSample { display: block; width: 100%; min-height: 38px; margin-top: .35cqh; background: transparent; border-color: transparent; font-size: clamp(13px, 3.35cqw, 19px); color: #dec8f6; text-decoration: underline; text-underline-offset: .18em; }

#hcChoicesHeading:focus { outline: none; } /* A focus destination, not an interactive control. */

/* HC-PHOTO-POLICY-20260929-01 — whole-photo previews, never a smart/face crop
   Letterbox space and matte insets are intentional; hair at a source corner must remain visible */
#stage_choice_photo { --hc-photo-policy-revision: "HC-PHOTO-POLICY-20260929-01"; }
#stage #stage_choice_photo .hcPreparedPhoto {
    object-fit: contain; object-position: center; padding: 6px; border-radius: 8px; background: #171225;
}
#stage_creator .hcStudioPhotoThumb {
    box-sizing: border-box; padding: 8px; border-radius: 8px;
}
#stage_creator .hcStudioPhotoThumb img { object-fit: contain; object-position: center; border-radius: 0; }
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedbackList {
    font-size: max(16px, min(3.8cqw, 22px)); line-height: 1.25; white-space: pre-line;
    overflow-wrap: anywhere; text-wrap: balance;
}
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedbackTitle {
    white-space: normal; text-wrap: balance;
}


/* HC-PHOTO-GOLD-20260930-01 — Hero Gold is the shared caution color
   Its first use is Photo feedback, not the particle palette or the normal purple navigation
   Existing words and data-mode/data-photo-state are authoritative; CSS never grants approval
   No image dimming, grayscale, blur, added motion, new handlers or new layout geometry */
:root {
    --hc-warning-color: #ffda85;

    --hc-warning-glow: rgba(255, 218, 133, .18);
}
#stage_choice_photo { --hc-photo-warning-revision: "HC-PHOTO-GOLD-20260930-01"; }

/* Failed policy checks AND technical failures share a calm, clearly visible gold heading
   Keep the current different messages: choose another photo versus please try again */
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedback[data-mode="error"] {
    box-shadow: none;
}
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedback[data-mode="error"] .hcPhotoFeedbackTitle {
    color: var(--hc-warning-color);
    font-weight: 800;
    font-style: normal;
    text-shadow: 0 1px 2px rgba(3, 1, 16, .72);
}
#stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedback:is([data-mode="error"], [data-mode="warning"]) .hcPhotoFeedbackList {
    color: var(--hc-warning-color);
    font-weight: 500;
    font-style: normal;
    text-shadow: 0 1px 2px rgba(3, 1, 16, .72);
}
#stage #stage_choice_photo[data-photo-state="rejected"] .hcPhotoPreviewCaption {
    color: var(--hc-warning-color);
    font-weight: 500;
    font-style: normal;
    text-shadow: 0 1px 2px rgba(3, 1, 16, .72);
}
#stage #stage_choice_photo[data-photo-state="rejected"] .hcPreparedPhoto {
    border-color: var(--hc-warning-color);
    box-shadow: 0 0 14px var(--hc-warning-glow);
}

/* An accepted-with-advice photo is still accepted: PERFECT stays mint
   Only its advice and frame become gold; the accepted caption stays Your photo
   :has is already used in this stylesheet and avoids a second JavaScript state owner */
#stage #stage_choice_photo[data-photo-state="accepted"]:has(.hcPhotoFeedback[data-mode="warning"]:not([hidden])) .hcPreparedPhoto {
    border-color: var(--hc-warning-color);
    box-shadow: 0 0 14px var(--hc-warning-glow);
}

/* Honor the guest's high-contrast palette; the existing status words still carry meaning */
@media (forced-colors: active) {
    #stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedback[data-mode="error"] .hcPhotoFeedbackTitle,
    #stage #stage_choice_photo .hcPhotoResultLine .hcPhotoFeedback:is([data-mode="error"], [data-mode="warning"]) .hcPhotoFeedbackList,
    #stage #stage_choice_photo[data-photo-state="rejected"] .hcPhotoPreviewCaption {
        color: CanvasText;
        text-shadow: none;
    }
    #stage #stage_choice_photo[data-photo-state="rejected"] .hcPreparedPhoto {
        border-color: CanvasText;
        box-shadow: none;
    }
    #stage #stage_choice_photo[data-photo-state="accepted"]:has(.hcPhotoFeedback[data-mode="warning"]:not([hidden])) .hcPreparedPhoto {
        border-color: CanvasText;
        box-shadow: none;
    }
}


/* HC-PHOTO-REFINE-20260930-01 — emphasis adds no HTML parsing and no new layout or motion */
#stage_choice_photo { --hc-photo-refine-revision: "HC-PHOTO-REFINE-20260930-01"; }
#stage #stage_choice_photo .hcPhotoFeedbackList strong { font-weight: 800; font-style: normal; color: inherit; }
/* The top message owns ALL failures, including technical errors and cases with no displayable photo */
#stage #stage_choice_photo .hcPhotoPreviewCaption[hidden],
#stage #stage_choice_photo[data-photo-state="rejected"] .hcPhotoPreviewCaption { display: none !important; }


/* HC-REVIEW-COMPOSITION-20260930-01 — the same photo -> arrow -> Hero composition on every device
   The original #stage remains the cqw/cqh reference; no device-specific markup, image crop or new animation
   All selectors require the new Review class so a support-first upload cannot restyle the old markup */
#stage_creator.hcReviewCompositionStage { --hc-review-revision: "HC-REVIEW-PHOTO-FADE-20260930-01"; }
#stage #stage_creator.hcReviewCompositionStage .hcStudioComposition {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto minmax(0,1fr) auto;
    row-gap: calc(2.5 * var(--hc-creation-unit));
}
#stage #stage_creator.hcReviewCompositionStage .hcStudioIdentity {
    grid-template-rows: auto auto;
    gap: calc(.9 * var(--hc-creation-unit));
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewNameLink {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    min-height: calc(9 * var(--hc-creation-unit)); padding: calc(.4 * var(--hc-creation-unit));
    font-size: calc(8 * var(--hc-creation-unit)); line-height: 1.12; font-weight: 800;
    letter-spacing: 0; text-decoration: none;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewNameLink::after,
#stage #stage_creator.hcReviewCompositionStage .hcStudioOccasion::after,
#stage #stage_creator.hcReviewCompositionStage #hcStudioHeroButton::before,
#stage #stage_creator.hcReviewCompositionStage #hcStudioHeroButton::after { display: none; }
#stage #stage_creator.hcReviewCompositionStage #hcStudioHeroButton {
    min-height: 0; padding: 0 0 calc(1.5 * var(--hc-creation-unit));
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewTransformation {
    display: grid; grid-template-columns: minmax(0,33fr) minmax(0,29fr) minmax(0,38fr);
    align-items: stretch; gap: calc(1 * var(--hc-creation-unit));
    width: 100%; height: 100%; min-height: calc(24 * var(--hc-creation-unit));
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewPhotoSeat,
#stage #stage_creator.hcReviewCompositionStage .hcReviewHeroDestination {
    position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%;
    display: grid; place-items: center; background: transparent;
}
/* One frame, fitted to the intrinsic photograph (including landscape guest photos).
   The outline is a separate CSS layer so the border and pixels can fade independently.
   No frame around the entire photo seat, no stock silhouette, no image cropping. */
#stage #stage_creator.hcReviewCompositionStage .hcReviewPhotoDisplay {
    position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: calc(.8 * var(--hc-creation-unit)); padding: 0; margin: 0;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewPhotoFrame {
    position: relative; display: block; flex: 0 0 auto; box-sizing: border-box;
    width: var(--hc-review-photo-width, 50%); height: var(--hc-review-photo-height, 80%);
    max-width: 100%; max-height: calc(100% - (5 * var(--hc-creation-unit)));
    border: 2px solid transparent; border-radius: 8px; padding: 6px;
    background: transparent; overflow: visible;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewPhotoBorder {
    position: absolute; inset: -2px; box-sizing: border-box; border: 2px solid #c5a2fb;
    border-radius: 8px; background: #171225; box-shadow: 0 0 14px rgba(147,100,224,.24);
    opacity: 0; pointer-events: none;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewPhotoFrame .hcReviewPhotoPixels {
    position: absolute; inset: 6px; display: block; width: calc(100% - 12px); height: calc(100% - 12px);
    min-width: 0; min-height: 0; max-width: none; max-height: none; box-sizing: border-box;
    object-fit: contain; object-position: center; border: 0; border-radius: 0;
    padding: 0; margin: 0; background: transparent; box-shadow: none; filter: none; opacity: 0;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewPhotoFrame .hcReviewPhotoPixels[hidden] { display: none; }
@media (forced-colors: active) {
    #stage #stage_creator.hcReviewCompositionStage .hcReviewPhotoBorder {
        border-color: CanvasText; background: Canvas; box-shadow: none;
    }
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewExampleCaption {
    flex: 0 0 auto; color: #e2cff7; font-size: calc(3.5 * var(--hc-creation-unit)); line-height: 1.2; text-align: center;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewCreationBridge {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-width: 0; min-height: 0; gap: calc(2.2 * var(--hc-creation-unit));
    color: #f6edff; background: transparent;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewCreationArrow {
    display: block; flex: 0 0 auto; width: 72%; height: auto; aspect-ratio: 104 / 78.14;
    fill: currentColor; overflow: visible; pointer-events: none;
}
#stage #stage_creator.hcReviewCompositionStage .hcStudioStandinNote {
    margin: 0; width: 100%; color: #eee2fc; font-size: calc(3.55 * var(--hc-creation-unit));
    font-weight: 500; line-height: 1.3; text-align: center; text-shadow: 0 1px 3px rgba(5,7,16,.7);
}
#stage #stage_creator.hcReviewCompositionStage .hcStudioStandinNote > span { display: block; white-space: nowrap; }
#stage #stage_creator.hcReviewCompositionStage #hcStudioOutline {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center; background: transparent;
}
#stage #stage_creator.hcReviewCompositionStage .hcStudioAura {
    inset: 0; background: radial-gradient(ellipse at 50% 48%,rgba(166,138,240,.17),transparent 70%);
}
#stage #stage_creator.hcReviewCompositionStage .hcStudioHeroCopy {
    left: 0; right: 0; top: 50%; transform: translateY(-50%);
    width: 100%; margin: 0; color: #fff; font-size: calc(4.7 * var(--hc-creation-unit));
    line-height: 1.15; white-space: nowrap; font-weight: 750; background: transparent;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewSelectionContext { display: none; }
#stage #stage_creator.hcReviewCompositionStage .hcStudioUnifiedMessage {
    padding: calc(.6 * var(--hc-creation-unit)) 0 calc(1.5 * var(--hc-creation-unit));
}
#stage #stage_creator.hcReviewCompositionStage .hcUnifiedMessageLine + .hcUnifiedMessageLine {
    margin-top: calc(.4 * var(--hc-creation-unit));
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewNameLink:focus-visible,
#stage #stage_creator.hcReviewCompositionStage #hcStudioHeroButton:focus-visible {
    outline: 2px solid #dfcaff; outline-offset: -2px;
}
@media (forced-colors: active) {
    #stage #stage_creator.hcReviewCompositionStage .hcReviewCreationBridge,
    #stage #stage_creator.hcReviewCompositionStage .hcStudioStandinNote,
    #stage #stage_creator.hcReviewCompositionStage .hcReviewExampleCaption,
    #stage #stage_creator.hcReviewCompositionStage .hcStudioHeroCopy {
        color: ButtonText; text-shadow: none;
    }
    #stage #stage_creator.hcReviewCompositionStage .hcReviewNameLink:focus-visible,
    #stage #stage_creator.hcReviewCompositionStage #hcStudioHeroButton:focus-visible { outline-color: Highlight; }
}

/* The existing Photo fit measures these finite controls. No overlay, new Stage or external asset. */
#stage #stage_choice_photo .hcModerationDisclosure {
    margin: 4px 0 0; text-align: center; color: #d2bde9;
    font: inherit; font-size: clamp(12px, 2.8cqw, 16px); line-height: 1.2;
}
#stage #stage_choice_photo .hcModerationRetry {
    display: block; margin: 6px auto 0; padding: 7px 15px;
    border: 1px solid #c5a2fb; border-radius: 10px;
    background: #38205e; color: #f8f2ff; font: inherit; font-size: 16px; cursor: pointer;
}
#stage #stage_choice_photo .hcModerationRetry[hidden] { display: none !important; }
#stage #stage_choice_photo .hcModerationRetry:focus-visible { outline: 2px solid #f8f2ff; outline-offset: 3px; }
#stage #stage_choice_photo .hcModerationRetry:disabled { cursor: default; }

/* HC-STRIPE-SANDBOX-20261002-01 — Purchase-only controls, still inside the 640px no-scroll Stage. */
#stage_purchase .hcStripeActions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
#stage_purchase .hcStripeActions[hidden], #stage_purchase .hcStripeActions [hidden] { display: none !important; }
#stage_purchase .hcStripeMessage { margin: 0; color: #e7d5f9; font-size: clamp(12px,2.5cqw,16px); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
#stage_purchase #hcStripePay { min-height: 46px; padding: 9px 12px; font-size: clamp(19px,4.3cqw,28px); }
#stage_purchase #hcStripePay:disabled { opacity: .78; color: #fff0ff; cursor: wait; }
#stage_purchase .hcStripeLink { border: 0; padding: 6px 8px; min-height: 32px; color: #e4c7ff; font: inherit; font-size: clamp(14px,2.8cqw,18px); line-height: 1.15; background: transparent; text-decoration: underline; text-align: center; cursor: pointer; }
#stage_purchase .hcStripeLink:disabled { color: #d3b4ef; cursor: wait; }
#stage_purchase .hcOrderSummary { gap: clamp(4px,.8cqh,8px); }
#stage_purchase .hcOrderSeal { display: none; }
#stage_purchase .hcOrderMessage { font-size: clamp(15px,3.3cqw,21px); }
#stage_purchase .hcOrderTestNote { font-size: clamp(12px,2.4cqw,16px); }
#stage_purchase .hcPurchaseLayout > .hcCreationNext { min-height: 40px; padding: 8px 12px; font-size: clamp(18px,4cqw,25px); }
@container (max-height: 620px) {
 #stage_purchase .hcPurchaseLayout { gap: 5px; }
 #stage_purchase .hcOrderSummary { gap: 3px; }
 #stage_purchase .hcOrderSummary h2 { font-size: clamp(18px,3.7cqw,23px); }
 #stage_purchase .hcOrderOccasion, #stage_purchase .hcOrderThemeLine { font-size: clamp(12px,2.6cqw,16px); }
 #stage_purchase .hcOrderRecipient { font-size: clamp(21px,4.4cqw,28px); }
 #stage_purchase .hcOrderRecord, #stage_purchase .hcOrderTestNote { font-size: 12px; }
 #stage_purchase #hcStripePay { min-height: 40px; padding: 7px; }
 #stage_purchase .hcStripeLink { padding: 3px; min-height: 28px; }
}
/* A short landscape viewport uses two compact columns, rather than squeezing a scrolling payment form. */
@container (max-height: 470px) and (min-width: 560px) {
 #stage_purchase .hcPurchaseLayout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 5px 12px; }
 #stage_purchase .hcPurchaseLayout > .hcJourneyHeading { grid-column: 1 / -1; }
 #stage_purchase .hcPurchaseLayout .hcJourneyHeading h1 { font-size: 24px; }
 #stage_purchase .hcOrderSummary { grid-column: 1; grid-row: 2 / 4; gap: 2px; justify-content: center; }
 #stage_purchase .hcOrderSummary h2, #stage_purchase .hcOrderRecord, #stage_purchase .hcOrderTestNote { display: none; }
 #stage_purchase .hcOrderRecipient { font-size: 21px; }
 #stage_purchase .hcOrderOccasion, #stage_purchase .hcOrderThemeLine { font-size: 12px; }
 #stage_purchase .hcOrderMessage { font-size: 13px; line-height: 1.1; }
 #stage_purchase .hcStripeActions { grid-column: 2; grid-row: 2; align-self: center; }
 #stage_purchase .hcStripeMessage { font-size: 12px; }
 #stage_purchase .hcPurchaseLayout > .hcCreationNext { grid-column: 2; grid-row: 3; font-size: 17px; min-height: 34px; padding: 6px; }
 #stage_purchase #hcStripePay { font-size: 17px; min-height: 36px; padding: 6px; }
}


/* HC-THEME-GALLERY-20261013-01 — Theme only; all existing theater/Photo/Review rules above are unchanged.
   Two equal portrait rows share one category row. The original Stage remains the cqw/cqh reference.
   The new class is added only by the paired renderer; this CSS does not rearrange old markup. */
#stage #stage_choice_theme.hcThemePairsStage > .hcJourneyViewport { cursor: default; }
#stage #stage_choice_theme.hcThemePairsStage .hcCreationQuestionHeading > p:not(.hcClarityAccessible) {
    display: none;
}
#stage #stage_choice_theme.hcThemePairsStage #hcCreationThemeChoices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
}
#stage_choice_theme.hcThemePairsStage .hcCreationThemeCategory {
    display: block; align-self: center; min-width: 0; margin: 0; padding: 0;
    color: #faf7ff;
    font-family: var(--hero-base-font-family, "Trebuchet MS", Arial, sans-serif);
    font-size: calc(4.8 * var(--hc-creation-unit)); font-weight: 500;
    line-height: 1.15; letter-spacing: -.025em; text-align: center; white-space: nowrap;
    pointer-events: none;
}
@media (forced-colors: active) {
    #stage_choice_theme.hcThemePairsStage .hcCreationThemeCategory { color: CanvasText; }
}

/* Purchaser return: one saved gift at a time, inside the existing Stage; no nested scrolling. */
.hcDeliveryTextLink { border:0;background:transparent;color:#dfc8ff;text-decoration:underline;cursor:pointer;
 font:600 clamp(14px,3cqw,19px)/1.2 var(--hero-base-font-family,Arial,sans-serif);padding:.8cqh 1.5cqw;min-height:30px; }
#hcMyCelebrationsHome { padding:.25cqh 1.5cqw;min-height:26px; }
#stage_delivery [hidden], #hcDeliveryAfterPayment[hidden] { display:none !important; }
#stage_delivery .hcDeliveryLayout { --hc-delivery-u:min(1cqw,max(1px,calc((100cqh - var(--hero-top-control-bar-height,104px) - var(--hc-footer-reserve,22px) - 24px) / 100)));height:100%;min-height:0;display:flex;flex-direction:column;
 align-items:stretch;gap:calc(1.6 * var(--hc-delivery-u));text-align:center;width:90cqw;max-width:100%;margin:auto; }
#stage_delivery .hcJourneyHeading h1 { font-size:calc(6 * var(--hc-delivery-u));line-height:1.1; }
#stage_delivery p,#stage_delivery h2 { margin:0;overflow-wrap:anywhere; }
.hcDeliveryStatus { color:#e7d4ff;font-size:calc(3.6 * var(--hc-delivery-u));line-height:1.25; }
.hcDeliveryCard { flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:center;
 gap:calc(2 * var(--hc-delivery-u));color:#fcf7ff; }
#hcDeliveryName { font-size:calc(6 * var(--hc-delivery-u));line-height:1.05; }
.hcDeliveryOccasion { font-size:calc(3.8 * var(--hc-delivery-u));color:#cfafff;line-height:1.15; }
#hcDeliveryReady { font-size:calc(3.6 * var(--hc-delivery-u));line-height:1.25; }
.hcDeliveryReadyActions { display:flex;flex-direction:column;gap:calc(1.6 * var(--hc-delivery-u)); }
#stage_delivery .hcButton { min-height:calc(8 * var(--hc-delivery-u));padding:calc(1.5 * var(--hc-delivery-u));
 font-size:calc(5 * var(--hc-delivery-u));line-height:1.2;text-decoration:none;display:block; }
#hcDeliveryLink { box-sizing:border-box;width:100%;padding:calc(1.5 * var(--hc-delivery-u));border:1px solid #9272b6;border-radius:1cqw;
 background:#171127;color:#eee4ff;font-size:calc(2.6 * var(--hc-delivery-u));min-width:0; }
.hcDeliveryHint { color:#d7c2f3;font-size:calc(3 * var(--hc-delivery-u));line-height:1.25; }
.hcDeliveryFoot { flex:0 0 auto;display:flex;flex-direction:column;gap:calc(.8 * var(--hc-delivery-u)); }
#stage_delivery .hcDeliveryTextLink { font-size:calc(3.1 * var(--hc-delivery-u));min-height:calc(5 * var(--hc-delivery-u));padding:calc(.7 * var(--hc-delivery-u)); }
.hcDeliveryBrowse { display:flex;align-items:center;justify-content:space-between;gap:3cqw;color:#eedfff;
 font-size:calc(3 * var(--hc-delivery-u)); }
.hcDeliveryBrowse button { border:1px solid #9974be;background:#322047;color:#f8efff;border-radius:1cqw;
 font:600 calc(5 * var(--hc-delivery-u))/1 Arial,sans-serif;width:12cqw;min-height:calc(6 * var(--hc-delivery-u));cursor:pointer; }
#stage_delivery button:disabled { cursor:default;opacity:.65; }
.hcDeliveryAfterPayment { flex:0 0 auto;display:flex;flex-direction:column;gap:4px; }
#hcDeliveryAfterPayment .hcButton { min-height:40px;padding:7px 10px;font-size:clamp(18px,4cqw,25px); }
#hcDeliveryPurchaseNotice { margin:0;color:#e6d0ff;font-size:clamp(12px,2.5cqw,16px);line-height:1.2; }
@media (forced-colors:active) { .hcDeliveryTextLink,.hcDeliveryHint,.hcDeliveryStatus,.hcDeliveryCard,.hcDeliveryOccasion { color:CanvasText; } }


/* HC-SANDBOX-JOURNEY-20261020-01 — Four saved-state milestones, no estimated percentage or new animation clock. */
#stage_delivery .hcDeliveryLayout { gap:calc(1.25 * var(--hc-delivery-u)); }
#stage_delivery .hcDeliveryCard { gap:calc(1.65 * var(--hc-delivery-u)); }
#stage_delivery .hcDeliveryProgress { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
 margin:calc(1.5 * var(--hc-delivery-u)) 0;padding:0;list-style:none; }
#stage_delivery .hcDeliveryProgress li { position:relative;display:flex;flex-direction:column;align-items:center;
 gap:calc(1.1 * var(--hc-delivery-u));font-size:calc(2.8 * var(--hc-delivery-u));line-height:1.15;
 color:#d2bfe8;text-shadow:none;isolation:isolate; }
#stage_delivery .hcDeliveryProgress li:not(:last-child)::after { content:"";position:absolute;z-index:-1;
 left:calc(50% + 3.2 * var(--hc-delivery-u));right:calc(-50% + 3.2 * var(--hc-delivery-u));
 top:calc(3.2 * var(--hc-delivery-u));height:1px;background:#886caa; }
#stage_delivery .hcDeliveryStepDot { display:grid;place-items:center;width:calc(6.4 * var(--hc-delivery-u));
 height:calc(6.4 * var(--hc-delivery-u));border:1px solid #ab8cc8;border-radius:50%;
 background:#251634;color:#e7d4f7;font-size:calc(3 * var(--hc-delivery-u));font-weight:700; }
#stage_delivery .hcDeliveryProgress [data-state="done"] .hcDeliveryStepDot { background:#edcc8d;color:#362313;border-color:#f8e5bd; }
#stage_delivery .hcDeliveryProgress [data-state="done"] { color:#f2dbaf; }
#stage_delivery .hcDeliveryProgress [data-state="current"] .hcDeliveryStepDot { border:2px solid #edcc8d;
 background:#3a2058;color:#fff1d7;box-shadow:0 0 calc(2.2 * var(--hc-delivery-u)) #dfbaf038; }
#stage_delivery .hcDeliveryProgress [data-state="current"] { color:#fff1d7; }
#stage_delivery .hcDeliveryProgress[data-phase="needs_attention"] .hcDeliveryStepDot,
#stage_delivery .hcDeliveryProgress[data-phase="taking_longer"] .hcDeliveryStepDot { box-shadow:none; }
#stage_delivery .hcDeliveryReference { color:#d7c2f3;font-size:calc(2.6 * var(--hc-delivery-u));
 line-height:1.15;letter-spacing:.035em; }
#stage_delivery #hcDeliveryPollNote:empty,#stage_delivery #hcDeliveryReference:empty { display:none; }
#stage_delivery #hcDeliveryEmail { color:#efd8ac; }
#stage_delivery .hcDeliveryReadyActions { gap:calc(1.35 * var(--hc-delivery-u)); }
#stage_delivery .hcDeliveryFoot { gap:calc(.55 * var(--hc-delivery-u)); }
@media (forced-colors:active) {
 #stage_delivery .hcDeliveryProgress li,#stage_delivery .hcDeliveryReference,#stage_delivery #hcDeliveryEmail { color:CanvasText; }
 #stage_delivery .hcDeliveryStepDot { forced-color-adjust:auto; }
 #stage_delivery .hcDeliveryProgress [data-state="current"] .hcDeliveryStepDot { outline:2px solid Highlight; }
}


/* HC-NAVIGATION-MEMORY-20261021-01 — Reserved seats, no first-view icon flash, no layout movement. */
#stage[data-hc-celebration-navigation="locked"] #heroCreatorNavigationButton,
#stage[data-hc-celebration-navigation="locked"] #heroPurchaseNavigationButton {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#stage_topControlBar.hcFixedTopBar #heroPurchaseNavigationButton[data-hc-purchase-state="offer"] { opacity: 1; }
/* The safe recipient Home uses the same Stage and existing pause/resume path. */
#stage_offer .hcOfferLayout {
    box-sizing: border-box; width: 100%; height: 100%; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
    gap: clamp(6px,1.4cqh,16px); padding: 1cqh 3cqw; text-align: center;
    color: #f5edff;
}
#stage_offer .hcOfferLayout p { margin: 0; }
#stage_offer .hcOfferLayout .hcJourneyHeading { flex: 0 0 auto; }
#stage_offer .hcOfferLayout h1 { font-size: clamp(22px,5.8cqw,38px); line-height: 1.12; margin: 0; }
#stage_offer .hcOfferPromise { font-size: clamp(14px,3.6cqw,23px); line-height: 1.35; color: #ded0f3; }
#stage_offer .hcOfferPrice { font-size: clamp(42px,13cqw,82px); font-weight: 800; line-height: 1.05; color: #c7a0ff; text-shadow: 0 0 20px rgba(173,122,255,.3); }
#stage_offer .hcOfferPriceNote { font-size: clamp(11px,2.7cqw,17px); line-height: 1.35; margin-top: .8cqh; }
#stage_offer .hcOfferDescription { font-size: clamp(13px,3.1cqw,20px); line-height: 1.45; }
#stage_offer .hcOfferActions { width: min(100%,460px); display: grid; gap: 1.2cqh; }
#stage_offer .hcOfferActions .hcButton { width: 100%; box-sizing: border-box; }
#stage_offer .hcOfferSandboxNote { font-size: clamp(10px,2.25cqw,14px); line-height: 1.35; color: #c9b9e4; }
@media (max-height: 580px) {
    #stage_offer .hcOfferLayout { gap: 5px; padding-block: 0; }
    #stage_offer .hcOfferDescription { font-size: 12px; line-height: 1.2; }
    #stage_offer .hcOfferPrice { font-size: clamp(32px,10cqw,52px); }
    #stage_offer .hcOfferPromise { font-size: 13px; line-height: 1.2; }
    #stage_offer .hcOfferLayout h1 { font-size: 22px; }
}

/* Recipient Home has no Creator repagination module. Fit its existing content in the same fixed Stage. */
#stage[data-hc-recipient-view="true"] #stage_sell .hcSellHeroFrame { min-height: 0; flex: 1 1 0; }
#stage[data-hc-recipient-view="true"] #stage_sell .hcJourneyHeading h1 { font-size: clamp(25px,6.8cqw,42px); }
#stage[data-hc-recipient-view="true"] #stage_sell .hcSellPromise { font-size: clamp(16px,4.5cqw,27px); margin-bottom: 10px; }
#stage[data-hc-recipient-view="true"] #stage_sell .hcLargeAction { min-height: 46px; padding-block: 9px; font-size: clamp(18px,4.7cqw,28px); }
#stage[data-hc-recipient-view="true"] #stage_sell .hcJourneyActions { gap: 9px; }


/* HC-MESSAGE-ATELIER-20261024-01 — approved purple paper, Arial Bold Italic, independent bounds.
   heroMessageLayoutObj supplies the shared settings as stage-scoped custom properties.
   The native field and all guest storage/validation retain their existing owners.
   Two-second reductions only: growth is immediate so typing/caret never waits behind a shrinking clip. */
#stage { --hc-message-atelier-revision: "HC-MESSAGE-ATELIER-20261024-01"; }
#stage_messages .hcOneMessageEditor {
    position: relative; flex: 1 1 0; width: 100%; min-height: 0; min-width: 0;
    align-self: center; margin: 0; overflow: visible;
}
#stage_messages .hcMessagePaper {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    box-sizing: border-box; width: min(320px,100%); height: 120px; min-width: 0;
    background: var(--hc-atelier-paper,#33224D);
    border: var(--hc-atelier-border-width,1.5px) solid var(--hc-atelier-border,#AE73ED);
    border-radius: var(--hc-atelier-radius,21px);
    box-shadow: 0 0 var(--hc-atelier-glow-blur,48px) 0 var(--hc-atelier-glow,rgba(174,115,237,.28));
    overflow: hidden; outline: none;
    transition: width var(--hc-atelier-resize-duration,2000ms) cubic-bezier(.22,.61,.36,1),
                height var(--hc-atelier-resize-duration,2000ms) cubic-bezier(.22,.61,.36,1);
}
#stage_messages .hcMessagePaper:focus-within {
    outline: none;
    box-shadow: 0 0 var(--hc-atelier-glow-blur,48px) 0 var(--hc-atelier-glow,rgba(174,115,237,.28));
}
#stage_messages .hcMessagePaper.hcAtelierImmediate { transition: none; }
#stage_messages #hcMessageTextarea {
    left:50%; top:50%; transform-origin:center center; transform:translate(-50%,-50%);
    margin:0; padding:0; border:0; border-radius:0; outline:none;
    appearance:none; -webkit-appearance:none; resize:none; box-shadow:none; background:transparent;
    font-family:var(--hc-atelier-font-family,Arial,Helvetica,sans-serif);
    font-size:var(--hc-atelier-font-size,27px); font-weight:var(--hc-atelier-font-weight,700);
    font-style:var(--hc-atelier-font-style,italic); line-height:var(--hc-atelier-line-height,1.49);
    color:var(--hc-atelier-ink,#F4EBFF); -webkit-text-fill-color:var(--hc-atelier-ink,#F4EBFF);
    caret-color:currentColor; text-decoration:none; text-shadow:none; text-align:center;
}
#stage_messages #hcMessageTextarea::placeholder {
    color:var(--hc-atelier-ink,#F4EBFF); -webkit-text-fill-color:var(--hc-atelier-ink,#F4EBFF);
    opacity:.6; font-weight:inherit; font-style:inherit;
}
#stage_messages #hcMessageTextarea::selection { background:rgba(174,115,237,.45); }
#stage .hcUnifiedMessageText,
#stage #hcChoicesMessage,
#stage .hcUnifiedMessageCanvas {
    font-family:var(--hc-atelier-font-family,Arial,Helvetica,sans-serif);
    font-weight:var(--hc-atelier-font-weight,700); font-style:var(--hc-atelier-font-style,italic);
    line-height:var(--hc-atelier-line-height,1.49); color:var(--hc-atelier-ink,#F4EBFF);
    letter-spacing:0; font-kerning:none; font-variant-ligatures:none; text-shadow:none; text-decoration:none;
}
#stage .hcUnifiedMessageText .hcUnifiedMessageLine,
#stage #hcChoicesMessage .hcUnifiedMessageLine {
    min-height:1.49em; line-height:var(--hc-atelier-line-height,1.49); margin:0;
}
#stage #stage_creator.hcReviewCompositionStage .hcUnifiedMessageLine + .hcUnifiedMessageLine { margin-top:0; }
#stage .hcAtelierReadOnlyPaper,
#stage .hcAtelierPlaybackPaper {
    box-sizing:border-box; background:var(--hc-atelier-paper,#33224D);
    border:var(--hc-atelier-border-width,1.5px) solid var(--hc-atelier-border,#AE73ED);
    border-radius:var(--hc-atelier-radius,21px);
    box-shadow:0 0 var(--hc-atelier-glow-blur,48px) 0 var(--hc-atelier-glow,rgba(174,115,237,.28));
    text-shadow:none;
}
#stage #hcStudioMessageButton:hover .hcAtelierReadOnlyPaper { color:var(--hc-atelier-ink,#F4EBFF); }
#stage .hcChoicesField--message {
    background:var(--hc-atelier-paper,#33224D);
    border-color:var(--hc-atelier-border,#AE73ED); border-radius:var(--hc-atelier-radius,21px);
    box-shadow:0 0 var(--hc-atelier-glow-blur,48px) 0 var(--hc-atelier-glow,rgba(174,115,237,.28));
}
@media (prefers-reduced-motion:reduce) {
    #stage_messages .hcMessagePaper { transition:none; }
}
@media (forced-colors:active) {
    #stage_messages .hcMessagePaper,
    #stage .hcAtelierReadOnlyPaper,
    #stage .hcAtelierPlaybackPaper,
    #stage .hcChoicesField--message { background:Canvas; border-color:CanvasText; box-shadow:none; }
    #stage_messages #hcMessageTextarea,
    #stage .hcUnifiedMessageText,
    #stage #hcChoicesMessage { color:CanvasText; -webkit-text-fill-color:CanvasText; }
}

/* HC-REVIEW-CHECKOUT-20261029-01 — green primary action above the Hero preview, no second purchase button. */
#stage #stage_creator.hcReviewCompositionStage .hcStudioComposition {
	grid-template-columns: minmax(0,42fr) minmax(0,58fr);
	grid-template-rows: auto minmax(0,1fr) auto;
	gap: calc(1.5 * var(--hc-creation-unit));
}
#stage #stage_creator.hcReviewCompositionStage .hcStudioIdentity { grid-area: 1 / 1 / 2 / 3; }
#stage #stage_creator.hcReviewCompositionStage #hcStudioHeroButton { grid-area: 2 / 1 / 3 / 3; }
#stage #stage_creator.hcReviewCompositionStage .hcReviewTransformation {
	grid-template-columns: minmax(0,42fr) minmax(0,23fr) minmax(0,35fr);
	grid-template-rows: minmax(0,36fr) minmax(0,64fr); min-height: 0;
}
#stage #stage_creator.hcReviewCompositionStage .hcReviewPhotoSeat { grid-area: 1 / 1 / 3 / 2; }
#stage #stage_creator.hcReviewCompositionStage .hcReviewCreationBridge { grid-area: 2 / 2; }
#stage #stage_creator.hcReviewCompositionStage .hcReviewHeroDestination { grid-area: 2 / 3; }
#stage #stage_creator.hcReviewCompositionStage .hcStudioStandinNote {
	font-size: calc(3.05 * var(--hc-creation-unit)); line-height: 1.3;
}
#stage #stage_creator.hcReviewCompositionStage .hcStudioHeroCopy {
	font-size: calc(3.8 * var(--hc-creation-unit)); white-space: normal; text-wrap: balance;
}
#stage #stage_creator.hcReviewCompositionStage .hcStudioUnifiedMessage {
	grid-area: 3 / 1 / 4 / 3; padding-bottom: 0;
}
#stage #stage_creator .hcReviewPurchaseSeat {
	grid-area: 2 / 2; z-index: 3; align-self: start;
	display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
	gap: calc(.7 * var(--hc-creation-unit)); min-width: 0;
	padding: calc(.8 * var(--hc-creation-unit)) calc(.8 * var(--hc-creation-unit)) 0;
}
#stage #hcReviewPurchaseButton {
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	width: 100%; min-height: 44px; box-sizing: border-box; margin: 0;
	gap: calc(.5 * var(--hc-creation-unit)); padding: calc(1.8 * var(--hc-creation-unit)) 8px;
	border: 2px solid #85efac; border-radius: calc(3.2 * var(--hc-creation-unit));
	color: #fff; background: linear-gradient(155deg,#107d3b,#075b29);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 16px rgba(39,212,103,.28);
	font: 800 clamp(16px,calc(5.2 * var(--hc-creation-unit)),32px)/1.12 var(--hero-base-font-family,Arial,sans-serif);
	text-align: center; cursor: pointer; white-space: normal; text-wrap: balance;
}
#stage #hcReviewPurchasePrice { display: block; font-size: 1.05em; font-weight: 750; }
#stage #hcReviewPurchaseButton:disabled { color: #fff; opacity: 1; cursor: default; }
#stage #hcReviewPurchaseButton[aria-busy="true"] { background: linear-gradient(155deg,#0d6c34,#075b29); }
#stage #hcReviewPurchaseButton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#stage #hcReviewPurchaseStatus {
	margin: 0; padding: 4px; border-radius: 6px; background: #18192b;
	color: #f0e6ff; font: 600 clamp(11px,calc(2.5 * var(--hc-creation-unit)),15px)/1.25 Arial,sans-serif;
	text-align: center; text-wrap: balance;
}
#stage #hcReviewPurchaseStatus[hidden] { display: none; }
@media (hover:hover) and (pointer:fine) {
	#stage #hcReviewPurchaseButton:not(:disabled):hover { background: linear-gradient(155deg,#158c43,#086831); border-color: #c5ffd8; }
}
@media (forced-colors:active) {
	#stage #hcReviewPurchaseButton { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
}
#stage { --hc-review-validation-release: "HC-REVIEW-CHECKOUT-20261029-01"; }

/* HC-OVERLAY-IMMERSIVE-20261025-01 — ONE overlay; optional branded opaque parent. No blur. */
#stage {
    --hc-guest-overlay-release: "HC-OVERLAY-IMMERSIVE-20261025-01";
    --hc-overlay-paper: #2b3750;
    --hc-overlay-ink: #f4ebff;
    --hc-overlay-border: #8f7ccb;
}
#stage > .hcGuestOverlayLayer {
    position: absolute; inset: 0; z-index: 18000;
    /* These dimensions belong ONLY to this overlay, never the Messages Atelier. */
    --hc-overlay-min-width: 300px;
    --hc-overlay-max-width: 480px;
    --hc-overlay-min-height: 150px;
    --hc-overlay-max-height: 85%;
    display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center; box-sizing: border-box;
    /* No vertical padding: the height limit is exactly 85% of this Stage. */
    padding: 0 clamp(14px, 3.4cqw, 22px); isolation: isolate;
    background: transparent; pointer-events: auto;
    backdrop-filter: none; -webkit-backdrop-filter: none; filter: none;
}
/* The parent owns the backdrop and the single opacity animation; its child is the Overlay message.
   The shared background shorthand supplies the existing radial gradients. Only the base
   is opaque here; the underlying Stage wrapper and Message panel are not modified. */
#stage > .hcGuestOverlayLayer[data-opaque-backdrop="true"] {
    background: var(--hero-stage-background, var(--hc-stage-background-fallback));
    background-color: var(--hero-background-base-color, #05070b);
}
@media (forced-colors: active) {
    #stage > .hcGuestOverlayLayer[data-opaque-backdrop="true"] { background: Canvas; }
}
#stage > .hcGuestOverlayLayer[hidden] { display: none !important; }
#stage .hcGuestOverlayCard {
    position: relative; box-sizing: border-box;
    /* Intrinsic width includes the optional title; wrap only at our upper limit.
       The lower limits yield on very small Stages so the Overlay message never escapes. */
    width: max-content;
    min-width: min(var(--hc-overlay-min-width), 100%);
    max-width: min(var(--hc-overlay-max-width), 100%);
    min-height: min(var(--hc-overlay-min-height), var(--hc-overlay-max-height));
    max-height: var(--hc-overlay-max-height);
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    transition: none; /* Immediate border sizing. Opacity fades are owned by JS. */
    padding: clamp(20px, 4.6cqw, 28px) clamp(20px, 4.6cqw, 28px) 20px;
    border: 1.5px solid var(--hc-overlay-border); border-radius: 22px;
    background: var(--hc-overlay-paper); color: var(--hc-overlay-ink);
    box-shadow: none; text-shadow: none; filter: none; backdrop-filter: none;
    text-align: center; font-family: Arial,sans-serif; outline: none;
}
#stage .hcGuestOverlayBrand {
    margin: 0 0 16px; color: #d0c5eb;
    font: 700 11px/1.4 Arial,sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
#stage #hcGuestOverlayTitle {
    margin: 0 0 14px; color: var(--hc-overlay-ink);
    font: italic 700 clamp(21px, 5cqw, 30px)/1.49 Arial,sans-serif;
    overflow-wrap: anywhere; white-space: pre-wrap;
}
#stage #hcGuestOverlayTitle[hidden] { display: none !important; }
#stage #hcGuestOverlayMessage {
    margin: 0; color: var(--hc-overlay-ink);
    font: italic 700 clamp(18px, 4.6cqw, 27px)/1.49 Arial,sans-serif;
    overflow-wrap: anywhere; white-space: pre-wrap;
}
#stage .hcGuestOverlayHint {
    margin: 19px 0 0; color: #d0c5df; font: 400 12px/1.45 Arial,sans-serif;
}
#stage .hcGuestOverlayAccessible {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (forced-colors: active) {
    #stage .hcGuestOverlayCard { background: Canvas; color: CanvasText; border-color: CanvasText; }
    #stage #hcGuestOverlayTitle, #stage #hcGuestOverlayMessage,
    #stage .hcGuestOverlayBrand, #stage .hcGuestOverlayHint { color: CanvasText; }
}

/* HC-OVERLAY-IMMERSIVE-20261025-01 — presentation only. Same HTML, typography,
   padding, responsive limits and scroll region; the Message panel is untouched.
   This class belongs to the existing full-Stage overlay PARENT. It remains applied
   throughout the parent's fade-out and is removed before the next item opens. */
#stage > .hcGuestOverlayLayer.hcOverlayImmersive .hcGuestOverlayCard {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* HC-FOUNDATION-ABC-20261025-01 — ONLY overlay formatting and the new Anticipation shell. */
#stage { --hc-foundation-release: "HC-FOUNDATION-ABC-20261025-01"; }
#stage #hcGuestOverlayMessage p { margin: 0 0 .6em; font: inherit; color: inherit; }
#stage #hcGuestOverlayMessage p:last-child { margin-bottom: 0; }
#stage #hcGuestOverlayMessage strong, #stage #hcGuestOverlayMessage b { font-weight: 900; }
#stage #hcGuestOverlayMessage .hcOverlayEmphasis { color: #e6d4ff; }
#stage #hcGuestOverlayMessage .hcOverlayMuted { color: #d0c5df; }
#stage #hcGuestOverlayHint[hidden] { display: none !important; }
#stage[data-current-page-stage="anticipation_stage"] > #stage_topControlBar { display: none !important; }
#stage #anticipation_stage .hcAnticipationLayout {
    position: absolute; inset: 0 0 32px; padding: clamp(20px,5cqw,36px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 22px; text-align: center; box-sizing: border-box; overflow-y: auto;
    color: #f4ebff; background: transparent;
}
#stage #hcAnticipationTitle { margin: 0; max-width: 100%; font: 700 clamp(26px,6cqw,38px)/1.25 Arial,sans-serif; overflow-wrap: anywhere; }
#stage #hcAnticipationMessage { margin: 0; max-width: 100%; font: italic 700 clamp(19px,4.5cqw,28px)/1.49 Arial,sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
#stage #hcAnticipationDetail { margin: 0; max-width: 100%; font: 400 clamp(14px,3.2cqw,19px)/1.5 Arial,sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
#stage #anticipation_stage .hcStripeActions { width: min(100%,420px); margin: 0; }
#stage #anticipation_stage [hidden] { display: none !important; }
#stage #anticipation_stage .hcAnticipationLayout { justify-content: safe center; }
#stage #anticipation_stage .hcAnticipationLayout > * { flex-shrink: 0; }
#stage #anticipation_stage .hcStripeActions { display: flex; flex-direction: column; gap: 12px; }
#stage #anticipation_stage .hcStripeLink {
    border: 0; background: transparent; padding: 10px 14px; min-height: 44px;
    color: #e6d4ff; font: inherit; font-size: clamp(16px,3.6cqw,22px);
    text-decoration: underline; cursor: pointer;
}