*{
	box-sizing:border-box
}
 body{
	margin:0;
	font-family:system-ui,sans-serif;
	background:#F4F2EEFF;
	color:#1a1a1a;
	line-height:1.4
}
 main{
	max-width:900px;
	margin:0 auto;
	padding:12px;
	display:flex;
	flex-direction:column;
	gap:12px
}
 .card{
	background:#FFFFFFFF;
	border:1px solid #00000014;
	border-radius:12px;
	padding:16px;
	overflow:hidden
}
 h1{
	font-size:24px;
	margin:8px 0 4px
}
 h2{
	font-size:16px;
	margin:0 0 12px
}
 h3{
	font-size:14px;
	margin:8px 0 4px
}
 h4{
	font-size:14px;
	margin:0
}
 a{
	color:inherit
}
 .profile{
	padding:0 16px 16px
}
 .banner{
	display:block;
	width:calc(100% + 32px);
	height:180px;
	object-fit:cover;
	margin:0 -16px
}
 .avatar{
	display:block;
	position:relative;
	width:140px;
	height:140px;
	border-radius:50%;
	object-fit:cover;
	margin:-70px 0 0 4px;
	box-shadow:0 0 0 4px #fff;
	background:#fff
}
 .bio{
	margin:0;
	font-size:14px
}
 .meta{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
	font-size:13px;
	color:#555;
	margin:8px 0 0
}
 .meta a{
	display:inline-flex;
	align-items:center;
	gap:4px;
	color:#333;
	text-decoration:none
}
 .meta .loc{
	display:inline-flex;
	align-items:center;
	gap:4px
}
 .meta a:hover{
	text-decoration:underline
}
 .carousel{
	position:relative
}
 .viewport{
	overflow-x:auto;
	scrollbar-width:none;
	-ms-overflow-style:none;
	scroll-behavior:smooth
}
 .viewport::-webkit-scrollbar{
	display:none
}
 .grid{
	display:grid;
	gap:12px;
	grid-auto-flow:column;
	grid-template-rows:repeat(2,auto);
	grid-auto-columns:calc((100% - 24px)/3)
}
 .web-card{
	border:1px solid #00000014;
	border-radius:8px;
	overflow:hidden;
	background:#fff
}
 .web-card>a{
	display:block
}
 .web-card>a>img{
	display:block;
	width:100%;
	height:110px;
	object-fit:cover;
	background:#111
}
 .web-card h3{
	padding:0 8px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
}
 .web-card h3 a{
	text-decoration:none
}
 .web-card h3 a:hover{
	text-decoration:underline
}
 .badges{
	display:flex;
	gap:4px;
	padding:0 8px 8px;
	margin:0
}
 .badges a{
	display:inline-flex
}
 .badges img{
	height:20px;
	width:auto;
	background:none
}
 #prev,#next{
	position:absolute;
	top:40%;
	width:36px;
	height:36px;
	border-radius:50%;
	border:1px solid #00000014;
	background:#fff;
	box-shadow:0 1px 4px rgba(0,0,0,.2);
	cursor:pointer;
	color:#333;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0
}
 #prev{
	left:-12px
}
 #next{
	right:-12px
}
 #prev[hidden],#next[hidden]{
	display:none
}
 .exp-list{
	list-style:none;
	margin:0;
	padding:0
}
 .exp-list>li{
	display:grid;
	grid-template-columns:40px 1fr;
	column-gap:10px;
	padding:12px 0;
	border-top:1px solid #00000014
}
 .exp-list>li:first-child{
	border-top:0;
	padding-top:0
}
 .exp-list>li:last-child{
	padding-bottom:0
}
 .logo{
	width:40px;
	height:40px;
	border-radius:6px;
	object-fit:contain;
	background:#fff;
	border:1px solid #00000014;
	grid-row:span 6
}
 .exp-list h3{
	margin:0;
	font-size:15px
}
 .company,.dates,.loc,.desc,.skills{
	margin:2px 0;
	font-size:13px
}
 .dates,.loc{
	color:#444
}
 .skills{
	font-weight:600;
	color:#111;
	font-size:13px
}
 .sub{
	list-style:none;
	margin:8px 0 0;
	padding:0;
	grid-column:2
}
 .sub li{
	position:relative;
	padding:0 0 12px 0
}
 .sub li:last-child{
	padding-bottom:0
}
 .sub li::before{
	content:"";
	position:absolute;
	left:-34px;
	top:6px;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#b2b2b2
}
 .sub li:not(:last-child)::after{
	content:"";
	position:absolute;
	left:-31px;
	top:21px;
	bottom:1px;
	width:2px;
	background:#00000014
}
 .sub h4{
	font-size:14px
}
 .top-list{
	list-style:none;
	margin:0;
	padding:0
}
 .top-list li{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px;
	padding:10px 0;
	border-top:1px solid #00000014
}
 .top-list li:first-child{
	border-top:0;
	padding-top:0
}
 .top-list li:last-child{
	padding-bottom:0
}
 .top-title{
	font-weight:700;
	font-size:14px;
	text-decoration:none
}
 .top-title:hover{
	text-decoration:underline
}
 .top-badges{
	margin-left:auto;
	display:flex;
	gap:4px
}
 .top-badges img{
	height:20px
}
 .top-desc{
	flex-basis:100%;
	margin:0;
	font-size:13px;
	color:#444;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
}
 @media(max-width:640px){
	 main{
		padding:8px
	}
	 .banner{
		height:130px
	}
	 .avatar{
		width:90px;
		height:90px;
		margin-top:-45px
	}
	 .grid{
		grid-auto-columns:calc((100% - 12px)/2)
	}
	 #prev{
		left:-6px
	}
	 #next{
		right:-6px
	}
}
 @media(prefers-reduced-motion:reduce){
	.viewport{
		scroll-behavior:auto
	}
}