.elementor-widget-spin-generative-geometry {
	inline-size: 100%;
	max-inline-size: none;
	overflow: visible;
}

.elementor-widget-spin-generative-geometry.spin-geometry-widget--ratio-square {
	aspect-ratio: 1;
}

.elementor-widget-spin-generative-geometry.spin-geometry-widget--ratio-portrait {
	aspect-ratio: 4 / 5;
}

.elementor-widget-spin-generative-geometry.spin-geometry-widget--ratio-landscape {
	aspect-ratio: 4 / 3;
}

.elementor-widget-spin-generative-geometry.spin-geometry-widget--ratio-wide {
	aspect-ratio: 16 / 9;
}

.elementor-widget-spin-generative-geometry.spin-geometry-widget--ratio-cinematic {
	aspect-ratio: 21 / 9;
}

.elementor-widget-spin-generative-geometry.spin-geometry-widget--ratio-free {
	block-size: var(--spin-geometry-height, 560px);
}

.elementor-widget-spin-generative-geometry > .elementor-widget-container {
	inline-size: 100%;
	block-size: 100% !important;
	overflow: visible;
}

.spin-generative-geometry {
	--spin-geometry-primary: var(--spin-color-action, #ffe229);
	--spin-geometry-secondary: var(--spin-color-text, #f4f1e8);
	--spin-geometry-tertiary: #68d5ff;
	--spin-geometry-quaternary: #ff6bd6;
	--spin-geometry-quinary: #8dff9c;
	--spin-geometry-background: var(--spin-color-surface, #121412);
	--spin-geometry-breakout: 0%;
	--spin-geometry-safe-inline: 100%;
	--spin-geometry-density-mult: 1;
	--spin-geometry-scale-mult: 1;
	--spin-geometry-camera-mult: 1;
	--spin-geometry-motion-mult: 1;
	position: relative;
	z-index: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	margin: 0;
	overflow: visible;
	isolation: isolate;
}

.spin-generative-geometry__frame {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100vw;
	min-block-size: 220px;
	transform: translateX(-50%);
	overflow: clip;
	border-radius: var(--spin-radius-surface, 0);
	background: transparent;
	color: var(--spin-color-text, #f4f1e8);
	contain: paint style;
}

.spin-generative-geometry--breakout .spin-generative-geometry__frame {
	inset-block: 50% auto;
	inline-size: min(calc(100% + (2 * var(--spin-geometry-breakout))), var(--spin-geometry-safe-inline));
	block-size: min(calc(100% + (2 * var(--spin-geometry-breakout))), 100vh);
	transform: translate(-50%, -50%);
	overflow: visible;
	contain: style;
}

.spin-generative-geometry--surface-canvas .spin-generative-geometry__frame {
	background: var(--spin-geometry-background, var(--spin-color-canvas));
}

.spin-generative-geometry--surface-surface .spin-generative-geometry__frame {
	background: var(--spin-geometry-background, var(--spin-color-surface));
}

.spin-generative-geometry--surface-ink .spin-generative-geometry__frame {
	background:
		radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--spin-geometry-primary) 10%, transparent), transparent 52%),
		#0d100f;
}

.spin-generative-geometry--surface-gradient .spin-generative-geometry__frame {
	background:
		radial-gradient(circle at 68% 24%, color-mix(in srgb, var(--spin-geometry-primary) 28%, transparent), transparent 44%),
		radial-gradient(circle at 28% 78%, color-mix(in srgb, var(--spin-geometry-secondary) 18%, transparent), transparent 48%),
		var(--spin-geometry-background);
}

.spin-generative-geometry--surface-grid .spin-generative-geometry__frame {
	background-color: var(--spin-geometry-background);
	background-image:
		linear-gradient(color-mix(in srgb, var(--spin-geometry-primary) 12%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--spin-geometry-primary) 12%, transparent) 1px, transparent 1px),
		radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--spin-geometry-primary) 10%, transparent), transparent 58%);
	background-size: 44px 44px, 44px 44px, 100% 100%;
}

