/*		---
		global
*/
		@font-face { font-family: '2b'; src: url('fonts/CircularStd-Book.woff2') format('woff2'), url('fonts/CircularStd-Book.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; }
		@font-face { font-family: '2b'; src: url('fonts/CircularStd-Medium.woff2') format('woff2'), url('fonts/CircularStd-Medium.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; }
		@font-face { font-family: '2b'; src: url('fonts/CircularStd-Bold.woff2') format('woff2'), url('fonts/CircularStd-Bold.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }

		body																				{ margin: 0; background: rgb(76,129,210); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/*		---
		window
*/
		.area-backdrop																		{ position: absolute; z-index: 10; inset: 0; background: rgb(76,129,210); overflow: hidden; }
		.area-backdrop .blob																{ width: 170vw; height: 110vh; border-radius: 100%; position: absolute; inset: 30% auto auto 0%; }
		.area-backdrop .blob																{ background: radial-gradient(circle, rgb(212,109,61) 20%, rgb(76,129,210) 70%); filter: blur(40px); -webkit-filter: blur(40px); }

		.area-logo																			{ position: absolute; z-index: 30; inset: 0; display: flex; flex-direction: column; gap: 48px; align-items: center; justify-content: center; }
		.area-logo .logo																	{ width: 120px; margin-bottom: 10%; background: url(logo.svg) 50% no-repeat; background-size: cover; }
		.area-logo .logo:after																{ content: ''; padding: 0 0 62.5% 0; display: block; }
		
		.area-message																		{ position: absolute; z-index: 40; inset: auto 0 40px 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; }
		.area-message .message																{  }
		.area-message .message p															{ margin: 0; font-family: '2b'; font-size: 14px; font-weight: 200; text-align: center; color: rgb(255,255,255); }

		@media screen and (max-width: 500px)
		{
			.area-backdrop .blob															{ width: 250vw; height: 70vh; border-radius: 100%; position: absolute; inset: 10% auto auto -20%; }
			.area-logo .logo																{ margin-bottom: 20%; }
		}


/*		-------------------
		buttons
*/
		.buttons																										{ display: flex; gap: 16px; }
		.buttons[data-gap="small"]																						{ gap: 4px; }
		.buttons[data-align="center"]																					{ justify-content: center; }

		.buttons .button-space																							{ width: 12px; }

		.buttons .button																								{ overflow: hidden; display: flex; gap: 1px; }
		.buttons .button .button-content																				{ height: 32px; display: flex; align-items: stretch; gap: 1px; }
		.buttons .button .button-content																				{ color: rgb(255,255,255); text-decoration: none; cursor: default; }

		.buttons .button .button-icon																					{ width: 32px; transition: all 0.2s ease, flex 0s; }
		.buttons .button .button-icon:before,
		.buttons .button .button-icon a,
		.buttons .button .button-icon a:before																			{ transition: all 0.2s ease, flex 0s; }
		.buttons .button .button-label																					{ height: 100%; display: flex; align-items: center; transition: all 0.2s ease, flex 0s; }
		.buttons .button .button-label p																				{ margin: 0; font-family: '2b'; font-size: 11px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s ease; }

		.buttons .button[data-state="disabled"] .button-content,
		.buttons .button[data-state="disabled"] .button-content p														{ cursor: not-allowed; }

/*		---
		style - normal
*/
		.buttons .button[data-style="normal"]																			{ border-radius: 6px; box-shadow: 0 2px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.24); }
		.buttons .button[data-style="normal"] .button-content .button-icon												{ background: rgba(255,255,255,0.24); }
		.buttons .button[data-style="normal"] .button-content .button-label												{ padding: 0 16px; background: rgba(255,255,255,0.16); }
		.buttons .button[data-style="normal"] .button-content .button-label p											{ text-shadow: var(--text-shadow); }

		.buttons .button[data-style="normal"][data-state="normal"] .button-content:hover .button-label					{ background: rgba(255,255,255,0.24); }

		.buttons .button[data-style="normal"] .button-icon a															{ background: rgba(255,255,255,0.24); }
		.buttons .button[data-style="normal"] .button-icon a:hover														{ background: rgba(255,255,255,0.32); }

		.buttons .button[data-style="normal"][data-state="disabled"]													{ box-shadow: none; }
		.buttons .button[data-style="normal"][data-state="disabled"] .button-content .button-icon						{ background: rgba(255,255,255,0.1); }
		.buttons .button[data-style="normal"][data-state="disabled"] .button-content .button-icon:before				{ opacity: 0.5; }
		.buttons .button[data-style="normal"][data-state="disabled"] .button-content .button-label						{ background: rgba(255,255,255,0.1); }
		.buttons .button[data-style="normal"][data-state="disabled"] .button-content .button-label p					{ color: rgba(255,255,255,0.6); text-shadow: none; }

		.buttons .button[data-style="normal"][data-state="disabled"] .button-icon a										{ background: rgba(255,255,255,0.1); cursor: not-allowed; }
		.buttons .button[data-style="normal"][data-state="disabled"] .button-icon a:before								{ opacity: 0.5; }


/*		-------------------
		icon-ui
*/
		.icon-ui																										{ display: flex; align-items: center; justify-content: center; }
		.icon-ui:before																									{ content: ''; width: 32px; height: 32px; background: rgb(255,255,255); display: block; mask-size: 32px; mask-position: 50%; -webkit-mask-size: 32px; -webkit-mask-position: 50%; }

		.icon-ui[data-icon="arrow-right"]:before																		{ mask-image: url(icon-ui-arrow-right.svg); -webkit-mask-image: url(icon-ui-arrow-right.svg); }