.main {
   position: absolute;
   inset: 0;
   z-index: 99;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: 60px 20px 0;
   box-sizing: border-box;
   font-family: "Inter", sans-serif;
   letter-spacing: 0;
   pointer-events: none;
}

.hero {
   pointer-events: auto;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   width: min(560px, 100%);
}

.title {
   margin: 0;
   font-family: "Inter", sans-serif;
   font-size: clamp(30px, 3.4vw, 46px);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: 0.02em;
   white-space: nowrap;
   color: var(--text-primary);
   text-align: center;
   text-transform: uppercase;
}

#splash {
   margin: 9px 0 0;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-muted);
   text-align: center;
}

.search-container {
   display: flex;
   justify-content: center;
   width: 100%;
   margin-top: 22px;
}

.search-container form {
   width: 100%;
}

.search-box {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
}

.search-box .search-icon {
   position: absolute;
   left: 15px;
   font-size: 12px;
   color: var(--text-placeholder);
   pointer-events: none;
}

.search-box input {
   width: 100%;
   height: 42px;
   padding: 0 15px 0 38px;
   box-sizing: border-box;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   text-align: left;
   color: var(--text-primary);
   background: var(--background-input);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   outline: none;
   transition: border-color 0.2s ease;
}

.search-box input:focus {
   border-color: var(--border-strong);
}

.framed .main {
   padding-top: 0;
}