:root{
  interpolate-size:allow-keywords;
}

body,
textarea,
input,
button{
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif;
	font-size:17px;
	color:#333;
}

body{
	margin:32px 16px;
	overflow-y:scroll;
}

a{
	color:#0071e3;
	text-underline-position:under;
	text-decoration-color:#0071e330;
	outline:none;
}

a:has(span){
	text-decoration:none;
}

a span{
	color:#0071e3;
	text-decoration-color:#0071e320!important;
	text-underline-position:under;
	text-decoration:underline;
}

a:hover span,
a:focus span{
	text-decoration-color:#0071e3c0!important;
}

form{
	display:flex;
	flex-direction:column;
	place-items:center;
}

textarea,
input{
	border:2px solid #d5d5d7;
	border-radius:26px;
}

textarea:focus,
input:focus{
	border-color:#0071e3;
}

textarea::placeholder,
input::placeholder{
	color:#a5a5a7;
}

textarea.error,
input.error,
textarea.error::placeholder,
input.error::placeholder{
	color:#d7403a;
	border-color:#d7403a!important;
}

header{
	display:block;
	margin:32px auto 32px 0px;
	text-align:center;
}

header a{
	display:inline-block;
	width:108px;
	height:108px;
	background:center center / 106px 106px no-repeat url('/assets/images/logo.svg');
}

main,
aside{
	max-width:660px;
	margin:0px auto;
	overflow:hidden;
}

label{
	display:block;
	margin:32px 3px;
	text-align:center;
	color:#b5b5b7;
}

article{
	margin:1em 3px;
	word-wrap:break-word;
	padding-bottom:1.2em;
	border-bottom:1px dashed #d5d5d7;
}

blockquote{
	padding:3px 0px 6px 10px;
	margin:0.7em 0px -0.1em 13px;
	border-left:3px solid #e5e5e7;
}

address,
time{
	display:block;
}

address{
	font-style:normal;
	font-weight:700;
	font-size:0.9em;
}

address a{
	color:#333;
	text-decoration:underline;
	text-decoration-color:#33333320;
}

address a:hover,
address a:focus{
	text-decoration-color:#333333c0;
}

time{
	display:inline-block;
	vertical-align:middle;
	color:#a5a5a7;
	font-size:0.8em;
	letter-spacing:0.03em;
}

p{
	display:block;
	margin:0.5em 0px 0.75em 0px;
	line-height:1.5em;
}

@keyframes detect-scroll{
	from,
	to{ 
		--overflow:1; 
	}
}

aside{
	overflow:hidden;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	margin-bottom:12px;
}

aside:not(:has(address)){
	display:none;
}

aside section{
	overflow:hidden;
	height:0px;
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	place-content:center;
	transition:height 100ms;
}

aside section:before,
aside section:after{
	content:' ';
	font-size:1px;
	flex:1 1 100%;
	height:8px;
}

aside section:after{
	height:1px;
}

aside.expanded section{
	height:auto;
}

aside button{
	display:block;
	height:36px;
	box-sizing:border-box;
	overflow:hidden;
	border:0px;
	padding:0px;
	cursor:pointer;	
	outline:none;
	background-color:transparent;
	font-size:0.9em;
	font-weight:700;
	text-align:center;
}

aside button:after{
	display:inline-block;
	vertical-align:middle;
	content:' ';
	width:24px;
	height:24px;
	background-color:#333;
	mask:url('/assets/images/expand.svg') right -8px top -4px / 31px 31px no-repeat;
}

aside.expanded button:after{
	mask-image:url('/assets/images/collapse.svg');
}

aside button span{
	display:inline-block;
	vertical-align:middle;
	background-color:#f0f0f2;
	padding:0px 7px 0px 7px;
	box-sizing:border-box;
	min-width:22px;
	height:22px;
	line-height:22px;
	text-align:center;
	border-radius:22px;
	margin:-2px 0px 0px 2px;
	font-size:0.8em;
}

aside button:hover span{
	background-color:#0071e315;
}

aside button:hover,
aside button:focus{
	color:#0071e3;
}

aside button:hover:after,
aside button:focus:after{
	background-color:#0071e3;
}

aside address{
	display:block;
	box-sizing:border-box;
	background-color:#f5f5f7;
	white-space:nowrap;
	line-height:36px;
	height:38px;
	border-radius:38px;
	display:flex;
	cursor:pointer;
	overflow:hidden;
	font-weight:600;
}

aside address.reciprocal{
	background-color:#0071e315;
}

aside address a{
	padding:0px 18px;
}

address.reciprocal a{
	color:#0071e3;
	text-decoration-color:#0071e330;
}

address.reciprocal a:hover,
address.reciprocal a:focus{
	text-decoration-color:#0071e3c0;
}

@keyframes fadeIn {
  0%,50%{ opacity:0; }
  100%{ opacity:1; }
}

.spinner{
	position:relative;
	margin:0px auto;
	width:50px;
	height:50px;
	background-image:url('/assets/images/spinner.svg');
	margin:50px auto;
	animation:fadeIn 1s;
}

.spinner:before{
	content:'';
    display:block;
    padding-top:100%;
}