:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.button {
  	--_intent: var(--primary);
	--_intent-hover: var(--pigu-blue-140);
	--_intent-tint: var(--pigu-blue-12);
	--_on-intent: var(--white);
	--_on-intent-hover: var(--_on-intent);
	--_bg: var(--_intent);
	--_fg: var(--_on-intent);
	--_border: transparent;
	--_bg-hover: var(--_intent-hover);
	--_fg-hover: var(--_on-intent-hover);
	--_border-hover: transparent;
	--_surface: var(--white);
	--_height: 3rem;
	--_icon: 1.5rem;
	/* ACSS styles every <button> through these variables (button:not([class*=btn--])), so set them here */
	--btn-font-weight: 600;
	--btn-line-height: var(--text-m-line-height);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pigu-space-8);
	min-block-size: var(--_height);
	min-inline-size: var(--_height);
	padding-inline: var(--pigu-space-12);
	border: 1px solid var(--_border);
	border-radius: var(--radius);
	background: var(--_bg);
	color: var(--_fg);
	font-family: inherit;
	font-size: var(--text-m);
	font-weight: var(--btn-font-weight);
	line-height: var(--btn-line-height);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--transition);

	&:hover:not(:disabled) {
		background: var(--_bg-hover);
		border-color: var(--_border-hover);
		color: var(--_fg-hover);
		text-decoration: none;
	}

	&:disabled {
		cursor: not-allowed;
	}

	&:disabled > * {
		opacity: 0.6;
	}
}
.button__label {
  	overflow: hidden;
	text-overflow: ellipsis;
}
.button__icon {
  	flex-shrink: 0;
	inline-size: var(--_icon);
	block-size: var(--_icon);
}
.button--large {
  	--_height: 3.5rem;
	gap: var(--pigu-space-12);
	padding-inline: var(--pigu-space-20);
}
.button--small {
  	--_height: 2.5rem;
	--btn-line-height: var(--text-s-line-height);
	font-size: var(--text-s);
}
.button--x-small {
  	--_height: 2rem;
	--_icon: 1.25rem;
	--btn-line-height: var(--text-s-line-height);
	font-size: var(--text-s);
}
.button--secondary {
  	--_bg: var(--_surface);
	--_fg: var(--_intent);
	--_border: var(--_intent);
	--_bg-hover: var(--_intent-tint);
	--_fg-hover: var(--_intent-hover);
	--_border-hover: var(--_intent-hover);
}
.button--ghost {
  	--_bg: transparent;
	--_fg: var(--_intent);
	--_bg-hover: var(--_intent-tint);
	--_fg-hover: var(--_intent-hover);
}
.button--intent-atc {
  	--_intent: var(--success);
	--_intent-hover: var(--pigu-green-140);
	--_intent-tint: var(--pigu-green-12);
}
.button--intent-danger {
  	--_intent: var(--danger);
	--_intent-hover: var(--pigu-red-140);
	--_intent-tint: var(--pigu-red-12);
}
.button--intent-default {
  	--_intent: var(--base);
	--_intent-hover: var(--pigu-black-80);
	--_intent-tint: var(--pigu-black-12);
}
.button--intent-primary-invert {
  	--_intent: var(--white);
	--_intent-hover: var(--white);
	--_intent-tint: color-mix(in srgb, var(--white) 12%, transparent);
	--_surface: transparent;
	--_on-intent: var(--primary);
	--_on-intent-hover: var(--pigu-blue-140);
}
.button--rounded {
  	border-radius: var(--radius-circle);
}
.styleguide__inner {
  
	gap: var(--pigu-space-24);
}
.styleguide__group {
  
	display: grid;
	gap: var(--pigu-space-12);
}
.styleguide__group-title {
  
	font-size: var(--text-s);
	color: var(--pigu-black-60);
}
.styleguide__row {
  
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pigu-space-12);
}
.styleguide__dark {
  
	padding: var(--pigu-space-24);
	border-radius: var(--radius);
	background: var(--base);

	.styleguide__group-title {
		color: var(--white);
	}
}
.link {
  	--_icon: 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: var(--pigu-space-4);
	min-block-size: 1.5rem;
	font-size: var(--text-m);
	line-height: var(--text-m-line-height);
}
.form-item {
  	display: grid;
	gap: var(--pigu-space-4);
}
.form-item__label {
  	color: var(--text-dark);
	font-size: var(--text-s);
	line-height: var(--text-s-line-height);
}
.form-item__body {
  	display: grid;
	gap: var(--pigu-space-8);
}
.form-item__help {
  	color: var(--pigu-black-60);
	font-size: var(--text-xs);
	line-height: var(--text-xs-line-height);
	letter-spacing: var(--text-xs-letter-spacing);
}
.form-item__error {
  	color: var(--danger);
	font-size: var(--text-xs);
	line-height: var(--text-xs-line-height);
	letter-spacing: var(--text-xs-letter-spacing);
}
.form-item-field {
  	--_height: 2.5rem;
	display: flex;
	align-items: center;
	gap: var(--pigu-space-8);
	min-block-size: var(--_height);
	padding-inline: var(--pigu-space-12);
	border: 1px solid var(--pigu-black-12);
	border-radius: var(--radius);
	background: var(--white);
	transition: var(--transition);

	&:hover {
		border-color: var(--pigu-black-40);
	}

	&:focus-within {
		border-color: var(--pigu-black-60);
	}

	&:has([aria-invalid="true"]) {
		border-color: var(--danger);
	}

	&:has([readonly]) {
		border-color: var(--pigu-black-12);
		background: var(--pigu-black-6);
	}

	&:has(:disabled) {
		border-color: var(--pigu-black-12);
		background: var(--pigu-black-6);
	}
}
.form-item-field__input {
  	flex: 1;
	min-inline-size: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text-dark);
	font-size: var(--text-s);
	line-height: var(--text-s-line-height);

	&::placeholder {
		color: var(--pigu-black-60);
		opacity: 1;
	}

	&:disabled {
		color: var(--pigu-black-40);
	}
}
.link__icon {
  	flex-shrink: 0;
	inline-size: var(--_icon);
	block-size: var(--_icon);
}
.link--small {
  	--_icon: 1.25rem;
	min-block-size: 1.25rem;
	font-size: var(--text-s);
	line-height: var(--text-s-line-height);
}
.link--x-small {
  	--_icon: 1rem;
	gap: var(--pigu-space-2);
	min-block-size: 1rem;
	font-size: var(--text-xs);
	line-height: var(--text-xs-line-height);
	letter-spacing: var(--text-xs-letter-spacing);
}
.link--primary-on-dark {
  	--link-color: var(--pigu-blue-60);
}
.link--secondary {
  	--link-color: var(--base);
}
.link--intent-danger {
  	--link-color: var(--danger);
}
.form-item-field--small {
  	--_height: 2rem;
}
.form-item-field__icon {
  	flex-shrink: 0;
	inline-size: 1.5rem;
	block-size: 1.5rem;
}
.styleguide__fields {
  
	display: grid;
	gap: var(--pigu-space-24);
	max-inline-size: 20rem;
}