@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&display=swap');
:root {
	--accent: #083b5b;
	--accent-interaction: #0f5988;
}
html {

    min-block-size: 100dvh;
	transition-behavior: allow-discrete;
}
body,
main {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	justify-items: center;
}
body {
	font-family: 'Alan Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: clamp(1rem, 2vh, 1.1rem);
	color: #000;
	background: #FFF linear-gradient(45deg, #3b95cc, #a2cde8) scroll no-repeat 0 0 / cover;
	margin: 0;
	min-block-size: calc(100dvh - 6rem);
}
header,
main,
footer {
	inline-size: 100%;
}
header,
main {
	grid-area: 1 / 1 / 2 / 2;
}
header {
	display: grid;
	justify-self: start;
}
main {
	gap: clamp(3rem, 4vh, 5rem);
}
footer {
	grid-area: 2 / 1 / 3 / 2;
	color: #FFF;
	background-color: color-mix(in lab, var(--accent), #000);
}
::selection {
	color: #FFFFFF;
	background-color: #083b5b;
}
h1, section {
	margin-inline: auto;
	inline-size: min(100%, 1200px);
	margin-block: 0;
}
section {
	padding-block: clamp(2rem, 2vw + 2vh, 4rem);
	padding-inline: clamp(1.5rem, 2vw + 2vh, 5rem);
	box-sizing: border-box;
}
section:first-child {
	padding-block-start: clamp(3rem, 3vw + 3vh, 7rem);
}
section:last-child {
	padding-block-end: clamp(3rem, 3vw + 3vh, 7rem);
}
#title {
	padding-block-end: 1rem;
}
#form {
	padding-block-start: 1rem;
}
#faq {
	color: #FFF;
	background: var(--accent) linear-gradient(45deg, var(--accent), color-mix(in lab, var(--accent), #000)) scroll no-repeat 0 0 / cover;
	inline-size: 100%;
}
h1 {
    font-size: clamp(3rem, 4vh, 5rem);
	line-height: 100%;
}
h1,
h1 + p {
	text-align: center;
	text-wrap: balance;
}
h2,
summary,
h1 + p {
    font-size: clamp(1.1rem, 1.5vh, 1.26rem);
	text-wrap: balance;
}
summary, p, li {
	font-size: clamp(0.97rem, 1vh, 2rem);
}
form,
.input,
.output {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 1.5rem;
}
.buttons {
	display: flex;
	gap: 1rem;
}
form h2,
form h3,
form p {
	position: relative;
	margin-block: 0;
}
code {
	color: #123a52;
	letter-spacing: -0.1ex;
	font-family: Consolas, 'Courier New', Courier, monospace;
}
a,
a:hover {
	color: var(--accent);
}
button {
	background-color: var(--accent);
	color: #FFF;
	padding-block: 0.4lh;
	padding-inline: 3.3ex;
	text-transform: uppercase;
	border: none;
	font-size: inherit;
	font-family: inherit;
	font-weight: 600;
	transition: 0.3s background-color linear;
}
.logo {
	position: relative;
    transform-origin: 0 0;
    transition: 0.3s block-size ease-in-out 0s, 0.3s max-block-size ease-in-out 0s, 0.5s inset-block-start ease-in-out 0.2s, 0.5s inset-inline-start ease-in-out 0.2s, 0.5s transform ease-in-out 0.2s, 0s visibility linear 0.7s;
}
#logo {
	position: absolute;
	inset-block-start: 0;
	inline-size: 60%;
	inset-inline-start: 0;
	max-inline-size: 220px;
}
#logo img {
	inline-size: min(18rem, 72%);
	block-size: auto;
}
#logo-wide {
	inset-inline-start: -4rem;
}
#logo-wide img {
	inline-size: clamp(2.8rem, 5vw, 6rem);
	block-size: auto;
	aspect-ratio: 130 / 314;
}
button[disabled] {
    filter: opacity(50%);
}
button:is(:hover, :focus-visible, :active):not([disabled]) {
	background-color: var(--accent-interaction);
}
.buttons button {
	flex: 0 1 min(40rem, 50%);
	display: flex;
	inline-size: 100%;
	justify-content: center;
	transition: 0.3s color linear, 0.3s background-color linear, 0.3s box-shadow linear, 0.3s outline linear, 0.3s filter linear;
	overflow: hidden;
}
button.clear,
button.clear:hover,
button.clear:focus-within {
	color: var(--accent);
	background-color: transparent;
}
button.clear {
	font-weight: inherit;
	inline-size: auto;
	box-shadow: 0 0 0 1px var(--accent) inset;
	margin-inline: auto 0;
	padding-inline: 1.4ex;
}
.buttons .icon {
	position: relative;
	display: inline-flex;
	inline-size: 1em;
	block-size: 1em;
	aspect-ratio: 1;
	inset: 0.15em 0 0;
	margin-inline: 1.3ex 0;
	transition: 0.5s translate ease-in-out, 0s inset-inline-start ease-in-out, 0.3s filter linear;
}
.buttons button.generating .icon {
	transition: 0.5s translate ease-in-out, 0.6s inset-inline-start ease-in-out, 0.3s filter linear;
}
.buttons button:not([disabled]):hover .icon {
	translate: 0.3ex 0;
}
.buttons .icon #arrow-icon-clip {
	transition: 0.5s translate ease-in-out;
}
.buttons .generating .icon #arrow-icon-clip {
	translate: 100% 0;
}
.buttons .icon .dots path {
	opacity: 0;
	transition: 0.2s opacity linear, 0.15s scale linear, 0.15s translate linear;
	transform-origin: 50% 50%;
}
.buttons .icon .dots path:nth-child(1) {
	transform-origin: 25% 50%;
}
.buttons .icon .dots path:nth-child(3) {
	transform-origin: 75% 50%;
}
.buttons .generating .icon .dots path {
	opacity: 1;
	scale: 1.5;
	transition-duration: 0.3s;
	transition-delay: 0.3s, 0.5s, 0.5s;
}
.buttons .generating .icon .dots path:nth-child(1) {
	translate: -4% 0%;
	transition-delay: 0.3s, 0.6s, 0.6s;
}
.buttons .generating .icon .dots path:nth-child(3) {
	translate: 4% 0%;
	transition-delay: 0.3s, 0.7s, 0.7s;
}
.output {
	position: relative;
	display: flex;
	align-content: start;
	flex-wrap: wrap;
}	
.output > div {
	position: relative;
	flex: 1 0 90%;
	flex-wrap: wrap;
	gap: 0.5lh 0.6rem;
	display: flex;
	min-block-size: 4.1rem;
	transition: 0.3s min-block-size ease-in-out 0.3s, 0.3s filter linear;
}
.output div > * {
	flex: 1 0 80%;
}
.output:not(.inactive) > div {
	transition-delay: 0s;
}
.output:not(.inactive) .javascript {
	min-block-size: 66.6%;
}
.output:not(.inactive) .html {
	min-block-size: 10%;
}
.output h3 {
	font-size: 0.8em;
}
.output h3 {
	font-size: 0.8em;
}
.output .hide {
	display: none;
}
.output button,
.output .copied code {
	background: #a1daff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNGRkYiPjxwYXRoIGQ9Ik0yMCAySDEwYy0xLjEwMyAwLTIgLjg5Ny0yIDJ2NEg0Yy0xLjEwMyAwLTIgLjg5Ny0yIDJ2MTBjMCAxLjEwMy44OTcgMiAyIDJoMTBjMS4xMDMgMCAyLS44OTcgMi0ydi00aDRjMS4xMDMgMCAyLS44OTcgMi0yVjRjMC0xLjEwMy0uODk3LTItMi0yek00IDIwVjEwaDEwbC4wMDIgMTBINHptMTYtNmgtNHYtNGMwLTEuMTAzLS44OTctMi0yLTJoLTRWNGgxMHYxMHoiLz48L3N2Zz4=") scroll no-repeat 1.4ex 50% / 2ex;
}
.output code {
	position: relative;
	display: flex;
	color: #1e313c;
	font-size: 0.7em;
	line-height: 130%;
	letter-spacing: -0.05ex;
	block-size: fit-content;
	min-block-size: 1.4rem;
	padding-block: 0.3lh;
	padding-inline: 1.3ex;
	box-shadow: 0 0 0 1px var(--accent-interaction) inset;
	border: 2px solid var(--accent-interaction);
	border-radius: 4px 0 4px 4px;
	overflow: hidden;
	background: linear-gradient(135deg, #FFFFFF21 25%, transparent 25%) 50% 50%, linear-gradient(225deg, #FFFFFF21 25%, transparent 25%) 50% 50%, linear-gradient(315deg, #FFFFFF21 25%, transparent 25%) 50% 50%, linear-gradient(45deg, #FFFFFF21 25%, transparent 25%) 50% 50%;
	background-color: #81bbdf;
	background-size: 66rem 60rem;
	line-break: anywhere;
	transition: 1.4s background-size ease-in-out, 1.4s background-position ease-in-out, 0.3s border-color linear, 0.3s box-shadow linear 0.3s, 0.3s block-size ease-in-out;
	transition-behavior: allow-discrete;
	z-index: 2;
}
.output code:empty {
	border-color: #083b5b4d;
	box-shadow: 0 0 0 3px #083b5b00 inset;
	background-position-x: -50%, -50%, 0%, 0%;
	background-size: 1.12rem 1.2rem;	
}
.output .copied code {
	color: #0005;
	background-position: 50% 50%;
	background-size: auto 80%;
	transition-duration: 0s;
	transition-delay: 0s;
}
.output button {
	position: absolute;
	font-size: 0.7em;
	font-weight: 400;
	inset: 0.6lh 0 auto auto;
	background-color: var(--accent);
	border-radius: 0.3em 0.3em 0 0;
	padding-block: 0.2lh;
	padding-inline: 4.2ex 1.1ex;
	min-inline-size: 5.2em;
	transition: 0.3s filter linear, 0.3s background-position-y ease-in-out 0.15s, 0.3s color linear, 0.3s background-color linear, 0.3s translate ease-in-out;
	z-index: 1;
}
.output .html button {
	transition-delay: 0.3s, 0.6s, 0.45s, 0.45s, 0.1s;
}
.output.inline .html {
	filter: opacity(20%);
} 
.output button[disabled] {
	color: #FFF6;
	filter: opacity(50%);
	background-position-y: -250%;
	translate: 0 1.4rem;
	transition: 0.3s filter linear, 0.3s background-position-y ease-in-out, 0.3s color linear, 0.3s background-color linear, 0.3s translate ease-in-out 0.3s;
}
.output button.copied[disabled] {
	filter: none;
	background-position-y: -250%;
	translate: none;
	padding-inline: 1.1ex;
	transition: 0.3s filter linear, 0s background-position-y ease-in-out, 0.3s color linear, 0.3s background-color linear, 0.3s translate ease-in-out 0.3s;
}
button,
input[type="text"],
input[type="email"] {
	border-radius: 0.3em;
}
input[type="text"],
input[type="email"],
textarea {
	background-color: #FFFFFFEE;
	border: 1px solid #315755;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
textarea:focus-visible {
	outline: none;
	background-color: #FFFFFF;
	border: 1px solid #000;
	outline: 2px solid #000;
}
input[type="text"],
input[type="email"] {
	display: block;
	font-family: inherit;
	box-sizing: border-box;
	inline-size: 100%;
	padding: 0.5lh 1ex;
}
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--accent);
}
.options label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-end: 0.8rem;
}
.options .label {
	display: block;
	font-weight: inherit;
	margin-block: 0;
	gap: 0.7rem;
}
.label {
    font-size: 0.9em;
    display: flex;
    margin-block-end: 0.7rem;
    font-weight: 600;
    line-height: 100%;
}
label button {
	inset: 0 0 auto auto;
	position: absolute;
	color: transparent;
	letter-spacing: -1.15ex;
	padding-inline: 1ex;
	aspect-ratio: 1;
	padding-block: 0;
	border-radius: 50%;
	font-size: 0.8em;
}
label button::before {
	content: '?';
	position: absolute;
	inset: 0;
	color: #FFF;
	display: flex;
	letter-spacing: 0;
	justify-content: center;
	align-items: center;
}
label .required.hide {
	position: absolute;
	visibility: hidden;
	filter: opacity(0%);
	pointer-events: none;
}
[popover] {
	position-area: bottom;
	translate: 0% 50%;
	margin: 0;
	padding-block: 0.3lh;
	padding-inline: 1ex;
	border: 1px solid;
	border-radius: 3px;
	transition: 0.3s display linear allow-discrete;
	&:popover-open {
		display: block;
	}
}
button[popovertarget="email-popover"] {
	anchor-name: --email-anchor;
}
button[popovertarget="email-popover"] + [popover] {
	position-anchor: --email-anchor;
	inset-block-start: anchor(--email-anchor bottom);
	inset-inline-start: anchor(--email-anchor right);
}
button[popovertarget="text-popover"] {
	anchor-name: --text-anchor;
}
button[popovertarget="text-popover"] + [popover] {
	position-anchor: --text-anchor;
	inset-block-start: anchor(--text-anchor bottom);
	inset-inline-start: anchor(--text-anchor right);
}
button[popovertarget="subject-popover"] {
	anchor-name: --subject-anchor;
}
button[popovertarget="subject-popover"] + [popover] {
	position-anchor: --subject-anchor;
	inset-block-start: anchor(--subject-anchor bottom);
	inset-inline-start: anchor(--subject-anchor right);
}
button[popovertarget="name-popover"] {
	anchor-name: --name-anchor;
}
button[popovertarget="name-popover"] + [popover] {
	position-anchor: --name-anchor;
	inset-block-start: anchor(--name-anchor bottom);
	inset-inline-start: anchor(--name-anchor right);
}
button[popovertarget="class-popover"] {
	anchor-name: --class-anchor;
}
button[popovertarget="class-popover"] + [popover] {
	position-anchor: --class-anchor;
	inset-block-start: anchor(--class-anchor bottom);
	inset-inline-start: anchor(--class-anchor right);
}
button[popovertarget="id-popover"] {
	anchor-name: --id-anchor;
}
button[popovertarget="id-popover"] + [popover] {
	position-anchor: --id-anchor;
	inset-block-start: anchor(--id-anchor bottom);
	inset-inline-start: anchor(--id-anchor right);
}
#faq > * {
	margin-inline: auto;
	inline-size: min(100%, 770px);
}
details {
	transition: 0.6s background-position ease-in-out, 0.6s border-block-start-color linear,  0.6s border-block-end-color linear, 0.6s filter linear;
	border-block-start: 1px solid color-mix(in lab, currentColor, transparent);
	padding-inline: 0;
	overflow: hidden;
}
details:last-of-type {
	border-block-end: 1px solid color-mix(in lab, currentColor, transparent);
}
details:hover {
	filter: brightness(101.5%) invert(1%) contrast(104%);
}
details[open] {
	border-block-start-color: currentColor;
}
details > * {
	margin-block: 0;
}
details :not(summary, ul, ol) {
	padding-block: 0.5em;
	margin-inline: auto;
	background-color: transparent;
}
details > :first-child + * {
	color: #FFFFFFBF;
	padding-block-start: 0.5lh;
}
details[open] > :first-child + * {
	color: inherit;
}
details > :not(summary):last-child {
	padding-block-end: 0.9lh;
}
summary {
	position: relative;
	list-style-type: none;
	padding-block: 0.6lh;
	cursor: pointer;
	transition-behavior: allow-discrete;
	transition: 0.6s border-block-end-color linear, 0.3s filter linear;
	font-weight: 600;
}
details:not(:last-child) summary {
	margin-block-end: calc(-1 * 2px);
}
summary::-webkit-details-marker {
    display: none;
}
summary::after {
	position: absolute;
	content: '↑';
	display: block;
	font-size: 1.1em;
	color: transparent;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDE4IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkYiPjxwYXRoIGQ9Ik0xNS45OTk4IDguNDk0ODdMOC45OTk4OCAxLjQ4NDE2TDIuMDAwMDEgOC40OTQ4NyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPjxwYXRoIGQ9Ik04Ljk5OTc2IDIyLjUxNjRMOC45OTk3NSAyLjY1MjY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSI4IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIi8+PC9zdmc+") scroll no-repeat 50% 50% / 100% auto;
	inset: 0.35lh 0.7ex auto auto;
	margin-inline: 0.7ch 0;
	translate: 0 0.05em;
	transition: 0.5s translate ease 0.3s, 0.5s scale ease 0.3s, 0.25s filter ease 0.45s;
	filter: opacity(50%);
}
summary.safari::after {
	display: initial;
}
details[open] summary::after {
	scale: 1 -1;
	filter: opacity(90%);
}
details[open] summary.safari::after {
	scale: initial;
}
details::details-content {
	block-size: 0;
	filter: opacity(0%);
    transition: 0.6s block-size ease-in-out 0.2s, 0.3s filter linear 0s, 0.9s content-visibility;
	transition-behavior: allow-discrete;
}
details[open]::details-content {
	block-size: fit-content;
	filter: none;
    transition: 0.6s block-size ease-in-out 0s, 0.6s filter linear 0.2s, 0.9s content-visibility;
}
details code {
	color: #FEFEFEAA;
}
footer p {
	display: flex;
	font-size: clamp(0.8rem, 1vh, 1rem);
	flex-wrap: wrap;
	justify-content: center;
}
@media (width >= 600px) {
	form,
	.input,
	.buttons {
		grid-template-columns: 1fr 1fr;
	}
	.buttons {
		grid-area: 2 / 1 / 3 / 3;
	}
	.output {
		grid-area: 1 / 2 / 2 / 3;
		margin-inline-start: 1.5rem;
		gap: 1.35rem;
	}
	.input p {
		grid-column: 1 / 3;
	}
	.input p:nth-of-type(2n - 1):nth-of-type(n + 3):not(:nth-last-of-type(-n + 1)) {
		grid-column: 1 / 2;
	}
	.input p:nth-of-type(2n):nth-of-type(n + 3):not(:nth-last-of-type(-n + 1)) {
		grid-column: 2 / 3;
	}  
	.buttons .clear {
		flex: 0 1 11ch;
	}
	#logo {
		inline-size: calc(30% + 4rem);
	}
}
@media (width >= 600px) and (height >= 600px) {
	header {
		position: sticky;
		inset-block-start: 0;
		z-index: 100;
	}
	#logo {
		position: fixed;
		inset-block-start: -100px;
	}
	#logo-wide {
		inset-inline-start: 0;
	}
}