/* Hint.css */
[class*=hint--]::after {
	font-size: 0.75rem;
	border-radius: 0.5rem;
	padding: 0.25em 0.5rem;
	text-shadow: none;
	background: rgb(56,56,56);
}

/* Header */
#header-container {
	position: fixed;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
			transform: translateX(-50%);
	background: var(--background);
	z-index: 10;
	-webkit-transition: background .166s ease-out;
	-o-transition: background .166s ease-out;
	transition: background .166s ease-out;
}
.header-link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	margin-left: 0.25rem;
	text-decoration: none;
	color: var(--base);
	padding: 0.25em 0.5rem;
	border: none;
	outline: none;
	background: transparent;
	border-radius: 0.5rem;
	-webkit-transition: background .166s ease-out;
	-o-transition: background .166s ease-out;
	transition: background .166s ease-out;
}
.header-link>svg {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
}
.header-link:hover {
	background: var(--background-hover);
}
.header-btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	margin-left: 0.25rem;
	padding: 0.5rem;
	background: transparent;
	border: none;
	outline: none;
	border-radius: 0.5rem;
	cursor: default;
	-webkit-transition: background .166s ease-out;
	-o-transition: background .166s ease-out;
	transition: background .166s ease-out;
}
.header-btn>svg {
	width: 1rem;
	height: 1rem;
}
.header-btn:hover {
	background: var(--background-hover);
}

/* CC Logo */
.clippath-hidden {
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
	margin: -1px;
	padding: 0;
	border: 0;
	-webkit-clip-path: inset(50%);
			clip-path: inset(50%);
	white-space: nowrap;
}
#header-logo {
	display: inline-block;
	text-decoration: none;
}
.letters-container {
	-webkit-user-select: none !important;
	   -moz-user-select: none !important;
		-ms-user-select: none !important;
			user-select: none !important;
}
.letters-container * {
	-webkit-user-select: none !important;
	   -moz-user-select: none !important;
		-ms-user-select: none !important;
			user-select: none !important;
}
.letters-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	font-size: 1rem;
	line-height: 1rem;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 600;
	color: var(--base);
	background: transparent;
	padding: calc(1rem / 2) calc(1rem / 3.861);
	overflow: hidden;
	-webkit-transform: translateX(calc(1em / 3.861 * -1));
		-ms-transform: translateX(calc(1em / 3.861 * -1));
			transform: translateX(calc(1em / 3.861 * -1));
	-webkit-clip-path: url(#SquircleClip);
			clip-path: url(#SquircleClip);
	-webkit-transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.letter {
	display: inline-block;
	-webkit-transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		width 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-left 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-right 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		width 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-left 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-right 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
		width 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-left 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-right 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
		width 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-left 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-right 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
		width 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-left 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		margin-right 0.5s cubic-bezier(0.23, 1, 0.32, 1),
		-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transform-origin: center left;
		-ms-transform-origin: center left;
			transform-origin: center left;
	white-space: pre;
}
.letters-container.icon {
	-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
			transform: translateX(0);
	color: var(--background);
	background: var(--base);
}
.letters-container.out .letter.hideable {
	opacity: 0;
}
.letters-container.compact .letter.hideable {
	-webkit-transform: scale(0, 0.75);
		-ms-transform: scale(0, 0.75);
			transform: scale(0, 0.75);
	width: 0px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#footer-logo {
	display: inline-block;
	text-decoration: none;
}
#footer-logo>.letters-container {
	font-size: 1.25rem;
	line-height: 1.25rem;
	padding: calc(1.25rem / 2) calc(1.25rem / 3.861);
}

/* Body */
#body-container {
	margin-top: 4rem;
}

.article-container {
	border-radius: 1em;
	background: var(--background-hover-opa-66);
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}

/* Footer */
.fs-footer {
	font-size: 0.75em;
}
.footer-link-btn>a {
	color: var(--base);
	text-decoration: none;
	opacity: 0.75;
	-webkit-transition: opacity .166s ease-out, -webkit-text-decoration .166s ease-out;
	transition: opacity .166s ease-out, -webkit-text-decoration .166s ease-out;
	-o-transition: opacity .166s ease-out, text-decoration .166s ease-out;
	transition: opacity .166s ease-out, text-decoration .166s ease-out;
	transition: opacity .166s ease-out, text-decoration .166s ease-out, -webkit-text-decoration .166s ease-out;
}
.footer-link-btn>a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Bootstrap */
.btn {
	position: relative;
	padding: 0.5rem 1rem 0.5rem 2.5rem;
	border-radius: 0.5rem;
	outline: none;
	border: none;
	background: var(--background-hover-opa-50);
	-webkit-transition: background .166s ease-out;
	-o-transition: background .166s ease-out;
	transition: background .166s ease-out;
}
.btn.btn-lg {
	border-radius: 1rem;
	padding: 1rem 1.5rem 1rem 3rem;
}
.btn-no-svg {
	padding: 0.5rem 1rem;
}
.btn-svg-right {
	padding-left: 1rem;
	padding-right: 2.5rem;
}
.btn.btn-lg.btn-svg-right {
	padding-left: 1.5rem;
	padding-right: 3rem;
}
.btn>svg {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
			transform: translateY(-50%);
	left: 1rem;
	width: 1rem;
	height: 1rem;
}
.btn-svg-right>svg {
	left: auto;
	right: 1rem;
}
.btn-lg.btn-svg-right>svg {
	left: auto;
	right: 1.5rem;
}
.btn:hover {
	background: var(--background-hover);
}

