@layer base {
	[data-playhouse] {
		position: relative;
		z-index: 0;
		touch-action: pan-y;

		& [data-playhouse-container] {
			position: relative;

			& [data-playhouse-canvas] {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				display: block;
				z-index: 10;
				pointer-events: none;
			}

			& [data-playhouse-events] {
				position: absolute;
				inset: 0;
			}

			& [data-playhouse-overlay] {
				position: absolute;
				inset: 0;
				z-index: 1;
				pointer-events: none;
			}
		}
		& [data-playhouse-info] {
			position: absolute;
			inset: 0;
			display: flex;
			flex-wrap: wrap;
			padding: calc(4 * var(--sp));
			gap: calc(4 * var(--sp));
			pointer-events: none;

			:root:not(:has(.editor-styles-wrapper)) & {
				visibility: hidden;
			}

			& [data-playhouse-card-measurer] {
				position: absolute;
				visibility: hidden;
				pointer-events: none;
			}
		}

		& [data-playhouse-card] {
			pointer-events: auto;
			will-change: transform;
		}
	}
}