.spin-generative-geometry__canvas,
.spin-generative-geometry__fallback,
.spin-generative-geometry__loading {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.spin-generative-geometry__canvas {
	z-index: 2;
	display: block;
	background: transparent;
	opacity: 0;
	touch-action: pan-y;
	transition: opacity var(--spin-motion-duration-base, 320ms) var(--spin-motion-ease-out, ease-out);
}

.spin-generative-geometry__canvas:focus-visible {
	outline: 3px solid var(--spin-color-focus, Highlight);
	outline-offset: -5px;
}

.spin-generative-geometry[data-geometry-state="ready"] .spin-generative-geometry__canvas {
	opacity: 1;
}

.spin-generative-geometry__fallback {
	z-index: 1;
	display: grid;
	place-items: center;
	overflow: hidden;
	opacity: 1;
	transition: opacity var(--spin-motion-duration-base, 320ms) var(--spin-motion-ease-out, ease-out);
}

.spin-generative-geometry[data-geometry-state="ready"] .spin-generative-geometry__fallback {
	opacity: 0;
	pointer-events: none;
}

.spin-generative-geometry__poster {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.spin-generative-geometry__placeholder {
	position: relative;
	inline-size: min(58%, 22rem);
	aspect-ratio: 1;
	filter: drop-shadow(0 0 2rem color-mix(in srgb, var(--spin-geometry-primary) 24%, transparent));
}

.spin-generative-geometry__placeholder span {
	position: absolute;
	display: block;
	inset: 12%;
	border: 1px solid color-mix(in srgb, var(--spin-geometry-primary) 64%, transparent);
	border-radius: 50%;
	transform: rotate(var(--spin-geometry-fallback-rotation, 0deg)) scaleY(0.38);
}

.spin-generative-geometry__placeholder span:nth-child(2) {
	inset: 22% 4%;
	--spin-geometry-fallback-rotation: 58deg;
	border-color: color-mix(in srgb, var(--spin-geometry-secondary) 52%, transparent);
}

.spin-generative-geometry__placeholder span:nth-child(3) {
	inset: 6% 28%;
	--spin-geometry-fallback-rotation: -64deg;
}

.spin-generative-geometry__placeholder span:nth-child(4) {
	inset: 42%;
	border: 0;
	background: var(--spin-geometry-primary);
	box-shadow: 0 0 2rem color-mix(in srgb, var(--spin-geometry-primary) 72%, transparent);
	transform: none;
}

.spin-generative-geometry__loading {
	z-index: 4;
	display: grid;
	place-items: end start;
	padding: var(--spin-space-sm, 0.8rem);
	pointer-events: none;
	opacity: 0;
}

.spin-generative-geometry[data-geometry-state="loading"] .spin-generative-geometry__loading {
	opacity: 1;
}

.spin-generative-geometry__loading span {
	inline-size: 28%;
	block-size: 2px;
	background: var(--spin-geometry-primary);
}

.spin-generative-geometry__toolbar {
	position: absolute;
	z-index: 6;
	inset-block-start: var(--spin-space-sm, 0.75rem);
	inset-inline-end: var(--spin-space-sm, 0.75rem);
	display: flex;
	gap: 0.28rem;
	opacity: 0;
	transform: translateY(-0.35rem);
	transition: opacity var(--spin-motion-duration-fast, 180ms) ease-out, transform var(--spin-motion-duration-fast, 180ms) ease-out;
}

.spin-generative-geometry:is(:hover, :focus-within)[data-geometry-state="ready"] .spin-generative-geometry__toolbar,
.spin-generative-geometry[data-geometry-interacted="true"] .spin-generative-geometry__toolbar {
	opacity: 1;
	transform: none;
}

.spin-generative-geometry__toolbar button,
.spin-generative-geometry__editor-preview {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding: 0.55rem;
	border: 1px solid color-mix(in srgb, var(--spin-color-border) 82%, transparent);
	border-radius: var(--spin-radius-control, 0.3rem);
	background: color-mix(in srgb, var(--spin-color-surface) 88%, transparent);
	box-shadow: var(--spin-elevation-overlay, 0 0.8rem 2rem rgb(0 0 0 / 0.14));
	color: var(--spin-color-text);
	font: 700 0.82rem/1 var(--spin-type-family-utility, monospace);
	cursor: pointer;
	backdrop-filter: blur(12px);
}

.spin-generative-geometry__toolbar button:hover,
.spin-generative-geometry__toolbar button[aria-pressed="true"] {
	border-color: var(--spin-geometry-primary);
	background: var(--spin-geometry-primary);
	color: var(--spin-color-on-action);
}

.spin-generative-geometry__toolbar button:focus-visible,
.spin-generative-geometry__editor-preview:focus-visible {
	outline: 3px solid var(--spin-color-focus, Highlight);
	outline-offset: 2px;
}

.spin-generative-geometry__hint {
	position: absolute;
	z-index: 5;
	inset-inline-start: 50%;
	inset-block-end: var(--spin-space-sm, 0.75rem);
	max-inline-size: calc(100% - 2rem);
	margin: 0;
	padding: 0.45rem 0.65rem;
	transform: translateX(-50%);
	border: 1px solid color-mix(in srgb, var(--spin-color-border) 75%, transparent);
	border-radius: var(--spin-radius-control, 0.3rem);
	background: color-mix(in srgb, var(--spin-color-surface) 84%, transparent);
	color: var(--spin-color-text-muted);
	font: 600 0.68rem/1.2 var(--spin-type-family-utility, monospace);
	letter-spacing: 0.02em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	backdrop-filter: blur(10px);
	transition: opacity var(--spin-motion-duration-fast, 180ms) ease-out;
}

.spin-generative-geometry[data-controls-hint="enabled"]:is(:hover, :focus-within)[data-geometry-state="ready"]:not([data-geometry-interacted="true"]) .spin-generative-geometry__hint {
	opacity: 1;
}

.spin-generative-geometry__status,
.spin-generative-geometry__noscript {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.spin-generative-geometry[data-geometry-state="error"] .spin-generative-geometry__status {
	position: absolute;
	z-index: 7;
	inset-inline: var(--spin-space-sm, 0.75rem);
	inset-block-end: var(--spin-space-sm, 0.75rem);
	inline-size: auto;
	block-size: auto;
	padding: 0.7rem 0.85rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	border: 1px solid var(--spin-color-border);
	background: color-mix(in srgb, var(--spin-color-surface) 94%, transparent);
	color: var(--spin-color-text-muted);
	font: 600 0.76rem/1.45 var(--spin-type-family-utility, monospace);
}

.spin-generative-geometry__editor-preview {
	position: absolute;
	z-index: 8;
	inset: 50% auto auto 50%;
	display: none;
	min-inline-size: 11rem;
	transform: translate(-50%, -50%);
}

.elementor-editor-active .spin-generative-geometry[data-geometry-editor="click"] .spin-generative-geometry__editor-preview {
	display: inline-grid;
}

.elementor-editor-active .spin-generative-geometry[data-geometry-editor="click"] :is(.spin-generative-geometry__toolbar, .spin-generative-geometry__hint) {
	display: none;
}

.spin-generative-geometry:fullscreen {
	inline-size: 100vw;
	block-size: 100vh;
	padding: clamp(1rem, 4vw, 4rem);
	background: var(--spin-color-canvas);
}

.spin-generative-geometry:fullscreen .spin-generative-geometry__frame {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: auto;
}

@media (max-width: 700px) {
	.spin-generative-geometry__toolbar {
		opacity: 1;
		transform: none;
	}

	.spin-generative-geometry__hint {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spin-generative-geometry__canvas,
	.spin-generative-geometry__fallback,
	.spin-generative-geometry__toolbar,
	.spin-generative-geometry__hint {
		transition: none;
	}
}