/* Colors */
body {
	color: var(--base);
	background: var(--background);
	-webkit-transition: color .166s ease-out, background .166s ease-out;
	-o-transition: color .166s ease-out, background .166s ease-out;
	transition: color .166s ease-out, background .166s ease-out;

	.color-base { color: var(--base); }
	.color-base-opa-15 { color: var(--base-opa-15); }
	.color-base-opa-40 { color: var(--base-opa-40); }
	.color-base-opa-50 { color: var(--base-opa-50); }
	.color-base-opa-66 { color: var(--base-opa-66); }
	.color-base-opa-85 { color: var(--base-opa-85); }
	.color-hint-color { color: var(--hint-color); }
	.color-background { color: var(--background); }
	.color-background-more-lighter { color: var(--background-more-lighter); }
	.color-background-hover { color: var(--background-hover); }
	.color-background-hover-opa-40 { color: var(--background-hover-opa-40); }
	.color-background-hover-opa-50 { color: var(--background-hover-opa-50); }
	.color-background-hover-opa-66 { color: var(--background-hover-opa-66); }

	.bg-color-base { background: var(--base); }
	.bg-color-base-opa-15 { background: var(--base-opa-15); }
	.bg-color-base-opa-40 { background: var(--base-opa-40); }
	.bg-color-base-opa-50 { background: var(--base-opa-50); }
	.bg-color-base-opa-66 { background: var(--base-opa-66); }
	.bg-color-base-opa-85 { background: var(--base-opa-85); }
	.bg-color-hint-color { background: var(--hint-color); }
	.bg-color-background { background: var(--background); }
	.bg-color-background-more-lighter { background: var(--background-more-lighter); }
	.bg-color-background-hover { background: var(--background-hover); }
	.bg-color-background-hover-opa-40 { background: var(--background-hover-opa-40); }
	.bg-color-background-hover-opa-50 { background: var(--background-hover-opa-50); }
	.bg-color-background-hover-opa-66 { background: var(--background-hover-opa-66); }

	.badge-neutral 		{ background: var(--neutral-opa-15); color: var(--neutral) }
	.badge-red 			{ background: var(--red-opa-15); color: var(--red) }
	.badge-orange 		{ background: var(--orange-opa-15); color: var(--orange) }
	.badge-yellow 		{ background: var(--yellow-opa-15); color: var(--yellow) }
	.badge-green 		{ background: var(--green-opa-15); color: var(--green) }
	.badge-teal 		{ background: var(--teal-opa-15); color: var(--teal) }
	.badge-cyan 		{ background: var(--cyan-opa-15); color: var(--cyan) }
	.badge-blue 		{ background: var(--blue-opa-15); color: var(--blue) }
	.badge-indigo 		{ background: var(--indigo-opa-15); color: var(--indigo) }
	.badge-purple 		{ background: var(--purple-opa-15); color: var(--purple) }
	.badge-pink 		{ background: var(--pink-opa-15); color: var(--pink) }

	.btn-neutral 		{ color: var(--base); background: var(--neutral-opa-15); }
	.btn-neutral:hover 	{ background: var(--neutral-opa-33); }

	.btn-red			{ color: var(--base); background: var(--red-opa-15); }
	.btn-red:hover 		{ background: var(--red-opa-33); }
	.btn-orange			{ color: var(--base); background: var(--orange-opa-15); }
	.btn-orange:hover 	{ background: var(--orange-opa-33); }
	.btn-yellow			{ color: var(--base); background: var(--yellow-opa-15); }
	.btn-yellow:hover 	{ background: var(--yellow-opa-33); }
	.btn-green			{ color: var(--base); background: var(--green-opa-15); }
	.btn-green:hover 	{ background: var(--green-opa-33); }
	.btn-teal			{ color: var(--base); background: var(--teal-opa-15); }
	.btn-teal:hover 	{ background: var(--teal-opa-33); }
	.btn-cyan			{ color: var(--base); background: var(--cyan-opa-15); }
	.btn-cyan:hover 	{ background: var(--cyan-opa-33); }
	.btn-blue			{ color: var(--base); background: var(--blue-opa-15); }
	.btn-blue:hover 	{ background: var(--blue-opa-33); }
	.btn-indigo			{ color: var(--base); background: var(--indigo-opa-15); }
	.btn-indigo:hover 	{ background: var(--indigo-opa-33); }
	.btn-purple			{ color: var(--base); background: var(--purple-opa-15); }
	.btn-purple:hover 	{ background: var(--purple-opa-33); }
	.btn-pink			{ color: var(--base); background: var(--pink-opa-15); }
	.btn-pink:hover 	{ background: var(--pink-opa-33); }

}
body {
	--base: rgb(0,0,0);
	--base-opa-15: rgba(0,0,0,0.15);
	--base-opa-40: rgba(0,0,0,0.40);
	--base-opa-50: rgba(0,0,0,0.50);
	--base-opa-66: rgba(0,0,0,0.66);
	--base-opa-85: rgba(0,0,0,0.85);
	--arrow-bg-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down-icon lucide-chevron-down'><path d='m6 9 6 6 6-6'/></svg>");
	--hint-color: rgb(255,255,255);
	--background: rgb(255,255,255);
	--background-more-lighter: rgb(235,240,249);
	--background-hover: rgb(235,240,249);
	--background-hover-opa-40: rgba(235,240,249,0.40);
	--background-hover-opa-50: rgba(235,240,249,0.50);
	--background-hover-opa-66: rgba(235,240,249,0.66);

	--neutral: rgba(174,174,178,1);
	--red: rgba(255,105,97,1);
	--orange: rgba(255,179,64,1);
	--yellow: rgba(255,212,38,1);
	--green: rgba(49,222,75,1);
	--teal: rgba(102,212,207,1);
	--cyan: rgba(93,230,255,1);
	--blue: rgba(64,156,255,1);
	--indigo: rgba(125,122,255,1);
	--purple: rgba(218,143,255,1);
	--pink: rgba(255,100,130,1);

	--neutral-opa-15: rgba(174,174,178,0.15);
	--red-opa-15: rgba(255,105,97,0.15);
	--orange-opa-15: rgba(255,179,64,0.15);
	--yellow-opa-15: rgba(255,212,38,0.15);
	--green-opa-15: rgba(49,222,75,0.15);
	--teal-opa-15: rgba(102,212,207,0.15);
	--cyan-opa-15: rgba(93,230,255,0.15);
	--blue-opa-15: rgba(64,156,255,0.15);
	--indigo-opa-15: rgba(125,122,255,0.15);
	--purple-opa-15: rgba(218,143,255,0.15);
	--pink-opa-15: rgba(255,100,130,0.15);

	--neutral-opa-33: rgba(174,174,178,0.33);
	--red-opa-33: rgba(255,105,97,0.33);
	--orange-opa-33: rgba(255,179,64,0.33);
	--yellow-opa-33: rgba(255,212,38,0.33);
	--green-opa-33: rgba(49,222,75,0.33);
	--teal-opa-33: rgba(102,212,207,0.33);
	--cyan-opa-33: rgba(93,230,255,0.33);
	--blue-opa-33: rgba(64,156,255,0.33);
	--indigo-opa-33: rgba(125,122,255,0.33);
	--purple-opa-33: rgba(218,143,255,0.33);
	--pink-opa-33: rgba(255,100,130,0.33);

	--neutral-opa-50: rgba(174,174,178,0.5);
	--red-opa-50: rgba(255,105,97,0.5);
	--orange-opa-50: rgba(255,179,64,0.5);
	--yellow-opa-50: rgba(255,212,38,0.5);
	--green-opa-50: rgba(49,222,75,0.5);
	--teal-opa-50: rgba(102,212,207,0.5);
	--cyan-opa-50: rgba(93,230,255,0.5);
	--blue-opa-50: rgba(64,156,255,0.5);
	--indigo-opa-50: rgba(125,122,255,0.5);
	--purple-opa-50: rgba(218,143,255,0.5);
	--pink-opa-50: rgba(255,100,130,0.5);
}
body[data-appearance="dark"] {
	--base: rgb(255,255,255);
	--base-opa-15: rgba(255,255,255,0.15);
	--base-opa-40: rgba(255,255,255,0.40);
	--base-opa-50: rgba(255,255,255,0.50);
	--base-opa-66: rgba(255,255,255,0.66);
	--base-opa-85: rgba(255,255,255,0.85);
	--arrow-bg-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down-icon lucide-chevron-down'><path d='m6 9 6 6 6-6'/></svg>");
	--hint-color: rgb(0,0,0);
	--background: rgb(0,0,0);
	--background-lighter: rgb(26,26,26);
	--background-more-lighter: rgb(60,60,60);
	--background-hover: rgb(80,80,80);
	--background-hover-opa-40: rgba(80,80,80,0.40);
	--background-hover-opa-50: rgba(80,80,80,0.50);
	--background-hover-opa-66: rgba(80,80,80,0.66);
}