*{box-sizing:border-box}

html,body{height:100%;background:#eee}
body{
	margin:0;
	background:var(--bg);
	color:var(--fg);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.home{
	height:100svh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:32px;
	padding:24px;
}

.home h1{
	margin-top:-36px;
	font-size:32px;
	font-weight:400;
	letter-spacing:1px;
}


.search{
	margin-top:-36px;
	width:min(720px, 92vw);
	position:relative;
}

.search__input{
	width:100%;
	height:54px;
	padding:0 16px;
	border:0;
	background:#fff;
	border-radius:12px;
	color:var(--fg);
	font-size:16px;
	outline:none;
	border:1px solid #ccc
}

.search__input::placeholder{color:#999}
.search__input:focus{border-color:#999}

.results{
	position:absolute;
	left:0;
	right:0;
	top:62px;
	border-radius:12px;
	overflow:hidden;
	background:#fff
}

.results__item{
	display:block;
	padding:12px 14px;
	border-top:1px solid var(--line);
	text-decoration:none;
	color:var(--fg);
	font-size:16px;
	line-height:1.2;
	white-space:nowrap;
	font-weight:600;
	overflow:hidden;
	text-overflow:ellipsis;
}

.results__item:first-child{border-top:none}
.results__item:hover,
.results__item.is-active{
	background:rgba(242,242,242,.07);
}

.results__empty{
	padding:12px 14px;
	color:var(--muted);
	font-size:16px;
}