* { box-sizing: border-box; }
:root{
  --ring: rgba(32,33,36,.28);
  --border: #dadce0;
  --text: #202124;
  --btn-bg: #f8f9fa;
  --btn-bg-hover: #f1f3f4;
}
body{
  margin:0; font-family: system-ui, Arial, sans-serif; color: var(--text);
  min-height:100svh; display:grid; place-items:center;
}
.wrap{ text-align:center; padding: 24px; width:min(92%, 640px); }

.logo{ font-size: 84px; letter-spacing: -2px; margin: 80px 0 24px; font-weight:700; }
.logo .g{ color:#1a73e8 } .logo .o1{ color:#ea4335 } .logo .o2{ color:#fbbc05 }
.logo .g2{ color:#1a73e8 } .logo .l{ color:#34a853 } .logo .e{ color:#ea4335 }

.search{
  display:flex; align-items:center; gap:8px;
  background:white; border:1px solid var(--border);
  border-radius: 999px; padding: 10px 14px; height:46px;
  box-shadow: none; transition: box-shadow .2s, border-color .2s;
}
.search:hover{ box-shadow: 0 1px 6px var(--ring); }
.search:focus-within{ border-color: transparent; box-shadow: 0 2px 8px var(--ring); }

.search .icon{ color:#9aa0a6; display:grid; place-items:center; }
.search input{
  flex:1; border:0; outline:0; font-size:16px; background:transparent;
}

.trailing{
  border:0; background:transparent; cursor:pointer; color:#5f6368;
  border-radius:50%; padding:6px;
}
.trailing:hover{ background:#f1f3f4; }

.actions{ margin-top: 22px; display:flex; gap:12px; justify-content:center; }
.btn{
  background: var(--btn-bg); border:1px solid var(--border);
  padding: 10px 16px; border-radius: 6px; cursor:pointer; font-size:14px;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:hover{ background: var(--btn-bg-hover); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.btn:active{ transform: translateY(1px); }

@media (max-width:480px){
  .logo{ font-size: 64px; margin-top: 48px; }
}